Presentation is loading. Please wait.

Presentation is loading. Please wait.

JavaScript Javascript is a scripting language produced by Netscape for use within HTML Web pages. JavaScript is loosely based on Java and it is built into.

Similar presentations


Presentation on theme: "JavaScript Javascript is a scripting language produced by Netscape for use within HTML Web pages. JavaScript is loosely based on Java and it is built into."— Presentation transcript:

1 JavaScript Javascript is a scripting language produced by Netscape for use within HTML Web pages. JavaScript is loosely based on Java and it is built into all the major modern browsers. JavaScript started life as LiveScript, but Netscape changed the name, possibly because of the excitement being generated by Java.to JavaScript. JavaScript made its first appearance in Netscape 2.0 in 1995 with a name LiveScript. JavaScript is a lightweight, interpreted programming language with object-oriented capabilities that allows you to build interactivity into otherwise static HTML pages.

2 JavaScript Syntax A JavaScript consists of JavaScript statements that are placed within the... HTML tags in a web page. You can place the tag containing your JavaScript anywhere within you web page but it is preferred way to keep it within the tags. The tag alert the browser program to begin interpreting all the text between these tags as a script. JavaScript code

3 The script tag takes two important attributes: language: This attribute specifies what scripting language you are using. Typically, its value will be javascript. Although recent versions of HTML (and XHTML, its successor) have phased out the use of this attribute. type: This attribute is what is now recommended to indicate the scripting language in use and its value should be set to "text/javascript". JavaScript code

4 <!-- document.write("Hello World!") //--> <!-- document.write("Hello World") //--> This is web page body

5 ....... JavaScript in External File

6 JavaScript DataTypes: JavaScript allows you to work with three primitive data types: Numbers eg. 123, 120.50 etc. Strings of text e.g. "This text string" etc. Boolean e.g. true or false. JavaScript Variables: <!-- var money; var name; //--> <!-- var money, name; //-->

7 JavaScript Variable Names: While naming your variables in JavaScript keep following rules in mind. You should not use any of the JavaScript reserved keyword as variable name. These keywords are mentioned in the next section. For example, break or boolean variable names are not valid. JavaScript variable names should not start with a numeral (0-9). They must begin with a letter or the underscore character. For example, 123test is an invalid variable name but_123test is a valid one. JavaScript variable names are case sensitive. For example, Name and name are two different variables. See reserve words at Bayanihan Campus

8 var money; var name; money = 2000.50; name = "Ali"; document.write(money); document.write(" "); document.write(name); Set the variables to different values and then try...

9 JavaScript Operators What is an operator? Simple answer can be given using expression 4 + 5 is equal to 9. Here 4 and 5 are called operands and + is called operator. JavaScript language supports following type of operators. Arithmetic Operators Comparision Operators Logical (or Relational) Operators Assignment Operators Conditional (or ternary) Operators

10 JavaScript Arithmetic Operators +Addition -Subtraction *Multiplication /Division %Modulus ++Increment --Decrement JavaScript Assignment Operators =x = yx = y +=x += yx = x + y -=x -= yx = x - y *=x *= yx = x * y /=x /= yx = x / y %=x %= yx = x % y JavaScript String Operators txt1 = "John"; txt2 = "Doe"; txt3 = txt1 + " " + txt2; Adding Strings and Numbers x = 5 + 5; y = "5" + 5; z= "Hello" + 5; JavaScript Comparison and Logical Operators ==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

11 Conditional statements are used to perform different actions based on different conditions. Very often when you write code, you want to perform different actions for different decisions. You can use conditional statements in your code to do this. In JavaScript we have the following conditional statements: Use if to specify a block of code to be executed, if a specified condition is true Use else to specify a block of code to be executed, if the same condition is false Use else if to specify a new condition to test, if the first condition is false Use switch to specify many alternative blocks of code to be executed Conditional Statements

12

13 if (expression){ Statement(s) to be executed if expression is true } <!-- var age = 20; if( age > 18 ){ document.write(" Qualifies for driving "); } //--> if statement: The if statement is the fundamental control statement that allows JavaScript to make decisions and execute statements conditionally.

14

