Download presentation
Presentation is loading. Please wait.
1
>> JavaScript: Location, Functions and Objects
2
JavaScript Location in html
3
Web-based Systems | Misbhauddin
JavaScript Location <input type=button” onclick="alert(‘Hello');“/> Inline <script type=“text/javascript”> //Code goes here </script> Internal jsfile.js <script type=“text/javascript” src=“jsfile.js”></script> External Web-based Systems | Misbhauddin
4
JavaScript Location – Inline
<button onclick=“alert(‘Welcome’);" >Click Here</button> Event (can be other events too like onblur ……) Note: Cannot write longer JS statements / complete code Web-based Systems | Misbhauddin
5
JavaScript Location – Internal
Optional in HTML5 <script type=“text/javascript”> alert(‘Welcome’); </script> Web-based Systems | Misbhauddin
6
JavaScript Location inside HTML
<head> <title>JavaScript Location</title> </head> <body> </body> </html> <script type=“text/javascript”> </script> In the Head Functions are loaded before the buttons, links or other things that call them are loaded <script type=“text/javascript”> </script> In the Body Functions that needs running after the whole page (body) of the HTML is loaded Web-based Systems | Misbhauddin
7
JavaScript Location – External
script.js function test() { alert(‘Hello’); } Inside the head or the body tag <html> <head> <script src=“script.js”></script> </head> <body> </body> </html> Web-based Systems | Misbhauddin
8
FUNCTIONS in JS
9
Web-based Systems | Misbhauddin
Function Declaration Mainly used for event-handling in Web Development Can also be called from other functions (Reuse) You can use as many parameters as you like Can also return values (numbers, strings, Boolean) Use return statement SYNTAX keyword function name(param1, param2,…..) { } function name(parameters) { return b; } Web-based Systems | Misbhauddin
10
Web-based Systems | Misbhauddin
Functions in JS Named Functions Anonymous Functions Named Functions: Functions that are given a name so that we can call them later in the code. function area( width, height) { return width* height; } var size = area(3, 4); Function declaration Web-based Systems | Misbhauddin
11
Web-based Systems | Misbhauddin
Anonymous Functions Typically, after an = sign, the JavaScript interpreter expects to see an expression such as var sum = 1+2; expression If there is a function declared after the equal sign, this is called a function expression. In other words, it is function stored in a variable. Web-based Systems | Misbhauddin
12
Web-based Systems | Misbhauddin
Anonymous Functions var area = function( width, height) { return width* height; } var size = area(3, 4); Anonymous functions – functions created using the expression These are functions with no name Used mainly in calls and event handling Used to create immediately invoked expressions (next slide) Web-based Systems | Misbhauddin
13
Web-based Systems | Misbhauddin
Anonymous Functions An important use of anonymous function Immediately Invoked Function Expression (IIFE) Pronounced “iffy” They are executed once var area = (function( width, height) { return width* height; } () ); Grouping parenthesis – to treat it as an expression Final parenthesis – to call the function immediately Web-based Systems | Misbhauddin
14
Event Handling in JavaScript
Using onclick function Using the addEventListener() function button.onclick = function(){ } button.addEventListener(“click”, function(){ }); Note: Using addEventListener(), you can add as many listeners as possible. But this function has limited IE support Web-based Systems | Misbhauddin
15
Objects in JS
16
Web-based Systems | Misbhauddin
Object-Oriented JS JavaScript is Object-Oriented Properties They have a value Object Methods 'things that do something Example var abc = “Hello World”; abc.length; document.write(“Hello World”); method property Web-based Systems | Misbhauddin
17
Web-based Systems | Misbhauddin
Object Definition Objects Objects allow us to represent in code real world things and entities Such as a person or bank account SYNTAX keyword var object-name = { ………. } Web-based Systems | Misbhauddin
18
Key-Value: Properties of an Object
Each piece of information we include in an object is known as a property. Each property has a key, followed by : and then the value of that property SYNTAX Access value of a key keyword object-name[“key”]; or object-name.key var object-name = { key: value, } Note: Separate each property using a comma (,) and not a semicolon as in Java Key names can have quotations. But if there is a space in the name (first name), quotation is necessary Web-based Systems | Misbhauddin
19
Function Assignment to Objects
Methods A method is just like a function associated with an object SYNTAX keyword var object-name = { key: value, function-name: function() { } Access the function object-name.function-name(); Web-based Systems | Misbhauddin
20
Web-based Systems | Misbhauddin
this Keyword This keyword Used to refer to the current object inside the function in the object var hotel = { rooms: 50, booked: 30, checkAvailability: function() { return this.rooms – this.booked; } Web-based Systems | Misbhauddin
21
Web-based Systems | Misbhauddin
Exercise Create and Initialize a JavaScript Object with the following details Function called “updateGPA” that should take one parameter and update the GPA of mohammed to the new GPA from the given parameter. KEY VALUE Name Mohammed GPA 3.75 Web-based Systems | Misbhauddin
Similar presentations
