JavaScript Primer Basic Introduction of JavaScript JavaScript - - PowerPoint PPT Presentation

JavaScript Primer

Basic Introduction of JavaScript

JavaScript History

• Why (re)introduce JavaScript?
• Notorious for being world’s most misunderstood programming language

(Douglas Crockford - http://javascript.crockford.com/javascript.html)

• Scripting language of the World Wide Web
• A very nice dynamic object-oriented general purpose programming

language

• Java- prefix suggests that JavaScript is somehow related to Java
• ECMAScript 3 – first stable version of JavaScript standard (1999) and has

remained stable ever since.

• We will use ECMAScript 5 (2009) and not ECMAScript 6 (June, 2015)
• Unlike most programming languages, the JavaScript language has no

concept of input or output.

• Browser is most common host environment
• JavaScript interpreters found elsewhere – Adobe Acrobat, Photoshop,

SVG images, Yahoo’s widget engine, server-side environments as Node.js

JavaScript Overview

• Lisp in C’s clothing
• C-like syntax, including curly braces and clunky for statement makes it look like

an ordinary procedural language

• JavaScript has more in common with functional languages like Lisp and

Scheme:

• It has arrays instead of lists, and objects instead of property lists, BUT
• Functions are first class objects; it has closures; You get lambdas without having

to balance all those parens

• Object-Oriented
• It has objects which can contain data and methods that act upon that data
• Objects can contain other objects
• It does not have classes, but it does have constructors which do what classes

do

• It does not have class-oriented inheritance, but it does have prototype-
• riented inheritance.
• Private members: - http://www.crockford.com/javascript/private.html

Brief Overview

• Language with
• Types, operators, standard built-in objects, and methods
• Building blocks of the language: the types
• JavaScript programs manipulate values, which belong to a type

q Number q String q Boolean q Object (Function, Array, Date, RegExp) q null q undefined

Numbers

• Numbers in JavaScript are double-precision 64-bit

format IEEE 754 values

• No such thing as integer in JavaScript
• Arithmetic operators are supported.
• Built-in object called Math, provides advanced

mathematical functionality

• parseInt() and parseFloat() functions convert from

string to integer or floating point, respectively

• NaN, isNaN(), isFinite() are available

String

• Strings in JavaScript are sequences of Unicode

characters

• Each character is represented by a 16-bit number
• String is a primitive type in JavaScript
• Strings are immutable and are passed by value.
• Strings have length property
• Strings can be used like objects—they have methods that allow you to

manipulate the string and access information about the string.

• List of string methods: http://www.w3schools.com/jsref/jsref_obj_string.asp

> var str = new String(”new string"); > str; > str.newProperty = ”new property value”; > str;

Boolean Type

• JavaScript has a boolean type—possible values are

true and false.

• true and false are both keywords
• Any value can be converted to a boolean according to these rules:
• false, 0, empty string (“”), NaN, null, undefined all become false or

falsy

• All other values become true or truthy
• Boolean operations such as && (logical and), || (logical or),

and ! (logical not) are supported.

• Comparisons
• Comparisons in JavaScript can be made using <, >, <= and >=.

These work for both strings and numbers.

• 123 == "123"; // true
• 1 == true; // true
• 123 === "123"; // false
• 1 === true; // false

Does type coercion Avoids type coercion

Control Structures

• if (condition 1){

… } else if (condition 2) { … } else { … } statements as in languages with C-like syntax

• while(condition){ … } loops as in
• do{ … }while(condition) loops
• for (init; condition; increment){ … } loops
• && and || use short circuit evaluation
• switch statement for numbers and strings

Objects

• JavaScript objects can be thought of as simple

collections of name-value pairs.

• As such, they are similar to:
• Dictionaries in Python.
• Hashes in Perl and Ruby.
• Hash tables in C and C++.
• HashMaps in Java.
• Associative arrays in PHP.
• The "name" part is a JavaScript string, while the value can be any

JavaScript value — including more objects.

• Creating Objects

var obj1 = new Object(); // create an empty object with new operator var obj 2= {}; // use object literal notation

Object Prototype

• An object from which other objects inherit their

properties and methods

• All built-in JavaScript objects inherit from the

Object.prototype

• Standard way to create an object prototype is to

use an object constructor function

function Person(name, age) { this.name = name; this.age = age; } // Define an object var You = new Person("You", 24); // We are creating a new person named "You" // (that was the first parameter, and the age..)

Resources

• https://developer.mozilla.org/en-

US/docs/Web/JavaScript/A_re-introduction_to_JavaScript

• http://javascript.crockford.com/javascript.html)
• http://www.crockford.com/javascript/private.html
• http://javascript.crockford.com/inheritance.html
• http://www.w3schools.com/jsref/jsref_obj_string.asp
• http://www.w3schools.com/js/js_object_prototypes.asp