javascript introduction. javascript is a scripting language a scripting language is a lightweight...

21
JavaScript Introduction Introduction

Upload: charlene-arabella-cook

Post on 20-Jan-2016

226 views

Category:

Documents


3 download

TRANSCRIPT

Page 1: JavaScript Introduction.  JavaScript is a scripting language  A scripting language is a lightweight programming language  A JavaScript can be inserted

JavaScript

IntroductionIntroduction

Page 2: JavaScript Introduction.  JavaScript is a scripting language  A scripting language is a lightweight programming language  A JavaScript can be inserted

      JavaScript is a scripting language JavaScript is a scripting language

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

    A JavaScript can be inserted into an A JavaScript can be inserted into an HTML page HTML page

  JavaScript is an open scripting JavaScript is an open scripting language that anyone can use without language that anyone can use without purchasing a license purchasing a license

        JavaScript is supported by all major JavaScript is supported by all major browsers like Netscape and Internet browsers like Netscape and Internet Explorer Explorer

Page 3: JavaScript Introduction.  JavaScript is a scripting language  A scripting language is a lightweight programming language  A JavaScript can be inserted

        How Does it Work?How Does it Work?

When a JavaScript is inserted into an When a JavaScript is inserted into an HTML document, the Internet browser HTML document, the Internet browser will read the HTML and interpret the will read the HTML and interpret the JavaScript. The JavaScript can be JavaScript. The JavaScript can be executed immediately or when some executed immediately or when some event occurs.event occurs.

Page 4: JavaScript Introduction.  JavaScript is a scripting language  A scripting language is a lightweight programming language  A JavaScript can be inserted

What can a JavaScript Do?What can a JavaScript Do?    It can enhance the dynamics and interactive It can enhance the dynamics and interactive features of your page by allowing you to perform features of your page by allowing you to perform calculationscalculations

check formscheck formswrite interactive gameswrite interactive gamesadd special effectsadd special effectscustomize graphics selectionscustomize graphics selections

Page 5: JavaScript Introduction.  JavaScript is a scripting language  A scripting language is a lightweight programming language  A JavaScript can be inserted

What can a JavaScript Do?What can a JavaScript Do?

        JavaScript gives HTML designers a JavaScript gives HTML designers a programming tool.programming tool.

JavaScript can put dynamic text into an HTML JavaScript can put dynamic text into an HTML page. For Example, A JavaScript statement page. For Example, A JavaScript statement

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

can write a variable text into the display of an can write a variable text into the display of an HTML page, just like the static HTML text: HTML page, just like the static HTML text: <h1>Bill Gates</h1> does. <h1>Bill Gates</h1> does.

Page 6: JavaScript Introduction.  JavaScript is a scripting language  A scripting language is a lightweight programming language  A JavaScript can be inserted

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

        JavaScript can read and write HTML JavaScript can read and write HTML elementselements

        JavaScript can be used to validate JavaScript can be used to validate data. in a form before it is submitted data. in a form before it is submitted to a server. This function is to a server. This function is particularly well suited to save the particularly well suited to save the server from extra processing.server from extra processing.

Page 7: JavaScript Introduction.  JavaScript is a scripting language  A scripting language is a lightweight programming language  A JavaScript can be inserted

What's the difference between JavaScript and Java? The 2 languages have almost nothing in The 2 languages have almost nothing in

common except for the name. common except for the name.

Page 8: JavaScript Introduction.  JavaScript is a scripting language  A scripting language is a lightweight programming language  A JavaScript can be inserted

    JavaScript IntroductionJavaScript Introduction

  <script> tag: The primary method of <script> tag: The primary method of including JavaScript within HTML is by including JavaScript within HTML is by using the <script> tag. To specify using the <script> tag. To specify scripting language name we have to scripting language name we have to use “language attribute” with use “language attribute” with <script> tag. For example,<script> tag. For example,

  <script language="JavaScript"> <script language="JavaScript"> indicates JavaScript indicates JavaScript

<script language="VBS"> indicates <script language="VBS"> indicates VBScriptVBScript

Page 9: JavaScript Introduction.  JavaScript is a scripting language  A scripting language is a lightweight programming language  A JavaScript can be inserted

