Content Java Script Introduction Java Script Where To

Content • • • Java. Script Functions Java. Script Scope Java. Script String Methods

Java. Script Introduction Java. Script is the most popular programming language in the world.

Java. Script Where To Java. Script in <head> <!DOCTYPE html> <head> <script> function my.

Java. Script Where To (cont. ) Java. Script in <body> <!DOCTYPE html> <body> <h

Java. Script Where To (cont. ) External Java. Script Example <!DOCTYPE html> <body> <script

Java. Script Output Java. Script Display Possibilities • Writing into an alert box, using

Java. Script Output (cont. ) Using window. alert() Using document. write() <script> window. alert(5

Java. Script Variables Much Like Algebra Example var x = 5; var y =

Java. Script Operators Java. Script Arithmetic Operators Operator Description + Addition - Subtraction *

Java. Script Operators Java. Script Assignment Operators Operator Example = x=y =+ x +=

Java. Script Operators Java. Script Comparison and Logical Operators Operator Description == equal to

Java. Script Data Types String, Number, Boolean, Array, Object. Java. Script Data Types var

Java. Script Data Types (cont. ) Java. Script Has Dynamic Types var x; //

Java. Script Data Types (cont. ) Java. Script Booleans var x = true; var

Java. Script Arrays Try it Yourself var cars = ["Saab", "Volvo", "BMW"]; Or var

Java. Script Arrays (cont. ) The length Property Example var fruits = ["Banana", "Orange",

Java. Script Arrays (cont. ) Looping Array Elements Example var index; var fruits =

Java. Script Objects Real Life Objects, Properties, and Methods 22

Java. Script Objects Object Properties var person = { first. Name: "John", last. Name:

Java. Script Objects Object Methods var person = { first. Name: "John", last. Name

Java. Script Objects Accessing Object Properties Example person. last. Name; Or person["last. Name"]; Accessing

Java. Script Functions A Java. Script function is a block of code designed to

Java. Script Functions (cont. ) Function Return Example var x = my. Function(4, 3);

Java. Script Scope In Java. Script, objects and functions are also variables. In Java.

Java. Script Events Java. Script Scope In Java. Script, objects and functions are also

Java. Script Events (cont. ) Event Description onchange An HTML element has been changed

Java. Script String Methods Finding a String in a String var str = "Please

Java. Script String Methods (cont. ) The substr() Method var str = "Apple, Banana,

Java. Script Number Methods The to. String() Method Example var x = 123; x.

Java. Script Number Methods (cont. ) The parse. Int() Method Example parse. Int("10"); //

Java. Script Math Object Math. min() and Math. max() Example Math. min(0, 150, 30,

Java. Script Math Object (cont. ) Math. ceil() Example Math. ceil(4. 4); // returns

Java. Script If. . . Else Statements The if Statement Example if (hour <

Java. Script Switch Statement Syntax Example switch(expression) { case n: code block break; default:

Java. Script For Loop Syntax for (statement 1; statement 2; statement 3) { code

Java. Script While Loop Syntax Example while (condition) { code block to be executed

Java. Script While Loop (cont. ) Syntax Example do { code block to be

Slides: 42

Download presentation

Content • • Java. Script Introduction Java. Script Where To Java. Script Output Java. Script Variables Java. Script Operators Java. Script Data Types Java. Script Arrays Java. Script Objects 2

Content • • • Java. Script Functions Java. Script Scope Java. Script String Methods Java. Script Number Methods Java. Script Math Object Java. Script If. . . Else Statements Java. Script Switch Statement Java. Script For Loop Java. Script While Loop 3

Java. Script Introduction Java. Script is the most popular programming language in the world. This page contains some examples of what Java. Script can do. The <script> Tag Example <script> document. get. Element. By. Id("demo"). inner. HTML = "My First Java. Script"; </script> 4

Java. Script Where To Java. Script in <head> <!DOCTYPE html> <head> <script> function my. Function() { document. get. Element. By. Id("demo"). inner. HTML = "Paragraph changed. "; } </script> </head> <body> <h 1>My Web Page</h 1> <p id="demo">A Paragraph</p> <button type="button" onclick="my. Function()">Try it</button> </body> </html> 5

Java. Script Where To (cont. ) Java. Script in <body> <!DOCTYPE html> <body> <h 1>My Web Page</h 1> <p id="demo">A Paragraph</p> <button type="button" onclick="my. Function()">Try it</button> <script> function my. Function() { document. get. Element. By. Id("demo"). inner. HTML = "Paragraph changed. "; } </script> </body> </html> 6

Java. Script Where To (cont. ) External Java. Script Example <!DOCTYPE html> <body> <script src="my. Script. js"></script> </body> </html> 7

Java. Script Output Java. Script Display Possibilities • Writing into an alert box, using window. alert(). • Writing into the HTML output using document. write(). • Writing into an HTML element, using inner. HTML. • Writing into the browser console, using console. log(). 8

Java. Script Output (cont. ) Using window. alert() Using document. write() <script> window. alert(5 + 6); </script> <script> document. write(5 + 6); </script> Using inner. HTML <p id="demo"></p> <script> document. get. Element. By. Id("demo"). inner. HTML = 5 + 6; </script> 9

Java. Script Variables Much Like Algebra Example var x = 5; var y = 6; var z = x + y; Example var price 1 = 5; var price 2 = 6; var total = price 1 + price 2; One Statement, Many Variables Example var person = "John Doe", car. Name = "Volvo", price = 200; 11

Java. Script Operators Java. Script Arithmetic Operators Operator Description + Addition - Subtraction * Multiplication / Division % Modulus ++ Increment -- Decrement 12

Java. Script Operators Java. Script Assignment Operators Operator Example = x=y =+ x += y Same As x=y x=x+y =- x -= y x=x-y =* x *= y x=x*y =/ x /= y x=x/y =% x %= y x=x%y 13

Java. Script Operators Java. Script Comparison and Logical Operators Operator Description == equal to === equal value and equal type =! not equal ==! not equal value or not equal type < greater than > less than =< greater than or equal to => less than or equal to 14

Java. Script Data Types String, Number, Boolean, Array, Object. Java. Script Data Types var length = 16; // Number var last. Name = "Johnson"; // String var cars = ["Saab", "Volvo", "BMW"]; // Array var x = {first. Name: "John", last. Name: "Doe"}; // Object The Concept of Data Types Java. Script evaluates expressions from left to right. Different sequences can produce different. var x = 16 + 4 + "Volvo"; //output 20 Volvo var x = "Volvo" + 16 + 4; //output Volvo 164 15

Java. Script Data Types (cont. ) Java. Script Has Dynamic Types var x; // Now x is undefined var x = 5; // Now x is a Number var x = "John"; // Now x is a String Java. Script Strings var car. Name = "Volvo XC 60"; // Using double quotes var car. Name = 'Volvo XC 60'; // Usingle quotes Java. Script Numbers var x 1 = 34. 00; // Written with decimals var x 2 = 34; // Written without decimals 16

Java. Script Data Types (cont. ) Java. Script Booleans var x = true; var y = false; Java. Script Arrays var cars = ["Saab", "Volvo", "BMW"]; Java. Script Objects var person = {first. Name: "John", last. Name: "Doe", age: 50, eye. Color: "blue"}; The typeof Operator typeof "John" typeof [1, 2, 3, 4] // Returns string // Returns object 17

Java. Script Arrays Try it Yourself var cars = ["Saab", "Volvo", "BMW"]; Or var cars = [ "Saab", "Volvo", "BMW" ]; Access the Elements of an Array var name = cars[0]; // Saab var name = cars[1]; // Volvo var name = cars[2]; // BMW 19

Java. Script Arrays (cont. ) The length Property Example var fruits = ["Banana", "Orange", "Apple", "Mango"]; fruits. length; // the length of fruits is 4 Adding Array Elements var fruits = ["Banana", "Orange", "Apple", "Mango"]; fruits. push("Lemon"); // adds a new element (Lemon) to fruits 20

Java. Script Arrays (cont. ) Looping Array Elements Example var index; var fruits = ["Banana", "Orange", "Apple", "Mango"]; for (index = 0; index < fruits. length; index++) { text += fruits[index]; } 21

Java. Script Objects Real Life Objects, Properties, and Methods 22

Java. Script Objects Object Properties var person = { first. Name: "John", last. Name: "Doe", age: 50, eye. Color: "blue“ }; Property Value first. Name John last. Name Doe age 50 eye. Color blue 23

Java. Script Objects Object Methods var person = { first. Name: "John", last. Name : "Doe", id : 5566, full. Name : function(c) { return this. first. Name + " " + this. last. Name; } Property Value }; first. Name John last. Name Doe age 50 eye. Color blue full. Name function() {return this. first. Name + " " + this. last. Name; } 24

Java. Script Objects Accessing Object Properties Example person. last. Name; Or person["last. Name"]; Accessing Object Methods Example name = person. full. Name(); 25

Java. Script Functions A Java. Script function is a block of code designed to perform a particular task. A Java. Script function is executed when "something" invokes it (calls it). Example function my. Function(p 1, p 2) { return p 1 * p 2; } Syntax function name(parameter 1, parameter 2, parameter 3) { code to be executed } 26

Java. Script Functions (cont. ) Function Return Example var x = my. Function(4, 3); // Function is called, return value will end up in x function my. Function(a, b) { return a * b; // Function returns the product of a and b } 27

Java. Script Scope In Java. Script, objects and functions are also variables. In Java. Script, scope is the set of variables, objects, and functions you have access to. Local Java. Script Variables Global Java. Script Variables // code here can not use car. Name var car. Name = " Volvo"; function my. Function() { var car. Name = "Volvo"; // code here can use car. Name function my. Function() { // code here can use car. Name } } 28

Java. Script Events Java. Script Scope In Java. Script, objects and functions are also variables. In Java. Script, scope is the set of variables, objects, and functions you have access to. Example <button onclick="display. Date()">The time is? </button> 29

Java. Script Events (cont. ) Event Description onchange An HTML element has been changed onclick The user clicks an HTML element onmouseover The user moves the mouse over an HTML element onmouseout The user moves the mouse away from an HTML element onkeydown The user pushes a keyboard key onload The browser has finished loading the page The list is much longer: W 3 Schools Java. Script Reference HTML DOM Events. 30

Java. Script String Methods Finding a String in a String var str = "Please locate where 'locate' occurs!"; var pos = str. index. Of("locate"); Or var pos = str. search("locate"); The slice() Method var str = "Apple, Banana, Kiwi"; var res = str. slice(7, 13); // Banana The substring() Method var str = "Apple, Banana, Kiwi"; var res = str. substring(7, 13); // Banana 31

Java. Script String Methods (cont. ) The substr() Method var str = "Apple, Banana, Kiwi"; var res = str. substr(7, 6); // Banana Replacing String Content str = "Please visit Microsoft!"; var n = str. replace("Microsoft", "W 3 Schools"); Converting to Upper and Lower Case var text 1 = "Hello World!"; // String var text 2 = text 1. to. Upper. Case(); // text 2 is text 1 converted to upper var text 3 = text 1. to. Lower. Case(); // text 2 is text 1 converted to lower 32

Java. Script Number Methods The to. String() Method Example var x = 123; x. to. String(); // returns 123 from variable x (123). to. String(); // returns 123 from literal 123 (100 + 23). to. String(); // returns 123 from expression 100 + 23 The Number() Method Example x = true; Number(x); x = false; Number(x); // returns 1 // returns 0 33

Java. Script Number Methods (cont. ) The parse. Int() Method Example parse. Int("10"); // returns 10 parse. Int("10. 33"); // returns 10 parse. Int("10 20 30"); // returns 10 parse. Int("10 years"); // returns 10 parse. Int("years 10"); // returns Na. N The parse. Float() Method Example parse. Float("10"); // returns 10 parse. Float("10. 33"); // returns 10. 33 parse. Float("10 20 30"); // returns 10 parse. Float("10 years"); // returns 10 parse. Float("years 10"); // returns Na. N 34

Java. Script Math Object Math. min() and Math. max() Example Math. min(0, 150, 30, 20, -8, -200); Math. max(0, 150, 30, 20, -8, -200); // returns -200 // returns 150 Math. random() Example Math. random(); // returns a random number Math. round() Example Math. round(4. 7); Math. round(4. 4); // returns 5 // returns 4 35

Java. Script Math Object (cont. ) Math. ceil() Example Math. ceil(4. 4); // returns 5 Math. floor() Example Math. floor(4. 7); // returns 4 Math. floor(Math. random() * 11); // returns a random number between 0 and 10 36

Java. Script If. . . Else Statements The if Statement Example if (hour < 18) { greeting = "Good day"; } The else Statement Example if (hour < 18) { greeting = "Good day"; } else { greeting = "Good evening"; } The else if Statement Example if (time < 10) { greeting = "Good morning"; } else if (time < 20) { greeting = "Good day"; } else { greeting = "Good evening"; } 37

Java. Script Switch Statement Syntax Example switch(expression) { case n: code block break; default: default code block } Example switch(test = “cat") { case 0: test = “cat”; break; case 1: test = “dog”; break; case 2: test = “fish”; break; default: test = “undefined” } 38

Java. Script For Loop Syntax for (statement 1; statement 2; statement 3) { code block to be executed } Example <script> var cars = ["BMW", "Volvo", "Saab", "Ford"]; var text = ""; var i; for (i = 0; i < cars. length; i++) { text += cars[i] + " "; } document. get. Element. By. Id("demo"). inner. HTML = text; </script> 39

Java. Script While Loop Syntax Example while (condition) { code block to be executed } <script> function my. Function() { var text = ""; var i = 0; while (i < 10) { text += " The number is " + i; i++; } document. get. Element. By. Id("demo"). inner. HTML = text; } </script> 40

Java. Script While Loop (cont. ) Syntax Example do { code block to be executed } while (condition); <script> function my. Function() { var text = "" var i = 0; do { text += " The number is " + i; i++; } while (i < 10) document. get. Element. By. Id("demo"). inner. HTML = text; } </script> 41

THE END 42