Introduction to JavaScript Basics.

JavaScript Basics
PRESENTED BY: HASSAN AHMED BAIG

Introduction
JavaScript 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 Disadvantages
ADVANTAGES
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 Placed
In HTML, JavaScripts must be inserted between <script> and </script> tags either in <head> or
<body> tag.
<html>
<head>
<script>
</script>
</head>
<body>
<script>
</script>
</body>
</html>
JavaScript code comes here.
External JavaScript can also be inserted using “<script src="myScript.js"></script>”.

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
Arrays are defined then Value = Undefined
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.
function functionName(param1, param2,…,paramN){
//Code to be executed.
return anyValue; //return is used if function return any value otherwise not.
}
Functions can be accessed by their names like “functionName(1,2);”
Functions can be called any event occur like onclick event of button.
<button onclick=“functionName()”>Press It</button>
In Events single statement can also be executed with out calling the function.
<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 (initialization; condition; increment) {
code block to be executed
}
For example:
for (i = 0; i < 5; i++) {
text += "The number is " + i + "<br>";
}
For/in is used to iterate the properties of an object.
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 DOM
With 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 DOM
Elements 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 HTML
HTML 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(“<img src=“abc.jpg” > name”).src= ”xyz.jpg” <img src=“xyz.jpg” >

Changing CSS
Style 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 DOM
Events 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.

Recommended

My header