Introduction to Java Scripting

Introduction toIntroduction toJava ScriptingJava Scripting

by: by: Alexandra VlachakisAlexandra VlachakisSandy Creek High School, Fayette County SchoolsSandy Creek High School, Fayette County Schools

Content and Resources Used With Permission: Content and Resources Used With Permission: W3 Schools. www.w3schools.com. 12-25-11.W3 Schools. www.w3schools.com. 12-25-11.

Lesson 1 : Introduction Lesson 1 : Introduction to Java Scriptingto Java Scripting

What is JavaScript?What is JavaScript?• JavaScript is the most popular scripting JavaScript is the most popular scripting

language on the internet, and works in language on the internet, and works in all major browsers, such as Internet all major browsers, such as Internet Explorer, Firefox, Chrome, Opera, and Explorer, Firefox, Chrome, Opera, and Safari. Safari.

• JavaScript was designed to add JavaScript was designed to add interactivity to HTML pages interactivity to HTML pages

• Before you start this lesson you should Before you start this lesson you should already know HTMLalready know HTML

What is JavaScript? What is JavaScript? • JavaScript is a scripting language JavaScript is a scripting language

• A scripting language is a lightweight programming A scripting language is a lightweight programming language language

• JavaScript is usually embedded directly into HTML pages JavaScript is usually embedded directly into HTML pages

• JavaScript is an interpreted language (means that scripts JavaScript is an interpreted language (means that scripts execute without preliminary compilation) execute without preliminary compilation)

• Everyone can use JavaScript without purchasing a license Everyone can use JavaScript without purchasing a license

Are Java and JavaScript the Are Java and JavaScript the same?same? NO!NO!

• Java and JavaScript are two completely Java and JavaScript are two completely

different languages in both concept and design!different languages in both concept and design!

• Java (developed by Sun Microsystems) is a Java (developed by Sun Microsystems) is a powerful and much more complex powerful and much more complex programming language - in the same category programming language - in the same category as C and C++.as C and C++.

What can a JavaScript do?What can a JavaScript do?

• HTML authors are normally not programmers HTML authors are normally not programmers

• JavaScript is a scripting language with a very JavaScript is a scripting language with a very simple syntax!simple syntax!

• It makes it possible for almost anyone to put It makes it possible for almost anyone to put small "snippets" of code into their HTML pages small "snippets" of code into their HTML pages

• JavaScript can put dynamic text into an HTML JavaScript can put dynamic text into an HTML page page

What can a JavaScript What can a JavaScript do?do?

•For example you can write For example you can write a JavaScript statement like this: a JavaScript statement like this:

document.writedocument.write("<h1>" + name + "</h1>")("<h1>" + name + "</h1>")

•This statement can write a variable This statement can write a variable text into an HTML pagetext into an HTML page

Where can you put a Where can you put a JavaScript?JavaScript?• JavaScripts in a page will be executed JavaScripts in a page will be executed

immediately while the page loads into the immediately while the page loads into the browser. This is not always what we want. browser. This is not always what we want.

• Sometimes we want to execute a script Sometimes we want to execute a script when a page loads, other times when a user when a page loads, other times when a user triggers an event. triggers an event.

Where can you put a Where can you put a JavaScript?JavaScript?

Scripts can go in the <body>Scripts can go in the <body> Scripts to be executed when the page loads go in the Scripts to be executed when the page loads go in the

body section. If you place a script in the body section, it body section. If you place a script in the body section, it generates the content of a page.generates the content of a page.

Scripts can also go in the in <head>Scripts can also go in the in <head> Scripts to be executed when they are called, or when an event is Scripts to be executed when they are called, or when an event is

triggered, go in the head section.triggered, go in the head section. If you place a script in the head If you place a script in the head section, you will ensure that the script is loaded before anyone section, you will ensure that the script is loaded before anyone uses it.uses it.

Scripts can also be externalScripts can also be external If you want to run the same JavaScript on several pages, If you want to run the same JavaScript on several pages,

without having to write the same script on every page, without having to write the same script on every page, you can write a JavaScript in an external file. We will talk you can write a JavaScript in an external file. We will talk more about this later.more about this later.

Java ScriptingJava ScriptingAssignment 1Assignment 1

