CH 3 Lecture 1

Bangladesh Army University of Engineering and Technology (BAUET)
Qadirabad Cantonment, Natore.
Department of Information and Communication Engineering (ICE)
ICE 4261: Internet and Web Programming

Chapter: Web Programming
Lecture-1
Prepared By
Mehedi Hasan Imran
Lecturer, BAUET
Dept. of ICE
Email: imran02@bauet.ac.bd
JavaScript
JavaScript is an object-based scripting language which is lightweight and cross-platform. JavaScript is used to
create client-side dynamic pages.
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.
<!DOCTYPE html>
<html>
<body>
<h2>Department of ICE</h2>
<p id="demo">ICE 7th Batch</p>
<button type="button"
onclick='document.getElementById("demo").innerHTML =
"We will Miss You"'>Click Here!</button>
</body>
</html>
03/25/2023 Mehedi Hasan Imran, Lecturer, Department of Information and Communication Engineering 2
Features of JavaScript
There are following features of JavaScript:

1.All popular web browsers support JavaScript as they provide built-in execution environments.
2.JavaScript follows the syntax and structure of the C programming language. Thus, it is a structured
programming language.
3.JavaScript is a weakly typed language, where certain types are implicitly cast (depending on the operation).
4.JavaScript is an object-oriented programming language that uses prototypes rather than using classes for
inheritance.
5.It is a light-weighted and interpreted language.
6.It is a case-sensitive language.
7.JavaScript is supportable in several operating systems including, Windows, macOS, etc.
8.It provides good control to the users over the web browsers.
Applications of Javascript Programming
•Client side validation - This is really important to verify any user input before submitting it to the server and Javascript
plays an important role in validating those inputs at front-end itself.
•Manipulating HTML Pages - Javascript helps in manipulating HTML page on the fly. This helps in adding and deleting any
HTML tag very easily using javascript and modify your HTML to change its look and feel based on different devices and
requirements.
•User Notifications - You can use Javascript to raise dynamic pop-ups on the webpages to give different types of
notifications to your website visitors.
•Back-end Data Loading - Javascript provides Ajax library which helps in loading back-end data while you are doing some
other processing. This really gives an amazing experience to your website visitors.
•Presentations - JavaScript also provides the facility of creating presentations which gives website look and feel. JavaScript
provides RevealJS and BespokeJS libraries to build a web-based slide presentations.
•Server Applications - Node JS is built on Chrome's Javascript runtime for building fast and scalable network applications.
This is an event based library which helps in developing very sophisticated server applications including Web Servers.
JavaScript Example
<html>
<body>
<h2>Welcome to BAUET</h2>
<script>
document.write("Hello JavaScript");
</script>
</body>
</html>
Java script example is easy to code. JavaScript provides 3 places to put the JavaScript code: within body tag,
within head tag and external JavaScript file.
The script tag specifies that we are using JavaScript.

The text/javascript is the content type that provides information to the browser about the data.
The document.write() function is used to display dynamic content through JavaScript. We will learn about
document object in detail later.
JavaScript in Chrome
Here are the steps to turn on or turn off JavaScript in Chrome −

•Click the Chrome menu at the top right hand corner of your browser.
•Select Settings.
•Click Show advanced settings at the end of the page.
•Under the Privacy section, click the Content settings button.
•In the "Javascript" section, select "Do not allow any site to run JavaScript" or "Allow all sites to run JavaScript
(recommended)".
Ways to put JavaScript code
There is a flexibility given to include JavaScript code anywhere in an HTML document. However the most
preferred ways to include JavaScript in an HTML file are as follows −
•Script in <head>...</head> section.
•Script in <body>...</body> section.
•Script in <body>...</body> and <head>...</head> sections.
•Script in an external file and then include in <head>...</head> section.
JavaScript in <head>...</head> section
JavaScript in <body>...</body> section
If you need a script to run as the page loads so that the script generates content in the page, then the script
goes in the <body> portion of the document. In this case, you would not have any function defined using
JavaScript. Take a look at the following code.
<html>
<head>
</head>
<body>
<script type = "text/javascript">

</script>
<p>This is web page body </p>

