0% found this document useful (0 votes)

52 views

Easy Learning Javascript Javascript For Beginners Guide by Yang Hu

Uploaded by

Simpson Simak

Available Formats

Download as PDF, TXT or read online on Scribd

0% found this document useful (0 votes)

52 views

Easy Learning Javascript Javascript For Beginners Guide by Yang Hu

Uploaded by

Simpson Simak

Available Formats

Download as PDF, TXT or read online on Scribd

You are on page 1/ 84

Easy Learning Javascript

YANG HU

Simple is the beginning of wisdom. From

the essence of practice, this book brieﬂy
explain the concept and vividly cultivate
programming interest. You will learn it
easy and fast.
http://en.verejava.com
Copyright © 2019 Yang Hu All rights reserved.

ISBN : 9781093504781

CONTENTS
1. Javascript Basic Concept
1.1 Javascript HelloWorld
1.2 Variable
1.3 Variable and Type
2. Operational Operator
2.1 Arithmetic Operator
2.2 Function
2.3 Class
2.4 Type Conversion
2.5 DOM
2.6 Event
2.7 Create a Web Caculator
2.8 Assignment Operator
2.9 Relational Operator
2.10 If Conditional Statement
2.11 Logic Operator
3. Control Statement
3.1 Switch Statement
3.2 While Loop Statement
3.3 For Loop Statement
4. Array
4.1 One-Dimensional Array
4.2 Select All Check Box
4.3 Two-Dimensional Array
4.4 Find Dog Game
4.5 Secondary Linkage Drop-down
5. More Event
5.1 Login Web Page
5.2 MouseOver Thumbnail to Larger
6. DOM and Element Hierarchy
6.1 Element Hierarchy
6.2 Create Text Node
6.3 Delete Node
6.4 Replace Node
6.5 Add Contact Example
6.6 CSS Style Font
6.7 CSS Change Class Selector
6.8 CSS Overﬂow Expand and Close
6.9 CSS Floating Highlighting
6.10 Table Create Rows Columns
6.11 Delete Table Row Column
7. Timer
If you want to learn basic knowledge of HTML CSS: << Easy Learning
HTML CSS>> https://www.amazon.com/dp/B07QHRB23X

If you already have basic knowledge of HTML CSS, skip it, start an
exciting journey

Javascript HelloWorld
Javascript is a web page dynamic interactive
language that used in web development.

1. Create a helloworld.html ﬁle with Notepad and

open it in your browser to see the webpage
<html>: tag tells the browser that this is an HTML
document.
<head>: tag is a container for metadata about content and
charset.
<title>: tag defines the title of the document.
<body>: tag defines the document's body.
<script>: tag is used to define a client-side script
(JavaScript).
document.write(): writes HTML content to document in
browser

<html> <head> <meta http-equiv = "Content-Type"

content = "text/html; charset=UTF-8" > <title> First
Web Page </title> </head> <body> <script type =
"text/javascript" >
document.write ( "HelloWorld" );
</script> </body> </html>

Result:

Variable
1.Create a ﬁle : Variable.html and open it in your
browser
// : single comments are not executed by javascript "":
string type

<script type = "text/javascript" >

var basket = "Apple" ;
document.write ( basket );
</script>

Result:

2.Change ﬁle : Variable.html Put " orange " to replace

" apple " .
<br>: html tag wrap a new line

<script type = "text/javascript" >

var basket = "Apple" ;
document.write ( basket );

document.write ( "<br>" );

basket = "Orange" ;
document.write ( basket );
</script>

Run Result:
Variable and Type
Javascript is dynamic type language
1. Create a var.html ﬁle with Notepad and open it in
your browser to see the webpage
typeof(): ﬁnd the type of a JavaScript variable

<script type = "text/javascript" >

var x ; //undeﬁned var a = 9 ; //number var b = 1.5 ;
//number var c = true ; //Boolean var d = "abc" ; //string
var e = 'abc' ; //string
document.write ( typeof ( x ) + "<br>" );
document.write ( typeof ( a ) + "<br>" );
document.write ( typeof ( b ) + "<br>" );
document.write ( typeof ( c ) + "<br>" );
document.write ( typeof ( d ) + "<br>" );
document.write ( typeof ( e ) + "<br>" );
</script>

Result:
undeﬁned number number boolean string string

Arithmetic Operator
1. Create a ArithmeticOperator.html ﬁle with Notepad
and open it in your browser Arithmetic Operator: Add
+, minus -, multiply *, divisible /, take modulo %
<script type = "text/javascript" >
var a = 1 ;
var b = 2 ;
var c = 3 ;
var d = 4 ;
document.write ( a + b ); // = 3
document.write ( "<br>" );

document.write ( a - b ); // = -1
document.write ( "<br>" );

document.write ( a * b ); // = 2
document.write ( "<br>" );

document.write ( b / a ); // = 2
document.write ( "<br>" );

document.write ( c % b ); // = 1 //number remaining

after divide document.write ( "<br>" );
</script>
Function
1.Create a ﬁle : Function.html

<script type = "text/javascript" >

function add ( a , b ){
return a + b ;
}

var result = add ( 4 , 2 );

document.write ( result ); // 6

document.write ( "<br>" );

var result = add ( 5 , 3 );

document.write ( result ) // 8
</script>

Run Result:
6
8

2. Add 3 more functions about - , *, / to Function.html

<script type = "text/javascript" >

function add ( a , b ){
return a + b ;
}

function sub ( a , b ){
return a - b ;
}

function multiply ( a , b ){
return a * b ;
}

function divide ( a , b ){
return a / b ;
}

var result = add ( 4 , 2 );

document.write ( result ); // 6

document.write ( "<br>" );

var result = sub ( 4 , 2 );

document.write ( result ) // 2

document.write ( "<br>" );

var result = multiply ( 4 , 2 );

document.write ( result ) // 8

document.write ( "<br>" );

var result = divide ( 4 , 2 );

document.write ( result ) // 2

</script>
Class

1.Create a ﬁle : Caculator.html

<script type = "text/javascript" >

function Caculator (){

this.add = function ( a , b ){
return a + b ;
}

this.sub = function ( a , b ){
return a - b ;
}

this.multiply = function ( a , b ){
return a * b ;
}

this.divide = function ( a , b ){
return a / b ;
}
}

