Basics of Javascript

Javascript
-1-
Web Technologies INTERNAL
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 JavaScript is usually embedded directly into HTML pages JavaScript is an interpreted language (means that scripts execute without preliminary compilation) Everyone can use JavaScript without purchasing a license
-2-
Web Technologies -2 INTERNAL -
What can a JavaScript Do? JavaScript gives HTML designers a programming tool JavaScript can put dynamic text into an HTML page JavaScript can react to events JavaScript can read and write HTML elements JavaScript can be used to validate data
-3-
How to Put a JavaScript Into an HTML Page? <html> <body> <script type="text/javascript"> document.write("Hello World!"); </script> </body> </html> The code above will produce this output on an HTML page: Hello World!
-4-
Where to Put the JavaScript?

Scripts in the head section: <html> <head> <script type="text/javascript"> .... </script> </head> Scripts in the body section: <html> <head> </head> <body> <script type="text/javascript"> .... </script> </body> </html>
-5-
Where to Put the JavaScript contd.. Scripts in both the body and the head section <html> <head> <script type="text/javascript"> .... </script> </head> <body> <script type="text/javascript"> .... </script> </body> </html>
-6Web Technologies -6 INTERNAL -
Using an External JavaScript <html> <head> <script type="text/javascript" src="xxx.js"> </script> </head> <body> </body> </html>
-7-
Declaring (Creating) JavaScript Variables Variables are "containers" for storing information. JavaScript variables are used to hold values or expressions. A variable can have a short name, like x, or a more descriptive name, like carname. Rules for JavaScript variable names: Variable names are case sensitive (y and Y are two different variables) Variable names must begin with a letter or the underscore character Note: Because JavaScript is case-sensitive, variable names are casesensitive. You can declare JavaScript variables with the var statement: var x=5; var carname="Volvo";
-8Web Technologies -8 INTERNAL -
Conditional Statements if statement - use this statement if you want to execute some code only if a specified condition is true if...else statement - use this statement if you want to execute some code if the condition is true and another code if the condition is false if...else if....else statement - use this statement if you want to select one of many blocks of code to be executed switch statement - use this statement if you want to select one of many blocks of code to be executed
-9-
JavaScript Popup Boxes

In JavaScript we can create three kinds of popup boxes: Alert box, Confirm box, and Prompt box. Alert box : When you want to make sure information comes through to the user alert box is used. When an alert box pops up, the user will have to click "OK" to proceed. Syntax: alert("sometext"); Confirm box: If you want the user to verify or accept something, Confirm box is used. If the user clicks "OK", the box returns true. If the user clicks "Cancel", the box returns false. Syntax: confirm("sometext"); Prompt box: A prompt box is used if you want the user to input a value before entering a page. If the user clicks "OK" the box returns the input value. If the user clicks "Cancel" the box returns null. Syntax: prompt("sometext","defaultvalue");
Web Technologies - 10 INTERNAL -
- 10 -
JavaScript Functions <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>
- 11 Web Technologies - 11 INTERNAL -
How to Define a Function function functionname(var1,var2,...,varX) { some code } The return Statement function prod(a,b) { x=a*b; return x; }
- 12 -
Events A mouse click A web page or an image loading Mousing over a hot spot on the web page Selecting an input box in an HTML form Submitting an HTML form A keystroke
- 13 -
Sample events onSubmit <form method="post" action="xxx.htm onsubmit="return checkForm()"> onMouseOver and onMouseOut <a href=http://www.w3schools.com onmouseover=alert('An onMouseOver event'); return false"> <img src="w3schools.gif" width="100" height="30"> </a>
- 14 -
JavaScript Form Validation Form data that typically are checked by a JavaScript could be: has the user left required fields empty? has the user entered a valid e-mail address? has the user entered a valid date? has the user entered text in a numeric field?
- 15 -
JavaScript Form Validation

<html> <head> <script type="text/javascript"> <!-function validate_form ( ) { valid = true; if ( document.email_form.email.value == "" ) { alert ( "Please fill in the 'Email' box." ); valid = false; } return valid; } //--> </script> </head> <body> <form name="email_form" action="submitpage.htm" onsubmit="return validate_form()" method="post"> Email: <input type="text" name="email" size="30"> <input type="submit" value="Submit"> </form> </body> </html>
- 16 -
Document Object Model It provides a way to access and alter the contents of Hypertext Markup Language (HTML) documents. <html> <head> <title>Hello World</title> </head> <body> <p>Here's some text.</p> <p>Here's more text.</p> <p>Link to the <a href="http://www.w3.org">W3</a></p> </body> </html>
- 17 -
Document Object Model