Type the following code into Notepad or Text Editor Type the following code into Notepad or Text Editor for Mac.for Mac.

<html><html><body><body>

<script type="text/javascript"><script type="text/javascript">document.write("document.write("Hello World!Hello World!");");</script></script>

</body></body></html></html>

Save your page as java1.html.Save your page as java1.html.

When you preview it on the browser it should display:When you preview it on the browser it should display:Hello World!Hello World!

Let's look at that code what does it Let's look at that code what does it mean?mean?• We will look at each line of code individually. For We will look at each line of code individually. For

example line 1 - 2 are below. example line 1 - 2 are below. • These you will remember at the beginning tags of These you will remember at the beginning tags of

HTML. HTML. • Note your script starts after the <body> tag in this Note your script starts after the <body> tag in this

example.example.<html> <html> <body><body>

• The next line tells the page the type of script you will The next line tells the page the type of script you will

be adding. In this case it is text.be adding. In this case it is text.<script type="<script type="texttext/javascript">/javascript">

More About The Code...More About The Code...• Line 4 Line 4 document.write("document.write("Hello World!Hello World!");");

• Tells the page to write the words "Hello World" on your webpage.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 To write text in your JavaScript you need to put it in between quotes and in parenthesis quotes and in parenthesis

• The code also states it is a The code also states it is a document.writedocument.write command command

• This the standard JavaScript command for This the standard JavaScript command for writing outputwriting output to a to a page. page.

• By entering the By entering the document.writedocument.write command between the command between the <script><script> and and </script></script> tags, the browser will recognize it as a JavaScript tags, the browser will recognize it as a JavaScript command and execute the code line. command and execute the code line.

• As I mentioned for this example the browser will write As I mentioned for this example the browser will write Hello Hello World!World! on the page on the page

Closing Your Lines Of CodeClosing Your Lines Of Code

• Line 5 is the ending tag of the script. Line 5 is the ending tag of the script. </script></script>

• You need to just like in HTML close your You need to just like in HTML close your <script> when you have completed your <script> when you have completed your JavaScript.JavaScript.

• Why is it important to close the <script> tag?Why is it important to close the <script> tag?• Line 6-7 close your HTML tags <body> <html>.Line 6-7 close your HTML tags <body> <html>.


Lesson 2 : Lesson 2 : What Can Java Scripting What Can Java Scripting

Do?Do?

What can Javascripting do?What can Javascripting do?• JavaScript can react to events JavaScript can react to events

-- A JavaScript can be set to execute when something A JavaScript can be set to execute when something happens, happens, like when a page has finished loading or when a user clicks like when a page has finished loading or when a user clicks on an HTML elementon an HTML element

• JavaScript can read and write HTML elements JavaScript can read and write HTML elements -A JavaScript can read and change the content of an HTML A JavaScript can read and change the content of an HTML elementelement

• JavaScript can be used to validate data JavaScript can be used to validate data - A JavaScript can be used to validate form data before - A JavaScript can be used to validate form data before it is submitted to a server. This saves the server from extra it is submitted to a server. This saves the server from extra processingprocessing

What else can Java Scripting What else can Java Scripting do?do?

• JavaScript can be used to detect the visitor's JavaScript can be used to detect the visitor's browser browser

- A JavaScript can be used to detect the visitor's A JavaScript can be used to detect the visitor's browserbrowser- load another page specifically designed for that - load another page specifically designed for that browserbrowser

• JavaScript can be used to create cookies JavaScript can be used to create cookies - A JavaScript can be used to store and retrieve - A JavaScript can be used to store and retrieve

information on the visitor's computerinformation on the visitor's computer

Lesson 3 : Lesson 3 : Syntax & Rules for Syntax & Rules for

Java ScriptingJava Scripting

JavaScript is Case SensitiveJavaScript is Case Sensitive

Unlike HTML, JavaScript is case sensitive! Unlike HTML, JavaScript is case sensitive!

• Therefore watch your capitalization closely Therefore watch your capitalization closely • Especially when you write JavaScript for:Especially when you write JavaScript for:

o statements statements o create or call variables create or call variables o objects and functionsobjects and functions

JavaScripting and SemicolonsJavaScripting and Semicolons

