Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

JS basics


Published on

  • Be the first to comment

JS basics

  1. 1. javaScript basics Naukri FED
  2. 2. Introduction to JavaScript JavaScript is the most popular and incredibly powerful scripting language. JavaScript was designed to add interactivity to HTML pages JavaScript is a scripting language A scripting language is a lightweight programming language JavaScript is usually embedded directly into HTML pages JavaScript is an interpreted language (means that scripts execute without preliminary compilation) Everyone can use JavaScript without purchasing a license
  3. 3. What can JavaScript do? JavaScript gives HTML designers a programming tool JavaScript can react to events A JavaScript can be set to execute when something happens, like when a page has finished loading or when a user clicks on an HTML element JavaScript can read and write HTML elements A JavaScript can read and change the content of an HTML element JavaScript can be used to validate data A JavaScript can be used to validate form data before it is submitted to a server. This saves the server from extra processing
  4. 4. What can JavaScript do? JavaScript can be used to detect the visitor's browser A JavaScript can be used to detect the visitor's browser, and - depending on the browser - load another page specifically designed for that browser JavaScript can be used to create cookies A JavaScript can be used to store and retrieve information on the visitor's computer
  5. 5. JavaScript Syntax The HTML <script> tag is used to insert a JavaScript into an HTML page. The <script> and </script> tells where the JavaScript starts and ends. You can place an unlimited number of scripts in your document, and you can have scripts in both the body and the head section at the same time. A simple example of JavaScript: //Example 1. <script type="text/javascript"> ... some JavaScript code ... </script>
  6. 6. Document Object Model "The W3C Document Object Model (DOM) is a platform and language-neutral interface that allows programs and scripts to dynamically access and update the content, structure, and style of a document.” The HTML DOM defines a standard for accessing and manipulating HTML documents. The DOM is a W3C (World Wide Web Consortium) standard. The Dom is Platform- and language-independent.
  7. 7. HTML DOM DOM Nodes - In the DOM, everything in an HTML document is a node. The DOM says: 1. The entire document is a document node 2. Every HTML element is an element node 3. The text in the HTML elements are text nodes 4. Every HTML attribute is an attribute node 5. Comments are comment nodes The HTML DOM views an HTML document as a node-tree. All the nodes in the tree have relationships to each other.
  8. 8. Node Parent, Children & Sibling The nodes in the node tree have a hierarchical relationship to each other. The terms parent, child, and sibling are used to describe the relationships. Parent nodes have children. Children on the same level are called siblings (brothers or sisters). In a node tree, the top node is called the root Every node has exactly one parent node, except the root which has no parent A node can have any number of children A leaf is a node with no children Siblings are nodes with the same parent
  9. 9. Selector jQuery selectors allow you to select and manipulate HTML element(s). It's based on the existing CSS Selectors All selectors in jQuery start with the dollar sign and parentheses: $() Example : $("p") // Tag Selector $("#test") // ID selector $(".test") // Class selector
  10. 10. DataTypes Call by Value String Number Boolean,Null, Undefined. Call by reference Array // [ ‘a’ , ‘b’ , ‘c’ ] Object // { 0 : ’a’ , 1 : ’b’, 2 : ’c’} JavaScript has dynamic types. This means that the same variable can be used as different types: var x; // Now x is undefined var x = 5; // Now x is a Number var x = "John"; // Now x is a String
  11. 11. Conditionals, Loops & Operators Conditions Loops Operators if statement for Arithmetic Operators (+ ,- ,* ,/ ,% ,++ ,--) if...else statement while Comparison Operators (== ,!=. ,> ,< ,>= ,<=) if...else if....else statement do while Logical (or Relational) Operators (&&, ||, !) switch statement for in Assignment Operators (= ,+= ,-= ,*= ,/= ,%=) Conditional (or ternary) Operators (? :)
  12. 12. Typeof & instanceof using jQuery typeof It’s is a unary operator that is placed before its single operand, which can be of any type. Its value is a string indicating the datatype of the operand. Example: typeof 2 // “number” typeof {} // “object” instanceof The instanceof operator tests whether an object has in its prototype chain the prototype property of a constructor. Example: [] instanceof Array //true [] instanceof Object //true
  13. 13. Function Function Syntax in JS: function functionName(parameters) { code to be executed } A function can be invoked: When an event occurs (when a user clicks a button) When it is invoked (called) from JavaScript code Automatically (self invoked)
  14. 14. Scope There are only two scopes in JS: Local A variable declared (using var) within a JavaScript function becomes LOCAL to the function. The variable gets a local scope: It can only be accessed from within that function. Local variables can have the same name in different functions, because they are only recognized by the function where they were declared. Arguments (parameters) work as local variables inside functions. Local variables are created when the function starts, and deleted when the function is completed. Global A variable declared outside a function, becomes GLOBAL. The variable gets a global scope: All scripts and functions on the web page can access it.
  15. 15. Closures Closures are functions that refer to independent (free) variables. In other words, the function defined in the closure 'remembers' the environment in which it was created. function makeFunc() { var name = "Mozilla"; function displayName() { alert(name); } return displayName; } var myFunc = makeFunc(); myFunc(); Change page font size using JS closures
  16. 16. Events In its most ancient form an event handler looks like this. <a href="somewhere.html" onclick="alert('I've been clicked!')"> (de facto standardized by Netscape) element.onclick = doSomething; function doSomething(e) { if (!e) var e = window.event // e refers to the event // this refers to the HTML element which currently handles the event // target/srcElement refer to the HTML element the event originally took place on } Lit the bulb
  17. 17. Events Input Events Mouse Events Click Events Load Events ● onfocus ● onblur ● onchange (input, select box) ● onselect ● onsubmit ● onreset ● onkeydown ● onkeypress ● onkeyup ● onmouseover ● onmouseout ● onmousedown ● onmouseup ● onmousemove ● onmouseout ● onmouseover ● onmouseout ● onclick ● ondblclick ● onload (page, image) ● onerror ● onunload ● onresize ● DOMContentLoaded
  18. 18. Element 1 Event order Bubbling and Capturing “If an element and one of its ancestors have an event handler for the same event, which one should fire first?” Netscape Model Microsoft Model W3C Model Netscape said that the event on element1 takes place first. This is called event capturing. Microsoft maintained that the event on element2 takes precedence. This is called event bubbling. In the W3C event model is first captured until it reaches the target element and then bubbles up again. Element 2 Element 1 Element 2 Element 1 Element 2
  19. 19. Advanced event registration model It offers a simple way to register as many event handlers as you like for the same event on one element. W3C (IE9+ and others) element.addEventListener('click',doSomething,false) element.removeEventListener('click',spyOnUser,false) last argument of addEventListener, it is meant to state whether the event handler should be executed in the capturing or in the bubbling phase. Microsoft (IE5+) element.attachEvent('onclick',startDragDrop) element.detachEvent('onclick',spyOnUser)
  20. 20. Benefits of add/bind Event to an element over direct event binding Can easily add and remove an event listener by using the addEventListener() and removeEventListener() method respectively. Attaches an event handler to an element without overwriting existing event handlers. Can add many event handlers to one element. can add many event handlers of the same type to one element, i.e two "click" events. Can add event listeners on any HTML DOM object such as HTML elements, the HTML document, the window object, or other objects that supports events, like the xmlHttpRequest object.
  21. 21. Constructor and Custom Objects JavaScript is a prototype-based language which contains no class statement. Constructor function Person(gender) { this.gender = gender; alert('Person instantiated'); } Custom Objects var person1 = new Person('Male'); var person2 = new Person('Female');
  22. 22. OOPs
  23. 23. Pillars of OOPS
  24. 24. Encapsulation Encapsulation is the packing of data and functions into a single component. ~ Wiki A method of bundling the data and methods that use the data. ~ MDN
  25. 25. Exp. function Class_ABC() { var msg = “Hello Mr.” ; // private data var Reply = function (){ // private method alert(‘Yes, How may i help you.’) } this.x = 2; // public data this.sum = function () { // public member alert('Add x with 10: ' + (this.x + 10)) } } var instance = new Class_ABC() instance.sum(); // output Add x with 10: 12 instance.x // output 2 instance msg // output undefined function xyz() { var x = 10; // private var y = 20; // private return { add : function(){ // public alert(x +y) }, sub : function(){ // public alert(y-x) } } //end of return }// end of function var p = xyz(); p.add() // output 30 p.sub() // output 10
  26. 26. Abstraction ● Abstracting only the aspects/information which are relevant for a particular purpose/user. OR ● Suppressing the more complex details below the current level.
  27. 27. Inheritance A class can inherit characteristics from another class. Different ways to achieve inheritance ● Prototype-based ● By using call/Apply Function
  28. 28. function Person(gender) { this.gender = gender; } Person.prototype.sayGender = function () { alert(this.gender); }; var person1 = new Person('Male'); person1.sayGender(); // alerts 'Male' Inheritance (Prototype-based)
  29. 29. function baseClass() { this.x = 2; this.y = 4; this.sum = function () { alert('Hi, i am defined inside base class: ' + (this.x + this.y)); } } Inheritance(By using call Function) function subClass() {; // to inherit base class members alert(this.x) alert(this.y) } var inst = new subClass(); inst.sum();
  30. 30. Type of Inheritance Single Inheritance Multilevel Inheritance Hierarchical Inheritance Hybrid Inheritance Multiple Inheritance
  31. 31. Polymorphism … Poly means "many" and morphism means "forms". Types: ● function overloading ● function overriding Different classes might define the same method or property.
  32. 32. function baseClass() { this.x = 2; this.y = 4; this.sum = function () { alert('Hi, i am defined inside base class: ' + (this.x + this.y)) } } Polymorphism function subClass() {; // to inherit base class members this.sum = function () { alert('Hi, i am defined inside subClass and baseClass sum function is overridden by me: ' + (this.x + this.y + 10)) } } x = new baseClass(); x.sum(); y = new subClass(); y.sum();
  33. 33. Qunit : JavaScript unit testing framework QUnit.test( "hello test", function( assert ) { assert.equal( 1 == "1", "Passed!" ); }); ● We maintain separate copy of our testable code and production ready code. ● It lets you test private functions without exposing them on live.
  34. 34. Grunt : Automating UI processes In front end team resource management is automated using GRUNT (The JavaScript Task Runner) Dependencies node.js grunt-plugins Gruntfile package.json By including Grunt in our projects all of the above tasks are now just single command away. This site has all the information about how to make a local grunt setup. Compressing Javascript and CSS files grunt-yui-compressor Merging JS modules into single file grunt--concat Compile Sass to CSS using Compass grunt-contrib-compass Validate files with JSHint grunt-contrib-jshint Run predefined tasks whenever watched file patterns are added, changed or deleted. grunt-contrib-watch Minify images grunt-contrib-imagemin Clean files and folders grunt-contrib-clean Project creation with required folder structure. grunt-shell
  35. 35. Optimization Level of the scope chain must be minimum. Use module/feature specific checks in case of cross browser issues. Array’s length should not be recomputed in loops. Include scripts at end of the page or use dynamic inclusions. Minify and gzip the resources.
  36. 36. { THANKS }