8/7/2019 javascript_intro

1/17

An Introduction

8/7/2019 javascript_intro

2/17

Introductiony JavaScript is a scripting language most often used for

client-side web developmenty JavaScript was originally developed byBrendan Eich

of Netscape under the name Mocha, later LiveScript,

and finally renamed to JavaScript

y JavaScript was first introduced and deployed in the

Netscape browser version 2.0B3 in December of 1995

8/7/2019 javascript_intro

3/17

JavaScript vsJavay JavaScript and Java has only syntactic relationship

y Characterized by many as a marketing ploy by Netscape to

give JavaScript the cachet of what was then the hot new

web-programming language..

y Despite the name, JavaScript is unrelated to the Java

programming language

y Java (developed by Sun Microsystems) is a powerful and

much more complex programming language

8/7/2019 javascript_intro

4/17

What isJavascript?y JavaScript was designed to add interactivity to HTML pages

y JavaScript is a scripting language

y AJavaScript consists of lines of executable computer code

y AJavaScript is usually embedded directly into HTML pages

y JavaScript is an interpreted language (means that scripts

execute without preliminary compilation)

y Everyone can use JavaScript without purchasing a license

8/7/2019 javascript_intro

5/17

What can a JavaScript Do?

y JavaScript gives HTML designers a programming tool

y JavaScript can put dynamic text into an HTML page

y JavaScript can react to events

y JavaScript can read and write HTML elements

y JavaScript can be used to validate data

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

y JavaScript can be used to create cookies

8/7/2019 javascript_intro

6/17

How to insert to Javascript?y The HTML tag is used to insert a JavaScript

into an HTML page.

document.write("Hello World!")

8/7/2019 javascript_intro

7/17

TheSemicolony Many programmers continue this habit when writing

JavaScript

,

y But in general, semicolons are optional!

y However, semicolons are required if you want to put

more than one statement on a single line.

8/7/2019 javascript_intro

8/17

Handling Older Browsers

y Browsers that do not support JavaScript will display the script as page content. To prevent

them from doing this, we may use the HTML comment tag:

document.write("Hello World!")

//-->

The two forward slashes at the end of comment line (//) are a JavaScript comment

symbol. This prevents the JavaScript compiler from compiling the line.

8/7/2019 javascript_intro

9/17

JavaScript Head Vs Body

y JavaScripts in the body section will be executed

WHILE the page loads.

y JavaScripts in the head section will be executed when

CALLED.

8/7/2019 javascript_intro

10/17

External JSy Sometimes you might want to run the same JavaScript

on several pages, without having to write the same

script on every page.y To simplify this, you can write a JavaScript in an

external file. Save the external JavaScript file with a .jsfile extension.

yNote: The external script cannot contain the tag!

y To use the external script, point to the .js file in the"src" attribute of the tag:

8/7/2019 javascript_intro

11/17

External JS

8/7/2019 javascript_intro

12/17

JavaScript Variables

y A variable is a "container" for information you want tostore.

y

Rules for variable names:y Variable names are case sensitive

y They must begin with a letter or the underscorecharacter

You can create a variable with the var statement:

var strname = some value

You can also create a variable without the var statement:

strname = some value

8/7/2019 javascript_intro

13/17

Operatorsy As normal to other C Based Langs

8/7/2019 javascript_intro

14/17

JavaScript Popup Boxes

y In JavaScript we can create three kinds of popup boxes

Pop ups

Alert Confirm Prompt

8/7/2019 javascript_intro

15/17

Alerty Alert : An alert box is often used if you want to make

sure information comes through to the user.

alert("sometext")

8/7/2019 javascript_intro

16/17

Confirmy A confirm box is often used if you want the user to

verify or accept something.

yWhen a confirm box pops up, the user will have toclick either "OK" or "Cancel" to proceed.

y If the user clicks "OK", the box returns true. If the userclicks "Cancel", the box returns false.

y confirm("sometext")

8/7/2019 javascript_intro

17/17

Prompt Box

y A prompt box is often used if you want the user toinput a value before entering a page.

y

When a prompt box pops up, the user will have to clickeither "OK" or "Cancel" to proceed after entering aninput value.

y If the user clicks "OK" the box returns the input value.

If the user clicks "Cancel" the box returns null.y Syntax:

y prompt("sometext","defaultvalue")