Published on

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

No Downloads
Total Views
On Slideshare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide


  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