Quick Introduction to JavaScript Module 2

Quick Overview of JavaScript Ali Chalhoub

March, 2014 Internal

Module 2

2014 SAP AG or an SAP affiliate company. All rights reserved. 2 Internal

Agenda

Quick Overview of JavaScript

Whats JavaScript

How to use it

Examples

Debug JavaScript

Advanced Topic

Working with JavaScript Object and Arrays

Demo JavaScript and HTML 5

JavaScript best practice tips

Summary

Quick Overview of JavaScript


Whats JavaScript?

JavaScript

Is a Programming language that allow the user to interact with the user interface and perform actions without going back to the server.

Runs in the client machine and not the back-end server.

It is used for form validation before submitting the result to the back-end server for processing.

It is NOT java.

It is used with HTML web pages or embedded within an HTML page

It can be stored on its own file and referenced by an html page

How to use JavaScript


How to Use JavaScript?

In order to use JavaScript programming, you need the following:

A web server in production

Apache

IIS

Text Editor

Web browser

It can run locally without a web server as well as a stand alone application


Syntax Ex1

1.

2.

3.

4. Hello World

5.

6. document.write("Hello World!!!

Using JavaScript");

7.

8.

9.

The

tag

It defines the block where the JavaScript reside and gets executed.

JavaScript is case sensitive ( i.e document.write() works Document.write() will not be recognized

To write something to the page and display to the user, you will use

document.write();

A tag must be closed when you are done. ( i.e )


Syntax Ex1

1.

2.

3.

4. Hello World

5.

6. document.write("Hello World!!!

Using JavaScript");

7.

8.

9.

JavaScript code can be embedded

In the body tag of the web page

It can be embedded in the header tag

To display a literal string, you use the double quotation symbol

Within a string in JavaScript, you can embed an THML tag ( i.e document.write( hello World);

Examples Alter HTML Element


Syntax Ex 2 Altering an HTML Element

1.

2.

3.

4. Altering HTML element

5. This is a

paragraph that is going to be

altered by JavaScript.

6.

7. document.getElementById("myParaID")

.innerHTML="This is the new

paragraph";

8.

9.

10.

Altering an HTML element

1. If an HTML tag must have an ID in order

to be altered. ( i.e )

2. In JavaScript code block, you will use the

getElementByID function of the

document object. ( i.e document.getElementById("myPar

aID")

3. Then you will use the innerHTML

property to change the text value. ( i.e: document.getElementById("myParaID").innerHTML

="This is the new paragraph";

Examples Referencing a JavaScript External File


Syntax Ex3 of Referencing an External JavaScript File

1.

2.

3.


5. My First

Paragraph.

6.

7.

8.

Referencing external JavaScript file

1.

Within the tag use the src attribute to reference your JavaScript file.

Make sure if this is a file on the web, use the full URL address


Content of the External JavaScript File

1. document.getElementById("myParaID").

innerHTML="This is the new paragraph

from external file";

When referencing an external JavaScript

file,

1. No need to use the tag within the

file.

2. You can start writing javascript code right

away. As you can see on the left, we

wrote the javascript

document.getElementById directly in the

external file.

Examples Calling a Function


Syntax Ex4 Calling a JavaScript Function

1.

2.

3.

4. My Web Page

5. This a paragraph within the para.

tag.

6. This a div within the div block

7.

8. Click

Me

9.

10.

11.function changeDiv()

12.{

13.document.getElementById("myParID").innerHTML="Hello

Paragraph";

14.document.getElementById("myDivID").innerHTML="Hello

div";

15.}

16.

17.

18.

Calling a JavaScript Function

1. Create a function within the tag. (

i.e: function changeDiv(){ }

2. Define a block of code within the curly

bracket. This code can only be executed

when the function is called.

3. In this example on the left side, we have

Two HTML tags, one is a , and second is a

We have a button that when we click it, it will alter the content of these tags

Examples Comments


Comments in JavaScript

1.

2.

3.


5. This is a paragraph

that is going to be altered by

JavaScript.

6.

7. //This is a comment about innerHTML

8. document.getElementById("myParaID").i

nnerHTML="This is the new paragraph";

9.

10.

11.

A comment basically

1. It allow the user to put a note or some

detail explaination about certain code.

2. A comment gets ignored during runtime

and does not get executed.

3. To make a single line comment in

javascript, use double slash ( i.e // )

//This is a comment



1.

2.

3.


5. This is a paragraph that is

going to be altered by JavaScript.

6.

7. /* This is a comment about innerHTML.

It allows the developer to change

the content of a html tag dynamically

8. */

9. document.getElementById("myParaID").innerHTML="

This is the new paragraph";

10.

11.

12.

Multiple line comments

1. If an explanation is required which takes

more than one line, then use the following

syntax /* */



1.

2.

3.

4. My Web Page

5. This a paragraph within the para.

tag.

6. This a div within the div block

7.

8. Click

Me

9.

10.

11.function myFunction()

12.{/*

13.document.getElementById("myParID").innerHTML="Hello

Paragraph";

14.document.getElementById("myDivID").innerHTML="Hello

div";

15.*/

16.}

17.

18.

19.

To prevent a code or statement from

execution, just comment the statement

1. Example: // document.write(not good one)

To prevent multiple line of codes or

statements from execution, you can use /*

*/ block as well.

Examples Variables


Syntax Ex5 Variables in JavaScript

1.

2.

3.

4.

5. var myvar;

6. myvar="Initialize my Variale with text";

7. document.write(myvar);

8. document.write("");

9. myvar="This is my value now";


11.

12.

13.

Variables are used to set reference to an

object or to store value in it and use it

later

1. Example: var myvar;

Examples if statement


Syntax Ex6 If Statement block in JavaScript

1.

2.

3.

4. Greeting

5.

6.

7. function myFunction()

8. {

9. var sGreeting="";

10. var myTime=new Date().getHours();

11. if (myTime

Examples Alert Statement


Alert Statement in JavaScript

1.

2.

3.

4. Greeting

5.

6.

7. function myFunction()

8. {

9. var sGreeting="";

10. var myTime=new Date().getHours();

11. alert("before reaching if statement");

12. if (myTime

Examples String Concatenation


Syntax Ex7 String Concatenation

1.

2.

3.

4.

5. var myvar;

6. myvar="This is a very long text that I know it will" +

7. " not fit on one line; therefore; I need to use the" +

8. " concatenation symbol in JavaScrpit.";



11.

12.

13.

myvar variable now contains a very large

text that cannot fit on one line. Therefore,

we have to break the string. To do that:

1. Put the string in double quotation or

single quote.

2. When you decide to break the line and

continue in the next line, close the text

string with a double quotation or single

quotation. Which ever you started with,

you will close with it.

3. Once you reach the end of the text, just

close the string with a quotation or double

quotation and add semi-colon.


Mixing Double Quotation and Single Quotation

1.

2.

3.

4.

5. var myvar;

6. myvar= 'This is a very long text that I know it will' +

7. ' not fit on one line; therefore; I need to use the' +

8. ' concatenation symbol in JavaScrpit. This is called' +

'"JavaScript Programming!!!"';



11.

12.

13.

myvar variable needs to contain the

following string "JavaScript

Programming!!!". To do that:

1. Because you want double quotation

within the string, then the outer string will

use single quotation.

2. Follow the rest of the syntax to combine

the lines from the previous slide.

Debug JavaScript


Debug JavaScript

To debug a JavaScript page, we need the following web browser:

Chrome

Chrome debug allows you to :

Set a breakpoint in a particular statement

F8: Resume

F10: Use F10 function to step over a statement.

F11: Use F11 to step into a statement.

You can use watch to inspect a variable


Activate the Debugger

To activate the Chrome debugger:

1. In Chrome open the website, URL, or the file you are interested in debugging

2. Press F12 function key

3. You should see something like that:



Settings and

Configuration

Source

Code to

Debug

Ste

ps

Play Icon Resume



To set a breakpoint on particular line, do the following:

1. In Chrome open the website, URL, or the file you are interested in debugging

2. Press F12 function key to open

the debugger

3. Click on Sources option

4. Click on the tiny play icon under

sources to show the navigation

5. Now select your file and click on it

6. Click on the line number using your

mouse to set the break point



1

2



3

Double click on

the file



4

No content,

needs to reload



5

Reloading the page

to step into the

code After

Reloading



6

Click on the line you want to

debug and reload the page to

break into it



Now you are stepping into your

code

7

Click on step

over icon or

press F10

10

Advanced - JavaScript Objects &

Array


Whats JavaScript Object?

JavaScript Object

Is a set of properties and functions that describe the characteristics of something ( object), ( i.e a car, tree, BCP incident).

Is a type of object-oriented programming language.

Is a prototype-based and does not support the class statements.

A vehicle is an object in JS. However, car, truck are prototypes of the object vehicle.

Note: Anything in JavaScript is consider it an object. ( i.e Dates, Strings, etc)

Ex: var txtObj = new String("Welcome to JavaScript") ;


Vehicle Object

Object Properties Methods

company="company Name"

model = "vehicle model"

color= "vehicle color"

weight="vehicle weight"

start()

stop()

drive()


Incident Object Example

Object Properties Methods

status="customer action"

processor ="Ali Chalhoub"

priority="Very High"

customer="SAP IT"

rampup=true

irt="OK"

mpt="3%"

component="MOB-ONP-COR"

incidentnumber="2113/2014"

pickup()

dispatch()

setStatus()

assignProcessor()


Syntax Creating an Object in JavaScript

There are two methods to create a JavaScript object.

1. First method is to create a direct instance of the Object and add properties to it.

2. Or create your own custom class with your own Constructor.

Something to be aware of:

Class Defines the characteristics of the Object Object An Instance of a Class. Property An Object characteristic, such as model, firstname, lastname, age, color. Method An Object capability, such as walk. Constructor A method called at the moment of instantiation where you can initialize your

variables or properties of an object instance.


Syntax Creating Object using a Direct Instance Method

To define a direct instance of an Object, you do the following:

This code shows how you can instantiate an instance of an Object.

This code below shows you how to add a property to your object instance

Accessing the object instance method

var incidentObj = new Object();

incidentObj.priority = "High";

incidentObj.getIncidentNumber();


Syntax Creating Object using a Direct Instance Method

To define a direct instance of an Object, you do the following:

This code shows how you add a function to an instance of an Object.

incidentObj.getIncidentNumber= function() {

return this.incidentnumber;

}


Ex7 Creating Object using a Direct Instance Method

1.

2.

3.

4.

5. var incidentObj=new Object();

6. incidentObj.incidentnumber="2134/2014";

7. incidentObj.irt="OK";

8. incidentObj.processor="i826599";

9. incidentObj.customer="SAP IT";

10.incidentObj.component="MOB-ONP-COR";

11.incidentObj.getIncidentInfo = function(){

12. return ("Incident: #" + incidentObj.incidentnumber + "" + "Support Name: " +

incidentObj.processor + "" + "Customer:" + incidentObj.customer);

13.}

14.document.write( incidentObj.getIncidentInfo() );

15.

16.

17.


Alternative Syntax Creating Object using a Direct Instance Method

There is an alternative way to create an object. It is called object literals

This code shows how you can instantiate an instance of an Object.

incidentObj = {incidentnumber:"2134/2014",irt:"OK",processor:"i826599"};


Syntax Creating Object with Constructor

To define an object that uses a constructor, do the following:

function incident(inum,prty,processor,cust, comp){

this.incidentnumber=inum;

this.priority=prty;

this.processor = processor;

this.customer=cust;

this.component=comp;

this.getIncidentInfo=getIncidentInfo;

function getIncidentInfo()

{

return ("Incident: #" + this.incidentnumber + "" + "Priority: " +

this.priority + "Support Name: " + this.processor + "" +

"Customer:" + this.customer);

}

}


Syntax Ex 8 Creating Object using a Object Constructor

1.

2.

3.

4.

5. function incident(inum,prty,processor,cust, comp){

6. this.incidentnumber=inum;

7. this.priority=prty;

8. this.processor = processor;

9. this.customer=cust;

10. this.component=comp;

11. this.getIncidentInfo=getIncidentInfo;

12. function getIncidentInfo()

13. {

14. return ("Incident: #" + this.incidentnumber + "" + "Priority: " + this.priority + "Support Name: " +

this.processor + "" + "Customer:" + this.customer);

15. }

16. }

17. var incidentObj = new incident("20132","High","Ali Chalhoub","SAP IT","MOB-ODP");

18. document.write(incidentObj.getIncidentInfo());

19.


Whats Array in JavaScript?

Array Object

Is a storage for many values ( i.e a List of items )

To create an Array in JavaScript, do the following:

var myIncidents = new Array();

myIncidents[0] = "21022";




Syntax Creating an Array

There are many ways you can create an Array in JavaScript

Regular way:

Condensed way:

Literal way:

var myIncidents= new Array();



var myIncidents = Array{"21022","4323", "43221", "32123"};

var myIncidents = ["21022","4323", "43221", "32123"];


Ex9 Accessing an Array

1.

2.

3.

4.

5. var i;

6. var myIncidents = new Array();

7. myIncidents[0] = "21022";

8. myIncidents[1] = "2134";

9. myIncidents[2] = "34312";

10.for (i=0;i

Demo - JavaScript and HTML 5

JavaScript Best Practice


Tip #1

Uninitialized variable math is slower by 70%

Bad:

var foo;

foo = 6 + 5;

Very Bad:

var foo;

while (x) { foo++; }

Good:

var foo = 0;

foo = 6 + 5;

The (arithmetic) operator must determine the variable type each time it does its job,

so initialized variables generate additional overhead during execution


Tip #2

Integer comparisons are 20x slower than checking for 0

Bad:

for (i < 20) { do x; i++; }

Good:

var i = 20;

while (i--) { do x; }

Each time you iterate through the loop you need to compare the value of i with 20

versus comparing i to 0 (the while condition)

Bottom Line: decrementing WHILE loops is 20x faster than FOR loops


Tip #3

Finding a DOM elements properties is slow

Declare an object if youll be accessing it multiple times

Bad:

while (cnt--) {document.form1.field1.value = cnt; }

Good: var aField = document.form1.field1;

while (cnt--) { aField.value = cnt; };


Tip #4

document.getElementById() is especially slow and especially popular

Cache the result

Avoid calling it inside loops

Bad: while (cnt--) {

document.getElementByID(field1).value = cnt;

}

Good: var aField = document.getElementByID(field1);

while (cnt--) {

aField.value = cnt;

};


Watch for Function Redeclaration

Redeclaring functions is legal in JavaScript

File 1 function modify(x) {

x = x -5;

}

File 2 function modify(x) {

x = x + 5

}

Which modify function does it use?

var result = modify(10)

If each of these modify functions are defined in different JavaScript files and included by others it is very difficult to determine why you are getting unexpected results


Utility Classes

Create classes for every [group of] functions (i.e. Utility classes)

Instead of calling

var result = modify(10);

Each function will be called as

var util = new Utility();

var result = util.modify(10);

Always know which class holds the function you called

No naming conflicts


Global Classes

A naming standard can help with reading code and understanding scope

function modify(x) {

x = gMyClass.increment(x)

}

At a glance you know gMyClass was defined as a global class and it will be found in MyClass.js file


Summary

We have learned

What Javascript is and how to create a JS file.

How to reference an external JavaScript file.

How to alter an HTML element in JavaScript.

What JavaScript Object is and how to define one.

What JavaScript Array Object is and how to use it.

The best recommended JavaScript coding.

Quick Introduction to JavaScript Module 2

Documents

Transcript of Quick Introduction to JavaScript Module 2