Web technology is defined as the technology that primarily deals with how to save web information securely in webservers and how to retrieve information from these servers using different internet based tool and techniques.
Difference between Server Side Scripting and Client Side Scripting
Server Side Scripting | Client Side Scripting |
(i) It executes in the back end(server) and could not be visible from the client end. | (i) It executes in front end(web browser) and could be visible from the user. |
(ii) It requires web server for interaction. | (ii) It does not require web server. |
(iii) It helps to customize the web contents of dynamic web pages as per requirements. | (iii) It helps to increase faster execution by minimize server access. |
(iv) It is relative secure system. | (iv) It is not a secure system. |
(v) Example: PHP, ASP, JSP , Python | (v) Example: HTML, CSS, JavaScript |
JavaScript is a client-side scripting language used for web development along with other front-end development tool such as HTML and CSS. JavaScript helps to give dynamic behavior to our web pages such as adding animation, drop down menus, client-side validation etc. Moreover, JS can be used for mobile apps development and game development. JavaScript is known as scripting language because it does not need to be compiled before execution, it executes in run-time environment through web browser.
Feature of JavaScript
· It is light weighted and interpreted language which execute in run-time environment directly through web browser.
· It is supported by all the web browser since 97% of all web sites use JS.
· It is also a structural programming language since it support control structure such as branching and looping.
· It is prototype based programming language which means we can create object without creating classes, so it is also a Object Oriented programming
· JavaScript is a case-sensitive language, small and upper case differs.
· Every operating system such as Windows, MacOS supports JS.
Uses of JavaScript
· JS is used for client-side validation.
· JS can be used to make dynamic drop-down menus.
· JS can be used to display date, time and even clock.
· JS can be used to generate pop-up windows, alert message, dialog box etc
· JS can also be used for Server application.
· JS can be used for cross platform mobile apps development.
· JS can be used for game development.
Adding JavaScript to HTML document
we can add our JavaScript code to HTML document in three several ways. The several ways of adding JavaScript to HTML document are:
1. Inline JavaScript code
This is the method of adding JS code directly inside the HTML tag. We don’t have to create separate JS file or even we don’t have to place JS code with in script tag. Simple events like onclick, mouseover, keypress can easily be added through this method. But, its very much inconvenient to add large JS code inline. JavaScript code can be added in HTML document inline as follows:
<HTML>
<HEAD><TITLE>Sample</TITLE></HEAD>
<BODY>
<BUTTON onclick = “alert(‘Your message’);”>Click me</BUTTON>
</BODY>
</HTML>
Here, we have added alert message through onclick event. When user press the Click me button then alert message will be shown in the web browser.
2. Internal (Embedding) JavaScript code
This is the method of adding JS code within the HTML document. JS code is added internally with in the script tag inside body of the HTML document. JavaScript code can be embedded within HTML document as follows:
<HTML>
<HEAD><TITLE>Sample</TITLE></HEAD>
<BODY>
<BUTTON onclick = “disp( )”>Click me</BUTTON>
<SCRIPT>
function disp( )
{
alert(“Your message”);
}
</SCRIPT>
</BODY>
</HTML>
Here, we have created a JS function named disp( ), this function is called when user press the Click me button. Once button is pressed alert message is displayed which is defined inside function within Script tag.
3. External JavaScript file
This is the most popular methods of adding JS in our web pages. To add external JavaScript we have to create separate JS file which is linked with our HTML document as:
<SCRIPT src = “name.js”></Script>
Where, name.js is the JavaScript file that we create to write all our JS code. It should be in same location with our HTML document. It is most convenient way of adding JS in our web page as JS code don’t get messed with other HTML and CSS code. JavaScript code can be externally added with HTML document as follows:
Create a HTML document with any name
<HTML>
<HEAD><TITLE>Sample</TITLE></HEAD>
<SCRIPT src = “name.js”></Script>
<BODY>
<BUTTON onclick = “disp( )”>Click me</BUTTON>
</BODY>
</HTML>
Also create a JS file with .js extension and add following code
function disp( )
{
alert(“Your message”);
}
Here, we have created separate HTML and JS file in same location. Since, we have linked our JS file with our HTML document, every code which is written in JS file will be implemented on HTML document.
Simple User Interaction Functions
JavaScript provides three built-in function to do simple user interaction.
i.alert(msg): It helps to make alerts to the user that something has happened.
Example: alert (" Don't touch it is hot ");
ii.confirm(msg): It helps to asks the user to confirm or cancel something.
Example: confirm (" Do you want to delete the file ");
iii.prompt(msg, default value): It helps to ask user to enter some text value.
Example: prompt (" Enter your Name: ","Alex Lal Karn");
<html>
<head>
<title> Example of User Interaction Functions </title>
</head>
<body>
<script type="text/javascript">
document.write(" Example of alert, confirm and prompt functions: ");
alert("thanks for visiting my blog.");
confirm("do you want to delete the file");
prompt("Enter your name : ");
</script>
</body>
</html>
Variables are the identifiers which holds value during our program execution. These values may change throughout the program. Depending upon the nature of data variable can hold several type of value. The type of value stored in the variable are denoted by datatype. There are two types of datatypes used in JS.
Data types used in JavaScript
a) Primitive data type: They are inbuilt datatype used in JS
Data Types | Function |
Number | It represent numeric value i.e. integer and floating number. We can use BigInt to represent number with large value. |
String | It represent alphanumeric values i.e. text |
Boolean | It represent either true or false value. |
Null | It represent empty or unknown value. |
Undefined | If variable is declared but the value is not assigned then the variable is of undefined type. |
b) Non-Primitive datatype: They are the derived datatypes from primitive datatype.
Data Types | Function |
Array | It store multiple values of same type under a same name. |
Object | It has methods and properties. |
Variables in JavaScript
Variables in JavaScript are declared by using keyword 'var'. for eg,
var a=3,b=4;
var fruit = "apple";
Types of variable in JavaScript
a) Local variable
Those variable which are declared inside the block or function is called local variable. Local variable can only be accessed and used within the block or function.
<HTML>
<HEAD><TITLE>sample</TITLE></HEAD>
<BODY>
<BUTTON onclick = "disp()">Click me</BUTTON>
<SCRIPT>
function disp()
{
var a=5;
document.write(a);
}
</SCRIPT>
</BODY>
</HTML>
In above example, the variable 'a' is declared inside the function disp(). So, it can be used only within the function block. Other function or block cannot use the value of 'a'. Hence, to overcome this limitation we have global variable.
b) Global variable
Those variable which are declared outside the block or function is called global variable. Global variable can be accessed and used within any other function or the block.
<HTML>
<HEAD><TITLE>sample</TITLE></HEAD>
<BODY>
<BUTTON onclick = "disp()">Click me</BUTTON>
<BUTTON onclick = "cisp()">Push me</BUTTON>
<SCRIPT>
var a=5;
function disp()
{
document.write(a);
}
function cisp()
{
document.write(a);
}
</SCRIPT>
</BODY>
</HTML>
In above example, the variable 'a' is declared outside the two function disp() and cisp(). So, it can be used by both function block. When user press Click me then, disp() function is called, this function will display the value of 'a' i.e. 5 which is declared outside of the function. Similarly, when user press Push me then, cisp() function is called, this function will also display the value of 'a' i.e. 5. This is because variable ‘a’ is declared outside of function or block which can be used by any number of function or block.
Operator
An operator is defined as meaningful symbol in programming which is used to carry out some specific calculation or comparison. JavaScript supports the following types of operators: Arithmetic, comparison, logical, assignment and conditional (or ternary) operators.
Arithmetic Operators
Operators | Descriptions of arithmetic Operators |
+ | Used for adding numbers and concatenates strings. eg: a+b |
- | Used for subtracting numbers. eg : a-b |
* | Used for numbers multiplications eg:a*b |
/ | Used for numbers division eg: a/b |
% | Used for numbers remainder division. eg: a%b |
++ | Used for incrementing the value of variable by 1 |
-- | Used for decrementing the value of variable by 1 |
Comparision Operators
Operators | Descriptions of comparision Operators |
< | Less than eg: a<b |
<= | Less than equal to eg : a<=b |
> | Greater than eg:a>b |
>= | Greater than equal to eg: a>=b |
= = | Equal to eg: a= =b |
! = | Not equal to eg: a! =b |
Comparision
operators are Boolean operators, so they give Boolean result: true or false.
gical Operators
Operators | Descriptions of Logical Operators |
|| | Logical OR eg: a||b |
&& | Logical AND eg : a&&b |
! | Logical NOT eg:a!b |
Logical operators are Boolean operators, so they give Boolean result either true or false.
Assignment Operators
Operators | Descriptions of Assignment Operators |
= | Assignment eg: a=492 |
+= | Add and assignment eg : a+=5 //a=a+5 |
-= | Subtract and assignment eg : a-=5 //a=a-5 |
*= | Multiply and assignment eg : a*=5 //a=a*5 |
/= | Divide and assignment eg : a/=5 //a=a/5 |
%= | Modulus Divide and assignment eg : a%=5 //a=a%5 |
Assignment
operator helps to assign or store value to a variable. There are various types
of assignments which are listed on the table and they are explained in the
example 9.
Ternary Operators(Conditional)
Conditional operator is also known as ternary operator helsp to check the Boolean values that true or false. It is same as simple if else statement, if exp1 is true, then exp2 will be executed , otherwise exp3 will be executed.
Synatx: exp1?exp2:exp3;
Example : a>b?a:b;
· Branching (if else, if else if and switch case)
· Looping (while, do while and for)
Event Handling
Event handling is one of the important features of object-oriented programming. It is an efficient and user-friendly mechanism in graphical user interface (GUI) environment. Event is defined as an action of an application or user such as mouse click, mouse over, pressing any key, open window, close window , etc that triggers an action related to an object. In web programming, event is useful mechanism to communicate between HTML with JavaScript. When a user accesses a webpage in browser the page loads on the browser, it is called an event, when user clicks a button, it is also an event. Events are the parts of the Document Object Model(DOM) of JavaScript. Every HTML event can communicate with JavaScript codes. Some popular HTML5 standard events are listed below
Here script defines JavaScript function to be executed against that event.
Tags | Example | Descriptions |
offline | script | Triggers when the page goes offline |
onafterprint | script | Triggers after the page is printed |
onbeforeonload | script | Triggers before the page loads |
onbeforeprint | script | Triggers before the page is printed |
onclick | script | Triggers on mouse click |
ondblclick | script | Triggers on mouse double-click |
onmouseover | script | Triggers when the mouse pointer moves over an element |
onload | script | Triggers when the document loads |
Example 21 shows a basic example of event handling program. In this
program the HTML event onclick is used to trigger the JavaScript function
test() that displays 'Example of Event' on page.
EXAMPLE 21
<html>
<head>
<script type="text/javascript">
function test()
{
document.write("Example of Event");
} </script>
</head>
<body> <p> Click on Button to Trigger the function</p>
<input type="button" onclick="test()" value="click">
</body>
</html>
3.10 Image, Event and Form Objects
In HTML, an image can inserted in web document by using <img> tag with properties src, height, width etc. This <img> element of HTML can be accessed by using getElementById(). Some of the image object properties are listed below.
Properties | Descriptions |
alt | Sets or returns alternate value of an image |
height | Sets or returns the height of an image |
width | Sets or returns the width of an image |
naturalHeight | Returns the original height of an image |
naturalWidth | Returns the original width of an image |
src | Sets or returns the source of an image |
useMap | sets or returns the value of the usemap attribute of an image |
Example gives an idea about an
image object can be accessed in JavaScript.
EXAMPLE
<html> <body> <p>Click
Button to Display Image</p>
<button onclick="myfunction()">Click</button>
<script type="text/javascript">
function myfunction()
{
var x=document.createElement("IMG"); x.setAttribute("src","https://drive.google.com/uc?export=view&id=1MVlplMMFeXsyboR_2M_K27WwmtJO47fW");
x.setAttribute("width","200");
x.setAttribute("height","200");
x.setAttribute("alt","Refress to show image");
document.body.appendChild(x);
} </script>
</body>
</html>
No comments:
Post a Comment