SlideShare a Scribd company logo
1 of 7
Why Study JavaScript?
JavaScript is one of the 3 languages all web developers must learn:
1. HTML to define the content of web pages
2. CSS to specify the layout of web pages
3. JavaScript to program the behavior of web pages
This tutorial is about JavaScript, and how JavaScript works with HTML and
CSS.
JavaScript Assignment Operators
Assignment operators are used to assign values to JavaScript variables.
Operator Example Same As
= x = y x = y
+= x += y x = x + y
-= x -= y x = x - y
*= x *= y x = x * y
/= x /= y x = x / y
%= x %= y x = x % y
JavaScript Arithmetic Operators
Arithmetic operators are used to perform arithmetic between variables
and/or values.
Operator Description
+ Addition
- Subtraction
* Multiplication
/ Division
% Modulus
++ Increment
-- Decrement
The addition operator (+) adds a value:
JavaScript Data Types
JavaScript variables can hold many data types: numbers, strings,
arrays, objects and more:
var length = 16; // Number
var lastName = "Johnson"; // String
var cars = ["Saab", "Volvo", "BMW"]; // Array
var x = {firstName:"John", lastName:"Doe"}; // Object
JavaScript Booleans
Booleans can only have two values: true or false.
Example
var x = true;
var y = false;
JavaScript Arrays
JavaScript arrays are written with square brackets.
Array items are separated by commas.
The following code declares (creates) an array called cars, containing
three items (car names):
Example
var cars = ["Saab", "Volvo", "BMW"];
JavaScript Objects
JavaScript objects are written with curly braces.
Object properties are written as name:value pairs, separated by commas.
Example
var person = {firstName:"John", lastName:"Doe", age:50,
eyeColor:"blue"};
onClick:
<INPUT TYPE="submit" NAME="mysubmit" VALUE="Submit"
onClick="return confirm(`Are you sure you want to submit the form?')">
<SCRIPT>
function valid(form) {
var input = form.data.value;
alert("Hello " + input + " ! Welcome...");
}
</SCRIPT>
</HEAD>
<BODY>
<H3> Example of onClick Event Handler </H3>
Click on the button after inputting your name into the text box:<BR>
<FORM>
<INPUT TYPE="text" NAME="data">
<INPUT TYPE="button" VALUE="Click
Here" onClick="valid(this.form)">
</FORM>
</BODY>
</HTML>
onFocus:
<BODY BGCOLOR="#ffffff" onFocus="document.bgcolor='#000000'">
HTML>
<HEAD><TITLE>Example of onFocus Event Handler</TITLE></HEAD>
<BODY>
<H3>Example of onFocus Event Handler</H3>
Click your mouse in the text box:<BR>
<FORM>
<INPUT TYPE="text" onFocus='alert("You focused in the textbox!!")'>
</FORM>
</BODY>
</HTML>
In the above example, when you put your mouse on the text box, an alert()
message displays a message.
onLoad:
<IMG SRC="images/object.gif" NAME="jsobjects"
onLoad="alert('You loaded myimage')">
<HTML>
<HEAD>
<TITLE>Example of onLoad Event Handler</TITLE>
<SCRIPT>
function hello() {
alert("Hello there...nnThis is an example of onLoad.");
}
</SCRIPT>
</HEAD>
<BODY onLoad="hello()">
<H3>Example of onLoad Event Handler</H3>
</BODY>
</HTML>
The exampl
onMouseOver:
<MAP NAME="mymap">
<AREA NAME="FirstArea" COORDS="0,0,49,25" HREF="mylink.html"
onMouseOver="self.status='This will take you to
mylink.html'; return true">
</MAP>
HTML>
<HEAD><TITLE>Example of onMouseOver Event
Handler</TITLE></HEAD>
<BODY>
<H3>Example of onMouseOver Event Handler</H3>
Put your mouse over
<A HREF="javascript:void('');"
onMouseOver="window.status='Hello! How are you?'; return true;">
here
</A>
and look at the status bar
(usually at the bottom of your browser window).
</BODY>
</HTML>
onSubmit:
<HTML>
<HEAD><TITLE> Example of onSubmit Event Handler </TITLE></HEAD>
<BODY>
<H3>Example of onSubmit Event Handler </H3>
Type your name and press the button<BR>
<FORM NAME="myform" onSubmit="alert('Thank you ' +
myform.data.value +'!')">
<INPUT TYPE="text" NAME="data">
<INPUT TYPE="submit" VALUE="Submit this form">
</FORM>
</BODY>
<HTML>
onUnload:
<SCRIPT>
function goodbye() {
alert("Thanks for Visiting!");
}
</SCRIPT>
</HEAD>
<BODY onUnLoad="goodbye();">
<H3>Example of onUnload Event Handler</H3>
Look what happens when you try to leave this page...
</BODY>
</HTML>
EVENT HANDLER USED WITH
onAbort image
onBlur select, text, text area
onChange select, text, textarea
onClick button, checkbox, radio, link, reset, submit, area
onError image
onFocus select, text, textarea
onLoad windows, image
onMouseOut link, area
onMouseOver link, area
onSelect text, textarea
onSubmit form
onUnload window

