Introduction to Java Scripting

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 ("<h1>" + name + "</h1>") 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="text/javascript"> document.write(" Hello World! "); </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=" text /javascript">

More About The Code... Line 4 document.write(" Hello World! "); Tells the page to write the words "Hello World" 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("Hello Dolly"); Most people think this is a good programming practice, and most often you will see this in JavaScript examples on the web.

Java Scripting 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="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> Save your page as java-syntax.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="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> Save your file as Java-blocks.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="text/javascript"> // Write a heading document.write ("<h1>This is a heading</h1>"); // Write two paragraphs document.write ("<p>This is a paragraph.</p>"); document.write ("<p>This is another paragraph.</p>"); </script> The following example uses single line comments to explain the code they will not show up when displayed in the browser: Save your file as Java-comments.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="text/javascript"> var firstname; firstname="Hege"; document.write(firstname); document.write("<br />"); firstname="Tove"; 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 Java-variables.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="text/javascript"> //Write a "Good morning" greeting if //the time is less than 10 var d=new Date(); var time=d.getHours(); if (time<10) { document.write("<b>Good morning</b>"); } </script> Save your file as Java-if.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="text/javascript"> //write a "Good morning" greeting if //the time is less than 14 var d=new Date(); var time=d.getHours(); if (time<14) { document.write("<b>Good afternoon</b>"); } else { document.write("<b>Good evening</b>"); } Save your file as Java-if-else.html Change the time and refresh your browser and see what happens. Java Scripting: If Else Statement 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 <script type="text/javascript"> var d = new Date() var time = d.getHours() if (time<10) { document.write("<b>Good morning</b>"); } else if (time>10 && time<16) { document.write("<b>Good day</b>"); } else { document.write("<b>Hello World!</b>"); } </script> Save your file as , Java-if –else-else.html Change the time and refresh your browser and see what happens.

Java Scripting: Switch Conditional Statements Assignment 9 <html> <body> <script type="text/javascript"> var r=Math.random(); if (r>0.5) { document.write("<a href='http:// www.w3.org/ '>W3</a>"); } else { document.write("<a href='http://www.sandycreekhighschool.com'>Sandy Creek High School</a>"); } </script> </body> </html> *In this example you have a 50/50 chance of getting one or the other link. Save your file as Java-switch.html Change the time and refresh your browser and see what happens.

Culminating Performance Task Make it Snow Web Page Students will create a page that allows it to snow (see example). Students can personalize the page by adding content, colors, and their own version of snow like leaves or footballs. Students can present the page to the class.

Introduction to Java Scripting

Related slideshows

More Related Content

Introduction to Java Scripting