Scribd
Upload
22 views64 pages

Creating Dynamic Web Page UNIT III

Uploaded by

Sohail Khan
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
22 views64 pages

Creating Dynamic Web Page UNIT III

Uploaded by

Sohail Khan
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 64

U

NIT III

Creating Dynamic Web Page


• Changing Pages Based on Time and Date
• Displaying the Quote of the Day
• Using Arrays
• Constructing the Quotes Script
• Considerations When Accessing External Files
• Changing the Background Color through a Random Number
• Turning the Color Generator into a Function
• Using the Image and Area Objects
• Creating an Image Object
• Creating an Area Object,
• In JavaScript, date and time are represented by the Date object.
• Creating Date Objects. There are four ways to create a date object.

• new Date()
• new Date(milliseconds)
• new Date(Date string)
• new Date(year, month, day, hours, minutes, seconds, milliseconds)
JavaScript Date Methods

• Method Description
• now() Returns the numeric value corresponding to the current
time
• getFullYear() Gets the year according to local time
• getMonth() Gets the month, from 0 to 11 according to local time
• getDate() Gets the day of the month (1–31) according to local time
• getDay() Gets the day of the week (0-6) according to local time
• getHours() Gets the hour from 0 to 23 according to local time
• getMinutes Gets the minute from 0 to 59 according to local time
• setFullYear() Sets the full year according to local time
• setMonth() Sets the month according to local time
• setDate() Sets the day of the month according to local time
E x a m p l es
• < !D OCT YPE h tml >

• <html>
• <body>
•
<h2>JavaScript Dates</h2>
•
<p>setDate() sets the day of the month of a date:</p>
•
<p id="demo"></p>
•
<script>
• const d = new Date();
• d.setDate(15);
• document.getElementById("demo").innerHTML = d;
• </script>
•
</body>
• </html>
•
2. Set date

<!DOCTYPE html>
<html><body><h2>JavaScript Dates</h2>
<p>setDate() sets the day of the month of a date:</p>
<p id="demo"></p>
<script>
const d = new Date("July 21, 1983 01:15:00");
d.setDate(15);
d.setFullYear(2000);
document.getElementById("demo").innerHTML = d;
</script></body></html>
Current time example

• <html>
• <body>
• Current Time: <span id="txt"></span>
• <script>
• var today=new Date();
• var h=today.getHours();
• var m=today.getMinutes();
• var s=today.getSeconds();
document.getElementById('txt').innerHTML=h+":"+m+":"+s;
• </script>
• </body>
• </html>
What will be the output?

• Q1. const date = new Date(2008, 0,


35); console.log(date);

Q2. const d1 = new Date(2020, 1,


1) console.log(d1)
• Q4. const d = new Date(2020, 0, 1);
d.setDate(3);
console.log(d);

Ans: Fri Jan 03 2020 00:00:00 GMT+0530 (India Standard Time)

Q5. const d = new Date(2020, 0, 1)


d.setDate(0)
console.log(d)

• Ans: Dec 31 2019


• If you invoke setDate(0) the date instance will adjust to the last day of the previous
month.
• Q6. const d = new Date(2020, 0,
1) d.setDate(32)
console.log(d)

Ans: Feb01, 2020

If a positive integer is provided to setDate outside of the number of


days available, the date instance’s month and day will be adjusted as
necessary. (e.g. A setDate(32) in January will calculate as February 1st.)
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)
•
• 1) JavaScript array literal []
•The syntax of creating array using array literal is given below

var arrayname=[value1,value2. valueN];


JavaScript Array directly (new keyword)

• The syntax of creating array directly is given below:


• var arrayname=new Array();

• Here, new keyword is used to create instance of array.


• Let's see the example of creating array directly.
•
• <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>
3) JavaScript array constructor (new keyword)

• 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.
• <script>
• var emp=new Array("Jai","Vijay","Smith");
• for (i=0;i<emp.length;i++){
• document.write(emp[i] + "<br>");
• }
• </script>
• What will be the output of the following JavaScript code?