More Related Content

What's hot

Load image of choice karan chanana
Load image of choice karan chananaLoad image of choice karan chanana
Load image of choice karan chananakaranchanan
 
Database Management - Lecture 3 - SQL Aggregate Functions, Join
Database Management - Lecture 3 - SQL Aggregate Functions, JoinDatabase Management - Lecture 3 - SQL Aggregate Functions, Join
Database Management - Lecture 3 - SQL Aggregate Functions, JoinAl-Mamun Sarkar
 
HTML Powerpoint-Jeffrey C. Johnson III
HTML Powerpoint-Jeffrey C. Johnson IIIHTML Powerpoint-Jeffrey C. Johnson III
HTML Powerpoint-Jeffrey C. Johnson IIIjeffcarlj
 
Angular Reactive Forms vs React Redux Form
Angular Reactive Forms vs React Redux Form Angular Reactive Forms vs React Redux Form
Angular Reactive Forms vs React Redux Form Briisk
 
Html basics 11 form validation
Html basics 11 form validationHtml basics 11 form validation
Html basics 11 form validationH K
 

What's hot (9)

Update statement in PHP
Update statement in PHPUpdate statement in PHP
Update statement in PHP
 
Validation
ValidationValidation
Validation
 
Load image of choice karan chanana
Load image of choice karan chananaLoad image of choice karan chanana
Load image of choice karan chanana
 
17. delete data
17. delete data17. delete data
17. delete data
 
Database Management - Lecture 3 - SQL Aggregate Functions, Join
Database Management - Lecture 3 - SQL Aggregate Functions, JoinDatabase Management - Lecture 3 - SQL Aggregate Functions, Join
Database Management - Lecture 3 - SQL Aggregate Functions, Join
 
HTML Powerpoint-Jeffrey C. Johnson III
HTML Powerpoint-Jeffrey C. Johnson IIIHTML Powerpoint-Jeffrey C. Johnson III
HTML Powerpoint-Jeffrey C. Johnson III
 
Xamarin Forms in Action
Xamarin Forms in ActionXamarin Forms in Action
Xamarin Forms in Action
 
Angular Reactive Forms vs React Redux Form
Angular Reactive Forms vs React Redux Form Angular Reactive Forms vs React Redux Form
Angular Reactive Forms vs React Redux Form
 
Html basics 11 form validation
Html basics 11 form validationHtml basics 11 form validation
Html basics 11 form validation
 

Viewers also liked

Xedapp demo - Excel sheet updates using Xedapp
Xedapp demo  - Excel sheet updates using XedappXedapp demo  - Excel sheet updates using Xedapp
Xedapp demo - Excel sheet updates using XedappXedapp
 
PDQ Programming Languages plus an overview of Alice - Frank Ducrest
PDQ Programming Languages plus an overview of Alice - Frank DucrestPDQ Programming Languages plus an overview of Alice - Frank Ducrest
PDQ Programming Languages plus an overview of Alice - Frank DucrestMatthew Turland
 
Computer generations & languages
Computer generations & languagesComputer generations & languages
Computer generations & languagesRajat Sharma
 
R programming language: conceptual overview
R programming language: conceptual overviewR programming language: conceptual overview
R programming language: conceptual overviewMaxim Litvak
 
