02 JavaScript Syntax

JavaScriptProgramming the WWW

Saturday, December 15, 12

Agenda

Key Concepts

Core Types

Syntax

The Global Object & Scope Chain

Function Objects

History1995 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 JScript

JavaScript Key Ideas

Interpreter based (no compilation)

Loosely typed language

Objects are just hash tables

Hello JavaScript

var text = “Hello World”;

console.log(text);

Define and initialize a variable called ‘text’ with the string “Hello World”

Hello JavaScript

console.log(text);

Call the log function from the console object on the variable ‘text’

Hello JavaScript

console.log(text);

Call the log function from the console object on the variable ‘text’

Define and initialize a variable called ‘text’ with the string “Hello World”

Running JavaScript

Easy way: jsbin

Completely offline using node.js

Using a simple HTML file

DemoJavaScript Basic Syntax

JavaScript Core TypesNumbers

Strings

Booleans

undefined

Objects

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

Numeric FunctionsNumber(string)

converts string to number returns NaN on error

parseInt(string, radix)converts string to numbertries its best (so '7hello' is OK)

Math.random()returns a random between 0 and 1

Numeric Functionsx = 3;

y = Number(7);

z = Number(‘9’);

console.log(x + y + z);

Q & ANumbers

Strings

Booleans

undefined

Objects

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

String Examples'hello'.length === 5

String(10).length === 2

'hello'.indexOf('l') === 2

'hello'.lastIndexOf('l')=== 3

'hello'.toUpperCase() === 'HELLO'

http://ynonperek.com/javascript-exer.html

Exercises 1-5

Q & ANumbers

Strings

Booleans

undefined

Objects

Boolean TypeJavaScript 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

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

undefined

Not even the nothing

JavaScript puts undefined in anything that hasn't yet been assigned a value

JavaScript False/True

These are all falsy:

false, null, undefined

“” (the empty string)

0, NaN

Everything else is truthy

ObjectsEverything 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.

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

Q & ANumbers

Strings

Booleans

undefined

Objects

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

JavaScript SyntaxIdentifiers

Reserved Words

Comments

Loops and Branches

Functions

Objects & Arrays

JavaScript Identifiers

Starts with a letter, an _, or a $

Followed by letters, digits, _ or $

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

Identifier Examples

counter

file_name

function getName()

function Person()

JavaScript Reserved Wordsabstract

boolean break bytecase catch char class const continuedebugger default delete do doubleelse enum export extendsfalse final finally float for functiongotoif implements import in instanceof int interfacelongnative new nullpackage private protected publicreturnshort static super switch synchronizedthis throw throws transient true try typeofvar volatile voidwhile with

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

Syntax Q & AIdentifiers

Reserved Words

Comments

Loops and Branches

Functions

Objects & Arrays

Loop Controls

JavaScript has:

while and do-while loops

for loops

for-in loops

While Loop

Syntax:

while (expression) {

statement;}

Do-while Loop

Syntax:

Note the ending semicolon

statement;} while (expression);

For Loop

Syntax:

for ( initialize; test; increment) { statement;

For Example

var sum = 0;

for ( var i=0; i < 10; ++i ) {

sum += i;}console.log(sum);

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

BranchesSyntax:

if ( expression ) {}

else if ( something_else ) {}

else {}

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 + ...)

Reserved Words

Comments

Loops and Branches

Functions

Objects & Arrays

Functions & Scope

Outside all functions, variables have the “global” scope.

Count how many globals are on the right

var text = 'Hello Scope'; var sum = 0; for ( var i=0; i < 10; i++ ) { sum += i; } console.log( sum );

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

Creating A Functionfunction foo(x, y) { return x + y;}

var bar = function(x, y) { return x + y;};

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

Functions & Scope

Best Practices:

Write all code inside a function block

Use only one var statement at the beginning of that function

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

Functions & ScopeWhat 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()); }

Functions Q & A

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

Objects

var pos = { x : 50; y : 10 };

pos.move = function(dx, dy) {

this.x += dx;

this.y += dy;};

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

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

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

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

Reserved Words

Comments

Loops and Branches

Functions

Objects & Arrays

DOM ScriptingUsing JS To Manipulate the web page

http://www.flickr.com/photos/jram23/3088840966/

The DOM

Stands for Document Object Model

