Introduction to Java Scripting

Introduction toIntroduction to
Java ScriptingJava Scripting
by: by: Alexandra VlachakisAlexandra Vlachakis
Sandy 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 all language on the internet, and works in all
major browsers, such as Internet Explorer, major browsers, such as Internet Explorer,
Firefox, Chrome, Opera, and Safari. Firefox, Chrome, Opera, and 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 JavaScript is usually embedded directly into HTML
pages pages
•JavaScript is an interpreted language (means that JavaScript is an interpreted language (means that
scripts execute without preliminary compilation) scripts execute without preliminary compilation)
•Everyone can use JavaScript without purchasing a Everyone can use JavaScript without purchasing a
license license

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

•Java and JavaScript are two completely different Java and JavaScript are two completely different
languages in both concept and design!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 programming powerful and much more complex programming
language - in the same category as C and C++.language - in the same category 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 small It makes it possible for almost anyone to put small
"snippets" of code into their HTML pages "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 do?What can a JavaScript do?
•For example you can write a JavaScript For example you can write a JavaScript
statement like this: statement like this:
document.writedocument.write
("<h1>" + name + "</h1>")("<h1>" + name + "</h1>")
•This statement can write a variable text This statement can write a variable text
into an HTML pageinto an HTML page

Where can you put a JavaScript?Where can you put a 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 when a Sometimes we want to execute a script when a
page loads, other times when a user triggers an page loads, other times when a user triggers an
event. event.

Where can you put a JavaScript?Where can you put a 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 Scripts to be executed when they are called, or when an
event is triggered, go in the head section.event is triggered, go in the head section. If you place a If you place a
script in the head section, you will ensure that the script is script in the head section, you will ensure that the script is
loaded before anyone uses it.loaded before anyone uses it.
Scripts can also be externalScripts can also be external
If you want to run the same JavaScript on several If you want to run the same JavaScript on several
pages, without having to write the same script on every pages, without having to write the same script on every
page, you can write a JavaScript in an external file. We page, you can write a JavaScript in an external file. We
will talk more about this later.will talk more about this later.

Java ScriptingJava Scripting
Assignment 1Assignment 1
Type the following code into Notepad or Text Editor for Type the following code into Notepad or Text Editor for
Mac.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 mean?Let's look at that code what does it 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 HTML. These you will remember at the beginning tags of 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 be The next line tells the page the type of script you will be
adding. In this case it is text.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 quotes To write text in your JavaScript you need to put it in between quotes
and in parenthesis 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 page. to a 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 command tags, the browser will recognize it as a JavaScript command
and execute the code line. 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 <script> You need to just like in HTML close your <script>
when you have completed your JavaScript.when you have completed your 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>.
</body></body>
</html></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 happens, A JavaScript can be set to execute when something happens,
like when a page has finished loading or when a user clicks on an like when a page has finished loading or when a user clicks on an
HTML elementHTML 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 do?What else can Java Scripting 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:
ostatements statements
ocreate 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 each It is normal to add a semicolon at the end of each
executable statement. 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 the standard), and the browser is supposed to interpret the
end of the line as the end of the statement. end of the line as the end of the statement.
•Because of this you will often see examples without the Because of this you will often see examples without the
semicolon at the end. semicolon at the end.
•Note:Note: Using semicolons makes it possible to write multiple Using semicolons makes it possible to write multiple
statements on one line.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 sequence JavaScript code (or just JavaScript) is a sequence
of JavaScript statements.of JavaScript statements.
•Each statement is executed by the browser in the Each statement is executed by the browser in the
sequence they are written.sequence they are written.
•In the following example we will write a heading and In the following example we will write a heading and
two paragraphs to a web page.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 together.sequence of statements execute together.
•The following example will write a heading The following example will write a heading
and two paragraphs to a web page.and two paragraphs to a web page.

Java Scripting: BlocksJava Scripting: Blocks
Assignment 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 of a 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 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 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 condition is met). You will learn more about functions and conditions in
later chapters.later chapters.

Lesson 5 : Lesson 5 :
Java Script CommentsJava Script Comments

