Academic

Notes

Introduction

JavaScript (JS): is a lightweight object-oriented programming language, which is used by several websites for scripting the webpages for creating network-centric applications.

It is an interpreted, full-fledged programming language that enables dynamic interactivity on websites when applied to an HTML document.
It is implemented as client-side script in HTML to make dynamic pages.
It is a case sensitive interpreted programming language having object-oriented abilities developed by Netscape and originally called LiveScript in 1995.

Features of JavaScript:

Features of JavaScript:
1. Standard scripting language supported by most of browser
2. Object Oriented Script language
3. Client edge technology
4. Case Sensitive format
5. Light wight, efficient and delicate interpreted programming language
6. Validation of user’s input
Open source and cross platform
7. Interpreter Centered
8. Ability to perform in-built function
9. Statements looping
10. Else and if statement
11. Handling events

Uses of JavaScript:

JavaScriptis used to create interactive websites.
1. Displaying data and time
2. Displaying clocks
3. Dynamic drop-down menus
4. Displaying pop-up windows and dialog boxes (notification to user)
5. Client-side validation and respond
6. Back-end data loading
7. Server applications
8. Dynamic modification

Adding JavaScript to HTML

Adding JavaScript to HTML There are typically three ways to add JavaScript to a web page:
1. Embedding the JavaScript code between a pair of <SCRIPT> and </SCRIPT> tag.
Syntax:
<script type="text/javascript">
let greet="Welcome to JavaScript class"
document.write(greet);//displays message.
</script> Here: Let/var is used to declare variable i.e. greet to store message
document.write() is the function of JavaScript.
2. JavaScript code inline: Placing the JS code directly inside an HTML tag using the special tag attributes such as onclick, onmouseover, onkeypress, onload etc.
Syntax:
<button onclick="alert('Welcome ot JS class')">
JS sms </button>
Here: alert() is the function of JavaScript. It is used to generate alert or pop-up message as notification to user.
<button> is HTML tag that provides a button shape.
3. Calling an external JavaScript file Creating an external JavaScript file with .js extension and then load it within page through the src attribute of the <SCRIPT> tag. This is the best way to use .js file.
We can create a separate JavaScript file with .js extension and incorporate/include to HTML document through src attribute of the <script> tag. E.g. <script src=“hello.js”> </script>
This is the most useful and best way to use same script to multiple documents because it saves us from repeating same task over and over again and makes our website much easier to maintain.
Syntax:
/* create a JavaScript file “hello.js” and a function to display a message */
Function greet() {alert(“Welcome to JS class”);}
<body> <button onclick="greet()"> //greet is function name JS sms </button> <script type="text/javascript" src="hello.js"> </script> //src=“hello.js” to link file hello.js. </body>

User Interaction functions of JavaScript:

JavaScript provides three built-in functions for popup boxes to do simple user interaction:
alert(msg); is used to give a warning message to the users. It gives only one button “OK” to select and proceed the notification message.
confirm(msg); it helps to asks the user to confirm or cancel message. It displays a dialog box with two buttons: OK and Cancel.
prompt(msg, default value); it helps to ask user to enter some text value. It is useful when we want to pop-up a text to get user input. It enables to interact with the user. It has also two buttons: OK and Cancel.

JavaScript Output/ display functions:

JavaScript can "display" data in different ways:
Writing into an HTML element, using innerHTML.
Writing into the HTML output using document.write().
Writing into an alert box, using window.alert().
Writing into the browser console, using console.log().

Using innerHTMLTo access an HTML element, JavaScript can use the document.getElementById(id) method. The id attribute defines the HTML element. The innerHTML property defines the HTML content:

Example of innerHTML
<body>
<h2>My First Web Page </h2>
<p id="demo"> </p>
<p id="dem"> </p> <script>
document.getElementById("demo").innerHTML = 5 + 6;
document.getElementById("dem").innerHTML = "hello";
</script> </body>

Example of document.write()
<script>document.write(5 + 6);</script>
or
<button type="button" onclick="document.write(5 + 6)"> Try it </button>

Lab Works

Lab work

Lab Works

display date

<body> <h3>current date:</h3> <p id="time"></p> <div class="date"> <button onclick="showDate()">Show date</button> </div> <div class="btn"> <button onclick="showTime()">Show date</button> </div> <script src="js.js"> </script> </body>
JavaScript content in js.js file
function showDate() { document.getElementById('time').innerHTML = Date(); } function showTime() { document.write(Date()); }

JavaScript