var cal = new Caculator ();

var result = cal.add ( 4 , 2 );

document.write ( result ); // 6

var result = cal.sub ( 4 , 2 );

document.write ( result ) // 2

var result = cal.multiply ( 4 , 2 );

document.write ( result ) // 8

var result = cal.divide ( 4 , 2 );

document.write ( result ) // 2

</script>

Type Conversion
1. Create a TypeConversion.html
parseInt(): this is javascript default function can convert
string to integer.
<script type = "text/javascript" >
var a = "1" ;
var b = "2" ;

var result = a + b ; // + concatenate two strings

document.write ( result ); // = 12

document.write ( "<br>" );

result = parseInt ( a ) + parseInt ( b );

document.write ( result ); // = 3
</script>

Result:
12
3

DOM
DOM: In Javascript every HTML element is a class object.

Document Object Model structure diagram:

1.Create a ﬁle : getElementById.html
document.getElementById(): is a DOM method to get the
element by ID attribute.
alert(): is a function to open a information window.
Obj.innerHTML: sets or returns the inner HTML content of
an element.
<div>: tag deﬁnes a division or a section in an HTML
document.

<div id = "word" > Faith and Hope </div>

<input type= " text " />: html tag speciﬁes an input ﬁeld
where the user can enter data.

<input type = "text" id = "username" value = "Joseph"

/>
<script type = "text/javascript" >
var divObj = document.getElementById ( "username" );
var value = divObj.value ;
alert ( value );
</script>
Event
1.Create a ﬁle : onClick.html
onClick: when the mouse clicks the button will call a
function.
<input type= " button " />: html tag deﬁnes a clickable
button.

<input type = "text" id = "username" value = "Joseph"

/> <input type = "button" value = "Click Me" onClick =
"doClick()" />
<script type = "text/javascript" >
function doClick (){
var divObj = document.getElementById ( "username" );
var value = divObj.value ;
alert ( value );
}
</script>

Create a Web Caculator

1.Create a ﬁle : WebCaculator.html
a: <input type = "text" id = "a" value = "" /> b: <input
type = "text" id = "b" value = "" /> =
<span id = "result" ></span> <br> <input type =
"button" value = "+" onClick = "doAdd()" />
<script type = "text/javascript" >
function doAdd (){
var aObj = document.getElementById ( "a" );
var bObj = document.getElementById ( "b" );
var resultObj = document.getElementById ( "result" );
var a = parseInt ( aObj.value ); // Convert string to
integer var b = parseInt ( bObj.value );
resultObj.innerHTML = a + b ;
}
</script>

2.Add 3 mores function - , * , / to WebCaculator.html

a: <input type = "text" id = "a" value = "" /> b: <input

type = "text" id = "b" value = "" /> =
<span id = "result" ></span> <br> <input type =
"button" value = "+" onClick = "doAdd()" /> <input
type = "button" value = "-" onClick = "doSub()" />
<input type = "button" value = "*" onClick =
"doMultiply()" /> <input type = "button" value = "/"
onClick = "doDivide()" />
<script type = "text/javascript" >
function doAdd (){
var aObj = document.getElementById ( "a" );
var bObj = document.getElementById ( "b" );
var resultObj = document.getElementById ( "result" );
var a = parseInt ( aObj.value ); // Convert string to
integer var b = parseInt ( bObj.value );
resultObj.innerHTML = a + b ;
}

function doSub (){

var aObj = document.getElementById ( "a" );
var bObj = document.getElementById ( "b" );
var resultObj = document.getElementById ( "result" );
var a = parseInt ( aObj.value ); // Convert string to
integer var b = parseInt ( bObj.value );
resultObj.innerHTML = a - b ;
}