JavaScript CommentsJavaScript Comments
•JavaScript comments can be used to make the code JavaScript comments can be used to make the code
more readable.more readable.
•Comments can be added to explain the JavaScript, Comments can be added to explain the JavaScript,
or to make the code more readable.or to make the code more readable.
•Single line comments start with //.Single line comments start with //.

Java Scripting: CommentsJava Scripting: Comments
Assignment 4Assignment 4
<script type="text/javascript"><script type="text/javascript">
// Write a heading// Write a heading
document.writedocument.write
("<h1>This is a heading</h1>");("<h1>This is a heading</h1>");
// Write two paragraphs// Write two paragraphs
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>
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 Basics
Do 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 Do you remember that a letter (like x) could
be used to hold a value (like 5), and that you be used to hold a value (like 5), and that you
could use the information above to calculate could use the information above to calculate
the value of z to be 11?the value of z to be 11?
These letters are called variables, and These letters are called variables, and
variables can be used to hold values (x=5) or variables can be used to hold values (x=5) or
expressions (z=x+y).expressions (z=x+y).

JavaScript Variables JavaScript Variables

As with algebra, JavaScript variables are used to As with algebra, JavaScript variables are used to
hold values or expressions.hold values or expressions.

A variable can have a short name, like x, or a more A variable can have a short name, like x, or a more
descriptive name, like “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 case sensitive, variable names are case
sensitive.sensitive.

Java Scripting: VariablesJava Scripting: Variables
Assignment 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 Very often when you write code, you want to perform
different actions for different decisions. You can use different actions for different decisions. You can use
conditional statements in your code to do this.conditional statements 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 - use this statement to execute some code
only if a specified condition is trueonly if a specified condition is true
•if...else statementif...else statement - use this statement to execute some - use this statement to execute some
code if the condition is true and another code if the code if the condition is true and another code if the
condition is falsecondition is false
•if...else if....else statementif...else if....else statement - use this statement to - use this statement to
select one of many blocks of code to be executedselect one of many blocks of code to be executed
•switch statementswitch statement - use this statement to select one of - use this statement to select one of
many blocks of code to be executedmany blocks 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. ’ is written in lowercase letters.
Using uppercase letters (Using uppercase letters (IFIF) will generate a ) will generate a
JavaScript error!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 StatementJava Scripting: If Statement
Assignment 6Assignment 6

If...else StatementsIf...else Statements
Use the Use the if....elseif....else statement to execute some code if a statement to execute some code if a
condition is true and another code if the condition is not condition is true and another code if the condition is not
true.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.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:
If Else StatementIf Else Statement
Assignment 7Assignment 7

If...else if...else StatementIf...else if...else Statement
Use the Use the if....else if...elseif....else if...else statement to select one of several statement to select one of several
blocks of code to be executed.blocks of 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>
</body></body>
</html></html>
*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 allows Students will create a page that allows
it to snow (see example).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 footballs.version of snow like leaves or footballs.

Students can present the page to the Students can present the page to the
class.class.

Introduction to Java Scripting

About This Presentation

Slide Content

Tags

Categories

Download

Quick Actions

Statistics

Related Slideshows

Introduction to Java Scripting

About This Presentation

Slide Content

Slide 1

Slide 2

Slide 3

Slide 4

Slide 5

Slide 6

Slide 7

Slide 8

Slide 9

Slide 10

Slide 11

Slide 12

Slide 13

Slide 14

Slide 15

Slide 16

Slide 17

Slide 18

Slide 19

Slide 20

Slide 21

Slide 22

Slide 23

Slide 24

Slide 25

Slide 26

Slide 27

Slide 28

Slide 29

Slide 30

Slide 31

Slide 32

Slide 33

Slide 34

Slide 35

Slide 36

Slide 37

Slide 38

Slide 39

Slide 40

Slide 41

Slide 42

Slide 43

Tags

Categories

Download

Quick Actions

Statistics

Related Slideshows

8-top-ai-courses-for-customer-support-representatives-in-2025.pptx

7-essential-ai-courses-for-call-center-supervisors-in-2025.pptx

25-essential-ai-courses-for-user-support-specialists-in-2025.pptx

8-essential-ai-courses-for-insurance-customer-service-representatives-in-2025.pptx

Know for Certain

PPT OPD LES 3ertt4t4tqqqe23e3e3rq2qq232.pptx