JavaScript Basic

Course:2ºDAW

JavaScript Basic

PRESENTATION make by Ana Victoria

1. Introduction
2. What is JavaScript?
3. History of JavaScript
4. How JavaScript Works
5. Syntax and Basic Structure
6. Variables in JavaScript
7. Functions in JavaScript
8. Conditional Statements
9. Loops in JavaScript
10. Conclusion and Resources
11. Bibliography and References

Index

JavaScript is a popular programming language used to create interactive effects within web browsers. It is one of the core technologies of web development, alongside HTML and CSS. JavaScript enables dynamic behavior, such as animations, real-time updates, and more, making web pages engaging and user-friendly. This presentation covers the basic concepts of JavaScript, providing an overview of its syntax, variables, functions, loops, and other fundamental topics that are essential for anyone starting to learn web development.

1-INTRODUCTION

JavaScript is a high-level, interpreted scripting language. It was originally created to add dynamic behavior to websites, allowing developers to create interactive user interfaces. JavaScript allows developers to: Add interactivity to websites Respond to user actions like clicks, form submissions, etc. Manipulate HTML and CSS for dynamic changes Communicate with servers for data fetching JavaScript is executed in the browser, making it client-side, but it can also be used server-side with frameworks like Node.js.

2-WHAT IS JAVASCRIPT?

Biography of BrendanEinch

3-History of JavaScript

1995: JavaScript was created by Brendan Eich at Netscape. It was originally called "LiveScript."1996: It was renamed JavaScript after Netscape partnered with Sun Microsystems. 1997: JavaScript was standardized by ECMA International under the name ECMAScript. 2009-present: The language has evolved, with ES6 (ECMAScript 6) introducing features like arrow functions, classes, and template literals. JavaScript continues to evolve, with regular updates improving its performance and adding new features.

More information

4-How JavaScript Works

JavaScript works by being embedded in HTML code. When a browser loads a webpage, it reads the HTML, CSS, and JavaScript code. The browser’s JavaScript engine interprets the code and executes it, allowing the page to respond to user actions. JavaScript Engine: A program within the browser (e.g., V8 engine in Chrome) that interprets and runs JavaScript code. Event Loop: JavaScript is single-threaded, meaning it processes commands one at a time. The event loop manages this process by handling events and executing corresponding code.

5- Syntax and Basic Structure

JavaScript code has a simple structure with basic syntax rules: Statements end with a semicolon (;). Variables are declared with keywords like var, let, and const. Comments are written using // for single-line or /* */ for multi-line comments. Strings are enclosed in single (') or double quotes ("). Numbers are written as they are, without quotes. console.log:command in JavaScript outputs a message or value to the browser's console, useful for debugging and testing cod

Example

6- Variables in JavaScript

Variables store data values. In JavaScript, there are three ways to declare variables: var: Older way of declaring variables (not recommended for modern JavaScript). let: Declares block-scoped variables, introduced in ES6. const: Declares constants, values that cannot be reassigned after being defined.

Example

7-Functions in JavaScript

A function is a block of code that performs a specific task when called. Functions can take input (parameters) and return an output (return value). Example of a simple function:

Example

8-Conditional Statements

Conditional statements allow you to make decisions in your code. The most common conditional statements are: if statement: Executes code if a condition is true. else statement: Executes code if the condition is false. else if statement: Checks another condition if the initial if is false.

Example elseif

Example else

10

9- Loops in JavaScript

Loops allow you to run a block of code multiple times. The most common loops in JavaScript are: for loop: Repeats a block of code a set number of times. while loop: Repeats a block of code as long as a condition is true.

Example: while

Example: for

11

10-Conclusion

JavaScript is a powerful, versatile language that plays a vital role in web development. From dynamic user interactions to server-side programming, JavaScript is an essential tool for modern developers. As you learn more, you’ll discover the vast capabilities of JavaScript, including frameworks and libraries that make development faster and easier. Remember that practice is key—keep experimenting with code and building projects to improve your skills.

12

4-W3Schools JavaScript Tutorial: A beginner-friendly resource with examples and exercises. Available at:

3-Eloquent JavaScript (Book): A modern introduction to programming using JavaScript. Written by Marijn Haverbeke. Available at:

2-MDN Web Docs on JavaScript: A comprehensive resource for JavaScript documentation and tutorials. Available at:

1-JavaScript.info: An interactive and detailed guide to learning JavaScript. Available at:

11-Bibliography and References

THANKS FOR WATCHING!!!

(this code creates a simple function that customizes a greeting based on the name passed to it.)