function doMultiply (){

function doDivide (){

Click - button Result:

Click * button Result:

Click / button Result:

Assignment Operator
1. Create a AssignmentOperator.html ﬁle with
Notepad and open it in your browser

<script type = "text/javascript" >

var d = 4 ;
document.write ( d ++); // = 4 print d and then
increment 1
document.write ( "<br>" );

d=4;
document.write (++ d ); // = 5 increment 1 and then
print d document.write ( "<br>" );

d=4;
document.write ( d --); // = 4 print d and then
decrement 1
document.write ( "<br>" );

d=4;
document.write (-- d ); // = 3 decrement 1 and then
print d
var result = 10 ;
result = result + 1 ;
document.write ( result ); // = 11
document.write ( "<br>" );

result = 10 ;
result ++;
document.write ( result ); // = 11
document.write ( "<br>" );

result = 10 ;
result += 1 ;
document.write ( result ); // = 11
document.write ( "<br>" );
</script>

2. Create a quantity adder and subtracter

quantity.html

Click + button to increase the quantity by 1, and click

- button to decrease the quantity by 1.
Quantity: <br> <input type = "text" style =
"width:30px" id = "quantity" value = "1" /> <input
type = "button" value = "+" onClick = "doAdd()" />
<input type = "button" value = "-" onClick = "doSub()"
/>
<script type = "text/javascript" >
function doAdd (){
var quantityObj = document.getElementById (
"quantity" );
var value = parseInt ( quantityObj.value );
value ++
quantityObj.value = value ;
}

function doSub (){

var quantityObj = document.getElementById (
"quantity" );
var value = parseInt ( quantityObj.value );
value --
quantityObj.value = value ;
}
</script>

Relational Operator
1. Create a RelationalOperator.html ﬁle with Notepad
and open it in your browser
Relational operators only two value: true, false

<script type = "text/javascript" >

document.write ( 1 > 2 ); // false

document.write ( "<br>" );

document.write ( 1 >= 1 ); // true

document.write ( "<br>" );

document.write ( 1 < 2 ); // true

document.write ( "<br>" );

document.write ( 1 <= 2 ); // true

document.write ( "<br>" );

document.write ( 1 == 1 ); // true
document.write ( "<br>" );

document.write ( 1 != 2 ); // true

</script>

If Conditional Statement
If statement 1. if (expression){statement}
2. if (expression) { statement } else { statement }
3. if (expression) {statement } else if { statement }

1. Create a If.html ﬁle with Notepad and open it in

your browser
Score example: if score == 5 : Excellent
else if score == 4 : Good
else : Need to catch up

Please input your score: <br> <input type = "text" id

= "score" value = "" /> <input type = "button" value =
"Submit" onClick = "doSubmit()" /> <br> <span id =
"message" ></span>
<script type = "text/javascript" >
function doSubmit (){
var scoreObj = document.getElementById ( "score" );
var messageObj = document.getElementById (
"message" );

var score = parseInt ( scoreObj.value );

if ( score == 5 ) {
messageObj.innerHTML = "Excellent" ;
} else if ( score == 4 ) {
messageObj.innerHTML = "Good" ;
} else {
messageObj.innerHTML = "Need to catch up" ;
}
}
</script>

Logic Operator
1. Create a LogicOperator.html ﬁle with Notepad and
open it in your browser
Logical Operator: and &&, or ||, not !
1. && returns true if both sides of the operation are true,
otherwise false 2. || The result is false when both sides of
the operation are false, otherwise true; 3. ! if returns true,
the result is false, otherwise is true

<script type = "text/javascript" >

document.write ( true && false ); // false
document.write ( "<br>" );

document.write ( false && true ); // false

document.write ( "<br>" );
document.write ( false && false ); // false
document.write ( "<br>" );

document.write ( true && true ); // true

document.write ( "<br>" );

document.write ( true || false ); // true

document.write ( "<br>" );

document.write ( false || true ); // true

document.write ( "<br>" );

document.write ( true || true ); // true

document.write ( "<br>" );

document.write ( false || false ); // false

document.write ( "<br>" );

document.write (! true ); // false

document.write ( "<br>" );

document.write (! false ); // true

document.write ( "<br>" );
</script>

2. Create a LogicOperator2.html

<script type = "text/javascript" >

document.write ( 1 > 2 && 3 > 4 ) // = false

document.write ( 2 > 1 && 3 > 4 ) // = false

document.write ( "--------------" )
document.write ( 2 > 1 || 3 > 4 ) // = true
document.write ( 2 > 1 || 3 > 4 ) // = true
document.write ( 1 > 2 || 3 > 4 ) // = false

</script>

3. Payroll tax example: Tax amount = salary * tax rate

level: 500 -- 2000 $ : tax rate 10%

2000--5000 $ : tax rate 15%

5000-- 20000 $ : tax rate 20%
More than 20000$ : tax rate 30%

<script type = "text/javascript" >

Result:
tax amount=2000
2. Create a WebTax.html

Input salary and then click Calculate Tax button

Salary: <input type = "text" id = "salary" value = "" />

=
<span id = "tax" ></span> <input type = "button"
value = "Calculate Tax" onClick = "doTax()" />
<script type = "text/javascript" >

function doTax (){

</script>
Switch Statement
1. Create a switch.html ﬁle with Notepad and open it
in your browser
Input a number 1 , 2, 3
1 : Pay by Visa Card
2 : Pay by Master Card
3: Pay by Paypal
Otherwise Pay by face to face

<script type = "text/javascript" >

var num = 1 ;

switch ( num ) {
case 1 :
document.write ( "Pay by Visa Card" );
break ; // terminate the code to continue execution
case 2 :
document.write ( "Pay by Master Card" );
break ;
case 3 :
document.write ( "Pay by Paypal" );
break ;
default :
document.write ( "Pay by face to face" );
}

</script>

Result:
Pay by Visa Card
2. Create a WebPay.html

this: current element object

<input type = "radio" name = "card" value = "1" onclick

= "doPay(this)" /> Visa Card <input type = "radio"
name = "card" value = "2" onclick = "doPay(this)" />
Master Card <input type = "radio" name = "card"
value = "3" onclick = "doPay(this)" /> Paypal
<br> <span id = "result" ></span>
<script type = "text/javascript" >

function doPay ( obj ){

var num = parseInt ( obj.value );
var resultObj = document.getElementById ( "result" );

switch ( num ) {
case 1 :
resultObj.innerHTML = "Pay by Visa Card" ;
break ;
case 2 :
resultObj.innerHTML = "Pay by Master Card" ;
break ;
case 3 :
resultObj.innerHTML = "Pay by Paypal" ;
break ;
default :
resultObj.innerHTML = "Pay by face to face" ;
}
}
</script>

While Loop Statement

while (expression){
statement; }
continues execution if the expression is true , otherwise
exits loop
1. Create a WhileLoop.html ﬁle with Notepad and
open it in your browser

<script type = "text/javascript" >

var i = 0 ;
while ( i < 10 )
{
document.write ( i + "," );
i ++;
}

</script>

Result:
0,1,2,3,4,5,6,7,8,9,

For Loop Statement

1. Create a ForLoop.html ﬁle with Notepad and open
it in your browser

<script type = "text/javascript" >

for ( var i = 0 ; i < 10 ; i ++) {

document.write ( i + "," );
}
</script>

Result:
0,1,2,3,4,5,6,7,8,9,

One-Dimensional Array

1. Create a OneArray.html ﬁle with Notepad and open

it in your browser

<script type = "text/javascript" >

// One-dimensional array deﬁnition and initialization var

scores = [ 90 , 70 , 50 , 80 , 60 , 85 ];

document.write ( scores [ 0 ] + "<br>" );

document.write ( scores [ 2 ] + "<br>" );
document.write ( scores [ 4 ] + "<br>" );

</script>

Result:
90
50
60

2. Change OneArray.html print all scores of the array

Scores.length: the total count of array

<script type = "text/javascript" >

var scores = [ 90 , 70 , 50 , 80 , 60 , 85 ];

//print all the scores of the array for ( var i = 0 ; i <

scores.length ; i ++) {
document.write ( scores [ i ] + "," );
}

</script>

Result:
90,70,50,80,60,85,

3. Change OneArray.html print all scores of the array

<script type = "text/javascript" >

// Dynamically deﬁne a one-dimensional array var scores

= new Array ();
scores [ 0 ] = 90 ;
scores [ 1 ] = 70 ;
scores [ 2 ] = 50 ;
scores [ 3 ] = 80 ;
scores [ 4 ] = 60 ;
scores [ 5 ] = 85 ;
//print all the scores of the array for ( var i = 0 ; i <
scores.length ; i ++) {
document.write ( scores [ i ] + "," );
}

</script>

Result:
90,70,50,80,60,85,

Select All Check Box

1. Create a SelectCheckBox.html ﬁle with Notepad

and open it in your browser
document.getElementsByName(): get an array of
elements with the same name checked: if the checkbox is
checked

<table width = "400" border = "1" > <tr> <td><input

type = "checkbox" onclick = "checkAll(this)" /> Select
All </td> <td> Book Name </td> </tr> <tr> <td>
<input type = "checkbox" name = "book" /></td>
<td> Easy Learning Java </td> </tr> <tr> <td><input
type = "checkbox" name = "book" /></td> <td> Easy
Learning Python 3 </td> </tr> </table> <script
language= "JavaScript" >
function checkAll ( obj )
{
var bookArray = document.getElementsByName (
"book" );
for ( var i = 0 ; i < bookArray.length ; i ++)
{
bookArray [ i ]. checked = obj.checked ;
}
}
</script>

Two-Dimensional Array

1. Create a TwoArray.html ﬁle with Notepad and open it in

your browser

<script type = "text/javascript" >

// Two-dimensional array deﬁnition and initialization var

arrs =[
[ 10 , 20 , 30 ],
[ 40 , 50 , 60 ],
[ 70 , 80 , 90 ]
];
document.write ( arrs [ 0 ][ 0 ] + "<br>" );
document.write ( arrs [ 0 ][ 2 ] + "<br>" );
document.write ( arrs [ 1 ][ 2 ] + "<br>" );

</script>

Result:
10
30
60

2. Create a TwoArray2.html ﬁle with Notepad and

open it in your browser

<script type = "text/javascript" >

var arrs =[
[ 10 , 20 , 30 ],
[ 40 , 50 , 60 ],
[ 70 , 80 , 90 ]
];
// i: row index, j: column index for ( var i = 0 ; i <
arrs.length ; i ++) {
for ( var j = 0 ; j < arrs [ i ]. length ; j ++) {
document.write ( arrs [ i ][ j ]);
document.write ( " " );
}
document.write ( "<br>" );
}