Computer Languages....ppt
Computer Languages....pptComputer Languages....ppt
Computer Languages....ppthashgeneration
 

Viewers also liked (7)

Xedapp demo - Excel sheet updates using Xedapp
Xedapp demo  - Excel sheet updates using XedappXedapp demo  - Excel sheet updates using Xedapp
Xedapp demo - Excel sheet updates using Xedapp
 
PDQ Programming Languages plus an overview of Alice - Frank Ducrest
PDQ Programming Languages plus an overview of Alice - Frank DucrestPDQ Programming Languages plus an overview of Alice - Frank Ducrest
PDQ Programming Languages plus an overview of Alice - Frank Ducrest
 
Computer generations & languages
Computer generations & languagesComputer generations & languages
Computer generations & languages
 
Rf.cwla5 s11.1
Rf.cwla5 s11.1Rf.cwla5 s11.1
Rf.cwla5 s11.1
 
C++ nots
C++ notsC++ nots
C++ nots
 
R programming language: conceptual overview
R programming language: conceptual overviewR programming language: conceptual overview
R programming language: conceptual overview
 
Computer Languages....ppt
Computer Languages....pptComputer Languages....ppt
Computer Languages....ppt
 

Similar to Why study java script (20)

phptut2
phptut2phptut2
phptut2
 
phptut2
phptut2phptut2
phptut2
 
phptut2
phptut2phptut2
phptut2
 
phptut2
phptut2phptut2
phptut2
 
Javascript
JavascriptJavascript
Javascript
 
JavaScript Training
JavaScript TrainingJavaScript Training
JavaScript Training
 
Webtechnology lab
Webtechnology labWebtechnology lab
Webtechnology lab
 
lect4
lect4lect4
lect4
 
lect4
lect4lect4
lect4
 
Javascript
JavascriptJavascript
Javascript
 
Lab final
Lab finalLab final
Lab final
 
GDI Seattle - Intro to JavaScript Class 4
GDI Seattle - Intro to JavaScript Class 4GDI Seattle - Intro to JavaScript Class 4
GDI Seattle - Intro to JavaScript Class 4
 
Java script
Java scriptJava script
Java script
 
1cst
1cst1cst
1cst
 
JavaScript
JavaScriptJavaScript
JavaScript
 
Scripting languages
Scripting languagesScripting languages
Scripting languages
 
Borrador del blog
Borrador del blogBorrador del blog
Borrador del blog
 
HTML
HTML HTML
HTML
 
HTML and CSS part 2
HTML and CSS part 2HTML and CSS part 2
HTML and CSS part 2
 
Java script events
Java script  eventsJava script  events
Java script events
 

More from dharmendra kumar (17)

Windows xp
Windows xpWindows xp
Windows xp
 
Web hosting
Web hostingWeb hosting
Web hosting
 
Tally note
Tally noteTally note
Tally note
 
Programm
ProgrammProgramm
Programm
 
Pgdca 2nd sem
Pgdca 2nd semPgdca 2nd sem
Pgdca 2nd sem
 
Pc package
Pc packagePc package
Pc package
 
Page maker
Page makerPage maker
Page maker
 
Ms access
Ms accessMs access
Ms access
 
Linux
LinuxLinux
Linux
 
Imp
ImpImp
Imp
 
Html and internet
Html and internetHtml and internet
Html and internet
 
Dos ckass nots
Dos ckass notsDos ckass nots
Dos ckass nots
 
Cosumer
CosumerCosumer
Cosumer
 
Computer basic course
Computer basic courseComputer basic course
Computer basic course
 
Adwance
AdwanceAdwance
Adwance
 
Account
AccountAccount
Account
 
Account1
Account1Account1
Account1
 