First JavaScript ProgramFirst JavaScript Program

  <html><html>

<head><head>

<title>JavaScriptTestProgram</title><title>JavaScriptTestProgram</title>

</head></head>

<body><body>

<script language="JavaScript"> <script language="JavaScript">

document.write("Hi")document.write("Hi")

</script></script>

</body></body>

</html></html>

Page 10: JavaScript Introduction.  JavaScript is a scripting language  A scripting language is a lightweight programming language  A JavaScript can be inserted

<html><head><title>JavaScript Test Program</title></head><body><script language="JavaScript"> <b>document.write("Hi")</b></script></body></html>

Page 11: JavaScript Introduction.  JavaScript is a scripting language  A scripting language is a lightweight programming language  A JavaScript can be inserted

How to Handle Older Browsers (or Browser that does not support JavaScript)Older browsers that do not support scripts will display the script as page content. To prevent them from doing this, you can use the HTML comment tag:<script type="text/javascript"><!--some statements//--> </script>The two forward slashes in front of the end of comment line (//) are a JavaScript comment symbol, and prevent the JavaScript from trying to compile the line.

Page 12: JavaScript Introduction.  JavaScript is a scripting language  A scripting language is a lightweight programming language  A JavaScript can be inserted

Including HTML tags within JavaScript<html><head><title>JavaScript Test Program</title></head><body><script language="JavaScript"> document.write("<b>How R U?</b>")</script></body></html>

Page 13: JavaScript Introduction.  JavaScript is a scripting language  A scripting language is a lightweight programming language  A JavaScript can be inserted

Execution Order<html><head><title>JavaScript Test Program</title></head><body>First Time<script language="JavaScript"> alert("1");</script>

Page 14: JavaScript Introduction.  JavaScript is a scripting language  A scripting language is a lightweight programming language  A JavaScript can be inserted

Scond Time<script language="JavaScript"> alert("2");</script>Third Time<script language="JavaScript"> alert("3");</script></body></html>

Page 15: JavaScript Introduction.  JavaScript is a scripting language  A scripting language is a lightweight programming language  A JavaScript can be inserted

Declaring & Calling Functions<html><head><title>JavaScript Test Program</title><script language="JavaScript"> function test(){

alert("Function Executed");}</script></head>

Page 16: JavaScript Introduction.  JavaScript is a scripting language  A scripting language is a lightweight programming language  A JavaScript can be inserted

<body><script language="JavaScript"> test();</script></body></html>

Page 17: JavaScript Introduction.  JavaScript is a scripting language  A scripting language is a lightweight programming language  A JavaScript can be inserted

How to Run an External JavaScript

Sometimes you might want to run the same script on several pages, without writing the script on each and every page.

To simplify this you can write a script in an external file, and save it with a .js file extension, like this:

document.write("This script is external");Save the external file as ext.js.

Page 18: JavaScript Introduction.  JavaScript is a scripting language  A scripting language is a lightweight programming language  A JavaScript can be inserted

Note: The external script cannot contain the <script> tagNow you can call this script, using the "src" attribute, from any of your pages:<html><head></head><body><script src="ext.js"></script></body></html>

Page 19: JavaScript Introduction.  JavaScript is a scripting language  A scripting language is a lightweight programming language  A JavaScript can be inserted

confirm box<html><body><script type="text/javascript">var name = confirm("Press a button")if (name == true){document.write("You pressed OK") }else{document.write("You pressed Cancel") }</script></body></html>

Page 20: JavaScript Introduction.  JavaScript is a scripting language  A scripting language is a lightweight programming language  A JavaScript can be inserted

Input Box<html><head></head><body><script type="text/javascript">var name = prompt("Enter your name","")if (name != "") {document.write("Hello " + name) }</script></body></html>

Page 21: JavaScript Introduction.  JavaScript is a scripting language  A scripting language is a lightweight programming language  A JavaScript can be inserted

Opening a new Window<html><head><script language=javascript>function openwindow() {window.open("C:/Pushpal/JavaScriptStudy/script5.html")//window.open("http://www.yahoo.com")}</script></head><body><form><input type=button value="Open Window" onclick="openwindow()"></form></body></html>