Kerala Plus Two Computer Science Notes Chapter 6 Client-Side Scripting Using JavaScript
JavaScript(Original name was Mocha) was developed by Brendan Eich for the Netscape Navigatorbrowser later all the browsers support this.
Getting Started With Javascript
- Scripts are small programs embedded in the HTML pages, to write scripts <SCRIPT> tag is used.
Two types of scripts
1. Client scripts -These are scripts executed by the browser(client) hence reduces network traffic and workload on the server.
2. Server scripts – These are scripts executed by the server and the results as a webpage returned to the client browser.
- The languages that are used to write scripts are known as scripting languages. Eg: VB Script, Javascript etc.
- Java script and VB Script are the two client-side scripting languages.
- Java script(developed by Brendan Eich for the Netscape browser) is a platform-independent scripting language. Means It does not require a particular browser. That is it runs on any browser hence it is mostly accepted scripting language. But VB Script(developed by Microsoft) is a platform-dependent scripting language. Means it requires a particular browser(MS Internet Explorer) to work that is why it is not widely accepted scripting language.
- Attribute makes the tags meaningful Language attribute specifies the name of the scripting language used.
Example:
<SCRIPT Language=”JavaSCript”>
</SCRIPT> - The identifiers are case sensitive (means Name and NAME both are treated as different)
- CamelCase : An identifier does not use special characters such as space hence a single word is .formed using multiple words. Such a naming method is called CamelCase(without space between words and all the words first character is in upper case letter). These are two types
1) UpperCamelCase -. when the first character of each word is capitalised, Eg. Date Of Birth, JoinTime,etc
2) lowerCamelCase: when the first character of each word except the first word is capitalised. Eg. date of birth, join time, etc,…
- To write anything on the screen the following function is used document.write(string);
eg. document.write(“Welcome to BVM HSS, Kalparamba”);
Note : Like C++ each and every statement in javascript must be end with semicolon(;). - To create a web page using javascript
- <HTML>
<HEAD><TITLE>JAVASCRIPT- WELCOMED TITLE></HEAD>
<BODY>
<SCRIPT Language=”JavaScript”>
document.write(“welcome to my first javascript page”);
</SCRIPT>
</BODY>
</HTML>
Its output is as follows
Creating Functions In Javascript
- Function : Group of instructions(codes) with a name, declared once can be executed any number of times. There are two types 1) built in and 2)user defined
- To declare a function, the keyword function is used.
- A function contains a function header and function body
- Even though a function is defined within the body section, it will not be executed, if it is not called. Syntax: function <function name>()
{
Body of the function;
}
Eg: function print()
{
document.writefWelcometo JS”);
}- Here the function is the keyword.
- the print is the name of the user-defined function
- To execute(call) the above function namely print do as follows,
print();
Eg:
<HTML>
<HEAD><TITLE>JAVASCRIPT- functionc</ TITLE></HEAD>
<SCRIPT Language ”JavaScript”>
function print()
{
document.write(“welcome to my first javascript page using print function”);
}
</SCRIPT>
<BODY>
<SCRIPT Language*’JavaScript”> printO;
</SCRIPT>
</BODY>
</HTML>
Datatypes In Javascript
Unlike C++ it uses only three basic data types
- Number: Any number(whole or fractional) with or without sign.
Eg:+1977,-38.0003,-100,3.14157,etc - String: It is a combination of characters enclosed within double quotes.
Eg: “BVM”, “[email protected]”, etc - Boolean : We can store either true or false.lt is case sensitive. That means can’t use TRUE OR FALSE
Variables In Javascript
For storing values you have to declare a variable, for that the keyword var is used. There is no need to specify the data type.
Syntax:
var<variable name1> [, <variable name2>, <variable name3>,etc…]
Here square bracket indicates optional.
Eg: varx,y,z;
x= 11;
y = “BVM”;
z = false; .
Here x is of number type, y is of string and z is of Boolean type.
typeof(): this function is used to return the data type, undefined : It is a special data type to represent variables that are not defined using var.
Operators In Javascript
- Operators are the symbols used to perform an operation
Arithmetic operators
It is a binary operator. It is used to perform addition(+), subtraction^), division^, multiplication(*), modulus (%-gives the remainder) ,increment(++) and decrement—Operations.
Eg.
If x=10 and y=3 then
| x+y | x-y | x*y | x/y | x%y |
| 13 | 7 | 30 | 3.333 | 1 |
ifx=10then
document.write(++x); -> It prints 10+1=11 lfx=10then
document.write(x++); -> It prints 10 itself. Ifx=10then
document.write(—x); It prints 10-1=9 lfx=10then
document.write(x—);-> It prints 10 itself.
Assignment operators
If a = 10 and b = 3 then a = b. This statement sets the value of a and b are same, i.e. it sets a to 3.
It is also called short hands
lf X = 10 and Y = 3 then
| Arithmetic Assignment Expression | Equivalent Arithmetic Expression | The value of X becomes |
| X+=Y | X=X+Y | 13 |
| X-=Y | X=X-Y | 7 |
| X*=Y | X=X*Y | 30 |
| X/=Y | X=X/Y | 3.333 |
| X%=Y | X=X%Y | 1 |
Relational(Comparison) operators
It is used to perform comparison or relational operation between two values and returns eithertrue orfalse.
Eg:
lf X = 10 and Y = 3 then
| X<Y | X<=Y | X>Y | X>=Y | X==< | X!=Y |
| false | false | true | true | false | true |
Logical operators
Here AND(&&), OR(||) are binary operators and NOT(!) is a unary operator. It is used to combine relational operations and it gives either true or false If X=true and Y=false then
| X&&X | X&&Y | Y&&X | Y&& Y |
| true | false | False | false |
Both operands must be true to get a true value in the case of AND(&&) operation If X=true and Y=false then
| X || X | X || Y | Y || X | Y || Y |
| true | true | true | false |
Either one of the operands must be true to get a true value in the case of OR(||) operation
If X= true and Y=false then
| IX | !Y |
| false | true |
String addition operator(+)
This is also called concatenation operator. It joins(concatenates) two strings and forms a string.
Eg:
var x,y,z;
x = “BVM HSS
y = “Kalparamba”;
z = x+y;
- Here the variable z becomes “BVM HSS Kalparamba”.
Note: If both the operands are numbers then addition operator(+) produces number as a result otherwise it produces string as a result. Consider the following.
| Operand 1 data type | Operand 2 data type | Operation | Resultant data type |
| number | number | +(addition) | number |
| number | siring | string | |
| string | number | string | |
| string | string | string |
Eg:
- 8(number) + 3(number)=11 (Result is a number)
- 8 (number)+“3”( string) = “83” (Result is a string)
- “8” (string) + 3 (number) = “83”(Result is a string)
- “8” (string) + “3″ (string) = “83” (Result is a string)
Control Structures In Javascript
In general the execution of the program is sequential, we can change the normal execution by using the control structures.
Simple if
Syntax:
if(test expression)
{
statements;
}First the test expression is evaluated, if it is true then the statement block will be executed otherwise not.
if - else
Syntax:
if (test expression)
{
statement blockl;
}
else
{
statement block2;
}First the test expression is evaluated, if it is true then the statement blockl will be executed other wise statement block2 will be evaluated.
Switch
It is a multiple branch statement. Its syntax is given below.
switch(expression)
{
case value1: statements;break;
case value2: statements;break;
case value3: statements;break;
case value4: statements;break;
case value5: statements;break;
.............
default : statements;
}First expression evaluated and selects the statements with matched case value.
for loop
The syntax of for loop is given below For(initialisation; testing; updation)
{
Body of the for loop;
}while loop
It is an entry controlled loop The syntax is given below
Loop variable initialised
while(expression)
{
Body of the loop;
Update loop variable;
}Here the loop variable must be initialised out side the while loop. Then the expression is evaluated if it is true then only the body of the loop will be executed and the loop variable must be updated inside the body. The body of the loop will be executed until the expression becomes false.
Built In Functions (Methods)
1) alert() : This is used to display a message (dialogue box) on the screen.
eg: alert(“Welcome to JS”);
2) isNaN() : To check whether the given value is a number or not. It returns a Boolean value. If the value is not a numberfNaN) then this function returns a true value otherwise it returns a false value.
Eg.
- isNaN(“BVM”); returns true
- isNaN(8172); returns false
- isNaN(“680121 ”); returns false
- alert(isNaN(8172); displays a message box as false
3. toUpperCase() : This is used to convert the text to upper case.
Eg;
varx=”bvm”;
alert(x.toUpperCase());
4. toLowerCase() This is used to convert the text to lower case.
Eg:
varx-‘BVM”;
alert(x.toLowerCase());
5. charAt() : It returns the character at a particular position.
Syntax: variable.charAt(index);
The index of first character is 0 and the second is 1 and so on.
Eg:
varx-’HIGHER SECONDARY”;
alert(x.charAt(4));
Eg 2.
varx=”HIGHER SECONDARY”;
alert(“The characters @ first position is “+x.charAt(0));
6. length property : It returns the number of characters in a string.
Syntax: variable.length;
Eg.
varx=”HIGHER SECONDARY”;
alert (“The number of characters is “+ x.length);
Output is as follows(note that space is a character)
Accessing Values In A Textbox Using Javascript.
Name attribute of FORM, INPUT, etc is very important for accessing the values in a textbox.
Consider the following program to read a number and display it
<HTML>
<HEAD><TITLE>JAVASCRIPT- read a value from the console</TITLE>
<SCRIPT Language=”JavaScript”>
function print()
{
varnum;
num=document.frmprint.txtprint. value;
document.write(“The number you entered is “ + num);
}
</SCRIPT>
</HEAD>
<BODY>
<FORM Name="frmprint">
<CENTER>
Enter a number
<INPUTType="text" name="txtprint">
<INPUT Type="button" value="Show" onClick= "printO">
</CENTER>
</FORM>
</BODY>
</HTML>In the above code,
- print() is the user defined function.
- onClick is an event(lt is a user action). The function print() is executed when the user clicks the show button. Here code is executed as a response to an event.
- frmprint is the name of the form.
- txtprint is the name of the text.
Ways To Add Scripts To A Web Page.
Inside <BODY> section
- Scripts can be placed inside the <BODY> section.
Inside <HEAD> section
- Scripts can be placed inside the <HEAD> section. This method is widely accepted method
External (another) JavaScript file
We can write scripts in a file and save it as a separate file with the extension .js. The advantage is that this file can be used across multiple HTML files and can be enhance the speed of page loading.