JavaScript Getting Started

JavaScriptGetting Started

Who I’m

● My name is Hazem Hagrass● Lead Software Engineer @BADR, joined BADR @2010● Contacts:

○ website○ hazem.hagrass@badrit.com○ Linkedin

What is JavaScript?

● JavaScript was introduced in 1995 as a way to add programs to web pages in the Netscape Navigator browser.

● Has almost nothing to do with the programming language named Java. The similar name was inspired by marketing considerations.

What is JavaScript?

● It is an interpreted programming language.● It is object-based programming.● It describes how your html should act(Logic)

Use of JavaScript

● Use it to add/remove elements and control DOM○ Any dom element can be shown, hidden and changed.

● Create pages dynamically○ Based on the user's choices, the date, or other external data,

JavaScript can produce pages that are customized to the user.● Interact with the user

○ It can do some processing of forms and can validate user input when the user submits the form.

Writing JavaScript

● Writing JavaScript code is typically embedded in the HTML, to be interpreted and run by the client's browser.

Remember!

● JavaScript code is case sensitive.● White space between words and tabs are ignored.● Line breaks are ignored except within a statement.

The SCRIPT Tag

● The <SCRIPT> tag alerts a browser that JavaScript code follows.

● It is typically embedded in the HTML:<SCRIPT language = "JavaScript"> statements</SCRIPT>

Implementing JavaScript

● Embedding code.<SCRIPT> alert(“HELLO WORLD”); </SCRIPT>

● External file.<SCRIPT SRC="filename.js"> </SCRIPT>

Data Types

● Object● Function● Numbers● Strings● Booleans● null● undefined: default value for any variable.

Programming Basics

● In JavaScript you don't have to declare a variable's data type before using it.

● Any variable can hold any JavaScript data type, including:○ String data.○ Numbers.○ Boolean values (T/F)

Reserved Words

break case catch class const continue debugger default delete do else enum export extends false finally for function if implements import in instanceof interface let new null package private protected public return static super switch this throw true try typeof var void while with yield

Variables

● To declare variables, use the keyword var and the variable namevar userName

● To assign values to variables, add an equal sign and the valuevar userName = "Smith"; var price = 100;

Variables Names

● It name must start with a letter or an underscore. firstName or _myName

● You can use numbers in a variable name, but not as the first charactername01

● Capitalize the first letter of every word except the first salesTax or userFirstName

Objects

● JavaScript supports programming with objects.● The different screen elements such as Web pages,

forms, text boxes, images, and buttons are treated as objects.

● Every object has its own properties and methods.

Global Object

● As crockford says, the object that dare not speak of its name.

● Variables defined by var makes it local to the scope.● Variables should be defined by var, otherwise its a

global variable.● Use of it should be minimized.

Built-in Objects

● Math – provides for math calculations○ Format: Math.method(#)○ Methods: abs(), log(), pow(), random(), round(),

sqrt()● Date – provides date and time information

○ Format: new Date().method()○ var rightNow = new Date();

var theYear = rightNow.getFullYear()

Built-in Objects

● String – provides for string manipulation○ Format: stringName.method()○ var theString = "my name";

var printString = theString.bold();

var numChars = theString.length

Arrays

● Inherits from Object.● No need to provide length to create new array.

var x = [‘a’, ‘b’, ‘c’];

x.push(‘d’);

● Methods○ concat○ join○ push○ slice○ sort○ splice

Functions

● Inherits from Object.function sum(a, b){ return a + b;}

● Functions can be contained inside other functions.● The scope of inner function has access to continues

even if the parent function have returned.function sum(a, b){

function sum2Numbers(x1, x2){ return x1 + x2;}

return sum2Numbers(a, b);

}

Functions

● Functions inside an object is called a method.● When invoked with too many arguments, the rest are

ignored.function sum(a, b){ return a + b;} sum(1, 1, 2);

● When invoked with fewer arguments, the rest are set to undefined.sum(1);

Thank YouAny Questions?