15 if...else statement: The if...else statement is the next form of control statement that allows JavaScript to execute statements in more controlled way. if (expression){ Statement(s) to be executed if expression is true }else{ Statement(s) to be executed if expression is false } <!-- var age = 15; if( age > 18 ){ document.write(" Qualifies for driving "); }else{ document.write(" Does not qualify for driving "); } //-->

16

17 if...else if... statement: The if...else if... statement is the one level advance form of control statement that allows JavaScript to make correct decision out of several conditions. if (expression 1){ Statement(s) to be executed if expression 1 is true }else if (expression 2){ Statement(s) to be executed if expression 2 is true }else if (expression 3){ Statement(s) to be executed if expression 3 is true }else{ Statement(s) to be executed if no expression is true } <!-- var book = "maths"; if( book == "history" ){ document.write(" History Book "); }else if( book == "maths" ){ document.write(" Maths Book "); }else if( book == "economics" ){ document.write(" Economics Book "); }else{ document.write(" Unknown Book "); } //-->

18 JavaScript Switch Case Syntax: The basic syntax of the switch statement is to give an expression to evaluate and several different statements to execute based on the value of the expression. The interpreter checks each case against the value of the expression until a match is found. If nothing matches, adefault condition will be used. switch (expression) { case condition 1: statement(s) break; case condition 2: statement(s) break;... case condition n: statement(s) break; default: statement(s) }

19

20 <!— var grade='A'; document.write("Entering switch block ") ;switch (grade){ case 'A': document.write("Good job "); case 'B': document.write("Pretty good "); case 'C': document.write("Passed "); case 'D': document.write("Not so good "); case 'F': document.write("Failed "); default: document.write("Unknown grade ") } document.write("Exiting switch block"); //-->

21 JavaScript while Loops While writing a program, there may be a situation when you need to perform some action over and over again. In such situation you would need to write loop statements to reduce the number of lines. The while Loop while (expression){ Statement(s) to be executed if expression is true } <!-- var count = 0; document.write("Starting Loop" + " "); while (count < 10){ document.write("Current Count : " + count + " "); count++; } document.write("Loop stopped!"); //-->

22

23

24 The do...while Loop: The do...while loop is similar to the while loop except that the condition check happens at the end of the loop. This means that the loop will always be executed at least once, even if the condition is false. Syntax: do{ Statement(s) to be executed; } while (expression); <!-- var count = 0; document.write("Starting Loop" + " "); do{ document.write("Current Count : " + count + " "); count++; }while (count < 0); document.write("Loop stopped!"); //-->

25

26 JavaScript for Loops The for Loop The for loop is the most compact form of looping and includes the following three important parts: The loop initialization where we initialize our counter to a starting value. The initialization statement is executed before the loop begins. The test statement which will test if the given condition is true or not. If condition is true then code given inside the loop will be executed otherwise loop will come out. The iteration statement where you can increase or decrease your counter. for (initialization; test condition; iteration statement){ Statement(s) to be executed if test condition is true }

27

28 <!-- var count; document.write("Starting Loop" + " "); for(count = 0; count < 10; count++){ document.write("Current Count : " + count ); document.write(" "); } document.write("Loop stopped!"); //-->