The code defines a function called greet, which takes one parameter, name. It then returns a greeting message that combines the string "Hello, " with the value of the name parameter. Here's what each part does: 1-Function definition: function greet(name) { return "Hello, " + name; } The function greet is created with one input (name). It returns a string that says "Hello, " followed by whatever value is passed into name. 2-Calling the function: let message = greet("Anna"); The function is called with "Anna" as the argument, so name inside the function becomes "Anna". The function returns "Hello, Anna", and this value is stored in the variable message. 3-Output the result: console.log(message); The result stored in message is printed to the console, which will display "Hello, Anna".

To open the Developer Tools in Google Chrome using the menu, follow these steps: Open Google Chrome on your computer. Click the Three Dots: In the top-right corner of the Chrome window, you'll see three vertical dots (also called the "menu" button). Click on this to open the Chrome menu. Navigate to More Tools: From the drop-down menu, hover over "More tools". Select Developer Tools: After hovering over "More tools", a sub-menu will appear. Click on "Developer tools" from the list. This will open the Developer Tools panel at the bottom or side of your browser window. Use the Console: Once the Developer Tools are open, switch to the "Console" tab. This is where you can enter and run JavaScript code.

The code is a for loop in JavaScript that iterates a block of code a set number of times. Here's a breakdown of what each part does: 1-Initialization (let i = 0;): This part initializes a variable i and sets its value to 0. This variable will act as the loop counter. 2-Condition (i < 5;): This is the condition that the loop checks before each iteration. As long as i is less than 5, the loop will continue to run. When i becomes 5, the loop stops. 3-Increment (i++): After each iteration of the loop, the value of i is incremented by 1. The i++ operation increases the value of i by 1. 4-Loop Body (console.log(i);): This is the code that runs on each iteration of the loop. console.log(i); prints the current value of i to the console. Output: -During the first iteration, i is 0, so it prints 0. -In the second iteration, i is incremented to 1, so it prints 1. -This process continues until i reaches 4. After printing 4, i is incremented . -When i becomes 5, the condition i < 5 is no longer true, so the loop stops. Therefore, the code prints the numbers 0, 1, 2, 3, and 4, each on a new line.

1-Initialization: The variable i is initialized with the value 0. 2-Condition Check: The while loop checks if the condition i < 5 is true. If i is less than 5, the loop will execute the code block inside the { }. If i is 5 or greater, the loop will stop executing. 3-Loop Execution: First Iteration: i is 0, so the condition i < 5 is true. The value 0 is printed to the console. Then, i is incremented to 1. Second Iteration: i is 1, so the condition i < 5 is still true. The value 1 is printed to the console. Then, i is incremented to 2. Third Iteration: i is 2, so the condition i < 5 is still true. The value 2 is printed to the console. Then, i is incremented to 3 Fourth Iteration: i is 3, so the condition i < 5 is still true. The value 3 is printed to the console. Then, i is incremented to 4. Fifth Iteration: i is 4, so the condition i < 5 is still true. The value 4 is printed to the console. Then, i is incremented to 5. 4-Loop Termination: When i becomes 5, the condition i < 5 is false. Therefore, the loop stops executing. 5-Output: The values 0, 1, 2, 3, 4 are printed to the console, each on a new line, during the execution of the loop. This while loop is a simple example of how to repeat a block of code multiple times, based on a condition that controls the number of iterations.

1-Variable Declaration and Initialization: let num = 10; A variable named num is declared using the let keyword and initialized with the value 10. 2-Conditional Statement: if (num > 5) { console.log("Number is greater than 5"); } else { console.log("Number is 5 or less"); } if (num > 5): This line checks whether the value of num is greater than 5. console.log("Number is greater than 5"): If the condition (num > 5) is true, the message "Number is greater than 5" is printed to the console. else: If the condition is false (meaning num is not greater than 5), the code inside the else block is executed. console.log("Number is 5 or less"): If the else block is executed, this message is printed to the console. 3-Output: Given that num is 10, which is greater than 5, the output will be Number is greater than 5

let age = 25; creates a variable called age and assigns it the value 25. console.log(age); prints the value of age to the console. Later, the value of age is updated to 26, and when we print it again, we get the updated value. In JavaScript, variables can be declared using let, const, or var, with let being the most commonly used for variables that can change their value​

1-if (num > 15): This block checks if num is greater than 15. If it is, the message "Number is greater than 15" will be logged to the console. 2-else if (num > 10): If the first condition is not met, this block checks if num is greater than 10 but not greater than 15. If this condition is true, the message "Number is greater than 10 but less than or equal to 15" will be logged. 3-else if (num > 5): If the previous conditions are not met, this block checks if num is greater than 5 but not greater than 10. If true, the message "Number is greater than 5 but less than or equal to 10" will be logged. 4-else: If none of the above conditions are met, this block executes, logging "Number is 5 or less" to the console. In this example, since num is 10, the output will be: Number is greater than 5 but less than or equal to 10