Every HTML element has a JS object “bound” to it in a special bond HTMLDivElement

HTMLdiv

The DOM

Can use getElementByIdto find a specific element

Can use getElementsByTagName to get all elements with a specified name

var t = document.getElementById('text');

t.innerHTML = "Hello World";

DOM Agenda

jQuery Introduction

Handling Events

Writing a simple web app

The Facts

Every browser is different. Really.

W3 Standard

Webkit

Mozilla

Microsoft

Ajax Libraries

Developer tools that wrap common functionality and create a standard

Many options to choose from. We’ll use jQuery

jQuery BasicsWrap a normal DOM element inside a jQuery object

All operations on the element are performed by jQuery

Unified and cross browser API

$('p').html('hello jQUery');

jQuery Basics: Selectors

Powerful element selection and manipulations

Works “the same” for all mobile & desktop browsers

$('p#text').html("Hello World");

Selector returning a jQuery Object

An action to perform on the object

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();

jQuery Actions Example

Zebra stripe a table using jQuery

$('table tr:nth-child(2n)').css('background', '#ccc');

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

jQuery Eventsdocument.ready

keypress

mousemove

resize

scroll

select

submit

Full list: http://api.jquery.com/category/events/

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

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

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

Thank You

Ynon Perek

ynonperek@yahoo.com

ynonperek.com

02 JavaScript Syntax

Technology

TypeScript Language Specificationjavascript.xgqfrms.xyz/pdfs/TypeScript Language Specification.pdfTypeScript syntax is a superset of ECMAScript 2015 (ES2015) syntax. Every JavaScript

Introduction to JavaScript · JavaScript for Java developers There are many super!cial similarities between Java and JavaScript, as they, syntax-wise, share a common ancestor in C

2013 02-27-owasp top10 javascript

Client-Side programming with JavaScript 3. The JavaScript Switch Statement Syntax switch(n) { case 1: execute code block 1 break case 2: execute code

JavaScript 1 Core Syntax

A Hyperion White Paper Custom Javascript In Planning · Conditional Logic JavaScript includes an If statement for conditional tests. The syntax for If statements is fairly straightforward,

Javascript, JQuery, and AJAX · jQuery Syntax • Basic jQuery syntax is $(selector).action(), where: $ is an abbreviation for jQuery. It can be changed using $.noConflict() selector

COMP 205 - Week 4 Dr. Chunbo Chu Overview JavaScript Syntax Functions Objects Document Object Model Dynamic HTML

JavaScript II ECT 270 Robin Burke. Outline JavaScript review Processing Syntax Events and event handling Form validation

JavaScript Basic Syntax – Part 1 - Core Servletscourses.coreservlets.com/.../javascript/JavaScript-2-Basic-Syntax... · 26 The Math Class • Call methods on the class – Math.cos(…),

EGL Rich UI 7.5.1 - IBM...A developer writes Rich UI applications using EGL syntax. For advanced purposes, however, a developer can write custom JavaScript or use JavaScript libraries

JavaScript I ECT 270 Robin Burke. Outline Midterm answers JavaScript Programming Syntax Interacting with the browser Variables and data types Arrays Flow

JavaScript - HAVOHEJ E-LIBRARY · PDF fileJavaScript Syntax: Function Declarations 1. Declaration Syntax – Functions are declared using the function reserved word – The return

JTemplate - Columbia University · Jtemplate’s syntax emulates the syntax of C like languages like Java, C# or Javascript. This tutorial assumes a familiarity with one of those

Introduction to Client-Side Web Development Introduction to Client-Side programming using JavaScript DOM and JavaScript; basic syntax and concepts 3 th

JavaScript and Ajax - U-M Personal World Wide Web Server · PDF fileJavaScript and Ajax ... function message() {alert ... Language Syntax •Javascript supports comment characters

02 JavaScript

CHAPTER JavaScript and VBScript 3 - Elsevier · CHAPTER JavaScript and VBScript 3 INFORMATION IN THIS CHAPTER: † Syntax † Encodings † JavaScript Variables † VBScript † JScript

2013 lecture-02-syntax shortnewcut

Jumping into jQuery and JavaScript Syntax - TCOSitesmembers.tcosites.com/downloads/class/handouts/Handout... · 2019. 5. 13. · AngularJS uses JavaScript and jQuery syntax to provide