</body>
</html>
JavaScript in <body> and <head> Sections
JavaScript in External File
<html>
<head>
<script type = "text/javascript" src = "filename.js"
></script>
</head>
<body>
filename.js
.......
function sayHello() {
</body>
alert("Hello World")
</html>
}
JavaScript Comment
<script> <script>
// It is single line comment /* It is multi line comment.
document.write("hello javascript"); It will not be displayed */
</script> document.write("example of javascript multiline
comment");
</script>
There are mainly two advantages of JavaScript comments.

1.To make code easy to understand It can be used to elaborate the code so that end user can
easily understand the code.
2.To avoid the unnecessary code It can also be used to avoid the code being executed.
Sometimes, we add the code to perform some action. But after sometime, there may be need to
disable the code. In such case, it is better to use comments.
JavaScript Variable
A JavaScript variable is simply a name of storage location. There are two types of variables in JavaScript : local
variable and global variable.
There are some rules while declaring a JavaScript variable (also known as identifiers).
1.Name must start with a letter (a to z or A to Z), underscore( _ ), or dollar( $ ) sign.
2.After first letter we can use digits (0 to 9), for example value1.
3.JavaScript variables are case sensitive, for example x and X are different variables.
<html>
<body>
<script>
var x = 10;
var y = 20;
var z=x+y;
document.write(z);
</script>
</body>
</html>
JavaScript local variable
A JavaScript local variable is declared inside block or function. It is accessible within the
function or block only.
For example:
<script>
function abc(){
var x=10;//local variable
}
</script>
JavaScript global variable
A JavaScript global variable is accessible from any function. A variable i.e. declared outside
the function or declared with window object is known as global variable. For example:
<script>
var data=200;//gloabal variable
function a(){
document.writeln(data);
}
function b(){
document.writeln(data);
}
a();//calling JavaScript function
b();
</script>
Javascript Data Types
JavaScript primitive data types
Data Type Description
String represents sequence of characters e.g. "hello"

Number represents numeric values e.g. 100
Boolean represents boolean value either false or true
Undefined represents undefined value
Null represents null i.e. no value at all
Non-primitive data types
Data Type Description
Object represents instance through which we can access members

Array represents group of similar values
RegExp represents regular expression
JavaScript Bitwise Operators
Operator Description Example

& Bitwise AND (10==20 & 20==33) = false
| Bitwise OR (10==20 | 20==33) = false
^ Bitwise XOR (10==20 ^ 20==33) = false
~ Bitwise NOT (~10) = -10

<< Bitwise Left Shift (10<<2) = 40
>> Bitwise Right Shift (10>>2) = 2
>>> Bitwise Right Shift with Zero (10>>>2) = 2
JavaScript If-else
The JavaScript if-else statement is used to execute the code whether condition is true or false. There are three forms
of if statement in JavaScript.
1.If Statement
2.If else statement
<script>
3.if else if statement
var a=20;
if(a>10){
document.write("value of a is greater than 10");
}
</script>
JavaScript If-else
<script>
var a=20;
if(a%2==0){
document.write("a is even number");
}
else{
document.write("a is odd number");
}
</script>
If...else if statement
<script>
var a=20;
if(a==10){
document.write("a is equal to 10");
}
else if(a==15){
}
else if(a==20){
}
else{
document.write("a is not equal to 10, 15 or 20");
}
03/25/2023
</script>
Mehedi Hasan Imran, Lecturer, Department of Information and Communication Engineering 20
JavaScript Switch
<script>
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";
}
document.write(result);
</script>
JavaScript Loops
The JavaScript loops are used to iterate the piece of code using for, while, do while or for-in loops. It makes the
code compact. It is mostly used in array.
There are four types of loops in JavaScript.
1.for loop
2.while loop
3.do-while loop
4.for-in loop
JavaScript Loops
<script> <script> <script>
for (i=1; i<=5; i++) var i=11; var i=21;
{ while (i<=15) do{
document.write(i + "<br/>") { document.write(i + "<br/>");
document.write(i + "<br/>"); i++;
} i++; }while (i<=25);
</script> } </script>
</script>
JavaScript Functions
JavaScript functions are used to perform operations. We can call JavaScript function many times to reuse
the code.
Advantage of JavaScript function
There are mainly two advantages of JavaScript functions.
1.Code reusability: We can call a function several times so it save coding.
2.Less coding: It makes our program compact. We don’t need to write many lines of code each time to
perform a common task.
<script>
function msg(){
alert("hello! this is message");
}
</script>
<input type="button" onclick="msg()" value="call function"/>
<script>
function getcube(number){
alert(number*number*number);
}
</script>
<form>
<input type="button" value="click" onclick="getcube(4)"/>
</form>
Browser Object Model
The Browser Object Model (BOM) is used to interact with the browser.

