Download presentation
Presentation is loading. Please wait.
1
CHAPTER 4 CLIENT SIDE SCRIPTING PART 1 OF 3
Madam Hazwani binti Rahmat
2
PRINCIPS OF CLIENT SIDE SCRIPTING
Refers to scripts which run on user’s browser. Example : JavaScript Common uses of JavaScript include: Alert messages Popup windows Dynamic dropdown menus Form validation mouse trailers
3
PRINCIPS OF CLIENT SIDE SCRIPTING - advantages of javascript
Less server interaction: user input can be validated before sending the page off to the server. This saves server traffic, which means less load on server. Immediate feedback to the visitors: User don't have to wait for a page reload to see if they have forgotten to enter something. Increased interactivity: Enable creation of interfaces that react when the user hovers over them with a mouse or activates them via the keyboard. Richer interfaces: Offers drag-and-drop components and sliders to give a Rich Interface to web site visitors.
4
PRINCIPS OF CLIENT SIDE SCRIPTING - limitations with javascript
Does not allow the reading or writing of files. Even though JavaScript is running on the client computer the one where the web page is being viewed) it is not allowed to access anything outside of the web page itself. No support for networking applications Use printers or other devices on the user's system or the client-side LAN
5
PRINCIPS OF CLIENT SIDE SCRIPTING - difference between java and javascript
Java and Javascript have almost nothing in common except for the name. Java was developed by Sun Microsystems. Javascript was invented by Brendan Eich at Netscape (with Navigator 2.0), and has appeared in all Netscape and Microsoft browsers since 1996.
6
PRINCIPS OF CLIENT SIDE SCRIPTING - javascript syntax
A JavaScript consists of JavaScript statements that are placed within the <script>... </script> HTML tags in a web page. The <script> tag alerts the browser program to begin interpreting all the text between these tags as a script. The script tag takes TWO important attributes: language: This attribute specifies what scripting language are used. Typically, its value will be javascript. type: This attribute indicate the scripting language in use and its value should be set to "text/javascript".
7
PRINCIPS OF CLIENT SIDE SCRIPTING - javascript syntax
Example of JavaScript segment. <html> <head> </head> <body> </body> </html> <script language="javascript" type="text/javascript"> </script> JavaScript code goes here…
8
PRINCIPS OF CLIENT SIDE SCRIPTING - javascript syntax
JavaScript ignores spaces, tabs, and newlines that appear in JavaScript programs. JavaScript allows to omit semicolon IF statements are each placed on a separate line. JavaScript is a case-sensitive language. Language keywords, variables, function names, and any other identifiers must always be typed with a consistent capitalization of letters. So identifiers Time, TIme and TIME will have different meanings in JavaScript.
9
PRINCIPS OF CLIENT SIDE SCRIPTING - javascript syntax
JavaScript supports both C-style and C++-style comments Comment Opening Comment Closing Description Example // single line // This is a comment /* */ multiple line * This is a comment <!-- //--> This is a comment
10
PRINCIPS OF CLIENT SIDE SCRIPTING - javascript syntax
JavaScript can be placed in HTML file in the following ways: Script in <head>...</head> section. Used for event based action Script in <body>...</body> and <head>...</head> sections. Used for scripts which suppose to run as the page loads so that the script generates content in the page Script in external file and then include in <head>...</head> section. Used when scripts are required in more than one page of it is of any significant size
11
PRINCIPS OF CLIENT SIDE SCRIPTING - script in <head>
PRINCIPS OF CLIENT SIDE SCRIPTING - script in <head>...</head> section. <html> <head> <script type="text/javascript"> <!— function sayHello() { alert("Hello World") } //--> </script> </head> <body> <input type="button" onclick="sayHello()" value="Say Hello" /> </body> </html>
12
PRINCIPS OF CLIENT SIDE SCRIPTING - script in <body>
PRINCIPS OF CLIENT SIDE SCRIPTING - script in <body>...</body> sections. <html> <head> </head> <body> <script type="text/javascript"> <!— document.write("Hello World") //--> </script> <p>This is web page body </p> </body> </html>
13
PRINCIPS OF CLIENT SIDE SCRIPTING - script in <body>
PRINCIPS OF CLIENT SIDE SCRIPTING - script in <body>...</body> and <head>...</head> sections. <html> <head> <script type="text/javascript"> <!-- function sayHello() { alert("Hello World") } //--> </script> </head> <body> document.write("Hello World") <input type="button" onclick="sayHello()" value="Say Hello" /> </body> </html>
14
PRINCIPS OF CLIENT SIDE SCRIPTING - Script in external file and include in <head>...</head> section. <html> <head> <script type="text/javascript" src="filename.js" ></script> </head> <body> </body> </html> Filename.js function sayHello() { alert("Hello World") }
15
OPERATION AND EXPRESSION - javascript data types
JavaScript allows you to work with THREE primitive data types: Numbers Ex: 123, Strings of text Ex:"This text string" Boolean Ex: true or false. Note : All numbers in JavaScript are represented as floating-point values.
16
OPERATION AND EXPRESSION - javascript variables
Variables can be thought of as named containers which holds a value that can be changed as required. Data can be placed into these containers and then referred by naming the container. Example: A website prompt users for their first name. When they enter their first name it can be stored in a variable for example, firstName. Now that the user's first name are assigned to a variable, it can be manipulated like display a personalized welcome message back to the user for example. By using a variable to store the user's first name, one piece of code for can be used for all users.
17
OPERATION AND EXPRESSION - declaring javascript variables
Variables are declared with the var keyword. When declaring a variable, a memory space is reserved for it. Such a space is empty until it is fill with a value. Storing a value in a variable is called variable initialisation. Variable initialisation can be done at the time of variable creation or later point in time when the variable is needed
18
OPERATION AND EXPRESSION - declaring javascript variables
Different methods of declaring JavaScript variable: // declaring one variable var firstName; // declaring multiple variables var firstName, lastName; // declaring and assigning value to one variable var firstName = 'Homer'; // declaring and assigning value to multiple variables var firstName = 'Homer', lastName = 'Simpson';
19
OPERATION AND EXPRESSION - javascript variables naming conventions
Avoid use of any JavaScript reserved keyword (Ex: break or boolean) JavaScript variable names should not start with a numeral (0-9). JavaScript variable names should start with a lowercase letter (a-z) Use underscores to separate a name with multiple words (Ex: my_var, strong_man, happy_coder, etc) No spaces and no punctuation characters (Ex: comma, full stop, etc)
20
OPERATION AND EXPRESSION - javascript reserved keywords
Reserved words as follows cannot be used as JavaScript variables, functions, methods, loop labels, or any object names: abstract boolean break byte case catch char class const continue debugger defaultdelete do doubleelse enum export extends false final finally float for function gotoif implements import ininstanceof int interface long native new nullpackage private protected publicreturn short static superswitch synchronized this throw throws transient truetry typeof var void volatile while with List 1: Javascript Reserved Keywords
21
OPERATION AND EXPRESSION - javascript operators
Operators are used to perform an operation (addition, subtraction, etc). There are different types of operators for different uses. JavaScript language supports following type of operators. Arithmetic Operators Comparision Operators Logical (or Relational) Operators Assignment Operators Conditional (or ternary) Operators
22
OPERATION AND EXPRESSION - arithmetic operators
DESCRIPTION + Adds two operands - Subtracts second operand from the first * Multiply both operands / Divide numerator by denumerator % Modulus Operator and remainder of after an integer division ++ Increment operator, increases integer value by one -- Decrement operator, decreases integer value by one
23
OPERATION AND EXPRESSION - operators precedence
JavaScript perform a calculation in specific order. The order in which these are evaluated is : * / % + - To change the order in calculation are preformed, use parenthesis ( ) as the contents of parenthesis are calculated before the contents outside the parenthesis. Example: 3 + 6 * 7 = 45 BUT ( ) * 7 = 63
24
OPERATION AND EXPRESSION - comparison operators
Following are comparison operators supported by JavaScript language: OPERATOR DESCRIPTION == Is equal to != Is not equal to > Greater than < Less than >= Greater than or equal to <= Less than or equal to
25
OPERATION AND EXPRESSION - logical operators
Following are logical operators supported by JavaScript language: OPERATOR DESCRIPTION && and || or ! not
26
OPERATION AND EXPRESSION - assignment operators
Following are comparison operators supported by JavaScript language: OPERATOR DESCRIPTION == Is equal to != Is not equal to > Greater than < Less than >= Greater than or equal to <= Less than or equal to
27
OPERATION AND EXPRESSION - conditional operators
Following are comparison operators supported by JavaScript language: OPERATOR DESCRIPTION EXAMPLE = Assign values from right to left side of operand C = A + B will assign value of A + B into C += Adds right operand to the left operand and assign the result to left operand C += A is equivalent to C = C + A -= Subtracts right operand from the left operand and assign the result to left operand C -= A is equivalent to C = C - A
Similar presentations
