Web Technology II/ JavaScript/ Class 12
In this chapter, we will continue our journey of web development from Class 11. In Class 11 we studied "Web Technology I" in which we discussed HTML (Hypertext Markup Language), CSS(Cascade Style Sheet), and CMS (Content Management System). However, in this section, we will discuss some of the front-end and back-end tools such as JavaScript, PHP along with SQL (Structured Query Language) for databases.
Web technology with Server-side and client-side programming
Web technology is the tools and techniques which enable two or more computing devices to communicate over a network i.e. Internet. Web Technology consists of two words, the web refers to the World Wide Web generally known as World Wide Web. WWW is cyberspace containing webpages, documents, and any other resources which are identified and located with the help of their URLs. Technology refers to the tools and techniques that make these resources available on the Web such as web browsers to view the content of the web, Programming languages and frameworks for the development of websites, Database to store data at the back end, protocols for communicating on the web, multimedia elements, etc.
Web development is the process of designing and developing a website that is hosted through the internet or intranet. The process of developing the web can range from developing static pages to complex such as web-based applications social media sites, and E-commerce. Web development includes web design, web content development, client-side scripting, server-side scripting, web engineering, etc. Web development consists of several interrelated tasks which can be accomplished by different types of a developer who focuses on different aspects of web creation.
Server-side and client-side programming
a. Client-Side Scripting programming
Client-side scripting is performed to generate a code that can run on the client side i.e (front end) browser without needing the server-side (back end) processing. Basically, client-side scripts are placed inside an HTML document. Client-side scripting can be used to lay out the content of the web. For example, when a user makes a request through a web browser for a web page to the server, it just sends the HTML and CSS as plain text, and the browser interprets and renders the content of the web on the client end (user). Client-side scripting is designed to run as a scripting language that can be executed by the web browser. Front end developer is someone who designs and develops the client side of a website. Generally. he or she works in the user interface (UI) of a website. Front-end developers must be at least fluent in three different languages i.e. HTML, CSS, and JavaScript whereas, several other libraries can be used for front-end development.
b. Server-Side Scripting programming
Server-side scripting also known as back-end runs on the server where the application is hosted. Server-side is used to serve content depending upon the user's request. The back end helps to create dynamic web-based applications that allow users to interact and communicate with the application. Back-end language also helps to connect the front end with the database. So that, User can store and retrieve data as per the requirement. The back-end developer is responsible for server-side programming. Some of the popular server-side (back-end) scripting languages are ASP, JavaScript (using SSJS (Server-side JavaScript e.g. node.js), Perl, PHP, Ruby, Python, etc.
Client-side scripting and server-side scripting both work alongside. Client-side scripting emphasizes making the interface of the web application or website (UI) more appealing and functional. Whereas, server-side scripting emphasizes data accessing methods, error handling, fast processing, etc.
Note: Full-stack developers understand both the Front end and back-end development process. They can accomplish the entire project. Full-stack developers must have expertise in client-side and server-side Scripting languages. Moreover, he/she has a great knowledge of integrating databases with the application.
Introduction to JavaScript
JavaScript is a client-side scripting language used for web development along with other front-end development tools 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 app development and game
development. JavaScript is known as a scripting language because it does not need to be compiled before execution, it executes in a run-time environment through a web browser. Several libraries of JavaScript such as React JS, Vue JS, Angular JS, etc can be found and used to make more interactive, intuitive, and advanced web pages. JS is not only used for the front end, rather it can be used on the server side also. Node JS is an example of server-side
JavaScript is generally known as SSJS.
Feature of JavaScript
1. It is a light weighted and interpreted language which executes in a run-time environment directly through a web browser.
2. It is supported by all web browsers since 97% of all websites use JS. 3. It is also a structural programming language since it supports control structures such as branching and looping.
4. It is a prototype-based programming language which means we can create objects without creating classes, so it is also an Object Oriented programming 5. JavaScript is a case-sensitive language, small and upper case differ. 6. Every operating system such as Windows, and MacOS supports JS.
Uses of JavaScript
1. JS is used for client-side validation.
2. JS can be used to make dynamic drop-down menus.
3. JS can be used to display dates, times, and even clocks.
4. JS can be used to generate pop-up windows, alert messages, dialog boxes, etc 5. JS can also be used for Server applications.
6. JS can be used for cross-platform mobile app development.
7. JS can be used for game development.
Adding JavaScript to HTML document
As we know, JS is often used as a client-side scripting language along with HTML and CSS. Like we add CSS to our HTML document, similarly, we can add our JavaScript code to HTML document in three several ways. The several ways of adding JavaScript to HTML document are:
Inline JavaScript code
This is the method of adding JS code directly inside the HTML tag. We don’t have to create separate JS files or even we don’t have to place JS code within the script tag. Simple events like onclick, mouseover, and keypress can easily be added through this method. But, it's very 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 an alert message through the onclick event. When the user clicks the Click me button then an alert message will be shown in the web browser.
Internal(Embedding) JavaScript code
This is the method of adding JS code within the HTML document. JS code is added internally within the script tag inside the body of the HTML document. JavaScript code can be embedded within HTML documents 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 a user pressed the Click me button. Once the button is pressed an alert message is displayed which is defined inside the function within the Script tag.
External JavaScript code
This is the most popular method of adding JS to 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 the same location as our HTML document. It is the most convenient way of adding JS to our web page as JS code doesn't get messed with other HTML and CSS codes. JavaScript code can be externally added with HTML document as follows:
Create an 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 the following code
function disp( ){
alert(“Your message”);
}
Here, we have created separate HTML and JS files in the same location. Since we have linked our JS file with our HTML document, every code which is written in the JS file will be implemented on the HTML document.
Variables in JavaScript
Variables are the identifiers that hold value during our program execution. These values may change throughout the program. Depending upon the nature of the data variables can hold several types of value. The type of value stored in the variable is denoted by data type. There are two types of data types used in JS.
Variables in JavaScript are declared by using the keyword 'var'. for eg,
var a=3, b=4;
var fruit = "apple";
Types of Variables in JavaScript
Types of variable in JavaScript
Local variable
Those variables which are declared inside the block or function are called local variables. Local variables 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 the above example, the variable 'a' is declared inside the function disp(). So, it can be used only within the function block. Other functions or blocks cannot use the value of 'a'. Hence, to overcome this limitation we have global variables.
Global variable
Those variables which are declared outside the block or function are called global variables. Global variables 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 the above example, the variable 'a' is declared outside the two functions disp() and cisp(). So, it can be used by both function blocks. When the user pressed 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 the user pressed the 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 a function or block which can be used by any number of functions or blocks. Note: Block represents the statement written inside curly bracket { }
Data types used in JavaScript
Primitive data types: They are inbuilt data types in JS.
Non-Primitive data types: They are derived data types from primitive data types.
Operators in JavaScript
Operators are the symbols or signs used to perform some specific operation. Let us consider a simple expression c=a+b where, a, b, and c are the operands. + = are the operators and addition is the operation.
Types of Operators in JS
Arithmetic Operator:
Arithmetic operators are a symbol used for basic mathematical calculations such as addition, multiplication, division, subtraction, remainder, etc. Operators are:
- -Decrement
Program example
<script>
var a=2,b=3,c=a+b;
document.write(c);
</script>
Comparison Operator:
Comparison operators are the symbol used to compare the values of two operands. Operators are:
> Greater than
>= Greater than equal
<=Less than equal
Program example
<script>
var a=2,b=3,c=a+b;
if(a>b){
document.write(a);
}else{
document.write(b);
}
</script>
Logical operator:
Logical operators are used to making logical comparisons i.e that logically connect two or more expressions. Operator is:
Program example
<script>
var a=2,b=9,c=7;
if(a>b && a>c){
document.write(a);
}else if (b>a && b>c){
document.write(b);
}else{
document.write(c);
}
</script>
Assignment Operator:
This operator is used to assign value to an identifier(variable). Operator is:
Program example:
<script>
var a=2,b=3,c=a*b;
document.write(c);
</script>
String Operator
This operator helps to add several strings. The process of adding a string is called string concatenation.
+ is the string operator used to add strings.
Program example
<script>
var a=2,b=3,c=a+b;
document.write(“Sum is” + c);
</script>
Adding two numbers in JavaScript
Adding two numbers in JavaScript is fairly easy. We have to use an arithmetic operator to perform mathematical addition. Addition can be performed directly by assigning value to a variable but this method will not allow users to enter any number they want. So, we can use the HTML text box and button to call a JavaScript function. Inside the JS function, we will retrieve values entered inside the text box.
Adding two number directly
<HTML>
<HEAD><TITLE>Addition</TITLE></HEAD>
<BODY>
<SCRIPT>
var a=3, b=2, c=a+b;
document.write(c);
</SCRIPT>
</BODY>
</HEAD>
The above program will display 5 in the browser. The output is always fixed since it does not allow the user to enter a number in the browser. So, the following method is recommended to make interactive programs.
Adding two numbers in JavaScript
<HTML>
<HEAD><TITLE>Addition</TITLE></HEAD>
<BODY>
<INPUT type=“text” id=“first”>
<INPUT type=“text” id=“second”>
<INPUT type=“button” value = “press” onclick = “sum( )”>
<SCRIPT>
function sum( ){
var a = document.getElementById(“first”).value;
var b = document.getElementById(“second”).value;
var c = parseInt(a) + parseInt(b);
document.write(c);
}
</SCRIPT>
</BODY>
</HEAD>
The above program will allow the user to enter two numbers in the two text boxes. Once the user clicks the button the value entered inside the box is passed to JS function through onclick event which calls the sum( ) function. Inside sum( ) function values are assigned to variables ‘a’ and ‘b’. The sum is calculated and assigned to variable ‘c’. parseInt is used to make value entered inside a textbox to Integer.
