JavaScript for web development
-
Upload
ifour-institute-sustainable-learning -
Category
Technology
-
view
49 -
download
2
Transcript of JavaScript for web development
iFour Consultancy
JavaScript
Introduction to JavaScriptUses of JavaScriptWhere to use JavaScriptExternal JavaScriptObject HierarchyJavaScript ObjectsJavaScript EventsDatatypesOperatorsControl StructureArraysFunctions
INDEX
http://www.ifourtechnolab.com/ ASP.NET Software Development Companies India
Introduction To JavaScript
What is JavaScript? • Programming language of the web• Object based (not object oriented) programming language• All modern HTML pages are using JavaScript• Easy to learn• Most popular programming language in the world• The HTML DOM (the Document Object Model) is the official W3C standard for accessing HTML
elements• It can manipulate the DOM (change HTML contents)• The method document.getElementById() is one of many methods in the HTML DOM
•A markup language is a set of markup tags •A markup language is a set of markup tags
http://www.ifourtechnolab.com/ ASP.NET Software Development Companies India
Where did it came from
Originally called LiveScript at Netscape• Started out to be a server side scripting language for providing database connectivity and
dynamic HTML generation on Netscape Web Servers• Netscape decided it would be a good thing for their browsers and servers to speak the same
language so it got included in Navigator• Netscape in alliance w/Sun jointly announced the language and its new name JavaScript• Because of rapid acceptance by the web community Microsoft forced to include in IE Browser
http://www.ifourtechnolab.com/ ASP.NET Software Development Companies India
Uses of JavaScript Change HTML Elements Text Animation Graphic Animation Client-side forms data validation (relieving the server of this task) Create new HTML Elements Copy and Clone HTML Elements Delete HTML Elements Web site navigation
http://www.ifourtechnolab.com/ ASP.NET Software Development Companies India
Where to use JavaScript In HTML, JavaScript's must be inserted between <script> and </script> tags It can be put in the <body> and in the <head> section of an HTML page To insert a JavaScript into an HTML page, use the <script> tag The <script> and </script> tells where the JavaScript starts and ends The lines between <script> and </script> contain the JavaScript code <script language=…. src=……></ script > The <script> tag indicates to the browser the beginning of an embedded script; </ script >
indicates the end of an embedded script The “language” attribute indicates the script processor to be used The “src” attribute indicates the URL of a file on the server containing the script to be
embedded
http://www.ifourtechnolab.com/ ASP.NET Software Development Companies India
Scripts can also be placed in external files External scripts are practical when the same code is used in many different web pages JavaScript files have the file extension .js To use an external script, put the name of the script file in the source (src) attribute of the
<script> tag You can place an external script reference in <head> or <body> as you like The script will behave as if it was located exactly where you put the reference in the HTML
document
External JavaScript
http://www.ifourtechnolab.com/ ASP.NET Software Development Companies India
Object Hierarchy
window
link anchor layer form applet image area
history document location link
Text Radio Button FileUpload Select
Textarea
Password
checkbox Reset
Submit
Option
http://www.ifourtechnolab.com/ ASP.NET Software Development Companies India
JavaScript Objects
window - the current browser window window.history - the Netscape history list window.document - the html document currently in the browser client area window.location - the browser location field window.toolbar - the browser toolbar window.document.link - an array containing all of the links in the document window.document.anchor - an array of all the anchor points in the document Window.document.layer - a named document layer window.document.applet - a named java applet area window.document.image- a named image tag window.document.area - a named area window.document.form - a named form or the default form, etc
http://www.ifourtechnolab.com/ ASP.NET Software Development Companies India
A few examples
window.location = “http://www.yahoo.com”• will take you to the specified URL (like a goto)
window.history.back()• back() is a method on history• will be like clicking the back button in Nav 3 • in Nav 4 will take you back to previous window
window.history.goto(1)• takes you back to first URL in history array
http://www.ifourtechnolab.com/ ASP.NET Software Development Companies India
JavaScript Events onAbort onBlur onChange onClick onError onFocus onLoad onMouseOut onMouseOver onReset onSelect onSubmit onUnload
http://www.ifourtechnolab.com/ ASP.NET Software Development Companies India
onAbort
Activated when a user aborts the loading of an image
<img name=ball src=images/ball.gif onAbort=“alert(‘You missed a nice picture’)”>
http://www.ifourtechnolab.com/ ASP.NET Software Development Companies India
onBlur
Used with frame, select, text, textarea and window objects Invoked when an object loses the focus Use with select, text and textarea for data validation
http://www.ifourtechnolab.com/ ASP.NET Software Development Companies India
onChange
Used with select, text and textarea objects Use instead of onBlur to validate only if a value has changed
<form>
Color: <select onChange=“processSelection()”>
<option value=“R”>Red
<option value=“G”>Green
<option value=“B”>Blue
</select>
</form>
http://www.ifourtechnolab.com/ ASP.NET Software Development Companies India
onError
Used with image and window objects to invoke a handler if an error occurs while an image or window is loading
Setting window.onerror = null will prevent users from seeing JavaScript generated errors
http://www.ifourtechnolab.com/ ASP.NET Software Development Companies India
onClick
Used with button, checkbox, link, radio, reset, and submit objects
<input type=button name=btn1 value=“Click Me” onClick=“alert(‘button was clicked’;” >
http://www.ifourtechnolab.com/ ASP.NET Software Development Companies India
onFocus
Used with frame, select, text, textarea and window objects Just the opposite of onBlur; i.e. invoked when the object gets focus
<body bgcolor=“lightgrey” onBlur=“document.bgColor=‘black’ onFocus=“document.bgColor=‘white’” >
http://www.ifourtechnolab.com/ ASP.NET Software Development Companies India
onLoad
Used with window, frame and image objects (use with <body ….><frameset ….> and <img ...>)
<img name=spinball src=images/spinball.gig onLoad=“startAnimation(this)”>
http://www.ifourtechnolab.com/ ASP.NET Software Development Companies India
onMouseOut and onMouseOver
Used with area and link objects User moves mouse off of an area or link
<map name=flower>
<area name=top coords=“0,0,200,300 href=“javascript:displayMessage()” onMouseOver=“self.status=‘when you see this message click your left mouse button’ ; return true” onMouseOut=“self.status = ‘’ ; return true”>
http://www.ifourtechnolab.com/ ASP.NET Software Development Companies India
onReset
Used with form objects
<form onReset=“alert(‘the form has been reset’)” >
http://www.ifourtechnolab.com/ ASP.NET Software Development Companies India
onSelect
Used with text and textarea objects run some JavaScript whenever a user selects a piece of text in a text or textarea object
<input type=text name=line onSelect=“showHelp()” >
http://www.ifourtechnolab.com/ ASP.NET Software Development Companies India
onSubmit
Use with form objects to run a handler whenever a form has been submitted Useful to validate all fields prior to actual submission
http://www.ifourtechnolab.com/ ASP.NET Software Development Companies India
onUnload
Just like onLoad but the handler is run when the window/frame is exited
<body onUnload=“cleanup()” >
http://www.ifourtechnolab.com/ ASP.NET Software Development Companies India
JavaScript Data Types
Dynamic typing : JavaScript is a loosely typed or a dynamic language. That means you don't have to
declare the type of a variable ahead of time. The type will get determined automatically while the program is being processed. JS var
will behave according to the type of value assigned to it. No special type have to be defined. That also means that you can have the same variable as different types:
var foo = 42; // foo is now a Number var foo = "bar"; // foo is now a String var foo = true; // foo is now a Boolean
http://www.ifourtechnolab.com/ ASP.NET Software Development Companies India
JavaScript Data Types (Cont.)
The latest ECMAScript standard defines seven data types: Six data types that are primitives:
Boolean Null Undefined Number String Symbol (new in ECMAScript 6) And Object
http://www.ifourtechnolab.com/ ASP.NET Software Development Companies India
JavaScript Operators
JavaScript's numeric operators are +, -, *, / and % — which is the remainder operator (which is not the same as modulo.) Values are assigned using =, and there are also compound assignment statements such as += and -=. x += 5 x = x + 5
You can use ++ and -- to increment and decrement respectively. These can be used as prefix or postfix operators
The + operator also does string concatenation: var a = "hello" + " world"; // "hello world"
http://www.ifourtechnolab.com/ ASP.NET Software Development Companies India
JavaScript Operators (Cont.)
If you add a string to a number (or other value) everything is converted in to a string first. This might catch you up: "3" + 4 + 5; // "345" 3 + 4 + "5"; // "75"
Comparisons in JavaScript can be made using <, >, <= and >=. These work for both strings and numbers. Equality is a little less straightforward. The double-equals operator performs type coercion if you give it different types, with sometimes interesting results. 123 == "123"; // true 1 == true; // true
To avoid type coercion and make sure your comparisons are always accurate, you should always use the triple-equals operator: 123 == "123"; // false 1 == true; // false
http://www.ifourtechnolab.com/ ASP.NET Software Development Companies India
JavaScript Control Structures
JavaScript has a similar set of control structures to other languages in the C family. Conditional statements are supported by if and else; you can chain them together if you like:var name = "kittens";if (name == "puppies") {
name += "!";} else if (name == "kittens") {
name += "!!";}else {
name = "!" + name;}
http://www.ifourtechnolab.com/ ASP.NET Software Development Companies India
JavaScript Control Structures(Cont.)
The switch statement can be used for multiple branches based on a number or string:switch (action) { case ‘draw’:
drawIt();break;
case ‘eat’:eatIt();break;
default:doNothing();
}
If you don't add a break statement, execution will "fall through" to the next level. This is very rarely what you want — in fact it's worth specifically labeling deliberate fall through with a comment if you really meant it to aid debugging:
http://www.ifourtechnolab.com/ ASP.NET Software Development Companies India
JavaScript Control Structures(Cont.)
JavaScript's for loop is the same as that in C and Java: it lets you provide the control information for your loop on a single line.for (var i = 0; i < 5; i++) { // Will execute 5 times }
JavaScript also contains two other prominent for loops:for (let value of array) {// do something with value}and for in : for (let property in object) {// do something with object property }
http://www.ifourtechnolab.com/ ASP.NET Software Development Companies India
JavaScript Objects
There are two basic ways to create an empty object: var obj = new Object(); var obj = {};
These are semantically equivalent; the second is called object literal syntax, and is more convenient. This syntax is also the core of JSON format and should be preferred at all times
Object literal syntax can be used to initialize an object in its entirety:var obj = {name: "Carrot","for": "Max",details: {
color: "orange",size: 12}
}
http://www.ifourtechnolab.com/ ASP.NET Software Development Companies India
JavaScript Arrays
A special type of object. They work very much like regular objects (numerical properties can naturally be accessed only using [] syntax) but they have one magic property called 'length'. This is always one more than the highest index in the array.
One way of creating arrays is as follows:var a = new Array();a[0] = "dog";a[1] = "cat";a[2] = "hen";a.length; // 3
A more convenient notation is to use an array literal:var a = ["dog", "cat", "hen"];a.length; // 3
http://www.ifourtechnolab.com/ ASP.NET Software Development Companies India
JavaScript Functions
Along with objects, functions are the core component in understanding JavaScript. The most basic function couldn't be much simpler:function add(x, y) {
var total = x + y;return total;
}
It can take 0 or more named parameters. Function body can contain as many statements as you like, and can declare its own variables which are local
to that function. The return statement can be used to return a value at any time, terminating the function. If no return
statement is used (or an empty return with no value), JavaScript returns undefined.add(); // NaN // You can't perform addition on undefinedadd(2, 3, 4); // 5 // added the first two; 4 was ignored
http://www.ifourtechnolab.com/ ASP.NET Software Development Companies India
http://www.w3schools.com/js/ https://www.tutorialspoint.com/javascript/
References
http://www.ifourtechnolab.com/ ASP.NET Software Development Companies India
Questions?
http://www.ifourtechnolab.com/ ASP.NET Software Development Companies India