var a1 = [,,,];
var a2 = new Array(3);
0 in a1
0 in a2

a) true false
b) false true
c) true true
d) false true
Using Arrays- sample Questions

• var arrayOfOddNumbers = [1, 3, 5];


arrayOfOddNumbers[100] = 199;
console.log(arrayOfOddNumbers.length)
;
JavaScript placesempty as a value for indices 3 - 99. Thus, when you
set the value of the 100th index, the array looks like:
Find the index position of d in this array var arr= ['a','b','c','d'];
Q1. var arr = [1, 2, 3, 4];
console.log(arr.length)
; arr[20] = 2;
console.log(arr.length)
;

• Q2. What will be returned if you look for the index of something
that does not exist?

• var arr= ['a','b','c','d']; console.log(arr.indexOf(7));


What is the length of these arrays?

• A. var arr1 = [,,,];

• B. var arr2 = new Array(3)

• C. var arr3 = [1,2,3,4,5]


• D. var array = [ [1,2,3], [4,5,6] ];

• E. var array[0].length = [ [1,2,3], [4,5,6] ];


Which side of the image map can be created
using JavaScript?
a) Server side

b) Client side

c) Both Server and Client side

d) User side
5. What is the purpose of the area element?

a) Area of the text

b) Shape and coordinates of the hotspot

c) Shape and area of the hotspot


d) Coordinates and area
Node.js is written in which language?

a) C++
b) JavaScript
c) C
d) JAVA
• To include the HTTP server in the node module, what function
do we use?
• A) get()
• B) Require()
• C) createServer()
• D)None of these
• We can kill a process in Node.js using the keyboard shortcut?
• Ctrl+ C

• Ctrl+ B

• Ctrl+ K
•What is the full form of npm?

a)Node Project Manager

b) Node Package Manager

c) New Project Manager


d) New Package Manager
How can we initiate a NodeJS file called Hello in Node?

a) Hello,js

b) node Hello.js

c) javascript Hello.js

d) node Hello
is a debugging tool for NodeJS?

a) Node Inspector

b) REPL

c) Node Console

d) None of the above


How can we check the installed version of Node?

a) npm –version

b) node –version

c) npm getVersion

d) None of the above


NodeJS uses an event-driven, non-blocking IO model?

a) True

b) False

c) Cannot be determined

d) None of the above


What is a callback?

a) The callback is a technique in which a method calls back the caller


method

b)The callback is an asynchronous equivalent for a function

c)Both A and B

d)None of the above


Which of the following command is used to
start a REPL session?
a) $ node
b) $ node start
c) $ node repl
d) $ node console
• Which of the following extension is used to save the Node.js files?
a) .js
b) .node
c) .java
d) .txt
• Which of the following engine Node in core?

a) Chrome V8
b) Microsoft Chakra
c) SpiderMonkey
d) Node En
All APIs of Node.JS are.

A - Asynchronous
B - Synchronous
C - Both of the above.
D - None of the above.
Which of the following methods is used to access HTML elements using Javascript?

a) getElementbyId()
b) getElementsByClassName()
c) Both A and B
d) None of the above
Which of the following methods can be used to display data in some
form using Javascript?
a) document.write()

b) console.log()
c) window.alert()
d) All of the above
What will be the output of the following code snippet?

<script type="text/javascript"> a
= 5 + "9";
document.write(a); </script>
Compilation Error
14
Runtime Error
59
5. What will be the output of the
following JavaScript code?
<p id="demo"></p>
<script>
var js = 10;
js *= 5;
document.getElementById("demo").innerHTML = js;
</script>

• a) 10
• b) 50
• c) 5
• d) Error
8. What will be the output of the following
JavaScript code snippet?
• // JavaScript Equalto Operators
• function equalto()
• {
• int num=10;
• if(num==="10")
• return true;
• else
• return false;
• }
• a) false
• b) true
• c) compilation error
• d) runtime error
External JavaScript 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.
Advantages of External JavaScript

