Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
Scribd
Upload
8 views

Java Script

js

Uploaded by

202310052
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
8 views

Java Script

js

Uploaded by

202310052
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 55

MODULE 6

WEB DESIGN WITH CLIENT-SIDE


SCRIPTING
MODULE 5
JavaScript
JavaScript Intro
Advanced Web Design
What you should know

➢HTML
➢CSS
What you should know

You don’t need to be a programmer


Though it’s a great help if you are.
HTML
Connect

Bonjour
French
JavaScript: Introduction

Aloha
kakahiaka
Hawaiian
What is scripting language?

お早うございま
す
JS: Client-side language

ohayō
gozaimasu
Japanese
What is javascript?
➢JavaScript was designed to add interactivity to
HTML pages

➢JavaScript is a scripting language

➢A scripting language is a lightweight


programming language

➢Developed by Brendan Eich


Other uses of Javascript

안녕하십니까
Issues with a client-side language

annyeong
hashimnikka
Korean
A bit History

Maayong
Buntag
Cebuano
A bit History

Maayong
Buntag
Cebuano
What do you need to write JS?

You need text


editor
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?
➢JavaScript gives HTML designers a
programming tool - HTML authors are normally
not programmers, but JavaScript is a scripting
language with a very simple syntax! Almost
anyone can put small "snippets" of code into
their HTML pages.
What can a Javascript 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.
What can a Javascript do?

➢JavaScript can be used to validate data

➢JavaScript can be used to detect the


visitor's browser
Javascript Structure
Javascript Where to!
➢JavaScripts can be put in the body and in the
head sections of an HTML page.

➢JavaScripts in a page will be executed


immediately while the page loads into the
browser.
JS is interpreted not compiled
JS is interpreted not compiled
JS is interpreted not compiled
Javascript vs HTML
Javascript vs HTML
JS: Statements
Best practices
JavaScript Comments
JavaScript Comments
JavaScript execution order
Sample
1.) Embedding script in HTML

2.) Script Positioning


Sample
JavaScript Fundamentals
JavaScript Popup Boxes (Alert)
<head>
<script type="text/javascript">

function show_alert()
{
alert("I am an alert box!");
}
</script>
</head>

<body>
<input type="button" onclick="show_alert()" value="Show alert box" />
</body>
JavaScript Popup Boxes (Confirm)
• A confirm box is often used if you want the
user to verify or accept something.
• When a confirm box pops up, the user will
have to click either "OK" or "Cancel" to
proceed.
• If the user clicks "OK", the box returns true. If
the user clicks "Cancel", the box returns false.
JavaScript Popup Boxes (Confirm)
<html>
<body>
<p>Sample for confirm box</p>
<button onclick="myFunction()">Try it</button>
<script>
function myFunction() {
if (confirm("Press a button!") == true) {
alert("You pressed OK!");
} else {
alert("You pressed Cancel!");
}
}
</script>
</body>
</html>
sample1.html
Note:
If you enter an email address without the @,
you'll get an alert asking you to re-enter the data.
What is:x.indexOf(@)==-1? This is a method that
JavaScript can search every character within a string
and look for what we want. If it finds it will return the
position of the char within the string.
If it doesn't, it will return -1. Therefore,
x.indexOf("@")==-1 basically means: "if the string
doesn't include @
sample2.html
Note:

if(document.login.userName.value==""). This
means "If the box named userName of the form named
login contains nothing, then...". return false. This is
used to stop the form from submitting. By default, a
form will return true if submitting. return
validate() That means, "if submitting, then call
the function validate()".
JavaScript Prompt (User Input)

var myInput = prompt(“Enter a number: ");


alert(myInput==“2” ? “Your choice is number
two" : "Input again");
JavaScript Functions
• A function will be executed by an event or by
a call to the function.
• To keep the browser from executing a script
when the page loads, you can put your script
into a function.
JavaScript Functions (Sample)
<html>
<head>
<script type="text/javascript">
function displaymessage()
{
alert("Hello World!");
}
</script>
</head>

<body>
<form>
<input type="button" value="Click me!" onclick="displaymessage()" />
</form>
</body>
</html>
The return Statement
• The return statement is used to specify the
value that is returned from the function.
• So, functions that are going to return a value
must use the return statement.
• The example below returns the product of
two numbers (a and b):
The return Statement
<html>
<head>
<script type="text/javascript">
function product(a,b)
{
return a*b;
}
</script>
</head>

<body>
<script type="text/javascript">
document.write(product(4,3));
</script>

</body>
</html>
The Lifetime of JavaScript Variables
• If you declare a variable within a function, the
variable can only be accessed within that function.
When you exit the function, the variable is
destroyed. These variables are called local variables.
You can have local variables with the same name in
different functions, because each is recognized only
by the function in which it is declared.

• If you declare a variable outside a function, all the


functions on your page can access it. The lifetime of
these variables starts when they are declared, and
ends when the page is closed.
JavaScript For Loop
• Loops execute a block of code a specified number of times, or while
a specified condition is true.

• In JavaScript, there are two different kind of loops:


– for - loops through a block of code a specified number of times
– while - loops through a block of code while a specified condition
is true
Syntax
for (var=startvalue;var<=endvalue;var=var+increment)
{
code to be executed
}
For Loop
<html>
<body>
<script type="text/javascript">
var i=0;
for (i=0;i<=5;i++)
{
document.write("The number is " + i);
document.write("<br />");
}
</script>
</body>
</html>
JavaScript While Loop
• The while loop loops through a block of code
while a specified condition is true.

Syntax
while (var<=endvalue)
{
code to be executed
}
While Loop Example
<html>
<body>
<script type="text/javascript">
var i=0;
while (i<=5)
{
document.write("The number is " + i);
document.write("<br />");
i++;
}
</script>
</body>
</html>
The do...while Loop
• The do...while loop is a variant of the while loop. This
loop will execute the block of code ONCE, and then it
will repeat the loop as long as the specified condition
is true.

Syntax
do
{
code to be executed
}
while (var<=endvalue);
The do...while Loop
<html>
<body>
<script type="text/javascript">
var i=0;
do
{
document.write("The number is " + i);
document.write("<br />");
i++;
}
while (i<=5);
</script>
</body>
</html>
JavaScript Break and Continue Statements
The break Statement
The break statement will break the loop and continue
executing the code that follows after the loop (if any).
<html>
<body>
<script type="text/javascript">
var i=0;
for (i=0;i<=10;i++)
{
if (i==3)
{
break;
}
document.write("The number is " + i);
document.write("<br />");
}
</script>
</body>
</html>
The continue Statement
• The continue statement will break the current loop and continue with the
next value. The break statement will break the loop and continue
executing the code that follows after the loop (if any).

<html>
<body>
<script type="text/javascript">
var i=0
for (i=0;i<=10;i++)
{
if (i==3)
{
continue;
}
document.write("The number is " + i);
document.write("<br />");
}
</script>
</body>
</html>

You might also like