JavaScript Tutorial for beginners and professionals is a solution of client side dynamic pages.
JavaScript is an object-based scripting language that is lightweight and cross-platform.
JavaScript is not compiled but translated. The JavaScript Translator (embedded in browser) is responsible to translate the JavaScript code.
Where JavaScript is used
JavaScript is used to create interactive websites. It is mainly used for:
- Client-side validation
- Dynamic drop-down menus
- Displaying data and time
- Displaying popup windows and dialog boxes (like alert dialog box, confirm dialog box and prompt dialog box)
- Displaying clocks etc.
JavaScript Example
<html>
<body>
<h2>Welcome to JavaScript</h2>
<script>
document.write("Hello JavaScript by JavaScript");
</script>
</body>
</html>
Javascript example is easy to code. JavaScript provides 3 places to put the JavaScript code: within body tag, within head tag and external JavaScript file.
3 Places to put JavaScript code
- Between the body tag of html
- Between the head tag of html
- In .js file (external javaScript)
- Between the body tag of html
<html>
<body>
<script type="text/javascript">
alert("Hello Javatpoint");
</script>
</body>
</html>
2.Between the head tag of html
<html>
<head>
<script type="text/javascript">
function msg(){
alert("Hello Javatpoint");
}
</script>
</head>
<body>
<p>Welcome to Javascript</p>
<form>
<input type="button" value="click" onclick="msg()"/>
</form>
</body>
</html>
Types of JavaScript Comments
There are two types of comments in JavaScript.
- Single-line Comment
- Multi-line Comment
JavaScript Variable
A JavaScript variable is simply a name of storage location. There are two types of variables in JavaScript : local variable and global variable.
There are some rules while declaring a JavaScript variable (also known as identifiers).
- Name must start with a letter (a to z or A to Z), underscore( _ ), or dollar( $ ) sign.
- After first letter we can use digits (0 to 9), for example value1.
- JavaScript variables are case sensitive, for example x and X are different variables.
JavaScript local variable
A JavaScript local variable is declared inside block or function. It is accessible within the function or block only
JavaScript global variable
A JavaScript global variable is accessible from any function. A variable i.e. declared outside the function or declared with window object is known as global variable
Javascript Data Types
JavaScript provides different data types to hold different types of values. There are two types of data types in JavaScript.
- Primitive data type
- Non-primitive (reference) data type
JavaScript is a dynamic type language, means you don't need to specify type of the variable because it is dynamically used by JavaScript engine. You need to use var here to specify the data type. It can hold any type of values such as numbers, strings etc
- var a=40;//holding number
- var b="Rahul";//holding string
1). Primitive Data type
There are five types of primitive data types in JavaScript. They are as follows:
1) String, represents sequence of characters e.g. "hello"
2) Number, represents numeric values e.g. 100
3) Boolean, represents boolean value either false or true
2) Non- Primitive
The non-primitive data types are as follows:
1) Object,
2) Array,
3) RegExp
JavaScript Operators
JavaScript operators are symbols that are used to perform operations on operands. For example:
There are following types of operators in JavaScript.
- Arithmetic Operators
- Comparison (Relational) Operators
- Bitwise Operators
- Logical Operators
- Assignment Operators
- Special Operators
JavaScript Functions
avaScript functions are used to perform operations. We can call JavaScript function many times to reuse the code.
Advantage of JavaScript function
There are mainly two advantages of JavaScript functions.
- Code reusability: We can call a function several times so it save coding.
- Less coding: It makes our program compact. We don’t need to write many lines of code each time to perform a common task.
syntax:
- function functionName([arg1, arg2, ...argN]){
- //code to be executed
- }
Javascript Function :
<html>
<body>
<script>
function msg(){
alert("hello! this is message");
}
</script>
<input type="button" onclick="msg()" value="call function"/>
</body>
</html>
Javascript Function Argument :
<html>
<body>
<script>
function getcube(number){
alert(number*number*number);
}
</script>
<form>
<input type="button" value="click" onclick="getcube(4)"/>
</form>
</body>
</html>
Javascript Function with return value
<html>
<body>
<script>
function getInfo(){
return "hello javatpoint! How r u?";
}
</script>
<script>
document.write(getInfo());
</script>
</body>
</html>
JavaScript Objects
A javaScript object is an entity having state and behavior (properties and method). For example: car, pen, bike, chair, glass, keyboard, monitor etc.
JavaScript is an object-based language. Everything is an object in JavaScript.
JavaScript is template based not class based. Here, we don't create class to get the object. But, we direct create objects.
object by object literal:
- object={property1:value1,property2:value2.....propertyN:valueN}
<html>
<body>
<script>
emp={id:102,name:"Shyam Kumar",salary:40000}
document.write(emp.id+" "+emp.name+" "+emp.salary);
</script>
</body>
</html>
Creating instance Object
var emp=new Object();
<html>
<body>
<script>
var emp=new Object();
emp.id=101;
emp.name="Ravi Malik";
emp.salary=50000;
document.write(emp.id+" "+emp.name+" "+emp.salary);
</script>
</body>
</html>
Object Constructor
Here, you need to create function with arguments. Each argument value can be assigned in the current object by using this keyword.
The this keyword refers to the current object.
<html>
<body>
<script>
function emp(id,name,salary){
this.id=id;
this.name=name;
this.salary=salary;
}
e=new emp(103,"Vimal Jaiswal",30000);
document.write(e.id+" "+e.name+" "+e.salary);
</script>
</body>
</html>
JavaScript Array
JavaScript array is an object that represents a collection of similar type of elements.
There are 3 ways to construct array in JavaScript
- By array literal
- By creating instance of Array directly (using new keyword)
- By using an Array constructor (using new keyword)
Array litral
The syntax of creating array using array literal is given below:
- var arrayname=[value1,value2.....valueN];
- example:
<html>
<body>
<script>
var emp=["Sonoo","Vimal","Ratan"];
for (i=0;i<emp.length;i++){
document.write(emp[i] + "<br/>");
}
</script>
</body>
</html>
Instance Array
The syntax of creating array directly is given below:
- var arrayname=new Array();
- example:
<html>
<body>
<script>
var i;
var emp = new Array();
emp[0] = "Arun";
emp[1] = "Varun";
emp[2] = "John";
for (i=0;i<emp.length;i++){
document.write(emp[i] + "<br>");
}
</script>
</body>
</html>
Constructor Array
Here, you need to create instance of array by passing arguments in constructor so that we don't have to provide value explicitly.
The example of creating object by array constructor is given below.
syntax : var emp=new Array(value1,value2,value3);
<html>
<body>
<script>
var emp=new Array("Jai","Vijay","Smith");
for (i=0;i<emp.length;i++){
document.write(emp[i] + "<br>");
}
</script>
</body>
</html>
JavaScript String
The JavaScript string is an object that represents a sequence of characters.
There are 2 ways to create string in JavaScript
- By string literal
- By string object (using new keyword)
String Literal
The string literal is created using double quotes. The syntax of creating string using string literal is given below:
var stringname="string value";
String Object
The syntax of creating string object using new keyword is given below:
Here, new keyword is used to create instance of string.
var stringname=new String("string literal");
String Method
Let's see the list of JavaScript string methods with examples.
- charAt(index)
- concat(str)
- indexOf(str)
- lastIndexOf(str)
- toLowerCase()
- toUpperCase()
- slice(beginIndex, endIndex)
- trim(
No comments:
Post a Comment