Address :- New Delhi Contact :- 8882880965
STP COMPUTER EDUCATION
The Best Quality of Software Programming Computer Education
[Link]
SUBJECT :- WEB DESIGNING
Chapter - 1
Intro to JavaScript
JavaScript is a Programming language.
JavaScript is a Client Side Scripting Language.
What is Scripting ?
scripting language means story writer language of product development
ex- web app , desktop app , android app etc.
There are two types of scripting
1. Client Side ( Executes in browser [ JavaScript ] )
2. Server Side ( Executes in Server [ PHP ] )
Address :- New Delhi Contact :- 8882880965
STP COMPUTER EDUCATION
The Best Quality of Software Programming Computer Education
[Link]
SUBJECT :- WEB DESIGNING
Chapter - 2
Output from JavaScript
JavaScript is a Programming language.
JavaScript is a Client Side Scripting Language.
What is Scripting ?
scripting language means story writer language of product development
ex- web app , desktop app , android app etc.
There are two types of scripting
1. Client Side ( Executes in browser [ JavaScript ] )
2. Server Side ( Executes in Server [ PHP ] )
SCRIPTING TYPE OF JAVASCRIPT
1. Internal Scripting
<head> or <body>
<script> write your JavaScript Code..</script>
</head> or </body>
2. External Scripting
<head> or <body>
<script src=”[Link]”></script>
</head> or </body>
What is Data ?
Any information is called a data ex : - number , text , word , audio , video or any file .
How to get any output (result) in JavaScript
[Link]()
if you want to display your result in a dialog box (Popup box) so you have to use
[Link]() method .
[Link]()
if you want to display your result in your webpage without using any html tag so
you have to use [Link]() method .
[Link]()
if you want to display your result in the console window of your browser so you
have to use [Link]() method .
innerHTML
if you want to display your result with the help of html tag in your webpage so
you have to use innerHTML method .
LET`S CREATE A BASIC PROGRAM
1. write a program to print STP Computer Education a dialog box.
<body>
<script>
[Link](“STP Computer Education”);
</script>
</body>
Note:-
Letter ex- a , b , c = every alphabet is known as character in the respect
of programming.
Words ex- stp , css , apple = every words are known as string in the respect
of programming.
Let`s know some usefull symbol name
() Parenthesis
[] square brackets or box brackets
{} braces or curly brackets
<> angle brackets
‘ ’ single quote
“” double quote
: colon
; semi colon
/ forward slash
\ backward slash
& and
- hyphens
_ underscore
= assign
== equal to
* astric
Address :- New Delhi Contact :- 8882880965
STP COMPUTER EDUCATION
The Best Quality of Software Programming Computer Education
[Link]
SUBJECT :- WEB DESIGNING
Chapter - 3
Keywords
What is programming ?
The steps that you take to achieve any result will be called programming.
किसी भी परिणाम िो पाने िे लिए जो िदम आप उठाते हैं उसी िो आप प्रोग्रालमिंग
िहें गे|
JavaScript Reserved Words (Keywords)
Keywords are the way to define the meaning of any data for your
interpreter and compiler.
abstract arguments await* boolean
break byte case catch
char class* const continue
debugger default delete do
double else enum* eval
export* extends* false final
finally float for function
goto if implements import*
in instanceof int interface
let* long native new
null package private protected
public return short static
super* switch synchronized this
throw throws transient true
try typeof var void
volatile while with yield
Address :- New Delhi Contact :- 8882880965
STP COMPUTER EDUCATION
The Best Quality of Software Programming Computer Education
[Link]
SUBJECT :- WEB DESIGNING
Chapter - 4
JavaScript Functions
Identity of a function is ()
A function is a group of statements that together perform a task And it works when
you call it.
There are two types of Functions.
1. Built in function (predefined function)
Their work is already sure And these can be called just. You can`t make
predefined function only you can call predefined function
2. User defined function
JavaScript allows you to define functions according to your need. These
functions are known as user-defined functions.
Working with predefined functions
Name of some predefined functions
1. alert() : [Link]()
2. write() : [Link]()
3. log() : [Link]()
Note : remember you can only call predefined functions you haven`t any
permission to change or edit predefined functions .
How to call a predefined function
If you want to call a function you have to learn about mouse or keyboard events
Mouse Events
onclick , onchange , onmouseover , onmouseout
Address :- New Delhi Contact :- 8882880965
STP COMPUTER EDUCATION
The Best Quality of Software Programming Computer Education
[Link]
SUBJECT :- WEB DESIGNING
Chapter - 7
Variables
What is Variables ?
Variable is a medium that allows us to work on data stored in memory .
Variable एक माध्यम है जिसकी मदद से हम मेमोरी में store ककये गए data पे काम
कर सकते है
X=8
Variable
Value (constant)
Assignment Operator
Address :- New Delhi Contact :- 8882880965
STP COMPUTER EDUCATION
The Best Quality of Software Programming Computer Education
[Link]
SUBJECT :- WEB DESIGNING
Chapter - 10
Selectors in JavaScript
Selectors are used to select html elements to perform some task and
actions on html elements.
There are so many Selectors in JavaScript .
1. getElementsByTagName() : select HTML element through tag name.
2. getElementsByName() : select HTML element through the value of
name attribute.
3. getElementById() : select HTML element through the value of id
attribute.
4. getElementsByClassName() : select HTML element through the
value of class attribute.
Address :- New Delhi Contact :- 8882880965
STP COMPUTER EDUCATION
The Best Quality of Software Programming Computer Education
[Link]
SUBJECT :- WEB DESIGNING
Chapter - 16
Comments and Operators
Comments are a medium with the help of which we understand the
meaning of our code
Comments एक माध्यम है जिसकी मदद से आप अपने code के meaning को
समझा सकते है ।
Types of Comments
1. Single line comment // single line comment looks like this
2. Multi line comment /* multi line comment looks like this */
Example of single line comments
<script>
var = x = 6 ; // here we are declaring variable
</script>
Example of multi line comments
<script>
Var = x ,y,z; /* from here we are going to start variable declaration
method that is called after declaration */
X = 6;
Y = 5;
Z = 10;
</script>
Operators in JavaScript
1. What is operator ?
Operators is a mathematical symbol used to manipulate between two data .
Operator का उपयोग दो data के बीच अदल बादल करने के ललए ककया िाता है ।
2. What is operands ?
The data of operators are known as operands .
ककसी भी प्रकार के डाटा को operator के शब्दों मे operand कहा िाता है ।
Explanation with diagram
5+2
Data , Operand Operator Data , Operand
Types of operator in JavaScript
1. Arithmetic operators
2. Assignment operators
3. Comparison operator
4. Logical or relational operator
5. Type operators
6. Bitwise operator
7. Conditional or ternary operator
Arithmetic Operators
Operators Name
+ Addition
- Subtraction
* Multiplication
/ Division
% Modulus (Remainder)
++ Increment
-- Decrement
Address :- New Delhi Contact :- 8882880965
STP COMPUTER EDUCATION
The Best Quality of Software Programming Computer Education
[Link]
SUBJECT :- WEB DESIGNING
Chapter - 23
Match Function With RegExp
Regular expression are used to perform pattern-matching and "search-and-
replace" functions on text.
Syntax :-
/[pattern]/modifier
Example :-
use this for capital letter : /[A-Z]/g
use this for small letter : /[a-z]/g
use this for numbers : /[0-9]/g
Modifiers
1. g = case sensitive
2. I = case insensitive
match()
Address :- New Delhi Contact :- 8882880965
STP COMPUTER EDUCATION
The Best Quality of Software Programming Computer Education
[Link]
SUBJECT :- WEB DESIGNING
Chapter - 26
Content Writing
Predefined functions for content writing
1. createElement(“P”)
2. createTextNode(“text here”)
3. appendChild()
Address :- New Delhi Contact :- 8882880965
STP COMPUTER EDUCATION
The Best Quality of Software Programming Computer Education
[Link]
SUBJECT :- WEB DESIGNING
Chapter - 29
Condition Statement
1. if : what will happen when our condition will true
क्या होगा जब हमारा कंडिशन सही होगा
2. else : what will happen when our if condition will false
क्या होगा जब हमारा if से define डकया हुआ कंडिशन गलत होगा
3. else if : when our first condition will false then we can define
new true condition.
if से define डकया हुआ कंडिशन अगर गलत हो जाये तो नई सही
कंडिशन लगाने के ललए else if का उपयोग करते है ।
Address :- New Delhi Contact :- 8882880965
STP COMPUTER EDUCATION
The Best Quality of Software Programming Computer Education
[Link]
SUBJECT :- WEB DESIGNING
Chapter - 30
Introduction to Array
Array is a variable that stores more than one value because the variable
created with an array has more than one memory block .
ऐरे एक ऐसा वेररएबल है जो एक से ज्यादा वैल्यू को स्टोर करता है क्योकक ऐरे से
बनाये गए वेररएबल के पास एक से जयादा मेमोरी बलोंक होते है
Example : -
var x = ordinary variable ( it can store only one data )
var x [ ] = array variable ( but it can store more than one data )
How to create an Array ?
<script>
var students = [ “amit” , “ankit” , “456” ] ;
[Link]( students );
</script> Output :- amit , ankit , 456
Address :- New Delhi Contact :- 8882880965
STP COMPUTER EDUCATION
The Best Quality of Software Programming Computer Education
[Link]
SUBJECT :- WEB DESIGNING
Chapter - 31
Practical with Array Part 4
OBJECT
Object is a method to enhance the features of an array
ऑब्जेक्ट array की सुविधाए को बढ़ाने का एक तरीका है इसकी
माध्यम से ज्यादा से ज्यादा data को संभाला जाता है ।
How to create an object ?
<body>
<script>
var user = [ firstname : “Amit”, lastname : “Kumar”];
[Link]( [Link] + [Link] );
</script>
</body>
ARRAY METHODS
Predefined functions for array are known as array methods
1. join()
2. push()
3. pop()
4. shift() Note : you can only use
5. unshift() these function in array
6. splice()
7. concat()
8. slice()
9. sort()
Address :- New Delhi Contact :- 8882880965
STP COMPUTER EDUCATION
The Best Quality of Software Programming Computer Education
[Link]
SUBJECT :- WEB DESIGNING
Chapter - 32
Introduction to Loop
loop is a method that defines how much time the code will execute
लूप एक माध्यम है जिसकी मदद से आप आपने कोड को आदे श दे सकते हो की
आप का कोड ककतने बार चले|
Statement used In Loop
for
while
do while
Syntax of for loop enter variable value
for(Statement 1 , statement 2 , statement 3)
{ variable with
increment operator
instructions
condition
}
Address :- New Delhi Contact :- 8882880965
STP COMPUTER EDUCATION
The Best Quality of Software Programming Computer Education
[Link]
SUBJECT :- WEB DESIGNING
Chapter - 33
Practical with Loop Part 3
JavaScript Programming Questions
1. Write a Program to print all natural numbers from 1 to n.
2. Write a Program to print all natural numbers in reverse (from n to 1)
3. Write a Program to print all even numbers between 1 to 100.
4. Write a Program to print all odd number between 1 to 100.
5. Write a Program to find sum of all natural numbers between 1 to n.
6. Write a Program to find sum of all even numbers between 1 to n.
7. Write a Program to find sum of all odd numbers between 1 to n.
8. Write a Program to print multiplication table of any number.
9. Write a Program to count number of digits in a number.
10. Write a Program to calculate sum of digits of a number.
11. Write a Program to calculate product of digits of a number.
12. Write a Program to enter a number and print its reverse.
Address :- New Delhi Contact :- 8882880965
STP COMPUTER EDUCATION
The Best Quality of Software Programming Computer Education
[Link]
SUBJECT :- WEB DESIGNING
Chapter - 34
Event Handlers
To perform special actions on selected elements with the help of JavaScript are known
as event handlers
We can implement event handlers in three ways
1. Using the attributes of an html tag : onclick , onmouseover , onmouseout
2. Using DOM object property
3. Using special methods
DOM (Document Object Model)
When a browser loads a webpage , the browser creates a document object model of
that page Diagram of DOM Window
<html>
Document
<head><title><title></head>
<body> HTML
<div>
<h1></h1> head body
</div>
title div
</body>
</html> h1
what is object ?
in the respect of DOM all the html elements are known as object or element object because html elements
has no limits to contain data.
What are properties or methods ?
Collections of predefined function which controls the html element are known as properties and methods .
Using special methods
// ie 9 to higher and all modern browser
1. addEventListener(“event”,function,phase)
2. removeEventListener(“event”,function,phase)
Address :- New Delhi Contact :- 8882880965
STP COMPUTER EDUCATION
The Best Quality of Software Programming Computer Education
[Link]
SUBJECT :- WEB DESIGNING
Chapter - 35
Time Interval System
setinterval()
setInterval is a method that repeats any instruction repeatedly after a certain time.
setInterval() एक method है जो ककसी भी instruction को एक निश्चित समय के बाद बार बार रीपीट
करता है |
Syntax :-
setinterval(function,time in milisecond);
clearinterval()
we use clearInterval() to stop the execution of setInterval() method
setInterval() को रोकिे के निए clearInterval() का उपयोग करते है ।
Address :- New Delhi Contact :- 8882880965
STP COMPUTER EDUCATION
The Best Quality of Software Programming Computer Education
[Link]
SUBJECT :- WEB DESIGNING
Chapter - 40
BOM - Webpage Security
And Keyboard Programming
BOM Properties
[Link]() = trigger the forward button of browser
[Link]() = trigger the back button of browser
[Link]()
trigger the forward, back & reload button of browser using the parameter value.
[Link](1) = trigger the forward button of browser.
[Link](0) = trigger the reload button of browser.
[Link](-1) = trigger the back button of browser.
Webpage Securities
oncontextmenu = trigger Right Click on Webpage
Address :- New Delhi Contact :- 8882880965
STP COMPUTER EDUCATION
The Best Quality of Software Programming Computer Education
[Link]
SUBJECT :- WEB DESIGNING
Chapter - 43
Cookies Part 6
Types of Cookies
1. Session cookie : temporary cookie
Example : [Link] = “data = amit”
2. Persistent cookie : permanent cookie
Example : [Link] = “data = amit; expires=Sun, 27 Dec 2020 12:00:00
UTC”
Attributes for Cookie
expires
max-age : seconds of days
path = /
secure
expires and max-age attributes are used to create persistent cookie.
Address :- New Delhi Contact :- 8882880965
STP COMPUTER EDUCATION
The Best Quality of Software Programming Computer Education
[Link]
SUBJECT :- WEB DESIGNING
Chapter - 44
Window Object Method
Escape sequences in javaScript
\ = Activate Keyboard formatting
\n = New Line
Window object methods()
1. [Link]()
2. [Link]() : convert a string to machine understandable
3. [Link]() : convert encoded string to real string
4. [Link]()
5. [Link]()
6. setTimeOut()
7. [Link]()
Address :- New Delhi Contact :- 8882880965
STP COMPUTER EDUCATION
The Best Quality of Software Programming Computer Education
[Link]
SUBJECT :- WEB DESIGNING
Chapter - 49
Window Object Properties Part 1
list of location category properties
1. [Link] = return full path of current page.
2. [Link] = return also full path of current page.
3. [Link] = return domain name or hostname of current page.
4. [Link] = return #hash link triggered name of current page.
5. [Link] = return the protocol (http or https) of current page.
6. [Link] = return the pathname (/[Link]) of current page.
list of location category methods
1. [Link]() = to load a new webpage
2. [Link]() = to reload webpages
3. [Link]() = to replace the current existing document with new webpage
Address :- New Delhi Contact :- 8882880965
STP COMPUTER EDUCATION
The Best Quality of Software Programming Computer Education
[Link]
SUBJECT :- WEB DESIGNING
Chapter - 49
Window Object Properties Part 4
Html 4 web storage : we use web storage to store data on client machine with
expiry date
Cookies : (supports older and newer browsers)
Html 5 web storage: we use web storage to store data on client machine (user
browser)
[Link] (supports latest browsers)
[Link] (supports latest browsers)
cookies, sessionStorage, localstorage differences
cookies localStorage sessionStorage
Capacity 4kb 10mb 5mb
Browsers Html 4/ html 5 Html 5 Html 5
Accessible from Any window Any window Same tab
Expires MANUALLY SET NEVER ON TAB CLOSE
BROWSER AND BROWSER BROWSER
STORAGE LOCATION
SERVER ONLY ONLY
SENT WITH REQUEST YES NO NO
how to check your browser supports html 5 web storage or not ?
<script>
if (typeof(Storage) !== "undefined") {
alert(“supported”);
else {
alert(“not supported”);
</script>
methods for sessionStorage & localStorage
1. setItem()
2. getItem()
3. removeItem()
4. clear()