• It is normal to add a semicolon at the end of It is normal to add a semicolon at the end of each executable statement. each executable statement.

ex. document.write("Hello Dolly");ex. document.write("Hello Dolly");

• Most people think this is a good programming Most people think this is a good programming practice, and most often you will see this in practice, and most often you will see this in JavaScript examples on the web.JavaScript examples on the web.

Java Scripting and SemicolonsJava Scripting and Semicolons• The semicolon is optional (according to the JavaScript The semicolon is optional (according to the JavaScript

standard), and the browser is supposed to interpret standard), and the browser is supposed to interpret the end of the line as the end of the statement. the end of the line as the end of the statement.

• Because of this you will often see examples without Because of this you will often see examples without the semicolon at the end. the semicolon at the end.

• Note:Note: Using semicolons makes it possible to write Using semicolons makes it possible to write multiple statements on one line.multiple statements on one line.

• Where else did we use semicolons to write code?Where else did we use semicolons to write code?

JavaScript CodeJavaScript Code

• JavaScript code (or just JavaScript) is a JavaScript code (or just JavaScript) is a sequence of JavaScript statements.sequence of JavaScript statements.

• Each statement is executed by the browser in Each statement is executed by the browser in the sequence they are written.the sequence they are written.

• In the following example we will write a heading In the following example we will write a heading and two paragraphs to a web page.and two paragraphs to a web page.

Java Scripting: Syntax & Rules Java Scripting: Syntax & Rules Assignment 2Assignment 2

<script type="text/javascript"> <script type="text/javascript">

document.writedocument.write("<h1>This is a heading</h1>"); ("<h1>This is a heading</h1>");

document.writedocument.write("<p>This is a paragraph.</p>");("<p>This is a paragraph.</p>");

document.writedocument.write("<p>This is another paragraph.</p>"); ("<p>This is another paragraph.</p>");

</script> </script>

Save your page as java-syntax.html.Save your page as java-syntax.html.

Lesson 4 : Lesson 4 : Java Scripting BlocksJava Scripting Blocks

JavaScript BlocksJavaScript Blocks

• JavaScript statements can be grouped JavaScript statements can be grouped together in blocks.together in blocks.

• Blocks start with a left curly bracket Blocks start with a left curly bracket {{ and ends with a right curly bracket and ends with a right curly bracket }}

• The purpose of a block is to make the The purpose of a block is to make the sequence of statements execute sequence of statements execute together.together.

• The following example will write a The following example will write a heading and two paragraphs to a web heading and two paragraphs to a web page.page.

Java Scripting: BlocksJava Scripting: BlocksAssignment 3Assignment 3

<script type="text/javascript"> <script type="text/javascript"> {{document.writedocument.write("<h1>This is a heading</h1>");("<h1>This is a heading</h1>");document.writedocument.write("<p>This is a paragraph.</p>");("<p>This is a paragraph.</p>");document.writedocument.write("<p>This is another paragraph.</p>"); ("<p>This is another paragraph.</p>"); } } </script> </script> Save your file as Java-blocks.htmlSave your file as Java-blocks.html

The example above is not very useful. It just demonstrates the use 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 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 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 executed if a condition is met). You will learn more about functions and conditions in later chapters.and conditions in later chapters.

Lesson 5 : Lesson 5 : Java Script CommentsJava Script Comments

JavaScript CommentsJavaScript Comments

• JavaScript comments can be used to make the JavaScript comments can be used to make the code more readable.code more readable.

• Comments can be added to explain the Comments can be added to explain the JavaScript, or to make the code more readable.JavaScript, or to make the code more readable.

• Single line comments start with //.Single line comments start with //.

Java Scripting: CommentsJava Scripting: CommentsAssignment 4Assignment 4

<script type="text/javascript"><script type="text/javascript">

// Write a heading// Write a headingdocument.writedocument.write("<h1>This is a heading</h1>");("<h1>This is a heading</h1>");

// Write two paragraphs// Write two paragraphsdocument.writedocument.write("<p>This is a paragraph.</p>");("<p>This is a paragraph.</p>");document.writedocument.write("<p>This is another paragraph.</p>");("<p>This is another paragraph.</p>");

</script> </script>

