Scribd
Upload
30 views14 pages

Java Script Basics

Uploaded by

shubhamchavhan0143
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
Download as pdf or txt
30 views14 pages

Java Script Basics

Uploaded by

shubhamchavhan0143
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
Download as pdf or txt
Download as pdf or txt
You are on page 1/ 14

Java Script

JavaScript is an object-based scripting language which is lightweight and cross-


platform.

JavaScript is not a compiled language, but it is a translated language. The JavaScript


Translator (embedded in the browser) is responsible for translating the JavaScript
code for the web browser

JavaScript is a scripting or programming language that allows you to implement


complex features on web pages — every time a web page does more than just sit
there and display static information for you to look at — displaying timely content
updates, interactive maps, animated 2D/3D graphics, scrolling video jukeboxes, etc.
It is the third layer of the layer cake of standard web technologies, two of which
(HTML and CSS)

HTML - is the markup language that we use to structure and give meaning to our web
content, for example defining paragraphs, headings, and data tables, or embedding
images and videos in the page.

CSS - is a language of style rules that we use to apply styling to our HTML content,
for example setting background colors and fonts, and laying out our content in
multiple columns.
Java Script - is a scripting language that enables you to create dynamically updating
content, control multimedia, animate images, and pretty much everything else.
server side vs client side

You might also hear the terms server-side and client-side code, especially in the
context of web development.
Client-side code is code that is run on the user's computer — when a web page is
viewed, the page's client-side code is downloaded, then run and displayed by the
browser. Here we are explicitly talking about client-side JavaScript.

Server-side code on the other hand is run on the server, then its results are
downloaded and displayed in the browser. Examples of popular server-side web
languages include PHP, Python, Ruby, ASP.NET and... JavaScript! JavaScript can
also be used as a server-side language, for example in the popular Node.js
environment.

Java Script follows all guidelines of ECMA script.

Java script is used for designing, mobile, front end, back end applications.

After gaining knowledge of java script you can be able to learn easily react Native,
ionic, angular js, react js, typescript.

Features of Java Script

All popular web browsers support JavaScript as they provide built-in execution
environments.
1.JavaScript is a weakly typed language, where certain types are implicitly cast
(depending on the operation).
2.It is a light-weighted and interpreted language.
3.It is a case-sensitive language.
4.JavaScript is supportable in several operating systems including, Windows, macOS,
etc.
5.It provides good control to the users over the web browsers.

Java Script Engines:

https://v8.dev/

https://spidermonkey.dev/

https://nodejs.org/en/
Java Script Example:

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.

1) Java Script Example: code between body tag

<html>
<body>
<script type="text/javascript">
alert("Hello welcome to java script");
</script>
</body>
</html>

2) Java Script Example: code between the head tag


<html>
<head>
<script type="text/javascript">
function msg(){
alert("Hello welcome to Java Script");
}
</script>
</head>
<body>
<p>Welcome to JavaScript</p>
<form>
<input type="button" value="click" onclick="msg()"/>
</form>
</body>
</html>

3) External Java Script File

We can create external JavaScript file and embed it in many html page.
It provides code re usability because single JavaScript file can be used in several html
pages.
An external JavaScript file must be saved by .js extension. It is recommended to
embed all JavaScript files into a single file. It increases the speed of the webpage.

Function msg(){
alert("Hello Welcome to Java Script");
}
index.html
<html>
<head>
<script type="text/javascript" src="message.js"></script>
</head>
<body>
<p>Welcome to JavaScript</p>
<form>
<input type="button" value="click" onclick="msg()"/>
</form>
</body>
</html>

Java Script Comments:

The JavaScript comments are meaningful way to deliver message. It is used to add
information about the code, warnings or suggestions so that end user can easily
interpret the code.
The JavaScript comment is ignored by the JavaScript engine i.e. embedded in the
browser.

1) Single Line Comment


2) Multi Line Comment

<script>
// It is single line comment
document.write("hello javascript");
</script>

Multi Line Coment

/* your code here */

<script>
/* It is multi line comment.
It will not be displayed */
document.write("example of javascript multiline comment");
</script>

Java Script Operators:

1) Arithmetic Operators
Operator Name Purpose Example
+ Addition Adds two numbers together. 6 + 9
- Subtraction Subtracts the right number from the left. 20 - 15
* Multiplication Multiplies two numbers together. 3 * 7
/ Division Divides the left number by the right. 10 / 5
Returns the remainder left over after you've 8 % 3 (returns 2, as
Remainder divided the left number into a number of three goes into 8 twice,
% (sometimes called integer portions equal to the right number. leaving 2 left over).
modulo)

2) Comparison (Relational) operators

Equals to ==,
Equals to (Identical) ===,
Not Equal To !=,
Greater than >,
greater than or Equal to >=,
Less than < ,
Less than or equal to <=

3) Bitwise Operators

Bitwise AND &,


Bitwise OR |
Bitwise XOR ^ ,
Bitwise NOT ~
Bitwise Left Shift <<
Bitwise Right Shift >>

4) Logical Operators
Logical AND &&
Logical OR ||
Logical NOT !

5) Assignment Operators
Assign =
Add and Assign +=
Substract and assign -=
Multiply and Assign *=
Divide and Assign /=
Modulus and Assign - %=

6) Special Operators

Ternary operator ; (?:)

Comma operator ,delete, new , void, yield, typeof

operator precendence:

lets look at the example:

num2 + num1 / 8 + 2;

proper expression with parenthesis:

(num2 + num1) / (8 + 2);

Operator precedence

Operator type Individual operators


