JavaScript Fundamentals & JQuery


Published on

Published in: Technology
1 Comment
  • All Functions are describe with their coding information. This is useful for all beginners. Use this presentation don't wast your money to learn for this. Very nice description to all functions.
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

JavaScript Fundamentals & JQuery

  1. 1. JavaScriptJamshid HashimiTrainer, Cresco Solution WorkforceDevelopment Program
  2. 2. Agenda• JS Introduction• JS How To• JS Statements• JS Comments• JS Variables• JS Data Types• JS Objects• JS Arrays
  3. 3. Agenda• JS JSON• JS Functions• JS Operators• JS Inspect Elements (Chrome, Firefox, IE)• JQuery• DEMO
  4. 4. Introduction• JavaScript is the worlds most popularprogramming language. It is the language forHTML and the web, forservers, PCs, laptops, tablets, smart phones, andmore.• A scripting language is a lightweight programminglanguage.• JavaScript is programming code that can beinserted into HTML pages.• JavaScript inserted into HTML pages, can beexecuted by all modern web browsers.• JavaScript is easy to learn.
  5. 5. How TO• JavaScripts in HTML must be inserted between<script> and </script> tags.• JavaScript can be put in the <body> and in the<head> section of an HTML page.<script>alert("My First JavaScript");</script><script>document.write("<h1>This is a heading</h1>");document.write("<p>This is a paragraph</p>");</script>
  6. 6. OUTPUT• JavaScript is typically used to manipulateHTML elements.<p id="demo">My First Paragraph</p><script>document.getElementById("demo").innerHTML="My First JavaScript";</script>
  7. 7. Statements• JavaScript is a sequence of statements to beexecuted by the browser.• JavaScript statements are "commands" to thebrowser.• The purpose of the statements is to tell thebrowser what to do.• JavaScript code (or just JavaScript) is a sequenceof JavaScript statements.• Each statement is executed by the browser in thesequence they are written.
  8. 8. Statements• Semicolon ;– Semicolon separates JavaScript statements.– Normally you add a semicolon at the end of eachexecutable statement.– Using semicolons also makes it possible to writemany statements on one line.document.getElementById("demo").innerHTML="Hello Dolly";document.getElementById("myDIV").innerHTML="How are you?";
  9. 9. Statements• JavaScript is Case Sensitive– Watch your capitalization closely when you writeJavaScript statements:• A function getElementById is not the same asgetElementbyID.• A variable named myVariable is not the same asMyVariable.
  10. 10. Statements• Block Statement• Example{statement_1;statement_2;...statement_n;}while (x < 10){x++;}
  11. 11. Statements• Conditional Statements– if...else Statement– switch Statementif (condition)statement_1[elsestatement_2]switch (expression) {case label_1:statements_1[break;]case label_2:statements_2[break;]...default:statements_def[break;]}
  12. 12. Statements• LOOPS– for Statement– do...while Statement– while Statement– break Statement– continue Statement
  13. 13. Statements• Object Manipulation Statements– Statementvar obj = {make:"BMW", model:"2013"}function dump_props(obj, obj_name) {var result = "";for (var i in obj) {result += obj_name + "." + i + " = "+ obj[i] + "<br>";}return result;}document.write(dump_props(obj,"obj"));
  14. 14. Comments• Comments will not be executed by JavaScript.• Comments can be added to explain theJavaScript, or to make the code morereadable.• Single line comments start with //.• Multi line comments start with /* and endwith */.
  15. 15. Comments// Write to a headingdocument.getElementById("myH1").innerHTML="Welcome to myHomepage";/*The code below will writeto a heading and to a paragraph,and will represent the start ofmy homepage:*/document.getElementById("myH1").innerHTML="Welcome to myHomepage";var x=5; // declare x and assign 5 to it
  16. 16. Variables• JavaScript variables are "containers" for storinginformation.• As with algebra, JavaScript variables can be usedto hold values (x=5) or expressions (z=x+y).• Variable can have short names (like x and y) ormore descriptive names (age, sum, totalvolume).– Variable names must begin with a letter– Variable names can also begin with $ and _ (but wewill not use it)– Variable names are case sensitive (y and Y aredifferent variables)var money;var name;
  17. 17. Variables• JavaScript Data Types• Global & Local Variablesvar name = "Ali";var money;money = 2000.50;var myVar = "global"; // Declare a global variablefunction checkscope( ) {var myVar = "local"; // Declare a local variabledocument.write(myVar);}
  18. 18. Variables• One Statement, Many Variables• Value = undefined– In computer programs, variables are often declaredwithout a value. The value can be something that has to becalculated, or something that will be provided later, likeuser input. Variable declared without a value will have thevalue undefined.var lastname=”Ahmad", age=30,job="carpenter";var lastname=”Mohammad",age=30,job=”Engineer";var lastname;
  19. 19. Data Types• String, Number, Boolean, Array, Object, Null,Undefined.• JavaScript has dynamic types. This means thatthe same variable can be used as differenttypes:var x; // Now x is undefinedvar x = 5; // Now x is a Numbervar x = ”Salih"; // Now x is a String
  20. 20. Data Types• JavaScript Booleans– Booleans can only have two values: true or false.• JavaScript Arraysvar x=true;var y=false;var arr = new Array();arr[0] = ”item 1";arr[1] = ”item 2";var arr = new Array(”item1",”item2”);var arr = [“item1", “item2"];
  21. 21. Data Types• JavaScript Objects– An object is delimited by curly braces. Inside thebraces the objects properties are defined as nameand value pairs (name : value). The properties areseparated by commas:var person={firstname:”James",lastname:”Bond", id:9999};var person={firstname : ”James",lastname : ”Bond",id : 9999};
  22. 22. Objects• JavaScript is designed on a simple object-based paradigm. "Everything" in JavaScript isan Object: a String, a Number, an Array, aDate....• In JavaScript, an object is data, with propertiesand methods.– Properties are values associated with objects.– Methods are actions that objects can perform.
  23. 23. Objects• Accessing Object Properties• Accessing Object MethodsobjectName.propertyNameobjectName.methodName()
  24. 24. Objects• Objects in JavaScript, just as many otherprogramming languages, can be compared toobjects in real life.var myCar = new Object();myCar.make = "Ford";myCar.model = "Mustang";myCar.year = 1969;myCar.makemyCar[“make”]
  25. 25. Objectsvar myCar = {make:"BMW",model:"s2013",year:"2013"}function showProps(obj, objName) {var result = "";for (var i in obj) {if (obj.hasOwnProperty(i)) {result += objName + "." + i + " = " + obj[i] +"n";}}return result;}alert(showProps(myCar,"myCar"))
  26. 26. Arrays• The JavaScript Array global object is a constructorfor arrays, which are high-level, list-like objects.• Arrays are list-like objects that come with aseveral built-in methods to perform traversal andmutation operations. Neither the size of aJavaScript array nor the types of its elements arefixed. Since an arrays size can grow or shrink atany time, JavaScript arrays are not guaranteed tobe dense.
  27. 27. Arrays<!DOCTYPE html><html><head></head><body><script>var years = [1950, 1960, 1970, 1980, 1990, 2000, 2010];console.log(years[0]);</script></body></html>
  28. 28. JSON• JSON is a subset of the object literal notationof JavaScript. Since JSON is a subset ofJavaScript, it can be used in the languagevar myJSONObject = {"bindings": [{"ircEvent": "PRIVMSG", "method":"newURI", "regex": "^http://.*"},{"ircEvent": "PRIVMSG", "method":"deleteURI", "regex": "^delete.*"},{"ircEvent": "PRIVMSG", "method":"randomURI", "regex": "^random.*"}]};myJSONObject.bindings[0].method // "newURI"
  29. 29. Functions• Function is a "subprogram" that can be calledby code external (or internal in the case ofrecursion). Like the program itself, a functionis composed of a sequence of statementscalled the function body. Values can be passedto a function, and the function can return avalue.• Every function in JavaScript is actually aFunction object.
  30. 30. Functions/* Declare the function myFunc */function myFunc(theObject){theObject.brand = "Toyota";}/** Declare variable mycar;* create and initialize a new Object;* assign reference to it to mycar*/var mycar = {brand: "Honda",model: "Accord",year: 1998};/* Shows Honda */window.alert(mycar.brand);/* Pass object reference to the function */myFunc(mycar);/** Shows Toyota as the value of the brand property* of the object, as changed to by the function.*/window.alert(mycar.brand);
  31. 31. Operators• Assignment operators• Comparison operators• Arithmetic operators• Bitwise operators• Logical operators• String operators• Special operators
  32. 32. Operators: Assignment
  33. 33. Operators: Comparison
  34. 34. Operators: Arithmetic
  35. 35. Operators: Logical
  36. 36. JQuery• Released in January of 2006, jQuery is a cross-browser JavaScript library designed to simplifythe client-side script of HTML.• Used by close to a million websites, jQuery is themost popular JavaScript library in use to date.• jQuery makes it easy to handle DOM objects,events, effects and Ajax, automatically takes careof JavaScript leaks, and has countless third-partyplugins.
  37. 37. JQuery<head><script src="jquery-1.9.1.min.js"></script></head><head><scriptsrc=”"></script></head>
  38. 38. Demo
  39. 39. QUESTIONS?