2. History
First web scripting language
Developed by Netscape and Sun
Initiated by Netscape and called LiveScript
In parallel with this, Sun was developing
Java
3. Why Use JavaScript?
• JavaScript enhances Web pages with dynamic
and interactive features.
• JavaScript runs in client software.
• JavaScript 1.3 works with version 4.0 browsers.
4. What can a JavaScript Do?
JavaScript gives HTML designers a
programming tool.
JavaScript can react to events.
Validate data.
It can be used to detect the visitor's browser
Create cookies.
Read/write/modify HTML elements
5. JavaScript Terminology.
JavaScript programming uses specialized
terminology.
Understanding JavaScript terms is fundamental to
understanding the script.
Objects, Properties, Methods, Events, Functions,
Values, Variables, Expressions, Operators.
6. Objects
Objects refers to windows, documents,
images, tables, forms, buttons or links, etc.
Objects should be named.
Objects have properties that act as
modifiers.
7. Client-Side Script
When client makes the request, the HTML and
all scripts will be downloaded into your browser
and then the resultant HTML will be displayed
in the browser is called client-side script.
Example: JavaScript, VB-Script etc.
11. Objects
Objects refers to windows, documents, images,
tables, forms, buttons or links, etc.
Objects should be named.
Objects have properties that act as modifiers.
12. Properties
Properties are object attributes.
Object properties are defined by using the object's
name, a period, and the property name.
e.g., background color is expressed by:
document.bgcolor .
document is the object.
bgcolor is the property.
13. Methods
Methods are actions applied to particular
objects. Methods are what objects can do.
e.g., document.write(”Hello World")
document is the object.
write is the method.
14. Functions
Functions are named statements that performs
tasks.
e.g., function doWhatever () {statement
here}
The curly braces contain the statements of the
function.
JavaScript has built-in functions, and you can
write your own.
15. Values
Values are bits of information.
Values types and some examples include:
Number: 1, 2, 3, etc.
String: characters enclosed in quotes.
Boolean: true or false.
Object: image, form
Function: validate, doWhatever
16. Variables
Variables contain values and use the equal
sign to specify their value.
Variables are created by declaration using
the var command with or without an initial
value state.
e.g. var month;
e.g. var month = April;
18. Finding HTML Elements
Finding HTML Elements by Id :
Example: var
x=document.getElementById("intro");
Finding HTML Elements by Tag Name:
Example: var x=document.getElementById("main");
var y=x.getElementsByTagName("p");
19. Using Separate JavaScript Files.
Linking can be advantageous if many pages use
the same script.
Use the source element to link to the script file.
<script src="myjavascript.js”
language="JavaScript1.2”
type="text/javascript">
</script>
20. JavaScript RegExp Object
var dob_regex = /^([0-9]){2}(/){1}([0-9]){2}(/)([0-9]){4}$/; //DD/MM/YYYY
var email_regex = /^[a-zA-Z0-9._-]+@([a-zA-Z0-9.-]+.)+[a-zA-Z0-9.-]{2,4}$/;
// email address
var username_regex = /^[w.-]+$/;
// allowed characters: any word . -,
( w ) represents any word character (letters, digits, and the underscore _ ),
equivalent to [a-zA-Z0-9_]
var num_regex = /^d+$/; // numeric digits only
var password_regex = /^[A-Za-zd]{6,8}$/;
// any upper/lowercase characters and digits, between 6 to 8 characters in total
var phone_regex = /^(d{3]) d{3}-d{4}$/; // (xxx) xxx-xxxx
Notas do Editor
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 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.
To refer to the value that a user has typed in a text box, you use the following naming system: document.formname.elementname.value This is a naming convention derived from the JavaScript object model: document refers to the page displayed in the browser. formname is supplied by the page author as the name attribute of the <form> tag - in the example it is addressform and refers to the whole form. elementname is supplied by the page author using the name attribute of the <input> tag. value is a predefined term which refers to the text typed in by the user.