Why study java script

  • 1. Why Study JavaScript? JavaScript is one of the 3 languages all web developers must learn: 1. HTML to define the content of web pages 2. CSS to specify the layout of web pages 3. JavaScript to program the behavior of web pages This tutorial is about JavaScript, and how JavaScript works with HTML and CSS. JavaScript Assignment Operators Assignment operators are used to assign values to JavaScript variables. Operator Example Same As = x = y x = y += x += y x = x + y -= x -= y x = x - y *= x *= y x = x * y /= x /= y x = x / y %= x %= y x = x % y
  • 2. JavaScript Arithmetic Operators Arithmetic operators are used to perform arithmetic between variables and/or values. Operator Description + Addition - Subtraction * Multiplication / Division % Modulus ++ Increment -- Decrement The addition operator (+) adds a value: JavaScript Data Types JavaScript variables can hold many data types: numbers, strings, arrays, objects and more: var length = 16; // Number var lastName = "Johnson"; // String var cars = ["Saab", "Volvo", "BMW"]; // Array var x = {firstName:"John", lastName:"Doe"}; // Object JavaScript Booleans Booleans can only have two values: true or false. Example
  • 3. var x = true; var y = false; JavaScript Arrays JavaScript arrays are written with square brackets. Array items are separated by commas. The following code declares (creates) an array called cars, containing three items (car names): Example var cars = ["Saab", "Volvo", "BMW"]; JavaScript Objects JavaScript objects are written with curly braces. Object properties are written as name:value pairs, separated by commas. Example var person = {firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"}; onClick: <INPUT TYPE="submit" NAME="mysubmit" VALUE="Submit" onClick="return confirm(`Are you sure you want to submit the form?')"> <SCRIPT> function valid(form) { var input = form.data.value; alert("Hello " + input + " ! Welcome..."); } </SCRIPT> </HEAD>
  • 4. <BODY> <H3> Example of onClick Event Handler </H3> Click on the button after inputting your name into the text box:<BR> <FORM> <INPUT TYPE="text" NAME="data"> <INPUT TYPE="button" VALUE="Click Here" onClick="valid(this.form)"> </FORM> </BODY> </HTML> onFocus: <BODY BGCOLOR="#ffffff" onFocus="document.bgcolor='#000000'"> HTML> <HEAD><TITLE>Example of onFocus Event Handler</TITLE></HEAD> <BODY> <H3>Example of onFocus Event Handler</H3> Click your mouse in the text box:<BR> <FORM> <INPUT TYPE="text" onFocus='alert("You focused in the textbox!!")'> </FORM> </BODY> </HTML> In the above example, when you put your mouse on the text box, an alert() message displays a message. onLoad: <IMG SRC="images/object.gif" NAME="jsobjects" onLoad="alert('You loaded myimage')"> <HTML> <HEAD> <TITLE>Example of onLoad Event Handler</TITLE> <SCRIPT>
  • 5. function hello() { alert("Hello there...nnThis is an example of onLoad."); } </SCRIPT> </HEAD> <BODY onLoad="hello()"> <H3>Example of onLoad Event Handler</H3> </BODY> </HTML> The exampl onMouseOver: <MAP NAME="mymap"> <AREA NAME="FirstArea" COORDS="0,0,49,25" HREF="mylink.html" onMouseOver="self.status='This will take you to mylink.html'; return true"> </MAP> HTML> <HEAD><TITLE>Example of onMouseOver Event Handler</TITLE></HEAD> <BODY> <H3>Example of onMouseOver Event Handler</H3> Put your mouse over <A HREF="javascript:void('');" onMouseOver="window.status='Hello! How are you?'; return true;"> here </A> and look at the status bar (usually at the bottom of your browser window). </BODY> </HTML> onSubmit:
  • 6. <HTML> <HEAD><TITLE> Example of onSubmit Event Handler </TITLE></HEAD> <BODY> <H3>Example of onSubmit Event Handler </H3> Type your name and press the button<BR> <FORM NAME="myform" onSubmit="alert('Thank you ' + myform.data.value +'!')"> <INPUT TYPE="text" NAME="data"> <INPUT TYPE="submit" VALUE="Submit this form"> </FORM> </BODY> <HTML> onUnload: <SCRIPT> function goodbye() { alert("Thanks for Visiting!"); } </SCRIPT> </HEAD> <BODY onUnLoad="goodbye();"> <H3>Example of onUnload Event Handler</H3> Look what happens when you try to leave this page... </BODY> </HTML> EVENT HANDLER USED WITH onAbort image onBlur select, text, text area onChange select, text, textarea onClick button, checkbox, radio, link, reset, submit, area onError image
  • 7. onFocus select, text, textarea onLoad windows, image onMouseOut link, area onMouseOver link, area onSelect text, textarea onSubmit form onUnload window