java script

WEB FRAMEWORKS 1Monica Deshmane(H.V.Desai College,Pune)

Syllabus : What we learn? See link - https://prezi.com/view/NNmyKQS4eeL9lz89bQyz/  Javascript basics  Introduction to Node JS (framework to run JS without browser anywhere) • Node JS Modules • NPM • Web Server • File system • Events • Databases • Express JS  Introduction to DJango (quick & easy to develop app with minimum code)  Setup  URL pattern  Forms &Validation Monica Deshmane(H.V.Desai College,Pune) 2

chap 1 Java Script Basics 1.1 Java Script data types 1.2 Variables, Functions, Events, Regular Expressions 1.3 Array and Objects in Java Script 1.4 Java Script HTML DOM 1.5 Promises and Callbacks

Introduction JavaScript is the scripting language for HTML and understood by the Web. JavaScript is easy to learn. JavaScript is made up of the 3 languages : 1. HTML for look & Feel. 2. CSS to specify the layout or style. 3. JavaScript for Event Handling.

The <script> Tag Ex. How to write JS? <script type="text/javascript"> var i = 10; if (i < 5) { // some code } </script>

The <script> Tag Attributes of <script> 1. async- script is executed asynchronously (only for external scripts) 2. charset –charset Specifies the character encoding format. 3. defer -Specifies that script is executed when the page has finished parsing 4. src - Specifies the URL of an external script file 5. type - Specifies the media type of the script 6. Lang- To specify which language to use.

The <script> Tag in < Body> Script gets executed automatcally when program runs or we can call by function call. <html> <body> <p id=“p1">A Paragraph</p> <Input type="button" onclick="myFunction()“ value=“change”> <script> function myFunction() { document.getElementById(“p1").innerHTML = "Paragraph changed."; } </script> </body> </html>

The <script> Tag in < Head> The function must be invoked (called) when event occurs . Ex. button is clicked: <html> <head> <script> function myFunction() { document.getElementById(“p1").innerHTML = "Paragraph changed."; } </script></head> <body> <p id=“p1">A Paragraph</p> <Input type="button" onclick="myFunction()">Try it</Input> </body></html> https://www.w3schools.com/js/tryit.asp?filename=tryjs_intro_inner_html

Java Script data types 1) String var Name = “parth"; // String 2) Number var length = 36; // Number 3) Boolean Booleans can only have two values: true or false. 4) Undefined var x = 5; var y = 5; (x == y) // Returns true typeof (3) // Returns "number" to return data type of variable typeof undefined // undefined monica Deshmane(H.V.Desai College,Pune) 1) Primitaive data type

Java Script data types 1) Function function myFunction() { } 2) Object var x = {firstName:"John", lastName:“Ray"}; // Object 3) Array var cars = [“suzuki", "VagonR", "BMW"]; //array var person = null; //null //diffrence between null & undefined 1) typeof undefined // undefined typeof null // object 2) null === undefined // false null == undefined // true monica Deshmane(H.V.Desai College,Pune) 2)complex data types

JS Types:Revise You can divide JavaScript types into 2 groups 1) primitive - are number, Boolean, string, null 2) complex -are array ,functions ,and objects //primitive Var A=5; Var B=A; B=6; A; //5 B; //6 //complex or reference types Var A=[2,3]; Var B=A; B[0]=3; A[0]; //3 B[0]; //3

JavaScript variables are used for storing data values. Same rules of variables in java are followed. var x = 5; var y = 6; var z = x + y; also learn- local variables, global variables, static variables Java Script variables monica Deshmane(H.V.Desai College,Pune)

A JavaScript function is a block of code to perform a particular task. executed when someone invokes / calls it. Syntax:- function name(para1, para2, para3) { // code to be executed } Java Script Functions monica Deshmane(H.V.Desai College,Pune)

Function Invocation i.e call needed. Return value- Functions often compute a return value. The return value is "returned" back to the "caller". Example- var x = myFunction(10, 3); // Function is called, return value will assigned to x function myFunction(a, b) { return a * b; // Function returns the product of a and b } Java Script Functions monica Deshmane(H.V.Desai College,Pune)

Java Script Events Event Description onChange An HTML element has been changed onClick The user clicks an HTML element / control onMouseOver The user moves the mouse over an HTML element onMouseOut The user moves the mouse away from an HTML element onKeydown The hits pushes a keyboard key onLoad After loading the page onFocus When perticular control is hilighted See demo online monica Deshmane(H.V.Desai College,Pune)

•e.g. •<button onclick="displayDate()“>The time is?</button> <body onload=“display()”>….</body> <input type=text name=“txt” onmouseover = “display()”> <input type=text name=“txt” onFocus = “display()”> Examples of events

Regular Expressions( RE) monica Deshmane(H.V.Desai College,Pune) A regular expression is a sequence of characters that forms a pattern. The pattern can be used for 1)search 2)replace 3)Match A regular expression can be made by a single character, or a more complicated /mixed patterns.

Patterns Character classes [:alum:] Alphanumeric characters [0-9a-zA-Z] [:alpha:] Alphabetic characters [a-zA-Z] [:blank:] space and tab [ t] [:digit:] Digits [0-9] [:lower:] Lower case letters [a-z] [:upper:] Uppercase letters [A-Z] [:xdigit:] Hexadecimal digit [0-9a-fA-F] range of characters ex. [‘aeiou’]

Patterns continue… ? 0 or 1 * 0 or more + 1 or more {n} Exactly n times {n,m} Atleast n, no more than m times {n,} Atleast n times n newline t tab ^ beginning $ end