</script>

Find Dog Game

1. Draw buttons according to two-

dimensional array maps

2. Fill in the value of the array into the button, and

add a button click event, if button value is 1 becomes
* , if button value is 2 becomes Dog

1: *
2: Dog

function doButtonClick ( obj , value ){

if ( value == 1 ){
obj.value = "*" ;
} else if ( value == 2 ){
obj.value = "Dog" ;
}
}
</script>

3. Print random numbers 0-9

Math.random(): returns a random number between 0 and

1.
Math.ﬂoor(): rounds a number downwards to the nearest
integer

<script type = "text/javascript" >

for ( var i = 0 ; i < 10 ; i ++){
var num = Math.ﬂoor ( Math.random () * 10 )
document.write ( num + ", " );
}
</script>

Result:
9, 3, 9, 0, 4, 1, 0, 3, 4, 5,

4. Randomly generate 1- 2 initialize two-dimensional

array, Fill in the value of the array into the button,
and add a button click event, if button value is 1
becomes * , if button value is 2 becomes Dog

1: *
2: Dog

var mapHTML = "" ;

for ( var i = 0 ; i < maps.length ; i ++) {
for ( var j = 0 ; j < maps [ i ]. length ; j ++) {
mapHTML += "<input type='button' value=' '
onClick='doButtonClick(this," + maps [ i ][ j ]+ ")' />" ;
}
mapHTML += "<br>" ;
}
document.getElementById ( "result" ). innerHTML =
mapHTML ;

function doButtonClick ( obj , value ){

if ( value == 1 ){
obj.value = "*" ;
} else if ( value == 2 ){
obj.value = "Dog" ;
}
}
</script>
Secondary Linkage Drop-
down
1. Create a Drop-down.html ﬁle with Notepad and open it in
your browser
window.onload: execute a function after a page has been
loaded document.createElement(): create a html
element
<select id = "country" > <option value = "" > --Please
Select Country-- </option> </select>
<script type = "text/javascript" >

window.onload = function ()
{
var countryObj = document.getElementById ( "country"
);

option = document.createElement ( "option" );

option.text = "United States" ;
option.value = "United States" ;

countryObj.options [ countryObj.options.length ]= option

;
}

</script>

2. Add more options by countryArray

<select id = "country" > <option value = "" > --Please
Select Country-- </option> </select>
<script type = "text/javascript" >

var countryArray =[ "China" , "United States" ];

window.onload = function ()
{
var countryObj = document.getElementById ( "country"
);

for ( var i = 0 ; i < countryArray.length ; i ++)

{
var option = document.createElement ( "option" );
option.text = countryArray [ i ];
option.value = countryArray [ i ];
countryObj.options [ countryObj.options.length ]= option
;
}
}

</script>

3. Add province options

selectedIndex: sets or returns the index of the selected

option in a drop-down list.
<select id = "country" onchange =
"doCountryChange(this)" > <option value = "" > --
Please Select Country-- </option> </select>
<select id = "province" > </select>
<script type = "text/javascript" >
var countryArray =[ "China" , "United States" ];

var provinceArray = new Array ();

provinceArray [ 0 ] =[];
provinceArray [ 1 ] =[ "Beijing" , "Shanghai" ];
provinceArray [ 2 ] =[ "San Francisco" , "New York" ];

window.onload = function ()
{
var country = document.getElementById ( "country" );
for ( var i = 0 ; i < countryArray.length ; i ++)
{
var option = document.createElement ( "option" );
option.text = countryArray [ i ];
option.value = countryArray [ i ];
country.options [ country.options.length ]= option ;
}
}

function doCountryChange ( obj )

