Javascript For Beginners
Javascript
JavaScript was invented by Brendan Eich in 1995, and became an ECMA standard in 1997.
Javascript is scripting or interpreted language .i.e the code executes line by line when the browser load the javascript into the memory.
ECMA-262 is the official name of the standard. ECMAScript is the official name of the language.
When JavaScript was created, it initially had another name: “LiveScript”. But Java language was very popular at that time, so it was decided that positioning a new language as a “younger brother” of Java
Why Javascript?
If we want to execute any code on click of a button or text box value is changed we use Javascript.
JavaScript adds behavior to the web page where the web page is capable of responding to actions by your visitors without needing to load a new web page in order to process their request.
We need JavaScript to add interaction to websites. Otherwise all sites would be mostly read only static text and images or we'd need third party plug-ins like Adobe Flash or Sun Java.
alert - prints to external window
The Window.alert() method displays an alert dialog with the optional specified content and an OK button.
console - prints to the browser console window
In a browser you will not see anything on the screen. It logs a message to a debugging console.
Here you can see the example for alert and console inside the same <script> tag.
The alert will show the output in the form of dialog box.
The console will print the output in the console window.
Inline JavaScript:
Are loaded in the same page so is not necessary to trigger another request.
They are executed immediately.
External JS File:
Instead of writing the same script numerous times, an external file can be called and executed anywhere in the code.
Much easier to analyse so you can debug more efficiently and read it.
Data Types:
In programming, data types is an important concept.
To be able to operate on variables, it is important to know something about the type.
- String
- Number
- Boolean
- Undefined
- Null
- NAN
Print the text with simple write function.
<!DOCTYPE html>dd
<html>
<body>
<h2>My first javascript program...</h2>
<script>
document.write('JavaScript is awesone...');
</script>
</body>
</html>
String
Strings are used for storing text. Strings must be inside of either double or single quotes.
We can use single quotes or double quotes
Example:
var name = "john";
var city = ‘los vegas’;
Number:
There is only one type of Number in JavaScript. Numbers can be written with or without a decimal point.
Unlike many other programming languages, JavaScript does not define different types of numbers, like integers, short, long, floating-point etc.
Example:
var salary = 2000; // 2000
Var number = 560e4 // 5600000
Boolean
Boolean represents a logical entity and can have two values: true, and false.
Think of a boolean as an on/off or a yes/no switch.
Example:
var married = true;
Undefined And Null
Undefined:
A variable that has not been assigned a value has the value undefined.
This is one of the JavaScript’s primitive types.
Null:
The value null represents the intentional absence of any object value.
Null is not an identifier for a property of the global object, like undefined.
Difference b/w Undefined And Null
var x;
alert(x); //undefined
var x = null;
alert(x); //null
NAN
Any operation which we perform on a number and does not result a number is considered as NAN
The global NaN property is a value representing Not-A-Number.
NaN always compares unequal to any number, including NaN.
Example:
var p = 10 + undefined;
console.log(p);
var q = 10/"john";
console.log(q);
Everything is var. JS is dynamically typed languages
Dynamically-typed languages are those (like JavaScript) where the interpreter assigns variables to a type at runtime based on the variable's value at the time.
For instance, The idea of dynamic types is that makes code flexible, i.e. if you’ve got a function which returns a number,
you don’t actually have to return a number, you can return anything you like.
== vs === in js
== only compares values.
=== compares values and its type.
Example:
var x = "20";
var y = 20;
if(x == y){
alert('x value is equal to y');
}
else
{
alert('x value is not equal to y');
}
= = = checks whether LHS and RHS are same data type
The identity operator returns true if the operands are strictly equal (see above) with no type conversion.
Example:
var x = "20";
var y = 20;
if(x === y){
alert('x value is equal to y');
}
else
{
alert('x value is not equal to y');
}
Comparision with 0 and 1
var x = true;
var y = 1;
if(y == x){
alert('true');
}
else
{
alert('false');
}
1 is true in js
var x = false;
var y = 0;
if(y == x){
alert('true');
}
else
{
alert('false');
}
If variable contains value it is considered as true
var y = 10;
if(y){
alert('true');
}
else
{
alert('false');
}
undefined is false in js
Undefined most typically means a variable has been declared, but its value not defined.
var y;
if(y){
alert('true');
}
else
{
alert('false');
}
Null is false in js
var x = true;
var y=null;
if(y){
alert('true');
}
else
{
alert('false');
}
NaN is false in js
var x = true;
var y=5/"john"; //nan
if(y){
alert('true');
}
else
{
alert('false');
}
Type Coercion
Converting from One Data type to another Datatype is called as type coercion
var x = 10 + "10"; output 1010
var l = 100/"10"; output 10
The number 10 is converted to string 10
String 10 is converted as number 10
Arrays
Arrays are used to hold multiple values at the same time.
An array is used to store a collection of data, but it is often more useful to think of an array as a collection of variables of the same type.
Example:
var primenum=[1,3,5,7,"govardhan",true]// simple string array primenum[0]; // access first element in the array
Loop through Arrays
JavaScript has powerful semantics for looping through arrays and array-like objects.
The 'for' loop is the most compact form of looping.
You have three options in ECMAScript 5 ("ES5"), the version most broadly supported at the moment, and two more added in ECMAScript 2015,
-
ForEach.
-
ForIn.
ForEach.
ForIn.
for
var array=[ 1, 2,3];
for (var index = 0; index < array.length; index++) {
const element = array[index];
console.log(element);
}
forEach
var primenum=[1,3,5,7,"john"]// simple string array
primenum.forEach(function(item){
console.log(item);
});
Push and Pop
If we want to insert an item at the end, use push
If we want to remove an item at the end, use pop
Push and pop at the end of the array
They are used to add or remove elements at the end of array.
var fruits = ['apple','mango','banana'];
console.log(fruits);
fruits.push('chikko');
console.log(fruits);
fruits.pop();
console.log(fruits);
Unshif and shift
If we want to insert an item at the first, use unshift
If we want to remove an item from the start, use shift
Shift and unshift at the start of the array.
They are used to add or remove elements at the start of the array.
var fruits = ['apple','mango','banana'];
console.log(fruits);
fruits.unshift('chikko');
console.log(fruits);
fruits.shift();
console.log(fruits);
Objects
Object is collection of Properties and methods. In Javascript static objects available.
A JavaScript object has properties associated with it. A property of an object can be explained as a variable that is attached to the object.
Example :
var employee = {
name: "david",
age:27,
married : true
}
Accessing properties of Objects
employee.name; //dot notation
employee["age"]; // array notation
Javascript object properties are mutable mean they can be created on the fly even if they don’t exists at the time of creation.
Comments
Post a Comment