Content Java Script Introduction Java Script Where To
- Slides: 42
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 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> 10
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 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 18
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
- Characteristics of esp
- Static content vs dynamic content
- Content pane in java
- Introduction to dynamic web content
- Features of a good content management system
- Introduction to dynamic web content
- What is content means
- Script de java
- What is java scripts
- Java script wikipedia
- Language
- "java script"
- "java script"
- Java script course
- Java script
- "java script"
- R programming khan academy
- Java script examples
- Nside which html element do we put the javascript?
- Java script email
- Slido softuni
- "language fundamentals"
- "java script"
- Java script classes
- Event introduction script
- Event introduction script
- Preface in thesis
- Moderator script for webinar sample
- Java number
- Java import java.util.*
- Import java.applet.*
- Import java.util.* program
- Import java.util.*
- Java import java.util.*
- Import java.util
- Import java.io.*
- Import java.util.*
- Java import java.io.*
- Pengertian awt dan swing pada java
- Import java.awt.event.*
- Language
- What is rmi and ejb in java
- Java introduction to problem solving and programming