0
Introduction to Java Scripting by:  Alexandra Vlachakis Sandy Creek High School, Fayette County Schools Content and Resour...
Lesson 1 : Introduction to Java Scripting
What is JavaScript? <ul><ul><li>JavaScript is the most popular scripting language on the internet, and works in all major ...
What is JavaScript?  <ul><ul><li>JavaScript is a scripting language  </li></ul></ul><ul><ul><li>A scripting language is a ...
Are Java and JavaScript the same? <ul><li>  NO!   </li></ul><ul><li>  </li></ul><ul><ul><li>Java and JavaScript are two co...
What can a JavaScript do? <ul><ul><li>HTML authors are normally not programmers  </li></ul></ul><ul><ul><li>JavaScript is ...
What can a JavaScript do? <ul><ul><li>For example you can write a JavaScript statement like this:  </li></ul></ul><ul><ul>...
Where can you put a JavaScript? <ul><ul><li>JavaScripts in a page will be executed immediately while the page loads into t...
Where can you put a JavaScript? <ul><li>Scripts can go in the <body>   </li></ul><ul><ul><li>Scripts to be executed when t...
Java Scripting Assignment 1 <ul><li>Type the following code into Notepad or Text Editor for Mac.   </li></ul><ul><ul><ul><...
Let's look at that code what does it mean? <ul><ul><li>We will look at each line of code individually. For example line 1 ...
More About The Code... <ul><ul><li>Line 4  document.write(&quot; Hello World! &quot;); </li></ul></ul><ul><ul><li>Tells th...
Closing Your Lines Of Code <ul><ul><li>Line 5 is the ending tag of the script.  </li></ul></ul><ul><li></script> </li></ul...
Lesson 2 :  What Can Java Scripting Do?
What can Javascripting do? <ul><ul><li>JavaScript can react to events  </li></ul></ul><ul><li>-  A JavaScript can be set t...
What else can Java Scripting do? <ul><ul><li>JavaScript can be used to detect the visitor's browser  </li></ul></ul><ul><l...
Lesson 3 :  Syntax & Rules for  Java Scripting
JavaScript is Case Sensitive <ul><li>Unlike HTML, JavaScript is case sensitive!  </li></ul><ul><ul><li>Therefore watch you...
JavaScripting and Semicolons <ul><ul><li>  It is normal to add a semicolon at the end of each executable statement.   </li...
JavaScripting and Semicolons <ul><ul><li>The semicolon is optional (according to the JavaScript standard), and the browser...
JavaScript Code <ul><ul><li>JavaScript code (or just JavaScript) is a sequence of JavaScript statements. </li></ul></ul><u...
Java Scripting:Syntax & Rules  Assignment 2 <ul><li><script type=&quot;text/javascript&quot;>  </li></ul><ul><ul><li>docum...
Lesson 4 :  Java Scripting Blocks
JavaScript Blocks   <ul><ul><li>JavaScript statements can be grouped together in blocks. </li></ul></ul><ul><ul><li>Blocks...
Java Scripting:Blocks Assignment 3 <ul><li><script type=&quot;text/javascript&quot;>  { </li></ul><ul><li>document.write (...
Lesson 5 :  Java Script Comments
JavaScript Comments <ul><ul><li>JavaScript comments can be used to make the code more readable. </li></ul></ul><ul><ul><li...
Java Scripting: Comments Assignment 4   <ul><li><script type=&quot;text/javascript&quot;> </li></ul><ul><li>// Write a hea...
Lesson 6 :  Java Scripting Variables
Algebra Basics <ul><li>Do you remember algebra class?  x=5, y=6, z=x+y </li></ul><ul><li>Do you remember that a letter (li...
JavaScript Variables  <ul><li>As with algebra, JavaScript variables are used to hold values or expressions. </li></ul><ul>...
Rules for JavaScript  variable names: <ul><li>Variable names are case sensitive  </li></ul><ul><ul><li>(y and Y are two di...
Java Scripting: Variables Assignment 5   <ul><li>Type the following code into a new notepad document </li></ul><ul><ul><ul...
Lesson 7 :  Java Scripting Conditional Statements
Conditional Statements <ul><li>Very often when you write code, you want to perform different actions for different decisio...
If statements <ul><li>Use the ‘ if ’  statement to execute some code only if a specified condition is true.   </li></ul><u...
<ul><li>Type the following code: </li></ul><ul><li><script type=&quot;text/javascript&quot;> </li></ul><ul><li>//Write a &...
If...else Statements   <ul><li>Use the  if....else  statement to execute some code if a condition is true and another code...
<ul><li>Type the following code: </li></ul><ul><li><script type=&quot;text/javascript&quot;> //If the time is less than 10...
If...else if...else Statement   <ul><li>Use the  if....else if...else  statement to select one of several blocks of code t...
Java Scripting:  If Statement else Assignment 8 <ul><li>Example <script type=&quot;text/javascript&quot;> var d = new Date...
Java Scripting:  If Statement else Assignment 9 <ul><li><html> <body> <script type=&quot;text/javascript&quot;> var r=Math...
Culminating Activity Make it snow! See enclosed example
Upcoming SlideShare
Loading in...5
×

Introduction to Java Scripting

6,567

Published on

Students will be able to identify and create Java Scripts for web pages.

Published in: Education, Technology
2 Comments
7 Likes
Statistics
Notes
No Downloads
Views
Total Views
6,567
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
276
Comments
2
Likes
7
Embeds 0
No embeds

No notes for slide

Transcript of "Introduction to Java Scripting"

  1. 1. Introduction to Java Scripting by: Alexandra Vlachakis Sandy Creek High School, Fayette County Schools Content and Resources Used With Permission: W3 Schools. www.w3schools.com. 12-25-11.
  2. 2. Lesson 1 : Introduction to Java Scripting
  3. 3. What is JavaScript? <ul><ul><li>JavaScript is the most popular scripting language on the internet, and works in all major browsers, such as Internet Explorer, Firefox, Chrome, Opera, and Safari. </li></ul></ul><ul><ul><li>JavaScript was designed to add interactivity to HTML pages </li></ul></ul><ul><ul><li>Before you start this lesson you should already know HTML </li></ul></ul>
  4. 4. What is JavaScript? <ul><ul><li>JavaScript is a scripting language </li></ul></ul><ul><ul><li>A scripting language is a lightweight programming language </li></ul></ul><ul><ul><li>JavaScript is usually embedded directly into HTML pages </li></ul></ul><ul><ul><li>JavaScript is an interpreted language (means that scripts execute without preliminary compilation) </li></ul></ul><ul><ul><li>Everyone can use JavaScript without purchasing a license </li></ul></ul>
  5. 5. Are Java and JavaScript the same? <ul><li>  NO! </li></ul><ul><li>  </li></ul><ul><ul><li>Java and JavaScript are two completely different languages in both concept and design! </li></ul></ul><ul><ul><li>Java (developed by Sun Microsystems) is a powerful and much more complex programming language - in the same category as C and C++. </li></ul></ul>
  6. 6. What can a JavaScript do? <ul><ul><li>HTML authors are normally not programmers </li></ul></ul><ul><ul><li>JavaScript is a scripting language with a very simple syntax! </li></ul></ul><ul><ul><li>It makes it possible for almost anyone to put small &quot;snippets&quot; of code into their HTML pages </li></ul></ul><ul><ul><li>JavaScript can put dynamic text into an HTML page </li></ul></ul><ul><li>  </li></ul>
  7. 7. What can a JavaScript do? <ul><ul><li>For example you can write a JavaScript statement like this: </li></ul></ul><ul><ul><li>document.write </li></ul></ul><ul><ul><li>(&quot;<h1>&quot; + name + &quot;</h1>&quot;) </li></ul></ul><ul><ul><li>This statement can write a variable text into an HTML page </li></ul></ul><ul><li>  </li></ul>
  8. 8. Where can you put a JavaScript? <ul><ul><li>JavaScripts in a page will be executed immediately while the page loads into the browser. This is not always what we want. </li></ul></ul><ul><ul><li>Sometimes we want to execute a script when a page loads, other times when a user triggers an event. </li></ul></ul><ul><li>  </li></ul>
  9. 9. Where can you put a JavaScript? <ul><li>Scripts can go in the <body> </li></ul><ul><ul><li>Scripts to be executed when the page loads go in the body section. If you place a script in the body section, it generates the content of a page. </li></ul></ul><ul><li>Scripts can also go in the in <head> </li></ul><ul><ul><li>Scripts to be executed when they are called, or when an event is triggered, go in the head section. If you place a script in the head section, you will ensure that the script is loaded before anyone uses it. </li></ul></ul><ul><li>Scripts can also be external   </li></ul><ul><ul><li>If you want to run the same JavaScript on several pages, without having to write the same script on every page, you can write a JavaScript in an external file. We will talk more about this later. </li></ul></ul>
  10. 10. Java Scripting Assignment 1 <ul><li>Type the following code into Notepad or Text Editor for Mac.   </li></ul><ul><ul><ul><li><html> <body> </li></ul></ul></ul><ul><ul><ul><li><script type=&quot;text/javascript&quot;> document.write(&quot; Hello World! &quot;); </script> </li></ul></ul></ul><ul><ul><ul><li></body> </html> </li></ul></ul></ul><ul><li>Save your page as java1.html. </li></ul><ul><li>When you preview it on the browser it should display: </li></ul><ul><li>Hello World! </li></ul>
  11. 11. Let's look at that code what does it mean? <ul><ul><li>We will look at each line of code individually. For example line 1 - 2 are below. </li></ul></ul><ul><ul><li>These you will remember at the beginning tags of HTML. </li></ul></ul><ul><ul><li>Note your script starts after the <body> tag in this example. </li></ul></ul><ul><li><html>  <body> </li></ul><ul><li>  </li></ul><ul><ul><li>The next line tells the page the type of script you will be adding. In this case it is text. </li></ul></ul><ul><li><script type=&quot; text /javascript&quot;> </li></ul><ul><li>  </li></ul><ul><li>  </li></ul>
  12. 12. More About The Code... <ul><ul><li>Line 4 document.write(&quot; Hello World! &quot;); </li></ul></ul><ul><ul><li>Tells the page to write the words &quot;Hello World&quot; on your webpage. </li></ul></ul><ul><ul><li>  To write text in your JavaScript you need to put it in between quotes and in parenthesis </li></ul></ul><ul><ul><li>The code also states it is a document.write command </li></ul></ul><ul><ul><li>This the standard JavaScript command for writing output to a page. </li></ul></ul><ul><ul><li>By entering the document.write command between the <script> and </script> tags, the browser will recognize it as a JavaScript command and execute the code line. </li></ul></ul><ul><ul><li>As I mentioned for this example the browser will write Hello World!  on the page </li></ul></ul>
  13. 13. Closing Your Lines Of Code <ul><ul><li>Line 5 is the ending tag of the script. </li></ul></ul><ul><li></script> </li></ul><ul><ul><li>You need to just like in HTML close your <script> when you have completed your JavaScript. </li></ul></ul><ul><ul><li>Why is it important to close the <script> tag? </li></ul></ul><ul><ul><li>Line 6-7 close your HTML tags <body> <html>. </li></ul></ul><ul><li></body> </html> </li></ul>
  14. 14. Lesson 2 : What Can Java Scripting Do?
  15. 15. What can Javascripting do? <ul><ul><li>JavaScript can react to events </li></ul></ul><ul><li>- A JavaScript can be set to execute when something happens, </li></ul><ul><li>like when a page has finished loading or when a user clicks on an HTML element </li></ul><ul><ul><li>JavaScript can read and write HTML elements </li></ul></ul><ul><li>A JavaScript can read and change the content of an HTML element </li></ul><ul><ul><li>  JavaScript can be used to validate data </li></ul></ul><ul><li>- A JavaScript can be used to validate form data before it is submitted to a server. This saves the server from extra processing </li></ul>
  16. 16. What else can Java Scripting do? <ul><ul><li>JavaScript can be used to detect the visitor's browser </li></ul></ul><ul><li>A JavaScript can be used to detect the visitor's browser - load another page specifically designed for that browser </li></ul><ul><ul><li>JavaScript can be used to create cookies </li></ul></ul><ul><li>- A JavaScript can be used to store and retrieve information on the visitor's computer </li></ul>
  17. 17. Lesson 3 : Syntax & Rules for Java Scripting
  18. 18. JavaScript is Case Sensitive <ul><li>Unlike HTML, JavaScript is case sensitive! </li></ul><ul><ul><li>Therefore watch your capitalization closely </li></ul></ul><ul><ul><li>Especially when you write JavaScript for: </li></ul></ul><ul><ul><ul><li>statements </li></ul></ul></ul><ul><ul><ul><li>create or call variables </li></ul></ul></ul><ul><ul><ul><li>objects and functions   </li></ul></ul></ul>
  19. 19. JavaScripting and Semicolons <ul><ul><li>  It is normal to add a semicolon at the end of each executable statement.   </li></ul></ul><ul><ul><li>ex. document.write(&quot;Hello Dolly&quot;); </li></ul></ul><ul><ul><li>Most people think this is a good programming practice, and most often you will see this in JavaScript examples on the web. </li></ul></ul>
  20. 20. JavaScripting and Semicolons <ul><ul><li>The semicolon is optional (according to the JavaScript standard), and the browser is supposed to interpret the end of the line as the end of the statement. </li></ul></ul><ul><ul><li>Because of this you will often see examples without the semicolon at the end. </li></ul></ul><ul><ul><li>Note: Using semicolons makes it possible to write multiple statements on one line. </li></ul></ul><ul><ul><li>Where else did we use semicolons to write code? </li></ul></ul>
  21. 21. JavaScript Code <ul><ul><li>JavaScript code (or just JavaScript) is a sequence of JavaScript statements. </li></ul></ul><ul><ul><li>Each statement is executed by the browser in the sequence they are written. </li></ul></ul><ul><ul><li>In the following example we will write a heading and two paragraphs to a web page. </li></ul></ul>
  22. 22. Java Scripting:Syntax & Rules Assignment 2 <ul><li><script type=&quot;text/javascript&quot;> </li></ul><ul><ul><li>document.write </li></ul></ul><ul><ul><li>(&quot;<h1>This is a heading</h1>&quot;); </li></ul></ul><ul><ul><li>document.write </li></ul></ul><ul><ul><li>(&quot;<p>This is a paragraph.</p>&quot;); </li></ul></ul><ul><ul><li>document.write </li></ul></ul><ul><ul><li>(&quot;<p>This is another paragraph.</p>&quot;);  </li></ul></ul><ul><li></script> </li></ul><ul><li>Save your page as java2.html. </li></ul>
  23. 23. Lesson 4 : Java Scripting Blocks
  24. 24. JavaScript Blocks <ul><ul><li>JavaScript statements can be grouped together in blocks. </li></ul></ul><ul><ul><li>Blocks start with a left curly bracket { </li></ul></ul><ul><ul><li>and ends with a right curly bracket } </li></ul></ul><ul><ul><li>The purpose of a block is to make the sequence of statements execute together. </li></ul></ul><ul><ul><li>The following example will write a heading and two paragraphs to a web page. </li></ul></ul>
  25. 25. Java Scripting:Blocks Assignment 3 <ul><li><script type=&quot;text/javascript&quot;> { </li></ul><ul><li>document.write (&quot;<h1>This is a heading</h1>&quot;); document.write </li></ul><ul><li>(&quot;<p>This is a paragraph.</p>&quot;); document.write </li></ul><ul><li>(&quot;<p>This is another paragraph.</p>&quot;); </li></ul><ul><li>} </li></ul><ul><li></script> </li></ul><ul><li>Save your file as Java3.html </li></ul><ul><li>The example above is not very useful. It just demonstrates the use of a block. Normally a block is used to group statements together in a function or in a condition (where a group of statements should be executed if a condition is met). You will learn more about functions and conditions in later chapters. </li></ul>
  26. 26. Lesson 5 : Java Script Comments
  27. 27. JavaScript Comments <ul><ul><li>JavaScript comments can be used to make the code more readable. </li></ul></ul><ul><ul><li>Comments can be added to explain the JavaScript, or to make the code more readable. </li></ul></ul><ul><ul><li>Single line comments start with //. </li></ul></ul><ul><li>  </li></ul>
  28. 28. Java Scripting: Comments Assignment 4 <ul><li><script type=&quot;text/javascript&quot;> </li></ul><ul><li>// Write a heading document.write </li></ul><ul><li>(&quot;<h1>This is a heading</h1>&quot;); </li></ul><ul><li>// Write two paragraphs document.write </li></ul><ul><li>(&quot;<p>This is a paragraph.</p>&quot;); document.write </li></ul><ul><li>(&quot;<p>This is another paragraph.</p>&quot;); </li></ul><ul><li></script> </li></ul>The following example uses single line comments to explain the code: Save your file as Java4.html
  29. 29. Lesson 6 : Java Scripting Variables
  30. 30. Algebra Basics <ul><li>Do you remember algebra class? x=5, y=6, z=x+y </li></ul><ul><li>Do you remember that a letter (like x) could be used to hold a value (like 5), and that you could use the information above to calculate the value of z to be 11? </li></ul><ul><li>These letters are called variables, and variables can be used to hold values (x=5) or expressions (z=x+y). </li></ul>
  31. 31. JavaScript Variables <ul><li>As with algebra, JavaScript variables are used to hold values or expressions. </li></ul><ul><li>A variable can have a short name, like x, or a more descriptive name, like “ car name ”. </li></ul>
  32. 32. Rules for JavaScript variable names: <ul><li>Variable names are case sensitive </li></ul><ul><ul><li>(y and Y are two different variables) </li></ul></ul><ul><li>Variable names must begin with a letter or the underscore character </li></ul><ul><li>Note: Because JavaScript is case sensitive, variable names are case sensitive. </li></ul>
  33. 33. Java Scripting: Variables Assignment 5 <ul><li>Type the following code into a new notepad document </li></ul><ul><ul><ul><li><html> <body> <script type=&quot;text/javascript&quot;> var firstname; firstname=&quot;Hege&quot;; document.write(firstname); document.write(&quot;<br />&quot;); firstname=&quot;Tove&quot;; document.write(firstname); </script> <p>The script above declares a variable, assigns a value to it, displays the value, changes the value, and displays the value again.</p> </body> </html> </li></ul></ul></ul><ul><li>Save your file as Java5.html </li></ul>
  34. 34. Lesson 7 : Java Scripting Conditional Statements
  35. 35. Conditional Statements <ul><li>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. </li></ul><ul><li>  </li></ul><ul><li>In JavaScript we have the following conditional statements: </li></ul><ul><ul><li>if statement - use this statement to execute some code only if a specified condition is true </li></ul></ul><ul><ul><li>if...else statement - use this statement to execute some code if the condition is true and another code if the condition is false </li></ul></ul><ul><ul><li>if...else if....else statement - use this statement to select one of many blocks of code to be executed </li></ul></ul><ul><ul><li>switch statement - use this statement to select one of many blocks of code to be executed </li></ul></ul>
  36. 36. If statements <ul><li>Use the ‘ if ’ statement to execute some code only if a specified condition is true. </li></ul><ul><li>Syntax </li></ul><ul><li>if ( condition )   {   code to be executed if condition is true   } </li></ul><ul><li>Note that ‘ if ’ is written in lowercase letters. Using uppercase letters ( IF ) will generate a JavaScript error! </li></ul>
  37. 37. <ul><li>Type the following code: </li></ul><ul><li><script type=&quot;text/javascript&quot;> </li></ul><ul><li>//Write a &quot;Good morning&quot; greeting if //the time is less than 10 var d=new Date(); var time=d.getHours(); if (time<10)   {   document.write(&quot;<b>Good morning</b>&quot;);   } </li></ul><ul><li></script> </li></ul><ul><li>  </li></ul><ul><li>Save your file as Java6.html </li></ul><ul><li>Change the time and refresh your browser and see what happens. </li></ul>Java Scripting: If Statement Assignment 6 <ul><ul><li>Note that there is no ..else.. in this syntax. You tell the browser to execute some code only if the specified condition is true . </li></ul></ul>
  38. 38. If...else Statements <ul><li>Use the if....else statement to execute some code if a condition is true and another code if the condition is not true. </li></ul><ul><li>Syntax </li></ul><ul><li>if (condition)   {   code to be executed if condition is true   } </li></ul><ul><li>else   {   code to be executed if condition is not true   } </li></ul>
  39. 39. <ul><li>Type the following code: </li></ul><ul><li><script type=&quot;text/javascript&quot;> //If the time is less than 10, you will get a &quot;Good morning&quot; greeting. //Otherwise you will get a &quot;Good day&quot; greeting. var d = new Date(); var time = d.getHours(); if (time < 10)   {   document.write(&quot;Good morning!&quot;);   } else   {   document.write(&quot;Good day!&quot;);   } </script> </li></ul><ul><li>Save your file as Java7.html </li></ul><ul><li>Change the time and refresh your browser and see what happens. </li></ul>Java Scripting: If Statement else Assignment 7
  40. 40. If...else if...else Statement <ul><li>Use the if....else if...else statement to select one of several blocks of code to be executed. </li></ul><ul><li>Syntax </li></ul><ul><li>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   } </li></ul>
  41. 41. Java Scripting: If Statement else Assignment 8 <ul><li>Example <script type=&quot;text/javascript&quot;> var d = new Date() var time = d.getHours() if (time<10)   {   document.write(&quot;<b>Good morning</b>&quot;);   } else if (time>10 && time<16)   {   document.write(&quot;<b>Good day</b>&quot;);   } else   {   document.write(&quot;<b>Hello World!</b>&quot;);   } </script> </li></ul><ul><li>Save your file as Java8.html </li></ul><ul><li>Change the time and refresh your browser and see what happens. </li></ul>
  42. 42. Java Scripting: If Statement else Assignment 9 <ul><li><html> <body> <script type=&quot;text/javascript&quot;> var r=Math.random(); if (r>0.5) { document.write(&quot;<a href='http://www.starinternational.org'>Star Internaitonal</a>&quot;); } else { document.write(&quot;<a href='http://www.sandycreekhighschool.com'>Sandy Creek High School</a>&quot;); } </script> </body> </html> </li></ul><ul><li>*In this example you have a 50/50 chance of getting one or the other link. </li></ul><ul><li>Save your file as Java9.html </li></ul><ul><li>Change the time and refresh your browser and see what happens. </li></ul>
  43. 43. Culminating Activity Make it snow! See enclosed example
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×