CHAPTER 4 CLIENT SIDE SCRIPTING PART 1 OF 3

Slides:



Advertisements
Similar presentations
Introducing JavaScript
Advertisements

Java Script Session1 INTRODUCTION.
The Web Warrior Guide to Web Design Technologies
1 Chapter 2 Introduction to Java Applications Introduction Java application programming Display ____________________ Obtain information from the.
IntroductionIntroduction  Computer program: an ordered sequence of statements whose objective is to accomplish a task.  Programming: process of planning.
1 Outline 13.1Introduction 13.2A Simple Program: Printing a Line of Text in a Web Page 13.3Another JavaScript Program: Adding Integers 13.4Memory Concepts.
 2008 Pearson Education, Inc. All rights reserved JavaScript: Introduction to Scripting.
JavaScript, Third Edition
2012 •••••••••••••••••••••••••••••••••• Summer WorkShop Mostafa Badr
Introduction to scripting
JavaScript, Fifth Edition Chapter 1 Introduction to JavaScript.
JavaScript – Part II Data Types and Operations George Mason University June 3, 2010.
 2001 Prentice Hall, Inc. All rights reserved. 1 Chapter 7 - JavaScript: Introduction to Scripting Outline 7.1 Introduction 7.2 Simple Program: Printing.
Internet & World Wide Web How to Program, 5/e © by Pearson Education, Inc. All Rights Reserved.
2440: 211 Interactive Web Programming Expressions & Operators.
Introduction to Programming David Goldschmidt, Ph.D. Computer Science The College of Saint Rose Java Fundamentals (Comments, Variables, etc.)
Introduction to Java Applications Part II. In this chapter you will learn:  Different data types( Primitive data types).  How to declare variables?
TUTORIAL 10: PROGRAMMING WITH JAVASCRIPT Session 2: What is JavaScript?
C Derived Languages C is the base upon which many build C++ conventions also influence others *SmallTalk is where most OOP comes Java and Javascript have.
Introduction.  The scripting language most often used for client-side web development.  Influenced by many programming languages, easier for nonprogrammers.
 Pearson Education, Inc. All rights reserved Introduction to Java Applications.
Overview of Form and Javascript fundamentals. Brief matching exercise 1. This is the software that allows a user to access and view HTML documents 2.
ECA 225 Applied Interactive Programming1 ECA 225 Applied Online Programming basics.
Internet & World Wide Web How to Program, 5/e © by Pearson Education, Inc. All Rights Reserved.
 2000 Deitel & Associates, Inc. All rights reserved. Outline 8.1Introduction 8.2A Simple Program: Printing a Line of Text in a Web Page 8.3Another JavaScript.
Internet & World Wide Web How to Program, 5/e © by Pearson Education, Inc. All Rights Reserved.
 2008 Pearson Education, Inc. All rights reserved JavaScript: Introduction to Scripting.
Internet & World Wide Web How to Program, 5/e © by Pearson Education, Inc. All Rights Reserved.
CGS 3066: Web Programming and Design Spring 2016 Introduction to JavaScript.
REEM ALMOTIRI Information Technology Department Majmaah University.
1 Agenda  Unit 7: Introduction to Programming Using JavaScript T. Jumana Abu Shmais – AOU - Riyadh.
JavaScript Tutorial First lecture 19/2/2016. Javascript is a dynamic computer programming language. It is lightweight and most commonly used as a part.
CGS 3066: Web Programming and Design Spring 2017
Java Script Introduction. Java Script Introduction.
Chapter 6 JavaScript: Introduction to Scripting
Chapter 4 Assignment Statement
CHAPTER 5 SERVER SIDE SCRIPTING
CHAPTER 4 CLIENT SIDE SCRIPTING PART 3 OF 3
JavaScript is a programming language designed for Web pages.
Yanal Alahmad Java Workshop Yanal Alahmad
CS180 – Week 1 Lecture 3: Foundation Ismail abumuhfouz.
Variables and Arithmetic Operators in JavaScript
JAVASCRIPT INTERVIEW QUESTIONS & ANSWERS.
Introduction to Scripting
Chapter 3 Assignment Statement
JavaScript.
JavaScript an introduction.
Introduction to C++ Programming
Variables and Arithmetic Operators in JavaScript
WEB PROGRAMMING JavaScript.
INFO/CSE 100, Spring 2005 Fluency in Information Technology
T. Jumana Abu Shmais – AOU - Riyadh
INFO/CSE 100, Spring 2006 Fluency in Information Technology
Units with – James tedder
Units with – James tedder
CS105 Introduction to Computer Concepts
elementary programming
Tutorial 10 Programming with JavaScript
JavaScript CS 4640 Programming Languages for Web Applications
Tutorial 10: Programming with javascript
JavaScript Basics What is JavaScript?
Introducing JavaScript
JavaScript is a scripting language designed for Web pages by Netscape.
JavaScript: Introduction to Scripting
Software Engineering for Internet Applications
Web Programming– UFCFB Lecture 13
Chap 2. Identifiers, Keywords, and Types
Web Programming and Design
CS105 Introduction to Computer Concepts JavaScript
JavaScript CS 4640 Programming Languages for Web Applications
Presentation transcript:

CHAPTER 4 CLIENT SIDE SCRIPTING PART 1 OF 3 Madam Hazwani binti Rahmat http://fsktm2.uthm.edu.my/hazwani/v2/

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

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.

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 

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.

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".

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…

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.

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

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

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>

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>

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>

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") }

OPERATION AND EXPRESSION - javascript data types JavaScript allows you to work with THREE primitive data types: Numbers Ex: 123, 120.50 Strings of text Ex:"This text string" Boolean Ex: true or false. Note : All numbers in JavaScript are represented as floating-point values.

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.

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

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';

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)

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

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

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

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 ( 3 + 6 ) * 7 = 63

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

OPERATION AND EXPRESSION - logical operators Following are logical operators supported by JavaScript language: OPERATOR DESCRIPTION && and || or ! not

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

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