{
var provinceObj = document.getElementById (
"province" );
provinceObj.options.length = 0 ; // clear all var index =
obj.selectedIndex ;
for ( var i = 0 ; i < provinceArray [ index ]. length ; i
++)
{
var option = document.createElement ( "option" );
option.text = provinceArray [ index ][ i ];
option.value = provinceArray [ index ][ i ];
provinceObj.options [ provinceObj.options.length ]=
option ;
}
}
</script>
Event
Event List:
Onblur element loses focus
Onchange changes the contents
Onclick mouse click on an object
Ondblclick mouse double click on an object
Onerror An error occurred while loading a
document or image
Onfocus element gets focus
Onkeydown The key of a keyboard is pressed
Onkeypress The key of a keyboard is pressed
Onkeyup The key of a keyboard is released
Onload a page or image is loaded
Onmousedown a mouse button is pressed
Onmousemove mouse is moved
Onmouseout mouse is moved out from an element
Onmouseover mouse is moved over an element
Onmouseup mouse button is released
Onreset reset button is clicked
Onresize window or frame is resized
Onselect text is selected
Onsubmit submit button is clicked
Onunload exit page

Login Web Page

1. Create a Login.html ﬁle with Notepad and open it
in your browser

Username: <input type = "text" id = "username" value

= "" /> <br> Password: <input type = "password" id =
"pwd" value = "" /> <br> <input type = "button" value
= "Login" onclick = "checkLogin()" />
<script type = "text/javascript" >
function checkLogin ()
{
var usernameObj = document.getElementById (
"username" );
var pwdObj = document.getElementById ( "pwd" );

if ( usernameObj.value == "" )
{
alert ( "Please input username !" );
return ;
}

if ( pwdObj.value == "" )
{
alert ( "Please input password !" );
return ;
}
alert ( "login successfull !" );
}
</script>

2. Create a Login.html ﬁle with Notepad and open it

in your browser
document.onkeypress: the event occurs when the user
presses a key.

Username: <input type = "text" id = "username" value

= "" /> <br> Password: <input type = "password" id =
"pwd" value = "" /> <br> <input type = "button" value
= "Login" onclick = "checkLogin()" />
<script type = "text/javascript" >
document.onkeypress = function ( event )
{
var ext = window.event ? window.event : event ;
var key = ext.keyCode ? ext.keyCode : ext.which ;
if ( key == 13 ) // press enter key will be invoked {
checkLogin ();
}
}

function checkLogin ()
{
var usernameObj = document.getElementById (
"username" );
var pwdObj = document.getElementById ( "pwd" );

if ( usernameObj.value == "" )
{
alert ( "Please input username !" );
return ;
}

if ( pwdObj.value == "" )
{
alert ( "Please input password !" );
return ;
}

alert ( "login successfull !" );

}
</script>

MouseOver Thumbnail to
Larger
1. Create a ThumbnailLarger.html ﬁle with Notepad
and open it in your browser
<img>: tag deﬁnes an image in an HTML page.

<img src = "images/java.jpg" width = "60"

onmouseover = "zoomImage(this)" /> <img src =
"images/python.jpg" width = "60" onmouseover =
"zoomImage(this)" /> <img src =
"images/csharp.jpg" width = "60" onmouseover =
"zoomImage(this)" /> <hr> <img id = "image" src=""
/> <script type = "text/javascript" >
function zoomImage ( obj )
{
document.getElementById ( "image" ). src = obj.src ;
}
</script>

Element Hierarchy
1. Change ElementHierarchy.html to get all child
nodes.

obj.childNodes: get all child nodes of current node obj .

nodeName: get the node’s name
obj . nodeType: get the node’s type
obj . innerHTML: get the node’s html content

<b>: tag speciﬁes bold text.

<a>: tag deﬁnes a hyperlink, which is used to link from one
page to another.

<body> <div id = "div" > <b> United State </b>

<span> Book </span> <a href = "#" > VereJava </a>
</div> <hr> <input type = "button" value = "Get
Parent Node" onclick = "doGetParentNode()" />
</body>
<script type = "text/javascript" >
function doGetParentNode ()
{
var divObj = document.getElementById ( "div" );
alert ( divObj.parentNode.nodeName );
}
</script>

2. Change ElementHierarchy.html get all child nodes

obj.childNodes: get all child nodes of current node

obj.nodeName: get the parent node’s name
obj.nodeType: get the parent node’s type
obj.innerHTML: get the parent node’s html content
<body> <div id= "div" > <b> United State </b>
<span> Book </span> <a href = "#" > VereJava </a>
</div> <hr> <input type = "button" value = "Get Child
Nodes" onclick = "doGetChildNodes()" /> </body>
<script type = "text/javascript" >

3. Change ElementHierarchy.html get book node’s

previous and next node

obj . previousSibling: get previous node of current node

obj . nextSibling: get next node of current node
<body> <div id = "div" > <b> United State </b><span
id = "book" > Book </span><a href = "#" > VereJava
</a> </div> <hr> <input type = "button" value = "Get
Sliding Nodes" onclick = "doGetSliding()" /> </body>
<script type = "text/javascript" >

