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

Recommended

More Related Content

What's hot

What's hot (20)

Viewers also liked

Viewers also liked (14)

Similar to Introduction to JavaScript Basics.

Similar to Introduction to JavaScript Basics. (20)

Recently uploaded

Recently uploaded (20)

Introduction to JavaScript Basics.