Using String Methods monica Deshmane(H.V.Desai College,Pune) the two string methods used for RE are search() and replace(). 1. The search() method uses an expression to search for a match, and returns the position of the match. var pos = str.search(“/this/”); 2. The replace() method returns a modified string where the pattern is replaced. var txt = str.replace(“/is/”, “this"); 3. match() used to match pattern “hi234”.match(/^ (a-z) +(d{3})$/) 4. exec() -Syntax- pattern.exec(string); The exec() method returns the matched text if it finds a match, otherwise it returns null. “/(hey|ho)/”.exec('h') //h

Array in Java Script monica Deshmane(H.V.Desai College,Pune) 1. Array creation • var arr1 = new Array(); OR • var arr2 = [ ]; arr2.push(1); arr2.push(2); //[1,2] arr1.sort(); • var arr3 = [ ‘mat', 'rat', 'bat' ]; 2. Length arr2.length; console.log(arr2); 3. To delete element from array arr3.splice(2, 2); arr.pop(); //see demo on JS.do

Array splice in Java Script monica Deshmane(H.V.Desai College,Pune) <script> var lang = ["HTML", "CSS", "JS", "Bootstrap"]; document.write(lang + "<br>"); var removed = lang.splice(2, 1, 'PHP', ‘python') document.write(lang + "<br>"); // HTML,CSS,JS,Bootstrap document.write(removed + "<br>"); // HTML,CSS,PHP,python,Bootstrap // No Removing only Insertion from 2nd index from the ending lang.splice(-2, 0, 'React') // JS document.write(lang) // HTML,CSS,PHP,React,python,Bootstrap </script>

Array continue… monica Deshmane(H.V.Desai College,Pune) Array is like u so before the typeof operator will return “object” for arrays more times however you want to check that array is actually an array. Array.isArray returns true for arrays and False for any other values. Array.isArray( new array) // true Array.isArray( [ ] ) // true Array.isArray( null) // false Array.isArray(arguments ) //false

Array continue… monica Deshmane(H.V.Desai College,Pune) See –tutorials point javascript arrays array methods • to loop over an array you can use for each (Similar to jquery $.each) [1,2,3].foreach(function value) { console.log (value ); } •To filter elements out of array you can use filter (similar two jQuery grep) [1,2,3].foreach(function value) { return value < 3; } //will return [ 1, 2] •to change value of of each item you can use map (similar to Jquery map) [ 5,10 ,15].map function (value) { return value*2; } // will return [10 ,20 ,30] • also available but less commonly used are the methods- reduce , reduceRight and lastIndexOf.

Array continue… monica Deshmane(H.V.Desai College,Pune) •reduceRight:-Subtract the numbers in the array, starting from the right: <script> var numberarr= [175, 50, 25]; document.getElementById(“p1").innerHTML = numberarr.reduceRight(myFunc); function myFunc(total, num) { return total - num; } •Reduce-from left to right •lastIndexOf- const animals = ['Dog', 'Tiger', 'Penguin','Dog']; console.log(animals.lastIndexOf('Dog'));// expected output: 3 console.log(animals.lastIndexOf('Tiger'));// expected output: 1

•Object Creation var obj1 = new Object(); var obj2 = { }; var subject = { first_name: "HTML", last_name: "CSS“ , reference: 320 ,website: "java2s.com" }; •add a new property subject.name= "brown"; OR subject["name"] = "brown"; •To delete a new property delete subject.name; •To get all keys from object var obj={a:’aaa’, b:’bbb’ ,c:’ccc’}; Object.keys(obj); //[‘a’ ,’b’, ‘c’] Objects in Java Script

The HTML DOM is a standard object model and programming interface for HTML. It contains -The HTML elements as objects -The properties of all HTML elements -The methods to access all HTML elements -The events for all HTML elements DOM CSS- The HTML DOM allows JavaScript to change the style of HTML elements. DOM Animation- create HTML animations using JavaScript DOM Events- allows JavaScript to react to HTML events by event handlers & event Listeners. HTML DOM elements are treated as nodes ,in which elements can be added by createElement() or appendChild() & deleted nodes using remove() or removeChild(). HTML DOM continue…

Promises & callback - The promises in Javascript are just that, promises it means that we will do everything possible to achieve the expected result. But, we also know that a promise cannot always be fulfilled for some reason. Just as a promise is in real life, it is in Javascript, represented in another way.

Promises Example let promise = new Promise(function(resolve, reject) { // task to accomplish your promise if(/* everything turned out fine */) { resolve('Stuff worked') } else { // for some reason the promise doesn't fulfilled reject(new Error('it broke')) } }); Promises have three unique states: 1. Pending: asynchronous operation has not been completed yet. 2. Fulfilled: operation has completed and returns a value. 3. Rejected: The asynchronous operation fails and the reason why it failed is indicated.

Callback function will be executed when an asynchronous operation has been completed. A callback is passed as an argument to an asynchronous operation. Normally, this is passed as the last argument of the function. When a function simply accepts another function as an argument, this contained function is known as a callback function. Callback functions are written like : function sayHello() { console.log('Hello everyone');} setTimeout( sayHello( ), 3000); What we did in the above example was, first to define a function that prints a message to the console. After that, we use a timer called setTimeout (this timer is a native Javascript function). This timer is an asynchronous operation that executes the callback after a certain time. In this example, after 3000ms (3 seconds) will be executed the sayHello() function.

Difference between callback and promises 1. promises are easy for running asynchronous tasks to feel like synchronous and also provide catching mechanism which are not in callbacks. 2. Promises are built over callbacks. 3. Promises are a very mighty abstraction, allow clean and better code with less errors. 4. In promises, we attach callbacks on the returned promise object. For callback approach, we normally just pass a callback into a function that would then get called upon completion in order to get the result of something. .

34Monica Deshmane(H.V.Desai College,Pune)

java script

More Related Content

What's hot

Similar to java script

More from monikadeshmane

Recently uploaded

java script