INTRODUCTION TO JAVASCRIPT

JavaScript, aka Mocha, aka LiveScript, aka JScript, aka ECMAScript, is one of the world's most popular programming languages. 

JavaScript is a high-level, object-oriented, dynamic, untyped, and interpreted programming language.

INTRODUCTION TO JAVASCRIPT

Virtually every personal computer in the world has at least one JavaScript interpreter installed on it and in active use. 

MAIN USAGE OF JAVASCRIPT

Alongside HTML and CSS, it is one of the three essential technologies of World Wide Web content production.

OTHER USAGES OF JAVASCRIPT

• Google's Chrome extensions, Firefox's extensions, etc.
• Send queries to MongoDB database
• Adobe's Acrobat PDF documents
• Tools in the Adobe Creative Suite
• Running macros in LibreOffice
• Programming for Arduino boards
• The Unity game engine

OTHER USAGES OF JAVASCRIPT

• Programming in DX Studio
• Programming in DroidScript
• Dynamic programming with javax.script package in Java
• QtScript in Qt C++ toolkit
• Developing metro applications with WinJS
• Developing Desktop applications
• Server-side network programming
• Make slideshow :)

Related Languages

• Dart
• CoffeeScript
• TypeScript
• LiveScript
• JScript
• VBscript

Related features

• JSON
• AJAX
• Underscore.js
• asm.js

Top Frameworks

• JQuery
• Angular.JS
• Ember.JS
• Backbone.JS
• React.JS
• Node.JS
• Socket.IO

JAVASCRIPT RATING

JAVASCRIPT RATING

JAVASCRIPT RATING

HISTORY

In 1995, there was a dilemma with form validation. Visitors were filling out forms. Sometimes a field wasn’t filled in correctly.

The real problem was the time it took to send this data, process it and then display a message back. 

You would end up waiting at least 30 seconds just for a message to tell you that you forgot to fill in your phone number!

HISTORY

JavaScript was originally developed in 10 days in May 1995 by Brendan Eich, while he was working for Netscape Communications Corporation.

Although it was developed under the name Mocha, the language was officially called LiveScript.

HISTORY

At the same time , another programming language called  Java  became very well known and so Netscape decided to try to cash in on this by renaming the language built into their browser to  JavaScript .

Java vs. javaScript

So... what is the difference between Java and JavaScript anyway?

SIMILARITIES

• both have a C-like syntax
• both typically sandboxed (when run in browser)
• JavaScript was designed with Java's syntax & standard library
• all Java keywords were reserved in original JavaScript
• JavaScript's standard library follows Java's naming conventions

DIFFERENCES

• Java has static typing, while JavaScript's typing is dynamic
• Java is loaded from bytecode, while JavaScript is loaded as human-readable source code
• Java's objects are class-based, while JavaScript's are prototype-based
• Java did not support functional programming until Java 8, while JavaScript has done so from the beginning

FEATURES OF JAVASCRIPT

• Imperative and structured
• Dynamic
• Prototype-based
• Functional
• Delegative
• Miscellaneous

IMPERATIVE and STRUCTURED

JavaScript supports much of the structured programming syntax from C (if statements, while loops, switch statements, do while loops, etc.). 

Except two partial  exception: 

• function scoping with  var identifier
• automatic semicolon insertion

DYNAMIC

• What is dynamic programming language?
• Duck Typing: When I see a bird that walks like a duck and swims like a duck and quacks like a duck, I call that bird a duck.
• Run-time evaluation: JavaScript includes an eval function that can execute statements provided as strings at run-time.

Prototype-based OBJECT ORIENTED

In JavaScript, an object is an associative array, augmented with a prototype. there are two syntactical ways to specify such a name: 

• dot notation :             obj.x = 10
• bracket notation :     obj['x'] = 10

• what is   associative array?

Functional

• what is a  first-class function ?
• In javascript a function is first-class!
• function is considered to be an object.
• JavaScript also supports recursive function, anonymous function and variadic function.

DELEGATIVE

JavaScript supports implicit and explicit delegation.

MISCELLANEOUS

• Run-time environment:  Chakra, SpiderMonkey, V8
• Array and object literals:  JSON  data format
• Regular expressions:  Similar to  Perl

javascript syntax

