Publicité
Java script
16 May 2018•0 j'aime•98 vues
0 j'aime
Soyez le premier à aimer ceci
afficher plus
vues
Nombre de vues
0
Sur Slideshare
0
À partir des intégrations
0
Nombre d'intégrations
0
Télécharger pour lire hors ligne
Signaler
Formation
Here are the basics of JavaScript....!!
Shagufta shaheenSuivre
Publicité
Publicité
Publicité
Recommandé
SISTEMA DE FACTURACION (Ejemplo desarrollado)Darwin Durand
Baitap tkwnguyenquy2101
The Ring programming language version 1.5.2 book - Part 29 of 181Mahmoud Samir Fayed
The Ring programming language version 1.4 book - Part 8 of 30Mahmoud Samir Fayed
Юрий Буянов «Squeryl — ORM с человеческим лицом»e-Legion
Oop assignment 02MamoonKhan39
Java script
- JAVA SCRIPT
- It is case sensitive language. alert('hello'); Message document.write('we are learning javascript'); Display
- // Coments Documentation/Comments document.write('we are learning javascript'); Display
- External File Support 1.Make new file 2.Write java code with ext js 3.Don’t need to write script tags in js files 4.<script scr = “ path of file ”>
- DATA TYPES String ‘shahwaiz’ Integer 6, 7, 9 Variable assign value, simple text Space not allowed name = ‘shahwaiz’; document.write(name);
- DATA TYPES V1=3 V2=4 document.write(v1+v2); alert(v1+v2);
- USING HTML IN JAVA SCRIPT Document.write(‘<h1>html</h1>in java script’); Document.write(‘style=“background:red”java script’);
- POP UP BOX Prompt(‘Enter your name’,’name’); name = Prompt(‘Enter your name’,’name’) document.write(‘hello<h3>’+name+’</h3>welcome’);
- MATH OPERATOR + - * / % = ++ --
- IF-ELSE var = 3 var2=4 if(var==3){ alert(‘Display’); } !== -> type ===
- LOGICAL OP && || !
- FUNCTION Function myFunction() { document.write(‘this is function’); } myFunction();
- JAVASCRIPT OBJECTS Real Life Objects, Properties, and Methods A car has properties like weight and color, and methods like start and stop: <!DOCTYPE html> <html> <body> <p>Creating a JavaScript Variable.</p> <p id="demo"></p> <script> var car = "Fiat"; document.getElementById("demo").innerHTML = car; </script> </body> </html>
- <!DOCTYPE html> <html> <body> <p>Creating a JavaScript Object.</p> <p id="demo"></p> <script> var car = {type:"Fiat", model:"500", color:"white"}; document.getElementById("demo").innerHTML = car.type; </script> </body> </html>
- <!DOCTYPE html> <html> <body> <p>Creating a JavaScript Object.</p> <p id="demo"></p> <script> var person = { firstName : "John", lastName : "Doe", age : 50, eyeColor : "blue" }; document.getElementById("demo").innerHTML = person.firstName + " is " + person.age + " years old."; </script> </body> </html>
- ACCESSING OBJECT PROPERTIES objectName.propertyName Or objectName["propertyName"] p id="demo"></p> <script> var person = { firstName: "John", lastName : "Doe", id : 5566 }; document.getElementById("demo").innerHTML = person.firstName + " " + person.lastName; </script>
- ACCESSING OBJECT METHODS objectName.methodName() or name = person.fullName(); <p id="demo"></p> <script> var person = { firstName: "John", lastName : "Doe", id : 5566, fullName : function() { return this.firstName + " " + this.lastName; } }; document.getElementById("demo").innerHTML = person.fullName(); </script>
- JAVASCRIPT EVENTS • HTML events are "things" that happen to HTML elements. • When JavaScript is used in HTML pages, JavaScript can "react" on these events. • An HTML web page has finished loading • An HTML input field was changed • An HTML button was clicked
- COMMON HTML EVENTS onchange An HTML element has been changed onclick The user clicks an HTML element onmouseover The user moves the mouse over an HTML element onmouseout The user moves the mouse away from an HTML element onkeydown The user pushes a keyboard key onload The browser has finished loading the page
- SAMPLES <button onclick="document.getElementById('demo').innerHTML = Date()">The time is?</button> <button onclick="this.innerHTML = Date()">The time is?</button> <button onclick="displayDate()">The time is?</button>
- STRING <script> var txt = "ABCDEFGHIJKLMNOPQRSTUVWXYZ"; document.getElementById("demo").innerHTML = txt.length; </script>
- SPECIAL CHARACTERS The backslash () escape character turns special characters into string characters: ' ' Single quote " " Double quote Backslash
- SIX OTHER ESCAPE SEQUENCES ARE VALID IN JAVASCRIPT: b Backspace f Form Feed n New Line r Carriage Return t Horizontal Tabulator v Vertical Tabulator
- STR METHOD The indexOf() method returns the index of (the position of) the first occurrence of a specified text in a string: var str = "Please locate where 'locate' occurs!"; var pos = str.indexOf("locate");
- The lastIndexOf() method returns the index of the last occurrence of a specified text in a string: Both methods accept a second parameter as the starting position for the search: var str = "Please locate where 'locate' occurs!"; var pos = str.indexOf("locate",15); The search() method searches a string for a specified value and returns the position of the match:
- EXTRACTING STRING PARTS • slice(start, end) • substring(start, end) • substr(start, length)
- REPLACING STRING CONTENT str = "Please visit Microsoft!"; var n = str.replace("Microsoft", "W3Schools"); By default, the replace() function is case sensitive. Writing MICROSOFT (with upper-case) will not work: o replace case insensitive, use a regular expression with an /i flag (insensitive): str = "Please visit Microsoft!"; var n = str.replace(/MICROSOFT/i, "W3Schools");
- To replace all matches, use a regular expression with a /g flag (global match): str = "Please visit Microsoft and Microsoft!"; var n = str.replace(/Microsoft/g, "W3Schools");
- JAVASCRIPT NUMBERS JavaScript has only one type of number. Numbers can be written with or without decimals. var x = 123e5; // 12300000 var y = 123e-5; // 0.00123 If you add two numbers, the result will be a number: If you add two strings, the result will be a string concatenation: If you add a number and a string, the result will be a string concatenation: If you add a string and a number, the result will be a string concatenation:
- NUMBER METHOD var x = 123; x.toString(); // returns 123 from variable x (123).toString(); // returns 123 from literal 123 (100 + 23).toString(); // returns 123 from expression 100 + 23 var x = 9.656; x.toExponential(2); // returns 9.66e+0 x.toExponential(4); // returns 9.6560e+0 x.toExponential(6); // returns 9.656000e+0
- TOFIXED() var x = 9.656; x.toFixed(0); // returns 10 x.toFixed(2); // returns 9.66 x.toFixed(4); // returns 9.6560 x.toFixed(6); // returns 9.656000
- TOPRECISION() toPrecision() returns a string, with a number written with a specified length: var x = 9.656; x.toPrecision(); // returns 9.656 x.toPrecision(2); // returns 9.7 x.toPrecision(4); // returns 9.656 x.toPrecision(6); // returns 9.65600
- JAVASCRIPT MATH OBJECT The JavaScript Math object allows you to perform mathematical tasks on numbers. Math.PI; // returns 3.141592653589793 Math.round(4.7); // returns 5 Math.round(4.4); // returns 4 Math.pow(8, 2); // returns 64 Math.sqrt(64); // returns 8 Math.abs(-4.7); // returns 4.7 Math.ceil(4.4); // returns 5 Math.floor(4.7); // returns 4
- JAVASCRIPT MATH OBJECT Math.sin(90 * Math.PI / 180); // returns 1 (the sine of 90 degrees) Math.cos(0 * Math.PI / 180); // returns 1 (the cos of 0 degrees) Math.min(0, 150, 30, 20, -8, -200); // returns -200 Math.random(); // returns a random number
- JAVASCRIPT MATH OBJECT Math.E // returns Euler's number Math.PI // returns PI Math.SQRT2 // returns the square root of 2 Math.SQRT1_2 // returns the square root of 1/2 Math.LN2 // returns the natural logarithm of 2 Math.LN10 // returns the natural logarithm of 10 Math.LOG2E // returns base 2 logarithm of E Math.LOG10E // returns base 10 logarithm of E
- JAVASCRIPT RANDOM Math.floor(Math.random() * 10); // returns a number between 0 and 9 Math.floor(Math.random() * 11); // returns a number between 0 and 10 Math.floor(Math.random() * 100); // returns a number between 0 and 99
- JAVASCRIPT DATES var d = new Date(); document.getElementById("demo").innerHTML = d; • Years • Months • Days • Hours • Seconds • Milliseconds
- • JavaScript can display the current date as a full string: • Sun Apr 08 2018 23:28:32 GMT+0500 (Pakistan Standard Time) There are 4 ways of initiating a date: new Date() new Date(milliseconds) new Date(dateString) new Date(year, month, day, hours, minutes, seconds, milliseconds)
- JAVASCRIPT DATE INPUT Type Example ISO Date "2015-03-25" (The International Standard) Short Date "03/25/2015" Long Date "Mar 25 2015" or "25 Mar 2015" Full Date "Wednesday March 25 2015"
- JAVASCRIPT GET DATE METHODS Method Description getFullYear() Get the year as a four digit number (yyyy) getMonth() Get the month as a number (0-11) getDate() Get the day as a number (1-31) getHours() Get the hour (0-23) getMinutes() Get the minute (0-59) getSeconds() Get the second (0-59) getMilliseconds() Get the millisecond (0-999) getTime() Get the time (milliseconds since January 1, 1970) getDay() Get the weekday as a number (0-6)
- JAVASCRIPT GET DATE METHODS Method Description getFullYear() Get the year as a four digit number (yyyy) getMonth() Get the month as a number (0-11) getDate() Get the day as a number (1-31) getHours() Get the hour (0-23) getMinutes() Get the minute (0-59) getSeconds() Get the second (0-59) getMilliseconds() Get the millisecond (0-999) getTime() Get the time (milliseconds since January 1, 1970) getDay() Get the weekday as a number (0-6)
- JAVASCRIPT SET DATE METHODS Method Description setDate() Set the day as a number (1-31) setFullYear() Set the year (optionally month and day) setHours() Set the hour (0-23) setMilliseconds() Set the milliseconds (0-999) setMinutes() Set the minutes (0-59) setMonth() Set the month (0-11) setSeconds() Set the seconds (0-59) setTime() Set the time (milliseconds since January 1, 1970)
- <script> var d = new Date(); d.setFullYear(2020); document.getElementById("demo").innerHTML = d; </script>
- JAVASCRIPT ARRAYS JavaScript arrays are used to store multiple values in a single variable. var cars = ["Saab", "Volvo", "BMW"]; var cars = new Array("Saab", "Volvo", "BMW"); cars[0] = "Opel"; var cars = ["Saab", "Volvo", "BMW"]; document.getElementById("demo").innerHTML = cars[0];
- ACCESS THE FULL ARRAY var cars = ["Saab", "Volvo", "BMW"]; document.getElementById("demo").innerHTML = cars;
- REVERSING AN ARRAY var fruits = ["Banana", "Orange", "Apple", "Mango"]; fruits.sort(); // Sorts the elements of fruits fruits.reverse(); // Reverses the order of the elements
- JAVASCRIPT TYPE CONVERSION In JavaScript there are 5 different data types that can contain values: • string • number • boolean • object • function There are 3 types of objects: Object Date Array And 2 data types that cannot contain values: null undefined
- THE TYPEOF OPERATOR typeof "John" // Returns "string" typeof 3.14 // Returns "number" typeof NaN // Returns "number" typeof false // Returns "boolean" typeof [1,2,3,4] // Returns "object" typeof {name:'John', age:34} // Returns "object" typeof new Date() // Returns "object" typeof function () {} // Returns "function" typeof myCar // Returns "undefined" * typeof null // Returns "object“ The NaN (Not-a-Number) is a weirdo Global Object in javascript frequently returned when some mathematical operation failed
- JAVASCRIPT ERRORS - THROW AND TRY TO CATCH • The try statement lets you test a block of code for errors. • The catch statement lets you handle the error. • The throw statement lets you create custom errors. • The finally statement lets you execute code, after try and catch, regardless of the result.
Publicité