There will be following benefits if a user creates an external javascript:

• It helps in the reusability of code in more than one HTML file.


• It allows easy code readability.
• It is time-efficient as web browsers cache the external js files, which
further reduces the page loading time.
• It enables both web designers and coders to work with html and js files
parallelly and separately, i.e., without facing any code conflictions.
• The length of the code reduces as only we need to specify the location of
the js file.
•
Disadvantages of External JavaScript

• There are the following disadvantages of external files:


• The stealer may download the coder's code using the url of the js file.
• If two js files are dependent on one another, then a failure in one file may affect
the execution of the other dependent file.
• The web browser needs to make an additional http request to get the js code.
• A tiny to a large change in the js code may cause unexpected results in all its
dependent files.
• We need to check each file that depends on the commonly created external
javascript file.
• If it is a few lines of code, then better to implement the internal javascript code.
•
• Changing pages based on date and time
•
•
• <!DOCTYPE html>
• <html>
• <body>
• <p> hello</p>
• <script>
• var currentDate = new Date();
• var currentDay = currentDate.getDate();
•
• var currentMonth = currentDate.getMonth();
• if (currentDay >= 12 && currentDay <= 17 && currentMonth == 3) {
•
• //document.write('Earn 10x bonus points and judge who is honourable and who is not');
• } else {
• //document.write('Judge for yourself who is honourable and who is not');
• window.open("https://www.w3schools.com");
• }
• </script>
• </body>
• </html>
Displaying the quotes of the day

• DOCTYPE html>

• <html>

• <body >

• <h1>Generating Quotes</h1>

• <script>

• function thoughts_authors() {

• //Array to store author names

• var authors=new Array()

• authors[0] = " Albert Einstein";

• authors[1] = "Frank Zappa";

• authors[2] = "Marcus Tullius Cicero";

• authors[3] = "Mahatma Gandhi";

• //Array to store the quotes

• var quotes=new Array()

• quotes[0] = "Two things are infinite: the universe and human stupidity; and I'm not sure about the universe.";

• quotes[1] = "So many books, so little time.";

• quotes[2] = "A room without books is like a body without a soul.";

• quotes[3] = "Be the change that you wish to see in the world.";

• //Generating index of a random quote

• index = Math.floor(Math.random() * quotes.length);


• //Using the alert function to create a pop-up of the quote

• alert(quotes[index]+ "\n" + "-" + authors[index]);

• }

• </script>

• <button onclick="thoughts_authors()">click here to generate a quote</button>

• </body>

• </html>
changing the background color through a
random number in js
• <!DOCTYPE html>
• <html>
• <head>

• <meta charset="utf-8">

• <title>JavaScript function to create random background color</title>

• </head>

• <body>

• <script>function random_bg_color() {

• var x = Math.floor(Math.random() * 256);

• var y = Math.floor(Math.random() * 256);

• var z = Math.floor(Math.random() * 256);

• var bgColor = "rgb(" + x + "," + y + "," + z + ")";


• console.log(bgColor);
•

• document.body.style.background = bgColor;

• }
•

• random_bg_color();

• </script>

• </body>

• </html>
•
IMAGE OBJECT

• <!DOCTYPE html>

• <html lang="en">

• <head>

• <meta charset="UTF-8" />

• <meta name="viewport" content="width=device-width, initial-scale=1.0" />

• <title>Document</title>

• <style>

• body {

• font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;

• }

• .result {

• font-size: 18px;

• font-weight: 500;

• color: rebeccapurple;

• }

• </style>

• </head>
• <body>

• <h1>The image() object in JavaScript</h1>

• <div class="result"><br /></div>

• <button class="Btn">CLICK HERE</button>

• <h3>Click on the above button to display an image</h3>

• <script>

• let resEle = document.querySelector(".result");

• let BtnEle = document.querySelector(".Btn");

• let newImage = new Image(500, 300);

• newImage.src = "https://i.picsum.photos/id/195/536/354.jpg";

• BtnEle.addEventListener("click", () => {

You might also like