29 The break Statement: <!-- var x = 1; document.write("Entering the loop "); while (x < 20) { if (x == 5){ break; // breaks out of loop completely } x = x + 1; document.write( x + " "); } document.write("Exiting the loop! "); //-->

30 <!-- function over() { alert("Mouse Over"); } function out() { alert("Mouse Out"); } //--> Bring your mouse inside the division to see the result: This is inside the division onmouseover and onmouseout:

31 <!-- function Redirect() { window.location="http://bayanihancampus.com"; } //--> Click the following button, you will be redirected to home page. Page Re-direction

32 <!-- function Redirect() { window.location="http://bayanihancampus.com"; } document.write("You will be redirected to our main page in 10 seconds!"); setTimeout('Redirect()', 10000); //-->

33 <!-- var browsername=navigator.appName; if( browsername == "Netscape" ) { window.location="http://www.location.com/ns.htm"; } else if ( browsername =="Microsoft Internet Explorer") { window.location="http://www.location.com/ie.htm"; } else { window.location="http://www.location.com/other.htm"; } //-->

34 <!-- function getConfirmation(){ var retVal = confirm("Do you want to continue ?"); if( retVal == true ){ alert("User wants to continue!"); return true; }else{ alert("User does not want to continue!"); return false; } //--> Click the following button to see the result:

35 <!-- function getValue(){ var retVal = prompt("Enter your name : ", "your name here"); alert("You have entered : " + retVal ); } //--> Click the following button to see the result:

36 Javascript - The Arrays Object The Array object let's you store multiple values in a single variable. Syntax: Creating a Array object: var fruits = new Array( "apple", "orange", "mango" ); The Array parameter is a list of strings or integers. When you specify a single numeric parameter with the Array constructor, you specify the initial length of the array. The maximum length allowed for an array is 4,294,967,295. You can create array by simply assigning values as follows: var fruits = [ "apple", "orange", "mango" ]; You will use ordinal numbers to access and to set values inside an array as follows: fruits[0] is the first element fruits[1] is the second element fruits[2] is the third element

37 User-defined objects function book(title, author){ this.title = title; this.author = author; } var myBook = new book("Perl", "Mohtashim"); myBook.price = 50; document.write("Book title is : " + myBook.title + " "); document.write("Book author is : " + myBook.author + " "); document.write("Book price is : " + myBook.price + " ");

38

39

40

41

42

43

44

45

46

47

48 Objective: 100% of the people will be able to motivate and learn ideas Process: Greet Smile Visualize Share Ideas Let Them Talk Activities Evaluate Assignment

49 Objective: 100% of the people will be able to motivate and learn ideas Process: Greet Smile Visualize Share Ideas Let Them Talk Activities Evaluate Assignment

50 Objective: 100% of the people will be able to motivate and learn ideas Process: Greet Smile Visualize Share Ideas Let Them Talk Activities Evaluate Assignment

51 File Name: Joenard Pedro Keywords: nardpedro Type: Teacher Date Created: May 23 1982 Created By: Bathala Location: Dreamland Taguig Attributes: Read-only Email: nardpedro@gmail.com Connection: +639 055 00 4490 Dimensions: H.5ft5.7in~167cm W.127.6lb~57.9kg

52 Objective: 100% of the people will be able to motivate and learn ideas Process: Greet Smile Visualize Share Ideas Let Them Talk Activities Evaluate Assignment

53 Requirements: Participation30% max50points Quiz20% max20points Assignment10% max20points Major exam40% max50points

54 Program: Term 1 {June 17} Process: Evaluate Current Potential Transfer Information Test.. Modify.. Update.. Final Deployment Record On-going Potential

55 Participation Requirements: Attendance 10hrs max excuse Notebook +2points early Room Maintained 10points Recitation +2points Extra points from AQE

56 Room Maintenance: early birds +2point enrolled student are allowed to enter the room. maintain proper sitting arrangement. +1point eating and drinking are allowed in canteen. devices should be inside the bag. +1point bags and things should stay in one place. +1point raise hand and wait to be called. +1point one person talks at a time. 3step between prof and student. clean and arrange own space. +3point finish every seconds of the class. +1point “Following instincts, true wisdom manifests.” fb.com/aklatnipedro

57 Routine: 15mins Preparation 15mins Checking 30mins to Write Discussion Quiz

58 Add-ons: o FBgroup to be announce at {http://fb.com/aklatnipedro} o Cloud {http://pedro.hide.at} o Test is above requirements. o Present student when instructor is excused +10points o 1/8 letter/question/greetings/suggestion/comment

59 Start-up: First to accomplish +20points 1/8 index card.. Write back to back.. //sample. name: Your, Complete N. contact: Email||Mobile student#: 5TUD3NT-NUM83R course/subj.: ADHD/Ethical Hacking schedule/rm.: MWF 3am-5am/rm. attendance: |J14|J15|J16|J17|J18|J19|J20| | | | | | | | | |J21|J22|J23|J24|J25|J26|J27| | | | | | | | | |J28|J29|J30|J31|F01|J02|J03| | | | | | | | | |J04|J05|J06|J07|J08|J09|J10| | | | | | | | |

60 ::: credits ::: Bathala Bayanihan Campus {ƒacebook} http://fb.com/akaltnipedro


Download ppt "JavaScript Javascript is a scripting language produced by Netscape for use within HTML Web pages. JavaScript is loosely based on Java and it is built into."

Similar presentations


Ads by Google