html
head
body
title
Hello World
Heres some text
Heres more text
Link to the
W3
Retrieving Elements
Retrieving the elements of a document is a central part of using the DOM with JavaScript.
There are two methods to retrieve elements getElementById() getElementsByTagName()
- 19 -
Retrieving by ID <html> <head> <title>Hello World</title> <body> <p>Here's some text.</p> <p>Here's more text.</p> <p>Link to the <a id="w3link" href="http://www.w3.org">W3</a> </p> </body> </html> The a element could then be retrieved with the getElementById() method, as follows: var a1 = document.getElementById("w3link"); The reference for the element with the ID w3link would be placed inside the JavaScript variable a1.
Retrieving by ID <html> <head> <title>Hello World</title> <body> <p id="sometext">Here's some text.</p> <p id="moretext">Here's more text.</p> <p id="linkp">Link to the <a id="w3link" href="http://www.w3.org">W3</a></p> </body> </html> These elements could then be retrieved in the same way, like so: var p1 = document.getElementById("sometext"); var p2 = document.getElementById("moretext"); var plink = document.getElementById("linkp");
Retrieving by Tag Name

<html> <head> <title>Tag Name</title> <script type = "text/javascript" > function changecolors() { var a1 = document.getElementsByTagName("td"); for (var i = 0; i < a1.length; i++) { a1[i].style.background = "#aaabba"; } } </script> </head> <body> <table id="mytable" border="1"> <tr><td id="lefttd0">Left column</td><td id="righttd0">Right column</td></tr> <tr><td id="lefttd1">Left column</td><td id="righttd1">Right column</td></tr> <tr><td id="lefttd2">Left column</td><td id="righttd2">Right column</td></tr> </table> <a href="#" onclick="return changecolors();">Click to Change Colors</a> </body> </html>
- 22 -
Working with Attributes The attributes of elements are both gettable and settable through JavaScript getAttribute() and setAttribute() setAttribute() method takes two arguments or parameters: the attribute to change and the intended value for that attribute.
- 23 -
Using getAttribute() <html> <body> <script language="JavaScript"> function getID(){ var id = document.getElementById("divId").getAttribute(align"); alert(id); } </script> <center> <div id="divId" align="center" style="background: #ffffcc; width:'100%';"> <p>TCS Initial Learning Programme.</p> <input type="button" value=" Get id " onclick="getID();"> </div> </center> </body> </html>
Using setAttribute() <html> <body> <script language="JavaScript"> function getID() { var var1 = document.getElementById('myID'); alert(var1.getAttribute('attr')); var1.setAttribute('attr',"good day"); alert(var1.getAttribute('attr')); } </script> <center> <p id="myID" attr=hello" >TCS Initial Learning Programme.</p> <input type="button" value=" Get id " onclick="getID();"> </center> </body> </html>
Summary Add JavaScript to your HTML pages, to make your web site more dynamic and interactive and customize web pages based on situation. Learn how to use JavaScript's built-in objects. JavaScript is case sensitive. JavaScript ignores extra spaces. You can add white space to your script to make it more readable.
- 26 -
Thank You

Basics of Javascript

Uploaded by

Copyright:

Available Formats

Basics of Javascript

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Basics of Javascript

Uploaded by

Copyright:

Available Formats

Javascript

Web Technologies INTERNAL

Web Technologies -2 INTERNAL -

Web Technologies -3 INTERNAL -

Web Technologies -4 INTERNAL -

Where to Put the JavaScript?

Web Technologies -5 INTERNAL -

Web Technologies -7 INTERNAL -

Web Technologies -9 INTERNAL -

JavaScript Popup Boxes

Web Technologies - 12 INTERNAL -

Web Technologies - 13 INTERNAL -

Web Technologies - 14 INTERNAL -

Web Technologies - 15 INTERNAL -

JavaScript Form Validation

Web Technologies - 16 INTERNAL -

Web Technologies - 17 INTERNAL -

Document Object Model

Heres some text

Heres more text

Web Technologies INTERNAL

There are two methods to retrieve elements getElementById() getElementsByTagName()

Web Technologies - 19 INTERNAL -

Retrieving by Tag Name

Web Technologies - 22 INTERNAL -

Web Technologies - 23 INTERNAL -

Web Technologies INTERNAL

Web Technologies - 26 INTERNAL -

You might also like