member . []
call / create
() new
instance
negation/
! ~ - + ++ -- typeof void delete
increment
multiply/divide */%
addition/
+-
subtraction
bitwise shift << >> >>>
relational < <= > >= in instanceof
equality == != ===
bitwise-and &
bitwise-xor ^
bitwise-or |
logical-and &&
logical-or ||
conditional ?:
assignment = += -= *= /= %= <<= >>= >>>= &= ^= |= &&= ||= ??=
comma ,

Variables declaration:
var:
var statement declares a function-scoped or globally-scoped variable, optionally
initializing it to a value.

var x = 1;

if (x === 1) {
var x = 2;

console.log(x);
}

console.log(x);

let:
The let statement declares a block-scoped local variable, optionally initializing it to a
value.
let x = 1;

if (x === 1) {
let x = 2;

console.log(x);
}

console.log(x);

const:
constants are block scoped much like variables,the value of constant can’t be changed
through reassignment and it cant be redeclared.

const number = 42;


console.log(number);
number = 99;
console.log(number);
Java Script If else Statement:

The Java Script If else statement is used to execute whether condition is true or false.
There are three forms of if statement in JavaScript
1) if Statement
2) If else Statement
3) if else if Statement

Java Script If Statement

It evaluates the content only if expression is true. The signature of JavaScript if


statement is given below.

if(expression){
//content to be evaluated
}

Example:

var firstNumber=10;
if(firstNumber>20)
console.log('number greater than 20');

Java Script If..else statement

It evaluates the content whether condition is true of false. The syntax of JavaScript if-
else statement is given below.

if(expression){
//content to be evaluated if condition is true
}
else{
//content to be evaluated if condition is false
}

Example:
var firstNumber=10;
if(firstNumber>20)
console.log('number greater than 20');
else
console.log('number less than 20');

Java Script If else if Statement:

It evaluates the contents only if expression is true from several expressions. The
signature of Java Script if else if statement is given below:
Syntax:
if(expression1){
//content to be evaluated if expression1 is true
}
else if(expression2){
//content to be evaluated if expression2 is true
}
else if(expression3){
//content to be evaluated if expression3 is true
}
else{
//content to be evaluated if no expression is true
}

Example:

var a=20;
if(a==10){
console.log("a is equal to 10");
}
else if(a==15){
console.log("a is equal to 15");
}
else if(a==20){
console.log("a is equal to 20");
}
else{
console.log("a is not equal to 10, 15 or 20");
}

Java Script Switch

The JavaScript switch statement is used to execute one code from multiple
expressions. It is just like else if statement that we have learned in previous page. But
it is convenient than if..else..if because it can be used with numbers, characters etc.
The signature of JavaScript switch statement is given below.

switch(expression){
case value1:
code to be executed;
break;
case value2:
code to be executed;
break;
......
default:
code to be executed if above values are not matched;
}

Example:

var grade='B';
var result;
switch(grade){
case 'A':
result="A Grade";
break;
case 'B':
result="B Grade";
break;
case 'C':
result="C Grade";
break;
default:
result="No Grade";
}
console.log(result);

Ternary Operator
( condition ) ? run this code : run this code instead

Example:
var isBirthday=false;
let greeting = ( isBirthday ) ? 'Happy birthday Mrs. Smith — we hope you have a
great day!' : 'Good morning Mrs. Smith.';
console.log(greeting);
coersion and faulsy values in Java Script
var user; //it is undefined
undefined
var user=null;
var user=0;
NaN
‘’
these are falsy values
var user=”null”;
if(user){
console.log('condition is true');
}

console.log( “4” + 4);


console.log( 4 + “4”);
var user=”4”;
if(4==user){
console.log(“condition is true”);

if(4===user)
console.log(“condition is true”);

global context in Java Script:

1) Ist scenario:
function sayHello(){
console.log("Hello");
}

sayHello();

2) IInd Scenario
sayHello();
function sayHello(){

console.log("Hello");
}
var myName="gajanan"
myName
"gajanan"
if(myName===myName)
console.log('True statement');
if(myName===window.myName)
console.log('true statement');
try to run in vs code:
var myName='gajanan';

if(myName===window.myName)
console.log('true statement');

Context in Java Script:


Function declarations are scanned and made available.
Variable declarations are scanned and made undefined.
sample();
var number1=10;
function sample(){
number1=number1+10;
console.log('value of number1=',number1);
}

sample();
var sample=function(a){
number1=number1+10;
console.log('value of number1=',number1);
}

scope chaining in JS:


var name1="gajanan";
console.log("my name is",name1);

function sayName(){
var name1="My New Name";
console.log("My Name is",name1);
sayNameTwo();

function sayNameTwo(){
console.log("my name is",name1);

}
}
sayName();

Functions in Java Script:

Functions are one of the fundamental building blocks in JavaScript. A function in


JavaScript is similar to a procedure—a set of statements that performs a task or
calculates a value, but for a procedure to qualify as a function, it should take some
input and return an output where there is some obvious relationship between the input
and the output. To use a function, you must define it somewhere in the scope from
which you wish to call it.

Defining Functions:

Function Declarations:
A function definition (also called as function declaration or function statement)
consists of function keyword followed by

The name of the funcion


A list of parameters to the function, enclosed in parenthesis and seperated by commas
The java Script statements that define the function, enclosed by curley brackets {...}

For Example

function square(number){
return number*number;
}

calling a function:
square(5); //function call

Function expressions:
the function keyword can be used to define function inside an expression

Example 1:

const square = function(number) { return number * number }


var x = square(4) // x gets the value 16

Example 2:

onst getRectArea = function(width, height) {


return width * height;
};

console.log(getRectArea(3, 4));
// expected output: 12

You might also like