The following example uses single line comments to explain the The following example uses single line comments to explain the code they will not show up when displayed in the browser:code they will not show up when displayed in the browser:

Save your file as Save your file as Java-comments.htmlJava-comments.html

Lesson 6 : Lesson 6 : Java Scripting Java Scripting

VariablesVariables

Algebra BasicsAlgebra BasicsDo you remember algebra class? Do you remember algebra class? x=5, y=6, z=x+yx=5, y=6, z=x+y

Do you remember that a letter (like x) could be used to Do you remember that a letter (like x) could be used to hold a value (like 5), and that you could use the hold a value (like 5), and that you could use the information above to calculate the value of z to be 11?information above to calculate the value of z to be 11?

These letters are called variables, and variables can be These letters are called variables, and variables can be used to hold values (x=5) or expressions (z=x+y).used to hold values (x=5) or expressions (z=x+y).

JavaScript Variables JavaScript Variables As with algebra, JavaScript variables are used As with algebra, JavaScript variables are used to hold values or expressions.to hold values or expressions.

A variable can have a short name, like x, or a A variable can have a short name, like x, or a more descriptive name, like “more descriptive name, like “car namecar name”.”.

Rules for JavaScript Rules for JavaScript variable names:variable names:

Variable names are case sensitive Variable names are case sensitive • (y and Y are two different variables)(y and Y are two different variables)

Variable names must begin with a Variable names must begin with a letter or the underscore characterletter or the underscore character

Note:Note: Because JavaScript is case Because JavaScript is case sensitive, variable names are sensitive, variable names are case sensitive.case sensitive.

Java Scripting: VariablesJava Scripting: VariablesAssignment 5Assignment 5

Type the following code into a new notepad documentType the following code into a new notepad document

<html><html><body><body><script type="text/javascript"><script type="text/javascript">var firstname;var firstname;firstname="Hege";firstname="Hege";document.write(firstname);document.write(firstname);document.write("<br />");document.write("<br />");firstname="Tove";firstname="Tove";document.write(firstname); document.write(firstname); </script></script><p>The script above declares a variable,<p>The script above declares a variable,assigns a value to it, displays the value, changes the value,assigns a value to it, displays the value, changes the value,and displays the value again.</p>and displays the value again.</p></body></body></html></html>

Save your file as Java-variables.htmlSave your file as Java-variables.html

Lesson 7 : Lesson 7 : Java Scripting Java Scripting

Conditional StatementsConditional Statements

Conditional StatementsConditional Statements

Very often when you write code, you want to perform different Very often when you write code, you want to perform different actions for different decisions. You can use conditional statements actions for different decisions. You can use conditional statements in your code to do this.in your code to do this. In JavaScript we have the following conditional statements:In JavaScript we have the following conditional statements:• if statementif statement - use this statement to execute some code only if - use this statement to execute some code only if

a specified condition is truea specified condition is true• if...else statementif...else statement - use this statement to execute some code - use this statement to execute some code

if the condition is true and another code if the condition is falseif the condition is true and another code if the condition is false• if...else if....else statementif...else if....else statement - use this statement to select - use this statement to select

one of many blocks of code to be executedone of many blocks of code to be executed• switch statementswitch statement - use this statement to select one of many - use this statement to select one of many

blocks of code to be executedblocks of code to be executed

If statementsIf statements

Use the ‘Use the ‘ifif’’ statement to execute some code only if a statement to execute some code only if a specified condition is true.specified condition is true.

SyntaxSyntax ifif ( (conditioncondition)) { { code to be executed if condition is true code to be executed if condition is true } }

Note that ‘Note that ‘ifif’ is written in lowercase letters. Using ’ is written in lowercase letters. Using uppercase letters (uppercase letters (IFIF) will generate a JavaScript error!) will generate a JavaScript error!

Type the following code:Type the following code:

<script type="text/javascript"><script type="text/javascript">

//Write a "Good morning" greeting if//Write a "Good morning" greeting if//the time is less than 10//the time is less than 10

var d=new Date();var d=new Date();var time=d.getHours();var time=d.getHours();

if (time<10)if (time<10) { { document.write("<b>Good morning</b>"); document.write("<b>Good morning</b>"); } }

