1. 05 – Java Script (1) Informatics Department Parahyangan Catholic University

2.  JavaScript is the programming language that adds interactivity and custom behaviors to our sites.  It is a client-side scripting language (runs on the user’s machine and not on the server).

3.  JavaScript has nothing to do with Java.  It was created by Brendan Eich at Netscape in 1995 and originally named “LiveScript”.  For the sake of marketing, “LiveScript” became “JavaScript”.

4.  Java Script is placed inside … tag  Example: Hello World document.write("Hello World") Your browser doesn't support or has disabled JavaScript

5.  JS can be placed anywhere within HTML document  It is usually placed inside section  to make sure critical functions are ready to use by other scripts in the document  so that JS can writes meta tag into the section (because the location of your script is the part of the document it writes to by default)

6.  We can include files of JavaScript code either from our own website or from anywhere on the Internet.  Example:

7.  Web browsers provide a JavaScript console as part of their developer tools.  Keyboard shortcut for opening console (Win):  Chrome: Ctrl + Shift + J  Firefox: Ctrl + Shift + K  Internet Explorer: F12 then click on “Console” tab  Safari: Ctrl + Shift + C (need to enable the “Show Develop menu in menu bar” setting in “Advanced” preferences pane)

8.  According to the TIOBE index, Java, Java Script, and PHP are all heavily influenced by the C Programming Language, thus they all share many similarities.

9.  Single-line comment: // This is a comment  Multiline comments: /* This is a section of multiline comments that will not be interpreted */

10.  JavaScript generally does not require semicolons for one statement on a line.  The following is valid: x += 10  However, more than one statement on a line needs to be separated with semicolons: x += 10; y -= 5; z = 0 In doubt, use a semicolon.

11.  Fixed values (called literals)  Numbers : written with or without decimals 10.50 1001  String: written within double or single quotes "John Doe" 'John Doe'  Variable values (called variables)  JavaScript has dynamic types. This means that the same variable can be used as different types.

12.  Use var keyword to create a variable. Example: var x;  Naming rules:  the first character must be a letter, an underscore (_), or a dollar sign ($).  Subsequent characters may be letters, digits, underscores, or dollar signs.  All JavaScript identifiers are case sensitive

