2. JavaScript?
• It is a dynamic computer programming language.
• It is lightweight and most commonly used as a part
of web pages.
• It implements client-side script to interact with the
user.
•It makes dynamic web pages.
•It is an interpreted programming language with
object-oriented capabilities.
3. JavaScript : Features
It is a lightweight, interpreted programming language.
It is Designed for creating network-centric applications.
It is Complementary to and integrated with Java.
It is Complementary to and integrated with HTML.
It is an Open and cross-platform.
4. Java != JavaScript
These two are two completely different languages in both
concept and design!
Java developed by Sun Microsystems (now in Oracle)is a
powerful and much more complex programming language as C
and C++.
JavaScript is a Scripting language or client side language but
java uses as Server side language and also client side
language.
5. JavaScript : Syntax
It can be implemented using JavaScript statements that are
placed within the <script>... </script> within HTML tags in a
web page.
<script> tags are containing your JavaScript, anywhere within
Source code of web page.
It is normally written within the <head> tags.
<script> tag alerts the browser program to start interpreting all
the text between these tags as a script.
7. JavaScript : Terminology
It uses specialized terminology.
JavaScript terms is fundamental to understanding the script.
Objects
Properties
Methods
Events
Functions
Values
Variables
Expressions
Operators
8. JavaScript : Object
Objects are composed of attributes.
If an attribute contains a function.
It considers as either method of the object, or a property.
9. JavaScript : Properties
It can be primitive data types, or abstract data types, or object type.
Object properties are usually variables.
It has internal object's methods.
It has global variables which is used throughout the page.
Syntax:
objectName.objectProperty = propertyValue;
Example:
var str = document.title;
10. JavaScript : Methods
Methods are the functions the object do something.
function vs. method – function is a standalone unit of
statements and a method is attached to an object and can be
referenced by the this keyword.
For example: write() method of document object to write any
content on the document.
document.write ("This is test");
11. JavaScript : Events
Events associate an object with an action.
• e.g., the OnMouseover event handler action can change an image.
• e.g., the onSubmit event handler sends a form
12. Example of Events
<html>
<head>
<script type="text/javascript">
function sayHello() {
document.write ("Hello World")
}
</script>
</head>
<body>
<p> Click the following button and see result</p>
<input type="button" onclick="sayHello()" value="Say Hello" />
</body>
</html>
14. JavaScript : Functions
It is reusable code which can be called anywhere in your program.
It eliminates the need of writing the same code again and again.
It helps programmers in writing modular codes.
It allows to divide a big program into a number of small and
manageable functions.
JavaScript has user-define functions.
15. Example of Functions
SYNTAX
<script type="text/javascript">
<!--
function functionname(parameter-list)
{
statements
}
//-->
</script>
EXAMPLE
<html>
<head>
<script type="text/javascript">
function sayHello()
{
document.write ("Hello there!");
}
</script>
</head>
<body>
<p>Click the following button to call the function</p>
<form>
<input type="button" onclick="sayHello()" value="Say
Hello">
</form>
<p>Use different text in write method and then try...</p>
</body>
</html>
17. JavaScript :Values
It means bits of information.
Types with examples :
Number: 1, 2, 3, etc.
String: characters enclosed in “ “ e.g. “Hello”.
Boolean: true or false.
Object: image, form
Function: validate()
18. JavaScript : Variables
It uses to store data.
It is a "container" for information want to store.
The values can be change during the script.
It is case sensitive.
It must begin with a letter or the underscore character
Global Variables: It has global scope i.e. it can be defined anywhere in
code.
Local Variables: It is visible only within a function where it is defined.
The parameters are always local to that function.
19. Example of Variable
<script type="text/javascript">
var myVar = "global"; // Declare a global variable
function checkscope( )
{
var myVar = "local"; // Declare a local variable
document.write(myVar);
}
</script>
20. JavaScript : Operators
It uses to handle variables.
Types with examples:
Arithmetic operators: +, - etc.
Comparisons operators: >=, >, <=, <, = etc.
Logical operators: & etc.
Control operators: if-else.
Assignment and String operators.
21. JavaScript : Data types
Type of values that can represented and manipulated.
There are 3 primitive data types:
Numbers , e.g., 345, 456.78 etc.
Strings of text, e.g. “Welcome to javascript" etc.
Boolean, e.g. true or false.
It has 2 trivial data types, null and undefined,
Each type defines only a single value.
JavaScript supports a composite data type, combination of primitive
data types called object.
22. JavaScript : Methods
It resides in a separate page.
It is embedded in HTML documents -- in <head> & <body> or in both.
Object attributes can be placed in HTML element tags.
e.g., <body onLoad="alert('WELCOME')">
24. JavaScript : Statements
<html>
<head><title>My Page</title></head>
<body>
<script language=“JavaScript">
document.write('<h1>This is my first JavaScript Page</h1>');
</script>
</body>
</html>
25. JavaScript : Alert Message
<body> uses the onLoad event to display an Alert window.
It is specified within parenthesis.
<body onLoad="alert('WELCOME to JavaScript')">
27. HTML Forms with JavaScript
It processes user input in the web browser.
HTML <form> elements receive input.
Forms and form elements have unique names.
Each unique element can be identified.
It Uses JavaScript Document Object Model (DOM).
28. Naming Form Elements in HTML
<form name=“Studentform">
Name: <input name=“Studentname"><br />
Phone: <input name="Studentphone"><br />
Email: <input name="Studentemail"><br />
</form>
29. Example : Form Data
Customizing an alert box
<form name="alertform">
Enter your name:
<input type="text" name="yourname">
<input type="button" value= "Go"
onClick="window.alert('Hello ' +
document.alertform.yourname.value);">
</form>
30. JavaScript : Advantages
Less server interaction.
Immediate feedback to the visitors.
Increased interactivity.
Richer interfaces.
31. JavaScript : Limitations
Client-side JavaScript does not allow the reading or writing of files.
It cannot be used for networking applications.
It doesn't have any multithreading or multiprocessor capabilities.
It allows you to build interactivity over static HTML pages.
JavaScript can be contained either in the header section of an HTML page or in the body. This JavaScript statement is shown as a pure JavaScript statement within SCRIPT tags.
Notice that there is no HTML in the body of this page at all. (Demonstrate what this JavaScript looks like in a web browser).
This statement writes a line of text on a web page.
The command document.write is a standard function in JavaScript to write text to the page. The following is a more technical explanation for background information only:
document.write is derived from the JavaScript object model (not covered in detail here). It works on the principle that all document and browser elements have an object name (document, window, image etc) and can each has various properties that can be manipulated. The object hierarchy means that individual elements can be uniquely identified i.e. document.myform.mytext would refer to the text entry named mytext within the form called myform within the current page (document).
The arrow symbol '' is used in these slides and in the workbook to indicate where a JavaScript statement should be typed on one line without a break. A line break in the wrong place will stop JavaScript from working.e.g.
document.write('This is my first
JavaScript Page');
should actually be typed:
document.write('This is my first JavaScript Page');
This example demonstrates that anything included within the quotes in the document.write statement is printed to the screen, and this includes HTML tags. The <h1> tag is delivered to the browser along with the text, and the browser would interpret it as a normal HTML file, displaying the text in the Heading 1 style.
IMPORTANT NOTE:
This example shows a JavaScript statement in the <body> of the web page.
It is possible to include JavaScript statements in the <head> section of a web page but care must be taken that they do not try to access items that don't exist until the page has loaded (e.g. form elements, links, images). The web browser parses (reads through and executes) any script commands as it displays the page.
In most cases it is common sense that dictates where a statement should be placed.
If, in the above example, document.write was placed in the <head> of the page, the text "This is my first JavaScript Page" would appear in the <head> of the finished page – this would be incorrect – although modern browsers will let you get away with it!
In some circumstances you may wish to use document.write in the <head> - for example to dynamically generate <meta> or <title> tags. Such uses are not considered here.
JavaScript functions are typically defined in the <head> section of a web page as they do not normally execute until they have been triggered elsewhere. The use of functions in JavaScript is covered in the Netskills Training Module: "Further JavaScript (Enhancing JavaScript with Functions and Events)"
JavaScript is very useful for processing and manipulating user input and form elements.
A common way of obtaining input is via the HTML <form> elements which can provide text entry boxes, selection boxes, menus and buttons. Form elements can be named and hence uniquely identified within the JavaScript object model.
This example shows a simple form. Notice the name attribute is used at all points - to name the form, and to name each element within the form.
How JavaScript uses the name attribute is described next.
This simple code creates a form called alertform.
The JavaScript is activated when 'Go' button is pressed (an onClick event - see separate Netskills Training Module for more details on Functions and Events in JavaScript). The current value of the element yourname would be displayed in a an alert box.