Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.



Published on

Published in: Education, Technology
  • Be the first to comment


  1. 1. JAVASCRIPT: an introduction
  2. 2. What is JavaScript? JavaScript  It adds interactivity to a Web page;  It is combined with CSS to manipulate a Web page;  It is a client-side language, which runs in a client software (browser ) that the viewer is using, rather than on a server;  It is a scripting language (doesn’t require a compiling language to compile the codes before it runs);  It is case-sensitive. 2
  3. 3. Code View: <script type=“text/javascript”> … … </script> 3
  4. 4. Where, how? 1. Inline – scripts only in <body> <html> <head> <title>JavaScript Blueprint</title> </head> <body> <script type="text/javascript"> document.write(<h2>Hello World!</h2>); </script> </body> </html> 4
  5. 5. Where, how? 2. Internal – scripts in <head>, called in <body> <html> <head> <title> Welcome</title> <script type="text/javascript"> document.write(“Hello World!”); </script> </head> <body onload = document.write> </body> </html> 5
  6. 6. Where, how? 3. External – scripts saved as .js, called in .html Inline: External: The .html file<html> <html> <head> <head> <title>JavaScript Inline</title> <title>JavaScript External</title> </head> </head> <body> <body> <script type= "text/javascript” src=“myjs.js”> <script type="text/javascript"> </script> document.write(Hello World!); </body> </script> </html> </body></html> The .js file document.write(Hello World!); 6
  7. 7. JavaScript Statements A JavaScript statement is a command to a browser. The purpose of the command is to tell the browser what to do. <script type="text/javascript"> document.write("<h1>This is a heading</h1>"); document.write("<p>This is a paragraph.</p>"); document.write("<p>This is another paragraph.</p>"); </script> 7
  8. 8. JavaScript Comments  Comments can be added to explain the JavaScript.  Single line comments start with //.  Multi line comments start with /* and end with */ 8
  9. 9. Variables ExampleDeclare/Assign Variables <html> <head> Case sensitive <title>Variable example</title> Must begin with a </head> letter or _ or $. <body> Onlycontain letters, <script type="text/javascript"> var num1,num2,addnum; numbers, $, and _ num1=3; No num2=7; blank space in addnum=num1+num2; between document.write("This is the result: " Avoid +addnum+ ". <br />"); reserved </script> keywords </body> 9 </html>
  10. 10. Variable Types Booleans Boolean values are logical values that are either true or false, with 1 representing true and 0 representing false. var john=true; or var john=1; var george=false; or var george=0; Number var paycheck=1200; Strings A string variable represents a string of text. It may contain letters, words, spaces, numbers, symbols, or anything you define. Used between quotation marks. var str1= “Big Brown Station Wagon”; var str2= “349875”; 10
  11. 11. Special JavaScript Characters Output Character Special Code to Use Backslash () Double quote (“) ” Single quote (‘) ’ New line <br /> Carriage return r Tab t Vertical tab v Backspace b 11
  12. 12. If statement  ifstatement - use this statement to execute some code only if a specified condition is true  if...else statement - use this statement to execute some code if the condition is true and another code if the condition is false  if...elseif....else statement - use this statement to select one of many blocks of code to be executed 12
  13. 13. If statement Syntax if (condition1)   {code to be executed if condition1 is true}; else if (condition2)   {code to be executed if condition2 is true}; else   {code to be executed if condition1 and condition2 are not true}; 13
  14. 14. If statement example <script type="text/javascript"> var x=10; var y=20; if (x>y) { document.write(“x is greater than y.<br />”); } else if (x<y) { document.write(“x is smaller than y.<br />”); } else { document.write(“x is equal to y.<br />"); } 14 </script>
  15. 15. For Loop The for loop is used when you know in advance how many times the script should run. Syntax var=startvalue; for (var=startvalue; var<=endvalue; var=var+increment) { code to be executed; } 15
  16. 16. For Loop Example <html> <body> <script type="text/javascript"> var i=0; for (i=0;i<=5;i++) { document.write("The number is " + i); document.write(“. <br />"); } </script> </body> 16 </html>
  17. 17. While Loop Syntax var=startvalue; while (var<=endvalue) {  code to be executed; variable increment; } 17
  18. 18. While Loop example <html> <body> <script type="text/javascript"> var i=0; while (i<=5)   {   document.write("The number is " + i + “.<br />" );   i++;   } </script> </body> 18 </html>
  19. 19. Functions  Can be in the head or the body section  Repeated steps stored in the Web browser’s memory, and need to be called in order to execute  Can be called multiple times with different variables Syntax Examplefunction funname(var1, var2) function myprint(message) { { function code; document.write(message); } }  Funname(var1, var2); myprint("Hello world!"); 19
  20. 20. Function examples function caltax(num1) { var tax=0.0875; total = num1+(num1*tax); document.write("The total is $" + total + "."); }  caltax(100); function caltax(num1) { var tax=0.0875; total = num1+(num1*tax); return total; } document.write ("The total is $" + caltax(100)+ “.”); 20
  21. 21. Comparison Operators Operator Description Example == is equal to x==8 is false x===5 is true === is exactly equal to (value and type) x==="5" is false != is not equal x!=8 is true > is greater than x>8 is false < is less than x<8 is true >= is greater than or equal to x>=8 is false <= is less than or equal to x<=8 is true 21
  22. 22. Logical Operators • Logical operators are used to determine the logic between variables or values. • Given that x=6 and y=3, the table below explains the logical operators: Operator Description Example && and (x < 10 && y > 1) is true || or (x==5 || y==5) is false ! not !(x==y) is true 22
  23. 23. Works Cited Most of the information on this PowerPoint are based on W3Schools Online Web Tutorials JavaScript section. 23