JavaScript Syntax

JavaScript introductory keynote

Transcript

1. JavaScript From Novice To Ninja Friday, February 10, 2012
2. Agenda Key Concepts Core Types Syntax The Global Object & Scope Chain Function Objects Friday, February 10, 2012
3. JavaScript Key Ideas Interpreter based (no compilation) Loosely typed language Objects are just hash tables Prototypical inheritance model Functions are regular objects (with a twist) Arrays are regular objects (with a twist) Friday, February 10, 2012
4. Hello JavaScript text = “Hello World”; console.log(text); DEFINE AND INITIALIZE A VARIABLE CALLED ‘TEXT’ WITH THE STRING “HELLO WORLD” CALL THE LOG FUNCTION FROM THE CONSOLE OBJECT ON THE VARIABLE ‘TEXT’ Friday, February 10, 2012
5. JavaScript Core Types Numbers Strings Booleans null undefined Objects Friday, February 10, 2012
6. Numbers JavaScript has only one number type called number number is a 64-bit floating point (double) Same arithmetical problems double have (0.1+0.2 ! =0.3) A special value NaN represents errors Friday, February 10, 2012
7. Numeric Functions Number(string) converts string to number returns NaN on error parseInt(string, radix) converts string to number tries its best (so '7hello' is OK) Math.random() returns a random between 0 and 1 Friday, February 10, 2012
8. Numeric Functions x = 3; y = Number(7); z = Number(‘9’); console.log(x + y + z); Friday, February 10, 2012
9. Numeric Functions Note that: Number(“9”) === parseInt(“9”) But ... Number(“09”) !== parseInt(“09”) Friday, February 10, 2012
10. Q & A Numbers Strings Booleans null undefined Objects Friday, February 10, 2012
11. Strings Strings are unicode 16-bit chars (like in Java). No char class. Characters are strings of length 1 Strings are immutable (like in Java) Both Single and Double quotes make a string Friday, February 10, 2012
12. String Examples 'hello'.length === 5 String(10).length === 2 'hello'.indexOf('l') === 2 'hello'.lastIndexOf('l')=== 3 'hello'.toUpperCase() === 'HELLO' Friday, February 10, 2012
13. Q & A Numbers Strings Booleans null undefined Objects Friday, February 10, 2012
14. Boolean Type JavaScript supports ‘true’ and ‘false’ as boolean values Boolean(value) is a function returning the truthness of a value returns false if value is falsy, and true if value is truthy !!value has the same meaning Friday, February 10, 2012
15. null represents the "nothing" of JavaScript usually used to mark errors JavaScript will not give null to a variable. It's always the result of an assignment performed on purpose Friday, February 10, 2012
16. undefined Not even the nothing JavaScript puts undefined in anything that hasn't yet been assigned a value Friday, February 10, 2012
17. JavaScript False/True These are all falsy: false, null, undefined “” (the empty string) 0, NaN Everything else is truthy Friday, February 10, 2012
18. Objects Everything else is an object An object is a collection of key/value pairs. Objects are fully dynamic, so new methods and fields can be added at runtime Objects have no classes Each object has a prototype. We'll talk about that later. Friday, February 10, 2012
19. Objects var me = { name : 'Ynon Perek', email : 'ynonperek@yahoo.com', web : 'http://ynonperek.com' }; name Ynon Perek email ynonperek@yahoo.com web http://ynonperek.com Friday, February 10, 2012
20. Q & A Numbers Strings Booleans null undefined Objects Friday, February 10, 2012
21. Exercise Write a JS program that randomizes 3 numbers from 1 to 100, and prints their sum total Write a JS function that takes two values and returns their sum. If it got only one, it should return that number Friday, February 10, 2012
22. JavaScript Syntax Identifiers Reserved Words Comments Loops and Branches Functions Objects & Arrays Friday, February 10, 2012
23. JavaScript Identifiers Starts with a letter, an _, or a $ Followed by letters, digits, _ or $ Friday, February 10, 2012
24. Naming Conventions variable names are lowercased multiple words are separated by _ in variable names multiple words are camel cased in function names A constructor function starts with a captial Friday, February 10, 2012
25. Identifier Examples counter file_name function getName() function Person() Friday, February 10, 2012
26. JavaScript Reserved Words abstract boolean break byte case catch char class const continue debugger default delete do double else enum export extends false final finally float for function goto if implements import in instanceof int interface long native new null package private protected public return short static super switch synchronized this throw throws transient true try typeof var volatile void while with Friday, February 10, 2012
27. JavaScript Comments // this is a valid line comment in Javascript /** * Java style multi line comments work well also * they are recommended for commenting on functions */ Friday, February 10, 2012
28. Syntax Q & A Identifiers Reserved Words Comments Loops and Branches Functions Objects & Arrays Friday, February 10, 2012
29. Loop Controls JavaScript has: while and do-while loops for loops for-in loops Friday, February 10, 2012
30. While Loop Syntax: while (expression) { statement; } Friday, February 10, 2012
31. Do-while Loop Syntax: Note the ending semicolon do { statement; } while (expression); Friday, February 10, 2012
32. For Loop Syntax: for ( initialize; test; increment) { statement; } Friday, February 10, 2012
33. For Example var riddle = 0; for ( var i=0; i < 10; ++i ) { riddle += i; } console.log(riddle); Friday, February 10, 2012
34. For-in loop allows iterating through all the properties of an object Be careful with this one - it yields wrong results when combined with inheritance Friday, February 10, 2012
35. Branches Syntax: if ( expression ) { } else if ( something_else ) { } else { } Friday, February 10, 2012
36. Exercise Write a JS that randomizes 3 number and prints the largest one Write a JS that prints the square-sum of all the numbers divisible by 7 in range 1..100 (1^2 + 7^2 + 14^2 + ...) Friday, February 10, 2012
37. Syntax Q & A Identifiers Reserved Words Comments Loops and Branches Functions Objects & Arrays Friday, February 10, 2012
38. Functions & Scope Outside all functions, variables have the “global” scope. This means a variable defined outside all functions is accessible from everywhere in the application Friday, February 10, 2012
39. Functions & Scope A function is an object that is callable (meaning we can apply it to arguments) In JavaScript, we have two ways to declare a function. Either as a named function or an anonymous function A function can return a value by using the return keyword Friday, February 10, 2012
40. Functions & Scope Inside a function, a variable can be scoped with the keyword var Using strict mode, all variables must be defined var This helps prevent bugs because we are less likely to mess with outside code Friday, February 10, 2012
41. Functions & Scope function sum(x, y) { return x+y; } console.log(sum(5, 7)); Friday, February 10, 2012
42. Functions & Scope var f = function(n) { return n * n; }; f(5) === 25; Friday, February 10, 2012
43. Functions & Scope Best Practices: Write all code inside a function block Use only one var statement at the beginning of that function Friday, February 10, 2012
44. Functions & Scope A function definition can appear “inside” another function This is called a “closure”, and then the inner function has access to all variables defined by the outer “closing” function It also keeps all variables alive Friday, February 10, 2012
45. Functions & Scope What is printed ? Why ? function Counter(max) { var val = 0; return function() { return (val < max) ? val++ : false; }; } var c = Counter(10); while (c()) { console.log(c()); } Friday, February 10, 2012
46. Functions Q & A Friday, February 10, 2012
47. Objects An object is a collection of key/value pairs Objects are instantiated using the object literal Properties stored in objects are fetched using the square bracket notation or the dot notation Friday, February 10, 2012
48. Objects var pos = { x : 50; y : 10 }; pos.move = function(dx, dy) { this.x += dx; this.y += dy; }; Friday, February 10, 2012
49. Objects Exercise Create a person object with three fields: name: your name favorite_color: your favorite color hello: a function that prints out your name and favorite color Friday, February 10, 2012
50. The this Keyword Inside a function, a special keyword named ‘this’ is used to determine the function calling context When a function was called as a method, this refers to the calling object Otherwise, this refers to the global object Friday, February 10, 2012
51. Arrays Arrays represent ordered data in JavaScript Arrays are normal objects, so they can have attributes other than their indexes Arrays have some array related functions we can use Friday, February 10, 2012
52. Arrays var arr = []; arr.push(1, 2, 3); // add data arr.pop(); // returns 3 arr[0] = 5; // changes array console.log(arr[2]); // value at Friday, February 10, 2012
53. Syntax Q & A Identifiers Reserved Words Comments Loops and Branches Functions Objects & Arrays Friday, February 10, 2012
54. Scope Chain Function var Closure var Global object attribute Friday, February 10, 2012
55. Scope Chain Example var x = 1; function f() { var y = 2; } function g() { var z = 3; } z : 3 y : 2 x : 1 CALL OBJECT OF G CALL OBJECT OF F GLOBAL OBJECT Friday, February 10, 2012
56. Function Scope The smallest scope in JS is the function scope A var inside a function creates an entry in the call object All entries in the call object are created when a function is called Friday, February 10, 2012
57. Global Scope In addition to function scopes, JavaScript has a global object that keeps all variables declared outside all scopes Use of this global scope should be kept to a minimum Friday, February 10, 2012
58. Scope Tips Wrap all code inside a function Use one var statement in the beginning of each function When global scope is required, create a private namespace on the global object Friday, February 10, 2012
59. JS File Template (function (global) { global.app = {}; global.app.hello = function() { console.log(“Hello World”); } global.app.hello(); }(this)); Friday, February 10, 2012
60. Q & A Key Concepts Core Types Syntax The Global Object & Scope Chain Function Objects Friday, February 10, 2012
61. Functions A block of JS code that is defined once, and may be executed (called) any number of times A function takes a list of arguments, and a special “this” argument A function always returns a value Friday, February 10, 2012
62. Defining Functions function factorial(n) { if ( n <= 1 ) { return 1; } return n * factorial(n-1); } Friday, February 10, 2012
63. Defining Functions function distance(p1, p2) { var dx = p2.x - p1.x; var dy = p2.y - p1.y; return Math.sqrt(dx*dx + dy*dy); } Friday, February 10, 2012
64. Invoking Functions Once a function is declared, it can be invoked by using the () operator on the function name or variable. Inside the (), specify any number of arguments that will be passed to the function. Does not have to be the same as in the declaration Friday, February 10, 2012
65. Invoking Functions console.log(factorial(5)); var start = {x : 10, y : 2}; var end = {x : 10, y : 50}; distance(start, end); distance(7); // what happens here? Friday, February 10, 2012
66. Invoking Functions All arguments specified in the function declaration that were not passed in the invocation are assigned ‘undefined’ Friday, February 10, 2012
67. Function Literals Functions are normal JS objects, so this: function foo() { } Is the same as: var foo = function() { }; Friday, February 10, 2012
68. Function Objects Treating functions as variables can clarify the two: Function Scope Passing Functions As Arguments Friday, February 10, 2012
69. Function Scope A function is scoped at the nearest closing scope (closure) or the global object It is best to avoid using global object scope Friday, February 10, 2012
70. Passing Functions As Arguments A function can be passed as an argument to another function - just like normal JS objects Use the normal () operator on the variable to execute Friday, February 10, 2012
71. Optional Arguments If a function got more arguments that were expected, the extra are not lost The special list arguments holds all the arguments that were passed in the invocation Tip: Do not modify values in that list Friday, February 10, 2012
72. Using Arguments function sum() { var sum = 0; for ( var i=0; i < arguments.length; ++i ) { sum += arguments[i]; } } sum(2, 3, 5); // returns 10 sum(7); // returns 7 Friday, February 10, 2012
73. Using Arguments function max() { var m = Number.NEGATIVE_INFINITY; for ( var i=0; i < arguments.length; ++i ) { if ( arguments[i] > m ) m = arguments[i]; } return m; } Friday, February 10, 2012
74. Exercise Modify the sum function so that when called with no arguments, will return 0 Write a function called filterArray that takes an array and a boolean function, and returns the list of all elements on which the boolean is true Friday, February 10, 2012
75. DOM Scripting Using JS To Manipulate the web page http://www.flickr.com/photos/jram23/3088840966/ Friday, February 10, 2012
76. The DOM Stands for Document Object Model Every HTML element has a JS object “bound” to it in a special bond HTMLDivElement HTML div JS Friday, February 10, 2012
77. The DOM Can use getElementById to find a specific element Can use getElementsByTagNam e to get all elements with a specified name <p id="text"></p> var t = document.getElementById('text'); t.innerHTML = "Hello World"; Friday, February 10, 2012
78. DOM Agenda jQuery Introduction Handling Events Writing a simple web app Friday, February 10, 2012
79. The Facts Every browser is different. Really. W3 Standard Webkit Mozilla Microsoft Friday, February 10, 2012
80. Ajax Libraries Developer tools that wrap common functionality and create a standard Many options to choose from. We’ll use jQuery Friday, February 10, 2012
81. jQuery Basics Wrap a normal DOM element inside a jQuery object All operations on the element are performed by jQuery Unified and cross browser API <p></p> $('p').html('hello jQUery'); Friday, February 10, 2012
82. jQuery Basics: Selectors Powerful element selection and manipulations Works “the same” for all mobile & desktop browsers <p id="text"></p> $('p#text').html("Hello World"); Selector returning a jQuery Object An action to perform on the object Friday, February 10, 2012
83. jQuery Actions Each jQuery object supports a wide range of functions to alter the elements $('div#foo').addClass('wide'); $('div#foo').removeClass('wide'); $('div#foo').css('background', 'red'); $('div#foo').hide(); $('div#foo').show(); Friday, February 10, 2012
84. jQuery Actions Example Zebra stripe a table using jQuery $('table tr:nth-child(2n)').css('background', '#ccc'); Friday, February 10, 2012
85. jQuery Events Define what to do when something happens in jQuery, “bind” a function to an event After the bind, every time the the event happens your callback is called, with the object as the “this” argument Friday, February 10, 2012
86. jQuery Events document.ready click hover keypress mousemove resize scroll select submit Full list: http:// api.jquery.com/ category/events/ Friday, February 10, 2012
87. jQuery Demo Build a red spotter game Game should present the user with 4 colored squares, only one is red User should click on the red square Friday, February 10, 2012
88. jQuery API Other useful methods: attr - change an attribute value css - change a style attribute html - change innerHTML content data - store arbitrary data inside an element Friday, February 10, 2012
89. jQuery Lab Write a web application that splits the screen into four sections. Each click on a section should display a sentence inside the clicked section Write a web app to convert time units. User should enter time in seconds, minutes or hours, and convert to all the others Use HTML5 Boilerplate and jQuery Friday, February 10, 2012
90. Q & A Friday, February 10, 2012
91. Thank You Ynon Perek ynonperek@yahoo.com ynonperek.com Friday, February 10, 2012