</script></script> Save your file as Save your file as Java-if.html.Java-if.html.Change the time and refresh your browser and see what happens.Change the time and refresh your browser and see what happens.

Note that there is no Note that there is no ‘else’‘else’ in this syntax. You tell the in this syntax. You tell the browser to execute some browser to execute some code code only if the specified only if the specified condition is truecondition is true..

Java Scripting: If Java Scripting: If StatementStatementAssignment 6Assignment 6

If...else StatementsIf...else Statements

Use the Use the if....elseif....else statement to execute some code if statement to execute some code if a condition is true and another code if the a condition is true and another code if the condition is not true.condition is not true.

Syntax Syntax ifif (condition) (condition)

{ { code to be executed if condition is true code to be executed if condition is true } }

elseelse { { code to be executed if condition is not true code to be executed if condition is not true } }

Type the following code:Type the following code:

<script type="text/javascript"> <script type="text/javascript"> //write a "Good morning" greeting if//write a "Good morning" greeting if//the time is less than 14//the time is less than 14 var d=new Date();var d=new Date();var time=d.getHours();var time=d.getHours(); if (time<14)if (time<14){{document.write("<b>Good afternoon</b>");document.write("<b>Good afternoon</b>");}}elseelse{{document.write("<b>Good evening</b>");document.write("<b>Good evening</b>");}}

Save your file as Save your file as Java-if-else.htmlJava-if-else.htmlChange the time and refresh your browser and see what happens.Change the time and refresh your browser and see what happens.

Java Scripting: Java Scripting: If Else StatementIf Else Statement

Assignment 7Assignment 7

If...else if...else If...else if...else StatementStatement

Use the Use the if....else if...elseif....else if...else statement to select one of several blocks of statement to select one of several blocks of code to be executed.code to be executed.

Syntax Syntax

if if ((condition1condition1)) { { code to be executed if condition1 is true code to be executed if condition1 is true } }else ifelse if ( (condition2condition2)) { { code to be executed if condition2 is true code to be executed if condition2 is true } }elseelse { { code to be executed if condition1 and condition2 are not true code to be executed if condition1 and condition2 are not true } }

Java Scripting: Java Scripting: If Statement elseIf Statement else

Assignment 8Assignment 8

<script type="text/javascript"><script type="text/javascript">var d = new Date()var d = new Date()var time = d.getHours()var time = d.getHours()if (time<10)if (time<10) { { document.write("<b>Good morning</b>"); document.write("<b>Good morning</b>"); } }else if (time>10 && time<16)else if (time>10 && time<16) { { document.write("<b>Good day</b>"); document.write("<b>Good day</b>"); } }elseelse { { document.write("<b>Hello World!</b>"); document.write("<b>Hello World!</b>"); } }</script></script>

Save your file as Save your file as , , Java-if –else-else.htmlJava-if –else-else.html Change the time and refresh your browser and see what happens.Change the time and refresh your browser and see what happens.

Java Scripting: Java Scripting: Switch Conditional StatementsSwitch Conditional Statements

Assignment 9Assignment 9<html><html><body><body>

<script type="text/javascript"><script type="text/javascript">var r=Math.random();var r=Math.random();if (r>0.5)if (r>0.5){{document.write("<a href='http://document.write("<a href='http://www.w3.org/ www.w3.org/ '>W3</a>");'>W3</a>");}}elseelse{{document.write("<a href='http://www.sandycreekhighschool.com'>Sandy document.write("<a href='http://www.sandycreekhighschool.com'>Sandy Creek High School</a>");Creek High School</a>");}}</script></script>


*In this example you have a 50/50 chance of getting one or the other link.*In this example you have a 50/50 chance of getting one or the other link.Save your file as Save your file as Java-switch.html Java-switch.html Change the time and refresh your browser and see what happens.Change the time and refresh your browser and see what happens.

Culminating Performance TaskCulminating Performance Task

Make it Snow Web PageMake it Snow Web Page Students will create a page that Students will create a page that

allows it to snow (see example).allows it to snow (see example). Students can personalize the page by Students can personalize the page by

adding content, colors, and their own adding content, colors, and their own version of snow like leaves or version of snow like leaves or footballs.footballs.

Students can present the page to the Students can present the page to the class.class.

Education

Introduction to Java Scripting