04- JavaScript I PDF Lecture Notes

CS283 Lecture 04 Introduction to JavaScript – Part I Topics ❑What is JavaScript? ❑Why JavaScript? ❑Including JavaScript in HTML ❑Hello World Example Script ❑JavaScript Comments 2 What is JavaScript? Originated Developed in just 10 days in May 1995 by Netsca...

CS283 Lecture 04 Introduction to JavaScript – Part I Topics ❑What is JavaScript? ❑Why JavaScript? ❑Including JavaScript in HTML ❑Hello World Example Script ❑JavaScript Comments 2 What is JavaScript? Originated Developed in just 10 days in May 1995 by Netscape Originally called LiveWire and then LiveScript A client-side Client-side means that it is executed in the client software that the viewer is using. scripting The client is the browser in the case of language JavaScript, 3 JavaScript is not Java ! Interpreted on- Each line is processed as the-fly by the soon as it is loaded in the client browser A server-side languages run on the Web Examples: PHP, Python server. 4 Why JavaScript? Significantly Easier to learn and practice than most of the programming languages A convenient way to develop interactive Web pages 5 Including JavaScript in HTML Two ways to add JavaScript to Web pages ◦ Use the … tag ◦ In the beginning, we will only use the … tag ◦ Include the script in an external file ◦ Scripts can be placed in the , or in the section of an HTML page, or in both. 6 Hello World in JavaScript Hello World!! document.write("Hello, world!"); 7 Hello World Screenshot 8  The … tag The code for the script is contained in the … tag... 9  Hiding JavaScript from Older Browsers This code is used in case of Some older browsers that do not support JavaScript before IE 4 // some JavaScript code 10 Comments in JavaScript Two types of comments ◦Single line ◦ Uses two forward slashes (i.e. //) ◦Multiple line ◦ Uses 11  Find the Bug! 12 Javascript Functions function myFunction() { document.getElementById("p1").innerHTML ="New Text !"; } Test JavaScript Original Text Test 13 Javascript Functions Let’s try this code here: https://www.w3schools.com/js/tryit.asp?filename=tryjs_whereto_head 14  innerHTML Writing into an HTML element, using innerHTML. document. Writing into the HTML output using document.write(). write() Outputs in Javascript window.ale Writing into an alert box, using window.alert(). rt() console.log Writing into the browser console, using console.log(). () 15 innerHTML Property ❑A property defines the HTML content Test innerHTML document.getElementById("p1").innerHTML = "Welcome to CS283 course!"; 16 Using document.write(). The document.write() method writes a string of text to the browser world!"); document.write("Hello, 17  document.write() Ends in a semicolon document.write("Hello,world!"); Enclosed in quotes -- denotes a "string" Code Example: https://www.w3schools.com/js/tryit.asp?filename=tryjs_output_write_over https://www.w3schools.com/js/tryit.asp?filename=tryjs_output_write 18 Important notes! ❑The document.write() method should only be used for testing. ❑ Using document.write() after an HTML document is loaded, will delete all existing HTML Content 19  Trying reloading content deletion Testing Paragraph. click me 20  window.alert() Test Window Alert Test Window Alert My paragraph. My paragraph. window.alert("Attention!!"); alert("Attention!!"); 21 console.log() ❑console.log() method is used in the browser to display data in debug mode. ❑Code Example: https://www.w3schools.com/js/tryit.asp?filena me=tryjs_output_console 22 window.print() ❑ Prints the page content Test window.print() Click the button to print the current page. Print this page 23 24  Javascript Statements JavaScript Statements A JavaScript program is a list of statements let x, y, z; // Statement 1 x = 20; // Statement 2 y = 30; // Statement 3 z = x + y; // Statement 4 document.getElementById("demo").innerHTML = "The value of z is " + z + "."; 25  ❑ Multiple statements on one line are allowed, if separated by semicolons. ❑a = 10; b = 20; c = a + b; ❑ JavaScript ignores multiple spaces. let person = “Ahmed"; Javascript let person=“Ahmed"; Syntax ❑JavaScript statements can be grouped together in code blocks, inside curly brackets {...}. ❑The purpose of code blocks is to define statements to be executed together. 26 Javascript Syntax 27 Defining JS variables ❑JavaScript variables are declared with var, let, or const. ❑The var keyword is used in all JavaScript code from 1995 to 2015. ❑The let and const keywords were added to JavaScript in 2015. ❑If you want your code to run in older browsers, you must use var. ❑JavaScript identifiers (variables’ names) are case-sensitive. Code Example: https://www.w3schools.com/js/tryit.asp?filename=tryjs_variables_undecla red 28 Defining JS variables ❑JavaScript can handle many data types. ❑Strings are written inside double or single quotes. Numbers are written without quotes. ❑If a number was placed inside in quotes, it will be treated as a text string. ❑ the = is for assignment ❑The == is for checking equality but does not check the data types. (5=='5' //true) ❑The === is for strict equality compare both the value and the type (5 === '5'; // false) 29 Defining JS variables ❑ If you re-declare a JavaScript variable declared with var, it will not lose its value. ❑ ❑You cannot re-declare a variable declared with let or const. ❑Strings concatenation→ let x = "John" + " " + "Doe"; ❑What is the result of let x = "5" + 2 + 3; ?? ❑What is the result of let x = 2 + 3 + "5"; ?? 30 Defining ❑Variables defined with let cannot be Redeclared. Variables ❑Variables defined with let must be Declared using before use. “let” ❑Variables defined with let have Block Scope. keyword 31 Let - Block Scope Code Examples: https://www.w3schools.com/js/tryit.asp?filename=tryjs_es6_let 32  Operator Description + Addition - Subtraction * Multiplication Javascript ** Exponentiation Operators / Division % Modulus (Division Remainder) ++ Increment -- Decrement 33  Operator Example Same As = x=y x=y += x += y x=x+y Assignments -= x -= y x=x-y Operators *= x *= y x=x*y /= x /= y x=x/y %= x %= y x=x%y **= x **= y x = x ** y 34