JavaScript
Syllabus :
1. What is java script
2. Structure of JavaScript
3. JavaScript statements
4. JavaScript variable
- property
- terminology
- scope
5. Cascading
6. User Input
7. Program management
8. Switch Case
9. Looping
- Types of loop
- loop variable
10. JavaScript function
- how to create function
- types of function
- how to access function
- function approach
- how to access multiple functions
- function parameter
- types of parameter
- create multiple parameter
- local and global variables
11. JavaScript string handling functions
12. JavaScript objects
13. JavaScript Validation
1. JavaScript
-javascript is use to inside the html
-javascript is case sensetive language
-scripting is use inside the head tag
-in js output window is called document window
2. Structure of javaScript
<html>
<head>
<script language="JavaScript">
create all logic
</script>
</head>
</html>
3. JavaScript Statements
main()
{
statements //body of statement
}
if/if else/while
{
statement //block of statement
}
Display()
{
statement //container statement
}
JavaScript Statement
1.output statement
inside the script cannot use any type of html tags
4. Javascript variable
- variable is name of memory location where user can store defferents types of data value
- types of variable
1. varient variable(using datatype)
ex. int a,b
2.. Non-varient variable(depend on datavalue)
ex. a=10,b=20
- variable property
ans : Overwrite property
ex.
a=10
print a;
b=20
b=30;
print b;
- variable Terminology-imp
ex.
a=10; //initialization
b=20; variable with value
b //Declaration
only name of the variable
- Variable Scope
ex. local variable (inside the program)
global variable (outside the program)
- How to create variable in JavaScript
ans= using var keyword
syntax =
var name;
ex.
var a;
var city;
5. Cascading is combination of message plus variable value
6. user input concept
-how to accept numerical data?
ans: parseInt();
Assignment 1
1. write a program to generate followinf result
input following imformation from the user
name
city
state
country
mobile
college
subject
mark1
mark2
mark3
mark4
mark5
logic
1 : input all data from user
2 : display all imformation onn computer screen with specific total
3 : display name ,city,state in red color using font tag in documrnt.write statement
4 : generate the total if all subject mark greater than 40 (Assignment 2)
7. Program management
1.condition management
2.flow management(looping)
input percent from the user and check the following condition
per > 60 - first division
per > 50 and per < 60 - second division
per > 40 and per < 50 - third division
otherwise fail
Assignment 3
generate the following result
input following imfo fro the user
name
organization
designation
salary
hra
da
city
logic
1. calculate total salary = salary + hra + da
2. check the following condition
total salary> 5000 - display 5% of salaary amount
total salary > 2000 and total sal < 5000 - display 2% of salary amount
otherwise display wait for next approval
8. Switch case statements
- case is a part of program
- switch case is generally use to option base programming
Assignment 4
input two number from the user and perform the following operation using switchcase statement
choice = 1 - perform addition of two num
choice = 2 - multiplication of two num
choice = 3 - substraction of two num
9. Lopping(iteration statement)
-types of looping
1. variable loop - while, do and for
2. object loop - foreach
-loop variable (imp)
ex.
i = 1;
i<=10;
i++;
- looping is use to counter variable
1.while loop
- its also called entry control loop
- drawback - we use multiple lines
<html>
<head>
<script language = "JavaScript">
var i = 1;
while(i<=10){
document.write(i + "<br>");
i = i+1;
}
</script>
</head>
</html>
2. do while loop
- its also called exit control loop
<html>
<head>
<script language = "JavaScript">
var i = 11;
do
{
document.write(i+"<br>");
i= i+1;
}
while(i<=10);
</script>
</head>
</html>
3. for loop
- its also called single line loop
<html>
<head>
<script language = "JavaScript">
var i;
for(i = 1 ; i<=10 ; i++)
{
document.write(i+"<br>")
}
</script>
</head>
</html>
Assignment 5
input any number from the user and display table of given number in following formate
2*1 = 1
till 10
while dowhile and for
66
day 3---------------
--------------------------------------------------------------------------------
10. JavaScript function
-fuction is a small jobs program.
imp-
Function seperator
a,b (,)
1. Variable seperator (,)
2. block Seperator ({})
ex. if(a>b)
{
aa
}
3.Fuction Seperator - ()
ex. Display()
4. Array Sperator
ex. a[]
-How to create function
Syntax
function name ()
{
//container statement
}
Types of function
1.user defined function (extrensic function)
2.Built in function (intrensic functuin)
How to Access function
ans.
display(); - (;) is called function calling operator
1. Access any type of function inside the javascript using button controll with the help of click event.
<input type = "button" value = "submit" onClick = "functionName()">
2. On keyword is use to activate the event
Function Approch -
-execution bottom to up upproch
How to Access multiple functions
- using function within function concept
Assignment 1
Generate the following result using function concept
create a function basicinfo()
display following imformation(name , city, email, mobile , state , contry)
create a funtion - qualification()
display follwing info (clg, sem, branch, add)
create a function experiance()
display follwong info (company ,disignation , salary, joining)
imp
Function Parameter/Argument
- parameter is a special type of data use inside function seperator
ex. Display(a)
Types of Parameter
1.sender parameter/actual parameter
2.receiver parameter/formal parameter
Sender parameter
- at the time of function calling(button event)
receiver parameter
- at the time of function creation
ex. function Display(a)
{
}
how to create multiple parameter
Assignment 2
create a function input()
accept following parameter(name,city,colleg,branch,percent)
Logic
1. check the following condition percent>60 - A grade
2. per > 50 && per< 60 - B grade
3.per > 40 && per <50 - C grade
othewise fail
dispaly all imformation with grade
- Local and global variable
1. local variable
- only used inside the program
2. global variable
- used outside the program
Assignment 3
create a function - input()
accept following parameter - name , city , clg, m1, m2, m3, m4, m5
create a function - display()
logic
1. display all imfo using display function
2. calculate the total inside display function
3. check the following condition
if total is greater tha 250 display 1st division
total>100 && total < 250 = 2nd division
othervise display fail
Assignment 4
create a function - input()
accept following parameter - name, clg, sub, branch,percent
create a function - grade()
accept only percent data value than
check following cond
per > 60 - A grade
per > 50 && per < 60 - A grade
otherwise fail
create a function display()
print all the information using display function
imp
How to access any types of html tag inside the javascript?
1. provide id attribute
ex. <p id = "p1"> </p>
<font id = "f1"> </font>
<b id = "b1"> </b>
2. Access all tag inside js with the help of id attribute using
getElementById("id");
getElementById("p1");
getElementById("f1");
getElementByid("b1");
-----------------------------------------------------------------------------
Day 4
23-11-2023
------------------------------------
how to use textbox control inside JS
1. provide id attribute
2. textbox is use to value method for accepting data
How to Accept Numerical data using textbox
Assignment 1
create a function input()
create a form in following formate
Enter your name - textbox
Enter your clg - txtbox
Enter your sub - txtbox
Enter mark 1 - txtbox
Enter mark 2 - txtbox
Enter mark 3 - txtbox
Enter mark 4 - txtbox>
Enter mark 5 - txtbox
total is - txtbox
grade is - txtbox
button submit
logic
1. calculate total
2. display grade in following condition
tptal>250 - Agrade
total>150 && total<250 B grade
else fail
Assignment 2
convert all function assignment into textbox controll
no. of count 4
11. JavaScript String handling function
string is group of character
functions :
1. length
2. replace //imp
3. replaceAll //imp
concate
UpperCase
LowerCase
padStart //imp
padEnd //imp
1.
<html>
<head>
<script langauge = "JavaScript">
var city = "Nagpur";
document.write(city.length);
</script>
</head>
</html>
2.
<html>
<head>
<script langauge = "JavaScript">
var s1,s2;
s1 = "Nagpur is a big city, Nagpur is a good city"
s2 = s1.replace("Nagpur", "Pune")
document.write(s2);
</script>
</head>
</html>
3
<html>
<head>
<script langauge = "JavaScript">
var s1,s2;
s1 = "Nagpur is a big city, Nagpur is a good city"
s2 = s1.replaceAll("Nagpur", "Pune")
document.write(s2);
</script>
</head>
</html>
5,6
<html>
<head>
<script langauge = "JavaScript">
var s1;
s1 = "nagpur is big city";
document.write(s1.toUpperCase());
document.write(s1.toLowerCase());
</script>
</head>
</html>
concate
<html>
<head>
<script langauge = "JavaScript">
var s1;
s1 = "nagpur";
s2 = "city"
var s3 = s1.concat(" ",s2)
document.write(s3);
</script>
</head>
</html>
Assignment 3
create form
Enter your name - textbox
button - length
horizontal line
Enter your message - textbox
enter your replace word - textbox
button - replace
button - replace all
horizontol line
Enter your name - txtbox
enter your Sirname- textbox
your data is - textbox
button - concat
<hr>
Enter your digit-textbox
Enter your symmbol - txtbox
number of position - txtbox
button - padStart
button - padend
--------------------------------
12. JavaScript Object
DOM : document object model
ex.
document.write()
document.getElementById();
BOM : Browser object model
- use window object
window.open("string.html","","height = 200,width = 300");
<html>
<head>
<script language = "JavaScript">
function display(){
window.print();
}
</script>
</head>
<body>
<input type = "button" value ="show" onclick="display()">
</body>
</html>
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
txtemail.Attributes.Add("onblur", "javascript:return isValidEmail()");
txtmobile.Attributes.Add("onblur", "javascript:return isValidMobile()");
}
}
var Controlformat = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/;
if (Control == "") {
document.getElementById("chkemail").style.display = "block";
document.getElementById("chkemail").innerHTML = "*Please Enter Something";
}
document.getElementById("chkemail").style.display = "none";
}
if (!Control.match(Controlformat)) {
document.getElementById("chkemail").style.display = "block";
document.getElementById("chkemail").innerHTML = "*Invalid Field";
return false;
}
else {
document.getElementById("chkemail").style.display = "none";
}
}
return true;
}
</script>
Control
<asp:TextBox ID="txtemail" runat="server" class="form-control form-control-lg" placeholder="Email Id" type="email" OnTextChanged="txtemail_TextChanged">
<label id="chkemail" style="color:red; display:none"></label>
</div>
.png)
Comments
Post a Comment