13.  Global variables are ones defined outside of any functions (or within functions, but defined without the var keyword).  Example: function test() { a = 123 // Global scope var b = 456 // Local scope if (a == 123) var c = 789 // Local scope }

14. var x; // Now x is undefined var x = 5; // Now x is a Number var x = "John"; // Now x is a String What is the value of x ? var x = 16 + "Volvo"; var x = 16 + 4 + "Volvo"; var x = "Volvo" + 16 + 4;

15. n = "123" n *= 1 // Convert 'n' into a number n = 123 n += "" // Convert 'n' into a string If n cannot be converted to number, it returns NaN value

16.  The parseInt() function parses a string and returns the first integer found. It returns NaN if the string doesn’t start with a number.  Leading and trailing spaces are allowed.  Syntax: parseInt(string,radix)  The radix parameter is optional and is used to specify which numeral system to be used.

17.  Example: returns parseInt("10.00") parseInt("10.33") parseInt("34 45 66") parseInt("40 years") parseInt("He was 40") parseInt("10",8) parseInt("0x10") parseInt("10",16) 10 34 40 NaN 8 16

18.  The parseFloat() function parses a string and returns the first floating point number found. It returns NaN if the string doesn’t start with a number.  Leading and trailing spaces are allowed.  Syntax: parseFloat(string)

19.  Example: returns parseFloat("10.00") parseFloat("10.33") parseFloat("34 45 66") parseFloat(" 60 ") parseFloat("40 years") parseFloat("He was 40") 10 10.33 34 60 40 NaN

20.  An array can contain string or numeric data, as well as other arrays.  To assign values to an array, use the following syntax (which in this case creates an array of strings): toys = ['bat', 'ball', 'whistle', 'puzzle', 'doll']

21.  To create a multidimensional array, nest smaller arrays within a larger one. Example: face = [['R','G','Y'], ['W','R','O'], ['Y','W','G']] or: top = ['R', 'G', 'Y'] mid = ['W', 'R', 'O'] bot = ['Y', 'W', 'G'] face = [top, mid, bot]  Array index starts from zero. Example: to access letter ‘O’, use face[1][2].

22.  Arithmetic:  Addition +  Subtraction -  Multiplication *  Division /  Modulus %  Increment ++  Decrement -- floating point division means +1 means -1

23.  Assignment:  =  +=  -=  *=  /=  %=  Logical:  && And  || Or  ! Not

24.  Comparison:  == equal to  != not equal  > greater than  >= greater than or equal to  < less than  <= less than or equal to  === equal to (and of the same type)  !== not equal to (and of the same type) (10 == '10') is true (10 === '10') is false (10 == '10') is true (10 === '10') is false (10 != '10') is false (10 !== '10') is true (10 != '10') is false (10 !== '10') is true

25.  This breaks down the parts of an HTML document into discrete objects, each with its own properties and methods and each subject to JavaScript’s control.  The HTML DOM is a standard for how to get, change, add, or delete HTML elements

27.  Example: Link Test Click me url = document.links.mylink.href document.write('The URL is ' + url)

28.  We can use getElementById() method to fetch an element by its id Link Test Click me url = document.getElementById("mylink").href document.write('The URL is ' + url)

29.  Several ways to find HTML element(s):  by id var x = document.getElementById("intro");  by tag name var x = document.getElementById("main"); var y = x.getElementsByTagName("p");  by class name document.getElementsByClassName("intro");

30.  Several ways to find HTML element(s):  by HTML object collections This example finds the form element with id="frm1", in the forms collection, and displays all element values: var x = document.getElementById("frm1"); var text = ""; var i; for (i = 0; i "; }

31.  To modify the content of an HTML element, use the innerHTML property  To change the value of an HTML attribute, use this syntax: document.getElementById(id).attribute=new value document.getElementById("p1").innerHTML = "New text!"; document.getElementById("myImage").src="landscape.jpg";

32.  To change the style of an HTML element, use this syntax: document.getElementById(id).style.property=new style document.getElementById("p2").style.color = "blue";

33.  The general syntax for a function is: function function_name([parameter [,...]]) { statements } function displayItems(v1, v2, v3, v4, v5){ document.write(v1 + " "); document.write(v2 + " "); document.write(v3 + " "); document.write(v4 + " "); document.write(v5 + " "); } displayItems("Dog", "Cat", "Pony", "Hamster", "Tortoise");

34.  The arguments array gives you the flexibility to handle a variable number of arguments function displayItems(){ for(j=0 ; j<displayItems.arguments.length ; ++j) document.write(displayItems.arguments[j] + " "); }

35.  Some examples of HTML events:  An HTML web page has finished loading  An HTML input field was changed  An HTML button was clicked  JavaScript lets you execute code when events are detected.

36.  HTML allows event handler attributes, with JavaScript code, to be added to HTML elements.  Syntax:

37.  onclick The user clicks an HTML element  onchange An HTML element has been changed  onmouseover The user moves the mouse over an HTML element  onmouseout The user moves the mouse away from an HTML element  onkeydown / onkeyup The user pushes / releases a keyboard key  onload The browser has finished loading the page

38.  Example: The time is?

39.  Example: The time is?

40.  Example: Click the button to display the date. The time is? function displayDate() { document.getElementById("demo").innerHTML = Date(); }

41.  Example: <div onmouseover="mOver(this)" onmouseout="mOut(this)" style="background-color:#D94A38;width:120px;"> Mouse Over Me function mOver(obj) { obj.innerHTML = "Thank You" } function mOut(obj) { obj.innerHTML = "Mouse Over Me" }