02 JavaScript Syntax
Upcoming SlideShare
Loading in...5
×
 

02 JavaScript Syntax

on

  • 2,719 views

 

Statistics

Views

Total Views
2,719
Views on SlideShare
1,420
Embed Views
1,299

Actions

Likes
0
Downloads
575
Comments
0

6 Embeds 1,299

http://ynonperek.com 1078
http://www.ynonperek.com 108
http://mobileweb.ynonperek.com 102
http://localhost 9
http://amplytix.com 1
http://ronenkook.co.il 1

Accessibility

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

02 JavaScript Syntax 02 JavaScript Syntax Presentation Transcript

  • JavaScript Programming the WWWSaturday, December 15, 12
  • Agenda Key Concepts Core Types Syntax The Global Object & Scope Chain Function ObjectsSaturday, December 15, 12
  • History 1995 Brendan Eich started developing a new language for Netscape Navigator 2.0 Original name was LiveScript Announced on Dec 1995 as JavaScript 1996 Microsoft responded with JScriptSaturday, December 15, 12
  • JavaScript Key Ideas Interpreter based (no compilation) Loosely typed language Objects are just hash tablesSaturday, December 15, 12
  • JavaScript Key Ideas Interpreter based (no compilation) Loosely typed language Objects are just hash tablesSaturday, December 15, 12
  • JavaScript Key Ideas Interpreter based (no compilation) Loosely typed language Objects are just hash tablesSaturday, December 15, 12
  • Hello JavaScript Define and initialize a variable called ‘text’ with the string “Hello World” var text = “Hello World”; console.log(text);Saturday, December 15, 12
  • Hello JavaScript var text = “Hello World”; console.log(text); Call the log function from the console object on the variable ‘text’Saturday, December 15, 12
  • Hello JavaScript Define and initialize a variable called ‘text’ with the string “Hello World” var text = “Hello World”; console.log(text); Call the log function from the console object on the variable ‘text’Saturday, December 15, 12
  • Running JavaScript Easy way: jsbin Completely offline using node.js Using a simple HTML fileSaturday, December 15, 12
  • Demo JavaScript Basic SyntaxSaturday, December 15, 12
  • JavaScript Core Types Numbers Strings Booleans null undefined ObjectsSaturday, December 15, 12
  • 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 errorsSaturday, December 15, 12
  • 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 1Saturday, December 15, 12
  • Numeric Functions x = 3; y = Number(7); z = Number(‘9’); console.log(x + y + z);Saturday, December 15, 12
  • Q&A Numbers Strings Booleans null undefined ObjectsSaturday, December 15, 12
  • 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 stringSaturday, December 15, 12
  • String Examples hello.length === 5 String(10).length === 2 hello.indexOf(l) === 2 hello.lastIndexOf(l)=== 3 hello.toUpperCase() === HELLOSaturday, December 15, 12
  • Lab http://ynonperek.com/javascript-exer.html Exercises 1-5Saturday, December 15, 12
  • Q&A Numbers Strings Booleans null undefined ObjectsSaturday, December 15, 12
  • 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 meaningSaturday, December 15, 12
  • null represents the "nothing" of JavaScript usually used to mark errors JavaScript will not give null to a variable. Its always the result of an assignment performed on purposeSaturday, December 15, 12
  • undefined Not even the nothing JavaScript puts undefined in anything that hasnt yet been assigned a valueSaturday, December 15, 12
  • JavaScript False/True These are all falsy: false, null, undefined “” (the empty string) 0, NaN Everything else is truthySaturday, December 15, 12
  • 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. Well talk about that later.Saturday, December 15, 12
  • Objects name Ynon Perek var me = {    name  : Ynon Perek,    email : ynonperek@yahoo.com, email ynonperek@yahoo.com    web   : http://ynonperek.com };  web http://ynonperek.comSaturday, December 15, 12
  • Q&A Numbers Strings Booleans null undefined ObjectsSaturday, December 15, 12
  • 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 numberSaturday, December 15, 12
  • JavaScript Syntax Identifiers Reserved Words Comments Loops and Branches Functions Objects & ArraysSaturday, December 15, 12
  • JavaScript Identifiers Starts with a letter, an _, or a $ Followed by letters, digits, _ or $Saturday, December 15, 12
  • 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 captialSaturday, December 15, 12
  • Identifier Examples counter file_name function getName() function Person()Saturday, December 15, 12
  • 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 withSaturday, December 15, 12
  • 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 */Saturday, December 15, 12
  • Syntax Q & A Identifiers Reserved Words Comments Loops and Branches Functions Objects & ArraysSaturday, December 15, 12
  • Loop Controls JavaScript has: while and do-while loops for loops for-in loopsSaturday, December 15, 12
  • While Loop Syntax: while (expression) { statement; }Saturday, December 15, 12
  • Do-while Loop Syntax: do { statement; } while (expression); Note the ending semicolonSaturday, December 15, 12
  • For Loop Syntax: for ( initialize; test; increment) { statement; }Saturday, December 15, 12
  • For Example var sum = 0; for ( var i=0; i < 10; ++i ) { sum += i; } console.log(sum);Saturday, December 15, 12
  • For-in loop allows iterating through all the properties of an object Be careful with this one - it yields wrong results when combined with inheritanceSaturday, December 15, 12
  • Branches Syntax: if ( expression ) { } else if ( something_else ) { } else { }Saturday, December 15, 12
  • 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 + ...)Saturday, December 15, 12
  • Syntax Q & A Identifiers Reserved Words Comments Loops and Branches Functions Objects & ArraysSaturday, December 15, 12
  • Functions & Scope var text = Hello Scope; Outside all functions,   var sum = 0; variables have the   “global” scope. for ( var i=0; i < 10; i++ ) {   sum += i;   } Count how many   globals are on the right console.log( sum );Saturday, December 15, 12
  • 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 keywordSaturday, December 15, 12
  • Creating A Function function foo(x, y) {   return x + y; } var bar = function(x, y) {   return x + y; };Saturday, December 15, 12
  • 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 codeSaturday, December 15, 12
  • Functions & Scope Best Practices: Write all code inside a function block Use only one var statement at the beginning of that functionSaturday, December 15, 12
  • 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 aliveSaturday, December 15, 12
  • 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()); }Saturday, December 15, 12
  • Functions Q & ASaturday, December 15, 12
  • 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 notationSaturday, December 15, 12
  • Objects var pos = { x : 50; y : 10 }; pos.move = function(dx, dy) { this.x += dx; this.y += dy; };Saturday, December 15, 12
  • 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 colorSaturday, December 15, 12
  • 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 objectSaturday, December 15, 12
  • 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 useSaturday, December 15, 12
  • Arrays var arr = []; arr.push(1, 2, 3); // add data arr.pop(); // returns 3 arr[0] = 5; // changes array console.log(arr[2]); // value atSaturday, December 15, 12
  • Syntax Q & A Identifiers Reserved Words Comments Loops and Branches Functions Objects & ArraysSaturday, December 15, 12
  • DOM Scripting Using JS To Manipulate the web page http://www.flickr.com/photos/jram23/3088840966/Saturday, December 15, 12
  • The DOM Stands for Document div HTML Object Model Every HTML element has a JS object “bound” to it in a special bond HTMLDivElement JSSaturday, December 15, 12
  • The DOM <p id="text"></p> Can use getElementById to find a specific var t = document.getElementById(text); element t.innerHTML = "Hello World"; Can use getElementsByTagNam e to get all elements with a specified nameSaturday, December 15, 12
  • DOM Agenda jQuery Introduction Handling Events Writing a simple web appSaturday, December 15, 12
  • The Facts Every browser is different. Really. W3 Standard Webkit Mozilla MicrosoftSaturday, December 15, 12
  • Ajax Libraries Developer tools that wrap common functionality and create a standard Many options to choose from. We’ll use jQuerySaturday, December 15, 12
  • jQuery Basics Wrap a normal DOM $(p).html(hello jQUery); element inside a jQuery object <p></p> All operations on the element are performed by jQuery Unified and cross browser APISaturday, December 15, 12
  • jQuery Basics: Selectors <p id="text"></p> Powerful element selection and manipulations $(p#text).html("Hello World"); Works “the same” for all mobile & desktop browsers Selector returning a jQuery Object An action to perform on the objectSaturday, December 15, 12
  • jQuery Actions $(div#foo).addClass(wide); Each jQuery $(div#foo).removeClass(wide); object $(div#foo).css(background, red); supports a wide range of $(div#foo).hide(); functions to $(div#foo).show();     alter the elementsSaturday, December 15, 12
  • jQuery Actions Example Zebra stripe a table using jQuery $(table tr:nth-child(2n)).css(background, #ccc);Saturday, December 15, 12
  • 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” argumentSaturday, December 15, 12
  • jQuery Events document.ready scroll click select hover submit keypress Full list: http:// mousemove api.jquery.com/ category/events/ resizeSaturday, December 15, 12
  • 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 squareSaturday, December 15, 12
  • 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 elementSaturday, December 15, 12
  • 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 jQuerySaturday, December 15, 12
  • Q&ASaturday, December 15, 12
  • Thank You Ynon Perek ynonperek@yahoo.com ynonperek.comSaturday, December 15, 12