introduction to javascript basics

JavaScript BasicsPRESENTED BY: HASSAN AHMED BAIG

IntroductionJavaScript is the programming language of the Web that runs on client end.

All modern HTML pages are using JavaScript.

JavaScript enhances Web pages with dynamic and interactive features like: Shopping carts

Form Validation

Calculations

Special graphic and text effects

Image swapping

and many more.

Advantages and DisadvantagesADVANTAGES

Runs Fast: Most of the JavaScript task runs without contacting to the server.

Platform Independent.

Easy to Learn.

Increased interactivity: You can create interfaces that react on the user interactions.

Richer interfaces: You can use JavaScript to include such items as drag-and-drop components and sliders to give a Rich Interface to your site visitors.

DISADVANTAGES

Runs on single thread: There is no multithreading or multiprocessing capabilities.

Read/Write Files: JavaScript does not allow the reading or writing of files. This has been kept for security reason.

Networking applications: JavaScript can not be used for Networking applications because there is no such support available.

Code is not hidden: Code is always visible to client end, even though it is minified.

Where JavaScript Is PlacedIn HTML, JavaScripts must be inserted between <script> and </script> tags either in <head> or <body> tag.

External JavaScript can also be inserted using “<script src="myScript.js"></script>”.

<html><head>

<script>

</script></head>

<body> <script>

</script></body></html>

JavaScript code comes here.

JavaScript Syntax (Variables)For single line comments “//” is used and for multiline comments “/* */” is used.

Variables are declared using “var” keyword.

var pi = 3.14;

var person = “Hassan Ahmed Baig“, var company= ’eDev’;

var x = 5;

var tested = true;

var lastName = “Baig", x = 30, job = “Developer";

var carName;

var cars = ["Saab", "Volvo", "BMW"];

var person = {firstName:“Hassan", lastName:“Baig", age:50, job:“Developer"};

Floating, String, Numeric and boolean Variables

One Statement, Many Variables

If value is not defined then Value = UndefinedArrays are defined

using square brackets

In JavaScript Objects properties are written in key value pair.

Properties can be accessed as “person.firstName”.

JavaScript Syntax (Functions and Events)For adding functions in JavaScript “function” keyword is used.

Functions can be accessed by their names like “functionName(1,2);”

Functions can be called any event occur like onclick event of button.

In Events single statement can also be executed with out calling the function.

function functionName(param1, param2,…,paramN){

//Code to be executed.

return anyValue; //return is used if function return any value otherwise not.

}

<button onclick=“functionName()”>Press It</button>

<button onclick=“this.innerHTML=Date()”>Press It</button>

JavaScript Syntax (Conditions)Conditions in JavaScript are “if”, “if else”, “if else if” and “switch”.

if (condition) {

code to be executed if the condition is true

}

if (condition) {

code to be executed if the condition is true

}else{

code to be executed if the condition is false

}

if (condition1) {

code to be executed if condition1 is true

} else if (condition2) {

code to be executed if the condition1 is false and condition2 is true

} else {

code to be executed if the condition1 is false and condition2 is false

}

switch(expression) {

case n:

code block

break;

case n:

code block

break;

default:

default code block

}

JavaScript Syntax (Loops)Loops in JavaScript are “for”, “for/in”, “while” and “do/while”.

For/in is used to iterate the properties of an object.

for (initialization; condition; increment) {

code block to be executed

}

For example:

for (i = 0; i < 5; i++) {

text += "The number is " + i + "<br>";

}

var person = {fname:“Hassan”, lname:“Baig”, age:50};

var text = "";

var propertyName;

for (propertyName in person) {

text += “PropertyName: ” + propertyName;

text += “PropertyValue: ” + person[propertyName ];

}

while (condition) {


}

do {


}

while (condition);

JavaScript HTML DOMWith the HTML DOM, JavaScript can access and change all the elements of an HTML document.

In other words: The HTML DOM is a standard for how to get, change, add, or delete HTML elements.

When web page is loaded, browser creates a Document Object Model of the page as for example:

<html><head>

<title>My title

</title></head>

<body> <a href=“#”>My link</a><h1>My header</h1>

</body></html>

Finding Element In HTML DOMElements can be found by their “ID”, “Tag Name”, “Class Name”.

“document.getElementById()” is used to find the element by their ids.

“document.getElementsByTagName()” is used to find the element by the tag name. Eg: document. getElementsByTagName(“header”);

“document.getElementsByClassName()” is used to find the element by the class name. Eg: document. getElementsByClassName(“logo”);

Changing HTMLHTML of any element can be modified by “innerHTML” property as follows:

Value of any attribute of an element can also be changed as follows:

<p id=“name"><strong>Hassan

</strong></p>

Hassan

document.getElementById(“name”).innerHTML = ”<strong>Hassan</strong>”

<p id=“name">Hassan</p>

Hassan

document.getElementById(“name”).src= ”xyz.jpg”<img src=“abc.jpg” > <img src=“xyz.jpg” >

Changing CSSStyle of any element can be modified by “style” property as follows:

<p id=“name“ style=“color:blue”>Hassan</p>

Hassan

document.getElementById(“name”).style.color = ”blue”

<p id=“name">Hassan</p>

Hassan

document.getElementById(id).style.property=new style

Register Event Using HTML DOMEvents can also be registered to any element using JavaScript HTML DOM as follows:

document.getElementById("myBtn").onclick = function(){

//code to be executed.

};

introduction to javascript basics

Software