JavaScript borrows most of its syntax from Java, but also inherits from Awk and Perl, with some indirect influence from Self in its object prototype system.

Brendan Eich says:

Input / Output

JavaScript has no concept of input or output. It is designed to run as a scripting language in a host environment , and it is up to the host environment to provide mechanisms for communicating with the outside world.

in most of browsers you can use console, document or window object for input/output operations.

Hello World!

console.write('Hello World!');

window.alert('Hello World!');

document.write('Hello World!');

Basics

• Case sensitive

• Whitespace and semicolons

• Comments

a = 1;  // a variable
A = 10; // another variable!

firstName = "alireza";
lastName = "Afzal aghaei" // because of ASI technique
                          // not need to semi-colon;

// this is a single-line comment

/* and this is
        multi-line
                comment */

variables and identifiers

An identifier must start with a letter, underscore (_), or dollar sign ($); subsequent characters can also be digits (0-9). since ECMAScript 5  unicode characters can be used in identifiers.

Variables in JavaScript have no type attached, and any value can be stored in any variable. Variables are declared with a var statement.

var x, z; // value of x and z is "undefined"
var y = 2;
var a = 10, b = 11;
y = z = 1e5;

Reserved words in JavaScript

Arithmetic OPERATORS

Assignment Operators

Comparison OPERATORS

Logical Operators

• JavaScript also has bitwise operators.  see  resources for more information.

Data Types

• Number (includes integer and double)
• String
• Boolean
• Symbol (new in Edition 6)
• Object
  • Function
  • Array
  • Date
  • RegExp
  • XMLHttpRequest
• null
• undefined

Conditional Statement

if (condition1) {

    // statement;

} else if (condition2) {

    // statement;

} else {

    // statement;
}

switch(expression) {

    case m:

        // statement;
        break;

    case n:

        // statement;
        break;

    default:

        // statement;
}

for & while loop

for (init; condition; step) {

    //statement;

}

while (condition) {

    //statement;

}

do {

    //statement;

} while (condition);

for (variable in object) {

    //statement;

}

Function Statement

function functionName(parameter1, parameter2 = "defaultValue") {

    // statement;
    // return something if you want!

}

var f = function (a, b) {return a * b}; // anonymous function
var z = f(4, 3); 

var sum = function() {
    var x = 0;
    for (var i = 0; i < arguments.length; ++i) {
        x += arguments[i];
    }
    return x;
}
var result = sum(1, 2, 3); // variadic function

OBJECT ORIENTED

There are different ways to create new objects:

• using an object literal (single object)

• using the keyword new  (single object)

• using constructor (multiple objects) 

Objects are Variables Containing Variables

Object Oriented

var actor = {
    firstName : "Leonardo",
    lastName : "DiCaprio",
    age : 42,
    eyeColor : "blue"
};
// only one object!

var actor = new Object();
actor.firstName = "Leonardo";
actor.lastName = "DiCaprio";
actor["age"] = 42;
actor["eyeColor"] = "blue";

// only one object!

function Actor(first, last, age, eye) {
    this.firstName = first;
    this.lastName = last;
    this.age = age;
    this.eyeColor = eye;
} // now you can create multiple objects!

var myFavoriteActor = new Actor("Leonardo", "DiCaprio", 42, "blue");
var anotherActor = new Actor("Christian", "Bale", 42, "green");

Array  Literal

var numbers = [10, 20, 30, "js"];
numbers.push(40) // [10, 20, 30, "js", 40]
numbers[0] // 10
numbers[3] // "js"
numbers[6]= 50 // [10, 20, 30, "js", 40, undefined, 50]
var lenOfArray = a.length // 7

Arrays are special kinds of objects.

Exception handling

try {

  // Statements in which exceptions might be thrown

} catch(Exception) {

  // Statements that execute in the event of an exception

} finally {

  // Statements that execute afterward either way

}

throw new Error("Something went wrong."); // Custom error messages

With statement

with (Expression or Object){

  // statements

}

This statement is not allowed in  strict mode.

Strict Mode

Strict mode makes several changes to normal JavaScript semantics.

• eliminates some JavaScript silent errors by changing them to throw errors.

• fixes mistakes that make it difficult for JavaScript engines to perform optimizations.

• prohibits some syntax likely to be defined in future versions of ECMAScript.