function doGetSliding ()
{
var bookObj = document.getElementById ( "book" );
document.write ( bookObj.previousSibling.innerHTML + "
<br>" );
document.write ( bookObj.nextSibling.innerHTML );
}

</script>

Create Text Node

1. Create a CreateTextNode.html ﬁle with Notepad
and open it in your browser
obj . createTextNode: creates a Text Node with the
speciﬁed text obj . appendChild: appends a node as the
last child of a node

function doCreateTextNode ()
{
var divObj = document.getElementById ( "div" );
var newNode = document.createTextNode ( "Good
Dreams" );
divObj.appendChild ( newNode );
}

</script>

2. Create a CreateElement.html ﬁle with Notepad and

open it in your browser
obj . createElement: creates an Element Node with the
speciﬁed name obj . appendChild: appends a node as the
last child of a node
<style> div{
width:200px; height:100px; border:1px solid
#ﬀ0000; }
</style>
<div id = "div" > </div>
<input type = "button" value = "Create Element"
onclick = "doCreateElement()" />
<script type = "text/javascript" >

function doCreateElement ()
{
var divObj = document.getElementById ( "div" );
var buttonElement = document.createElement ( "input"
);
buttonElement.type = "button" ;
buttonElement.value = "button" ;
divObj.appendChild ( buttonElement );
}

</script>

Delete Node
1. Create a DeleteNode.html ﬁle with Notepad and
open it in your browser
obj . removeChild: removes a speciﬁed child node

function doRemoveChild ()
{
var div = document.getElementById ( "div1" );
var img = document.getElementById ( "image" );
div.removeChild ( img );
}

</script>

Replace Node
1. Create a ReplaceNode.html ﬁle with Notepad and
open it in your browser

obj . replaceChild: replaces a child node with a new node

function doReplaceChild ()
{
var imgNode = document.createElement ( "img" );
imgNode.src = "python.jpg" ;
var div1 = document.getElementById ( "div1" );
div1.replaceChild ( imgNode , div1.childNodes [ 0 ]);
}

</script>

Add Contact Example

1. Create a AddContactExample.html ﬁle with
Notepad and open it in your browser

function addContact ()
{
var contact = document.getElementById ( "contact" );
var newNone = contact.cloneNode ( true );

var div = document.getElementById ( "div" );

div.appendChild ( newNone );
}

function deleteNode ( obj )

{
if ( obj.parentNode.parentNode.childNodes.length > 1 )
obj.parentNode.removeNode ( true );
}

</script>
CSS Style Font

1. Create a CSSStyleFont.html ﬁle with Notepad and

open it in your browser

<div id = "div" > Choose to stay positive </div>

<input type = "button" value = "Change Font Style"
onclick = "doChangeFont()" />
<script type = "text/javascript" >
function doChangeFont ()
{
var div = document.getElementById ( "div" );
div.style.fontSize = 48 + "px" ;
div.style.fontWeight = "bold" ;
div.style.color = "#ﬀ0000" ;
}
</script>
CSS Change Class Selector

1. Create a CSSClassSelector.html ﬁle with Notepad

and open it in your browser

<style type = "text/css" > .smallFont{

font-size:12px; color:#ﬀ0000; }
.bigFont{
font-size:48px; font-weight:bold; color:#00ﬀ00; }
</style>
<div id = "div" > Just keep doing every day. </div>
<input type = "button" value = "Change Font Class"
onclick = "changeFont()" />
<script type = "text/javascript" >

function changeFont ()
{
var div = document.getElementById ( "div" );
if ( div.className == "smallFont" )
{
div.className = "bigFont" ;
}
else {
div.className = "smallFont" ;
}
}

</script>

CSS Overﬂow Expand and

Close
1. Create a CSSExpandClose.html ﬁle with Notepad
and open it in your browser

<style type = "text/css" > .open{

display :"" ; }

.close{
display :none ; }

#div{
width:300px; height:30px; border:1px solid
#ﬀ0000; text-align:right; }

#div2{
width:300px; border:1px solid #00ﬀ00; }
</style>

<div id = "div" onclick = "change()" > Chick Here

</div> <div id = "div2" > <ul> <li> Don’t be afraid,
for I am with you. </li> <li> Your smile lights up the
room. </li> <li> You are doing an amazing job at
life. </li> </ul> </div>
<script type = "text/javascript" >
function change ()
{
var div2 = document.getElementById ( "div2" );
if ( div2.className == "open" )
{
div2.className = "close" ;
}
else {
div2.className = "open" ;
}
}

</script>

CSS Floating Highlighting

1. Create a CSSHighlighting.html ﬁle with Notepad

and open it in your browser

<style type = "text/css" > .over{

background-color: #ﬀ0000; }

.down{
background-color: #0000ﬀ; }

table{
border:1px solid #eeeeee; width:400px; border-
collapse: collapse; }

table th{
border:1px solid #eeeeee; background-color:
#cccccc; }

table td{
border:1px solid #eeeeee; }
</style>

<table> <tr> <th> Username </th><th> Password

</th> </tr> <tr onmousedown = "doDown(this)"
onmouseover = "doOver(this)" onmouseout =
"doOut(this)" > <td> admin </td><td> 111111 </td>
</tr> <tr onmousedown = "doDown(this)" onmouseover
= "doOver(this)" onmouseout = "doOut(this)" > <td>
isacc </td><td> 222222 </td> </tr> <tr onmousedown
= "doDown(this)" onmouseover = "doOver(this)"
onmouseout = "doOut(this)" > <td> sala </td><td>
333333 </td> </tr> </table>
<script type = "text/javascript" >

function doOver ( obj ){

if ( obj.className != "down" ){
obj.className = "over" ;
}
}

function doOut ( obj ){

if ( obj.className != "down" ){
obj.className = "" ;
}
}

function doDown ( obj ){

if ( obj.className != "down" ){
obj.className = "down" ;
} else {
obj.className = "over" ;
}
}

</script>

Table Create Rows Columns

1. Create a TableCreate RowsColumns.html ﬁle with

Notepad and open it in your browser
table.insertRow: inserts a new row (<tr>) in a given
<table> , returns a reference to the new row.
table . insertCell: inserts a new col (<td>) in a given
<tr> , returns a reference to the new col.

<style type = "text/css" > .tableClass{

width:600px; border:1px solid #ﬀ0000; border-
collapse: collapse; }
.tableClass td{
border:1px solid #ﬀ0000; }
</style>

<input type = "button" value = "Create Table" onclick

= "doCreateTable()" /> <input type = "button" value =
"Create Row" onclick = "doCreateRow()" /> Rows:
<input type = "text" value = "" id = "row" /> Columns:
<input type = "text" value = "" id = "col" /> <br> <br>
<div id = "div" >
</div>
<script type = "text/javascript" >
var table ;
function doCreateTable ()
{
table = document.createElement ( "table" );
table.className = "tableClass" ;

document.getElementById ( "div" ). appendChild ( table

);
}

function doCreateRow ()
{
var rowNum = parseInt ( document.getElementById (
"row" ). value );
var colNum = parseInt ( document.getElementById (
"col" ). value );

for ( var i = 1 ; i <= rowNum ; i ++)

{
var row = table.insertRow (- 1 );
for ( var j = 1 ; j <= colNum ; j ++)
{
var cell = row.insertCell (- 1 );
cell.innerHTML = "row: " + i + ", col: " + j ;
}
}
}

</script>

Delete Table Row Column

1. Create a DeleteTableRowColumn.html ﬁle with

Notepad and open it in your browser
table . deleteCell: delete a cell in the current table row.
<style type = "text/css" > .tableClass{
width:600px; border:1px solid #ﬀ0000; border-
collapse: collapse; }

.tableClass td{
border:1px solid #ﬀ0000; }
</style> <input type = "button" value = "Create Table"
onclick = "doCreateTable()" /> <input type = "button"
value = "Create Row" onclick = "doCreateRow()" />
<br> <input type = "button" value = "Delete Row"
onclick = "doDeleteRow()" /> <input type = "button"
value = "Delete Col" onclick = "doDeleteCol()" /> <br>
Rows: <input type = "text" value = "" id = "row" />
Columns: <input type = "text" value = "" id = "col" />
<br> <br> <div id = "div" > </div>

<script type = "text/javascript" >

var table ;
function doCreateTable ()
{
table = document.createElement ( "table" );
table.className = "tableClass" ;
document.getElementById ( "div" ). appendChild ( table
);
}

function doCreateRow ()
{
var rowNum = parseInt ( document.getElementById (
"row" ). value );
var colNum = parseInt ( document.getElementById (
"col" ). value );

for ( var i = 1 ; i <= rowNum ; i ++)

{
var row = table.insertRow (- 1 );
for ( var j = 1 ; j <= colNum ; j ++)
{
var cell = row.insertCell (- 1 );
cell.innerHTML = "Rows: " + i + ",Columns: " + j ;
}
}
}

function doDeleteRow ()
{
var rowNum = parseInt ( document.getElementById (
"row" ). value );
table.deleteRow ( rowNum );
}

function doDeleteCol ()
{
var colNum = parseInt ( document.getElementById (
"col" ). value );
var rows = table.rows ;
for ( var i = 0 ; i < rows.length ; i ++)
{
rows [ i ]. deleteCell ( colNum );
}
}
</script>

Timer
1. Create a Timer.html ﬁle with Notepad and open it
in your browser
getFullYear(): Get the year as a four digit number (yyyy)
getMonth(): Get the month as a number (0-11) getDate():
Get the day as a number (1-31) getHours(): Get the hour
(0-23) getMinutes(): Get the minute (0-59)
getSeconds(): Get the second (0-59)
getTime(): Get the time (milliseconds since January 1,
1970) setInterval(): continue calling the function until
clearInterval() is called.

<div id = "dateDiv" ></div>

dateDiv.innerHTML = dateString ;
}

setInterval ( "doSetInterval()" , 1000 );

</script>
Thanks for learning, if you want to learn web coding,
please study book
https://www.amazon.com/dp/B07S8S5TLQ

https://www.amazon.com/dp/B08D863KFY

If you enjoyed this book and found some beneﬁt in reading

this, I’d like to hear from you and hope that you could take
some time to post a review on Amazon. Your feedback and
support will help us to greatly improve in future and make
this book even better.

You can follow this link now.

http://www.amazon.com/review/create-review?
&asin=1093504781

Diﬀerent country reviews only need to modify the

amazon domain name in the link: www.amazon.co.uk
www.amazon.de www.amazon.fr www.amazon.es
www.amazon.it www.amazon.ca www.amazon.nl
www.amazon.in www.amazon.co.jp www.amazon.com.br
www.amazon.com.mx www.amazon.com.au
I wish you all the best in your future success!

Confident Coding Master The Fundamentals of Code and Supercharge Your Career by Rob Percival
100% (1)
Confident Coding Master The Fundamentals of Code and Supercharge Your Career by Rob Percival
273 pages
54 Marketo Questions
No ratings yet
54 Marketo Questions
23 pages
Management Information Systems Managing The Digital Firm Canadian 7th Edition Laudon Test Bank 1
100% (54)
Management Information Systems Managing The Digital Firm Canadian 7th Edition Laudon Test Bank 1
25 pages
Splunk Dashboards Quick Reference Guide
67% (3)
Splunk Dashboards Quick Reference Guide
6 pages
Java Script25
No ratings yet
Java Script25
11 pages
WT LAB Programs.docx
No ratings yet
WT LAB Programs.docx
21 pages
css codes with output (1)
No ratings yet
css codes with output (1)
114 pages
CSS Codes
No ratings yet
CSS Codes
17 pages
JavaScript Tutorial
No ratings yet
JavaScript Tutorial
75 pages
Java script
No ratings yet
Java script
39 pages
java script lab manual edited (1)
No ratings yet
java script lab manual edited (1)
13 pages
21CS1202 WAD Question BANK For Students 2022
No ratings yet
21CS1202 WAD Question BANK For Students 2022
17 pages
A 2
No ratings yet
A 2
7 pages
Lab2 3wplab Manual
No ratings yet
Lab2 3wplab Manual
12 pages
CSS QB Slove Sample Paper
No ratings yet
CSS QB Slove Sample Paper
10 pages
Lab Manual_KIT451_2021_22_Even
No ratings yet
Lab Manual_KIT451_2021_22_Even
24 pages
MIT 22043 WAD JavaScript Practice Code 19 20 2022
No ratings yet
MIT 22043 WAD JavaScript Practice Code 19 20 2022
18 pages
WT Unit-2 Javascript
No ratings yet
WT Unit-2 Javascript
129 pages
Javascript
No ratings yet
Javascript
93 pages
FSD LAB
No ratings yet
FSD LAB
23 pages
Basic Program Using Javascripit For Practice
No ratings yet
Basic Program Using Javascripit For Practice
10 pages
Javascript
No ratings yet
Javascript
15 pages
WT Unit V-Javascript-Long Answer Questions
No ratings yet
WT Unit V-Javascript-Long Answer Questions
28 pages
Css Prac Material
No ratings yet
Css Prac Material
9 pages
Assignment React Prescient Technologies Vivek Dhande
No ratings yet
Assignment React Prescient Technologies Vivek Dhande
6 pages
Java Script
No ratings yet
Java Script
5 pages
CH 4
No ratings yet
CH 4
73 pages
Syntax:: Javascript Code
No ratings yet
Syntax:: Javascript Code
49 pages
Web Lab Programs
No ratings yet
Web Lab Programs
56 pages
CSS (22519) Manual
No ratings yet
CSS (22519) Manual
62 pages
web practical manual pawan
No ratings yet
web practical manual pawan
62 pages
Javascript Practical File Work
No ratings yet
Javascript Practical File Work
8 pages
Web Lab Manual2021
No ratings yet
Web Lab Manual2021
22 pages
Java Script:: Body of The Code
No ratings yet
Java Script:: Body of The Code
25 pages
Lab Manual - KIT451 - 2021 - 22 - Even
No ratings yet
Lab Manual - KIT451 - 2021 - 22 - Even
24 pages
Css-Internal and External Programs_2024
No ratings yet
Css-Internal and External Programs_2024
22 pages
VBScript & JAVAScript Programming Notes
No ratings yet
VBScript & JAVAScript Programming Notes
6 pages
CSC 551: Web Programming Spring 2004: Client-Side Programming With Javascript
No ratings yet
CSC 551: Web Programming Spring 2004: Client-Side Programming With Javascript
26 pages
JavaScript Is The Programming Language of HTML and The Web
No ratings yet
JavaScript Is The Programming Language of HTML and The Web
58 pages
Webprog-js
No ratings yet
Webprog-js
52 pages
Javascript
No ratings yet
Javascript
65 pages
Unit 2 - DOM wt
No ratings yet
Unit 2 - DOM wt
62 pages
Sukruthi WT Week5
No ratings yet
Sukruthi WT Week5
15 pages
Lecture 5- Java Script
No ratings yet
Lecture 5- Java Script
92 pages
HTML - Lab Record
No ratings yet
HTML - Lab Record
29 pages
FSD (part -1)
No ratings yet
FSD (part -1)
10 pages
21203B0010 PR7 - CSS
No ratings yet
21203B0010 PR7 - CSS
7 pages
CSS CT2 Combined
100% (1)
CSS CT2 Combined
12 pages
Web Design and Programming_Chapter 4
No ratings yet
Web Design and Programming_Chapter 4
26 pages
Javascript
No ratings yet
Javascript
62 pages
19-4-24 (JS Upto Datatypes)
No ratings yet
19-4-24 (JS Upto Datatypes)
6 pages
Javascript Note
No ratings yet
Javascript Note
81 pages
Unit III JAVA SCRIPT
No ratings yet
Unit III JAVA SCRIPT
87 pages
Web Tech. Lab Manual
No ratings yet
Web Tech. Lab Manual
27 pages
Document Object Model
No ratings yet
Document Object Model
17 pages
CSS Solved QB 22-23-1
No ratings yet
CSS Solved QB 22-23-1
12 pages
Client Side Scripting Language (22519) Semester - V (CM) : A Laboratory Manual For
No ratings yet
Client Side Scripting Language (22519) Semester - V (CM) : A Laboratory Manual For
21 pages
Javascript
No ratings yet
Javascript
109 pages
CSS Summer 22
No ratings yet
CSS Summer 22
32 pages
Science SOP Answer 6 to 12
No ratings yet
Science SOP Answer 6 to 12
11 pages
Microsoft Word - PAAVAI
No ratings yet
Microsoft Word - PAAVAI
65 pages
Why Study Javascript?
No ratings yet
Why Study Javascript?
22 pages
Quick JavaScript Learning In Just 3 Days: Fast-Track Learning Course
From Everand
Quick JavaScript Learning In Just 3 Days: Fast-Track Learning Course
Vijay K.R.
No ratings yet
JavaScript Fundamentals: JavaScript Syntax, What JavaScript is Use for in Website Development, JavaScript Variable, Strings, Popup Boxes, JavaScript Objects, Function, and Event Handlers
From Everand
JavaScript Fundamentals: JavaScript Syntax, What JavaScript is Use for in Website Development, JavaScript Variable, Strings, Popup Boxes, JavaScript Objects, Function, and Event Handlers
Steven Bright
No ratings yet
Report On Web Development Technology
No ratings yet
Report On Web Development Technology
20 pages
Lab Details and Specification: Sir Vishveshwaraiah Institute of Science and Technology, Madanapalle
No ratings yet
Lab Details and Specification: Sir Vishveshwaraiah Institute of Science and Technology, Madanapalle
93 pages
Course Slides
No ratings yet
Course Slides
55 pages
Qweb Report in Odoo
No ratings yet
Qweb Report in Odoo
14 pages
Using The Google Chart Tools With R
No ratings yet
Using The Google Chart Tools With R
40 pages
Direct Post Integration Guide
No ratings yet
Direct Post Integration Guide
28 pages
02 Intro To Web Development and Design Principles
No ratings yet
02 Intro To Web Development and Design Principles
34 pages
Mohit Report
No ratings yet
Mohit Report
43 pages
READING
No ratings yet
READING
2 pages
Css 214
No ratings yet
Css 214
48 pages
Assignment 2
No ratings yet
Assignment 2
6 pages
Codigos HTML Mas Modernos
No ratings yet
Codigos HTML Mas Modernos
31 pages
Project Work Completed
No ratings yet
Project Work Completed
63 pages
Building Web Pages With HTML and CSS
100% (1)
Building Web Pages With HTML and CSS
9 pages
Html5 Audio
No ratings yet
Html5 Audio
15 pages
Iris
No ratings yet
Iris
97 pages
Cbse - Department of Skill Education Curriculum For Session 2020-2021
No ratings yet
Cbse - Department of Skill Education Curriculum For Session 2020-2021
10 pages
Cascading Style Sheets (CSS)
100% (2)
Cascading Style Sheets (CSS)
18 pages
WBP practical no9 answers
No ratings yet
WBP practical no9 answers
7 pages
Techniques For Accessibility Evaluation and Repair Tools
No ratings yet
Techniques For Accessibility Evaluation and Repair Tools
58 pages
Lakme: Submitted in The Fulfillment of Project Training Required For The Reward of Degree of
No ratings yet
Lakme: Submitted in The Fulfillment of Project Training Required For The Reward of Degree of
21 pages
Software Engineering
No ratings yet
Software Engineering
284 pages
Document Object Model: Softuni Team
No ratings yet
Document Object Model: Softuni Team
47 pages
BCS Written Exam Preparation Top 10 Tips For Your
No ratings yet
BCS Written Exam Preparation Top 10 Tips For Your
13 pages
It Syllabus Cape
No ratings yet
It Syllabus Cape
162 pages
MUNI
No ratings yet
MUNI
28 pages