The default object of browser is window means you can call all the functions of window by specifying window or
directly. For example:
Example of confirm() in javascript
<script type="text/javascript">
function msg(){
var v= confirm("Are u sure?");
if(v==true){
alert("ok");
}
else{
alert("cancel");
}
}
</script>
<input type="button" value="delete record" onclick="msg()"/>
Example of prompt() in javascript
function msg(){
var v= prompt("Who are you?");
alert("I am "+v);
}
</script>
<input type="button" value="click" onclick="msg()"/>
Example of open() in javascript
function msg(){
open("http://www.bauet.ac.bd");
}
</script>
<input type="button" value=“bauet" onclick="msg()"/>
Example of setTimeout() in javascript
function msg(){
setTimeout(
function(){
alert("Welcome to ICE Please try after 2 seconds")
},2000);
}
</script>
<input type="button" value="click" onclick="msg()"/>
Document Object Model
The document object represents the whole html document.

When html document is loaded in the browser, it becomes a document object. It is the root element that represents
the html document. It has properties and methods. By the help of document object, we can add dynamic content to
our web page.
Accessing field value by document object
function printvalue(){
var name=document.form1.name.value;
alert("Welcome: "+name);
}
</script>
<form name="form1">
Enter Name:<input type="text" name="name"/>
<input type="button" onclick="printvalue()" value="print name"/>
</form>
document.getElementById()
function getcube(){
var number=document.getElementById("number").value;
alert(number*number*number);
}
</script>
<form>
Enter No:<input type="text" id="number" name="number"/><br/>
<input type="button" value="cube" onclick="getcube()"/>
</form>
Show/Hide Comment Form Example using innerHTML
<html>
<head>
<title>First JS</title>
<script>
var flag=true;
function commentform(){
var cform="<form action='Comment'>Enter Name:
<br><input type='text' name='name'/><br/>
Enter Email:<br><input type='email' name='email’/>
<br>Enter Comment:<br/>
<textarea rows='5' cols='70'></textarea><br><input type='submit' value='Post Comment'/></form>";
if(flag){
document.getElementById("mylocation").innerHTML=cform;
flag=false; </head>
}else{ <body>
document.getElementById("mylocation").innerHTML=""; <button onclick="commentform()">Comment</button>
flag=true; <div id="mylocation"></div>
} </body>
} </html>
</script>
Thank You All

CH 3 Lecture 1

Uploaded by

Document Information

Original Description:

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

CH 3 Lecture 1

Uploaded by

Copyright:

Available Formats

Bangladesh Army University of Engineering and Technology (BAUET)

Qadirabad Cantonment, Natore.

Department of Information and Communication Engineering (ICE)

ICE 4261: Internet and Web Programming

There are following features of JavaScript:

The script tag specifies that we are using JavaScript.

Here are the steps to turn on or turn off JavaScript in Chrome −

•Script in <head>...</head> section.

•Script in <body>...</body> section.

•Script in <body>...</body> and <head>...</head> sections.

•Script in an external file and then include in <head>...</head> section.

<p>This is web page body </p>

There are mainly two advantages of JavaScript comments.

String represents sequence of characters e.g. "hello"

Non-primitive data types

Data Type Description

Object represents instance through which we can access members

Operator Description Example

| Bitwise OR (10==20 | 20==33) = false

^ Bitwise XOR (10==20 ^ 20==33) = false

~ Bitwise NOT (~10) = -10

<input type="button" onclick="msg()" value="call function"/>

The Browser Object Model (BOM) is used to interact with the browser.

<input type="button" value="delete record" onclick="msg()"/>

<input type="button" value="click" onclick="msg()"/>

<input type="button" value="click" onclick="msg()"/>

The document object represents the whole html document.

You might also like