• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Introduction to Java Scripting
 

Introduction to Java Scripting

on

  • 6,260 views

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

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

Statistics

Views

Total Views
6,260
Views on SlideShare
6,255
Embed Views
5

Actions

Likes
3
Downloads
179
Comments
2

1 Embed 5

https://courses.cwu.edu 5

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel

12 of 2 previous next

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
  • @sakreV Thank you
    Are you sure you want to
    Your message goes here
    Processing…
  • Very good presentation
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Introduction to Java Scripting Introduction to Java Scripting Presentation Transcript

    • 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.
    • Lesson 1 : Introduction to Java Scripting
    • What is JavaScript?
        • 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.
        • JavaScript was designed to add interactivity to HTML pages
        • Before you start this lesson you should already know HTML
    • What is JavaScript?
        • JavaScript is a scripting language
        • A scripting language is a lightweight programming language
        • JavaScript is usually embedded directly into HTML pages
        • JavaScript is an interpreted language (means that scripts execute without preliminary compilation)
        • Everyone can use JavaScript without purchasing a license
    • Are Java and JavaScript the same?
      •   NO!
      •  
        • Java and JavaScript are two completely different languages in both concept and design!
        • Java (developed by Sun Microsystems) is a powerful and much more complex programming language - in the same category as C and C++.
    • What can a JavaScript do?
        • HTML authors are normally not programmers
        • JavaScript is a scripting language with a very simple syntax!
        • It makes it possible for almost anyone to put small "snippets" of code into their HTML pages
        • JavaScript can put dynamic text into an HTML page
      •  
    • What can a JavaScript do?
        • For example you can write a JavaScript statement like this:
        • document.write
        • (&quot;<h1>&quot; + name + &quot;</h1>&quot;)
        • This statement can write a variable text into an HTML page
      •  
    • Where can you put a JavaScript?
        • JavaScripts in a page will be executed immediately while the page loads into the browser. This is not always what we want.
        • Sometimes we want to execute a script when a page loads, other times when a user triggers an event.
      •  
    • Where can you put a JavaScript?
      • Scripts can go in the <body>
        • 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.
      • Scripts can also go in the in <head>
        • 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.
      • Scripts can also be external  
        • 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.
    • Java Scripting Assignment 1
      • Type the following code into Notepad or Text Editor for Mac.  
          • <html> <body>
          • <script type=&quot;text/javascript&quot;> document.write(&quot; Hello World! &quot;); </script>
          • </body> </html>
      • Save your page as java1.html.
      • When you preview it on the browser it should display:
      • Hello World!
    • Let's look at that code what does it mean?
        • We will look at each line of code individually. For example line 1 - 2 are below.
        • These you will remember at the beginning tags of HTML.
        • Note your script starts after the <body> tag in this example.
      • <html>  <body>
      •  
        • The next line tells the page the type of script you will be adding. In this case it is text.
      • <script type=&quot; text /javascript&quot;>
      •  
      •  
    • More About The Code...
        • Line 4 document.write(&quot; Hello World! &quot;);
        • Tells the page to write the words &quot;Hello World&quot; on your webpage.
        •   To write text in your JavaScript you need to put it in between quotes and in parenthesis
        • The code also states it is a document.write command
        • This the standard JavaScript command for writing output to a page.
        • 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.
        • As I mentioned for this example the browser will write Hello World!  on the page
    • Closing Your Lines Of Code
        • Line 5 is the ending tag of the script.
      • </script>
        • You need to just like in HTML close your <script> when you have completed your JavaScript.
        • Why is it important to close the <script> tag?
        • Line 6-7 close your HTML tags <body> <html>.
      • </body> </html>
    • Lesson 2 : What Can Java Scripting Do?
    • What can Javascripting do?
        • JavaScript can react to events
      • - A JavaScript can be set to execute when something happens,
      • like when a page has finished loading or when a user clicks on an HTML element
        • JavaScript can read and write HTML elements
      • A JavaScript can read and change the content of an HTML element
        •   JavaScript can be used to validate data
      • - A JavaScript can be used to validate form data before it is submitted to a server. This saves the server from extra processing
    • What else can Java Scripting do?
        • JavaScript can be used to detect the visitor's browser
      • A JavaScript can be used to detect the visitor's browser - load another page specifically designed for that browser
        • JavaScript can be used to create cookies
      • - A JavaScript can be used to store and retrieve information on the visitor's computer
    • Lesson 3 : Syntax & Rules for Java Scripting
    • JavaScript is Case Sensitive
      • Unlike HTML, JavaScript is case sensitive!
        • Therefore watch your capitalization closely
        • Especially when you write JavaScript for:
          • statements
          • create or call variables
          • objects and functions  
    • JavaScripting and Semicolons
        •   It is normal to add a semicolon at the end of each executable statement.  
        • ex. document.write(&quot;Hello Dolly&quot;);
        • Most people think this is a good programming practice, and most often you will see this in JavaScript examples on the web.
    • JavaScripting and Semicolons
        • 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.
        • Because of this you will often see examples without the semicolon at the end.
        • Note: Using semicolons makes it possible to write multiple statements on one line.
        • Where else did we use semicolons to write code?
    • JavaScript Code
        • JavaScript code (or just JavaScript) is a sequence of JavaScript statements.
        • Each statement is executed by the browser in the sequence they are written.
        • In the following example we will write a heading and two paragraphs to a web page.
    • Java Scripting:Syntax & Rules Assignment 2
      • <script type=&quot;text/javascript&quot;>
        • document.write
        • (&quot;<h1>This is a heading</h1>&quot;);
        • document.write
        • (&quot;<p>This is a paragraph.</p>&quot;);
        • document.write
        • (&quot;<p>This is another paragraph.</p>&quot;); 
      • </script>
      • Save your page as java2.html.
    • Lesson 4 : Java Scripting Blocks
    • JavaScript Blocks
        • JavaScript statements can be grouped together in blocks.
        • Blocks start with a left curly bracket {
        • and ends with a right curly bracket }
        • The purpose of a block is to make the sequence of statements execute together.
        • The following example will write a heading and two paragraphs to a web page.
    • Java Scripting:Blocks Assignment 3
      • <script type=&quot;text/javascript&quot;> {
      • document.write (&quot;<h1>This is a heading</h1>&quot;); document.write
      • (&quot;<p>This is a paragraph.</p>&quot;); document.write
      • (&quot;<p>This is another paragraph.</p>&quot;);
      • }
      • </script>
      • Save your file as Java3.html
      • 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.
    • Lesson 5 : Java Script Comments
    • JavaScript Comments
        • JavaScript comments can be used to make the code more readable.
        • Comments can be added to explain the JavaScript, or to make the code more readable.
        • Single line comments start with //.
      •  
    • Java Scripting: Comments Assignment 4
      • <script type=&quot;text/javascript&quot;>
      • // Write a heading document.write
      • (&quot;<h1>This is a heading</h1>&quot;);
      • // Write two paragraphs document.write
      • (&quot;<p>This is a paragraph.</p>&quot;); document.write
      • (&quot;<p>This is another paragraph.</p>&quot;);
      • </script>
      The following example uses single line comments to explain the code: Save your file as Java4.html
    • Lesson 6 : Java Scripting Variables
    • Algebra Basics
      • Do you remember algebra class? x=5, y=6, z=x+y
      • 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?
      • These letters are called variables, and variables can be used to hold values (x=5) or expressions (z=x+y).
    • JavaScript Variables
      • As with algebra, JavaScript variables are used to hold values or expressions.
      • A variable can have a short name, like x, or a more descriptive name, like “ car name ”.
    • Rules for JavaScript variable names:
      • Variable names are case sensitive
        • (y and Y are two different variables)
      • Variable names must begin with a letter or the underscore character
      • Note: Because JavaScript is case sensitive, variable names are case sensitive.
    • Java Scripting: Variables Assignment 5
      • Type the following code into a new notepad document
          • <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>
      • Save your file as Java5.html
    • Lesson 7 : Java Scripting Conditional Statements
    • Conditional Statements
      • 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:
        • if statement - 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...else if....else statement - use this statement to select one of many blocks of code to be executed
        • switch statement - use this statement to select one of many blocks of code to be executed
    • If statements
      • Use the ‘ if ’ statement to execute some code only if a specified condition is true.
      • Syntax
      • if ( condition )   {   code to be executed if condition is true   }
      • Note that ‘ if ’ is written in lowercase letters. Using uppercase letters ( IF ) will generate a JavaScript error!
      • Type the following code:
      • <script type=&quot;text/javascript&quot;>
      • //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;);   }
      • </script>
      •  
      • Save your file as Java6.html
      • Change the time and refresh your browser and see what happens.
      Java Scripting: If Statement Assignment 6
        • Note that there is no ..else.. in this syntax. You tell the browser to execute some code only if the specified condition is true .
    • If...else Statements
      • Use the if....else statement to execute some code if a condition is true and another code if the condition is not true.
      • Syntax
      • if (condition)   {   code to be executed if condition is true   }
      • else   {   code to be executed if condition is not true   }
      • Type the following code:
      • <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>
      • Save your file as Java7.html
      • Change the time and refresh your browser and see what happens.
      Java Scripting: If Statement else Assignment 7
    • If...else if...else Statement
      • Use the if....else if...else statement to select one of several blocks of code to be executed.
      • 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   }
    • Java Scripting: If Statement else Assignment 8
      • 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>
      • Save your file as Java8.html
      • Change the time and refresh your browser and see what happens.
    • Java Scripting: If Statement else Assignment 9
      • <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>
      • *In this example you have a 50/50 chance of getting one or the other link.
      • Save your file as Java9.html
      • Change the time and refresh your browser and see what happens.
    • Culminating Activity Make it snow! See enclosed example