Chapter JS All
Chapter JS All
JavaScript
(JS)
1 Department of Software Engineering 04/30/2024
Introduction to JavaScript
8
want to write the script!
Department of Software Engineering 04/30/2024
A Simple Script
<html>
<head> <title>First JavaScript Page</title>
</head>
<body>
<h1>First JavaScript Page</h1>
<script type="text/javascript">
document.write("<hr>");
document.write("Hello World Wide Web");
document.write("<hr>");
</script>
</body>
</html>
9 Department of Software Engineering 04/30/2024
Comment
Used to explain what the script does.
Two types of comments:
Comment on single line(//)
Comment on multiple line(/*…..*/)
<head>
<script language=“JavaScript”>
alert(“An alert triggered by JavaScript”);
</script>
</head>
It is the easiest method to use amongst alert(), prompt()
and confirm().
You can use it to display textual information to the user.
The user can simply click “OK” to close it.
<head>
<script language=“JavaScript”>
confirm(“Are you happy with the class?”);
</script>
</head>
This box is used to give the user a choice either
OK or Cancel.
You can also put your message in the method.
<head>
<script language=“JavaScript”>
prompt(“What is your student id number?”);
prompt(“What is your name?”,”No name”);
</script>
</head>
This is the only one that allows the user to type in his
response to the specific question.
You can give a default value to avoid displaying
“undefined”.
You can create a variable with the var, let, const, and nothing
statements:
You can also create a variable with the var statement:
var strName = some value;
You can also create a variable with the let statement:
let strName = some value;
You can also create a variable with nothing statement:
strName = some value;
You can also create a variable with a const statement:
Assign a Value to a Variable:
var strName = “Software“;
let strName = “Software“;
strName = “Software“;
16 constofPI=
Department 3.14;
Software Engineering 04/30/2024
Which one is legal?
My_variable
$my_variable
legal
1my_example
_my_variable
@my_variable
My_variable_example
++my_variable
%my_variable Illegal
#my_variable
~my_variable
myVariableExample
<head>
<script language=“JavaScript”>
var id;
id = prompt(“Write your id number?”);
alert(id);
name = prompt(“What is your name?”,”No name”);
alert(name);
</script>
</head>
We should use “var” because it is more easy to keep track
of the variables.
18 Department of Software Engineering 04/30/2024
The scope of a variable
The scope of a variable is the region of your program in
which it is defined.
JavaScript variable will have only two scopes.
Global Variables: A global variable has global scope
which means it is defined everywhere in your
JavaScript code.
Local Variables: A local variable will be visible only
within a function where it is defined.
Function parameters are always local to that function.
<script language=“JavaScript”>
var integerVar = 100;
var floatingPointVar = 3.0e10;
// floating-point number 30000000000
document.write(integerVar);
document.write(floatingPointVar);
</script>
<head>
<script language=“JavaScript”>
var x = “hello”, y,z;
alert(“Variable x value is “ + typeof(x));
alert(“Variable y value is “ + typeof(y));
alert(“Variable z value is “ + typeof(z));
</script>
</head>
It is an unary operator.
Return either: Number, string, Boolean, object, function,
undefined, null.
<script language=“JavaScript”>
Car = new Array(3);
Car[0] = “Ford”;
Car[1] = “Toyota”;
Car[2] = “Honda”;
document.write(Car[0] + “<br>”);
document.write(Car[1] + “<br>”);
document.write(Car[2] + “<br>”);
</script>
You can also declare arrays with variable length.
arrayName = new Array();
29 Department of Software Engineering 04/30/2024
Null & Undefined
Arithmetic operators
Logical operators
Comparison operators
String operators
Bit-wise operators
Assignment operators
Conditional operators
<script language=“JavaScript”>
var currentWord=“75”;
var currentValue=75;
var outcome1=(currentWord == currentValue);
var outcome2=(currentWord === currentValue);
alert(“outcome1: “ + outcome1 + “ : outcome2: “ +
outcome2);
</script>
Surprised that outcome1 is True, outcome2 is False
JavaScript tries very hard to resolve numeric and string
differences.
38 Department of Software Engineering 04/30/2024
String operator
<script language=“JavaScript”>
var myString = “ ”;
myString = “Hello” + “World”;
alert(myString);
</script>
<script language=“JavaScript”>
if (alpha = beta) { … }
if (alpha == beta) { … }
</script>
Don’t mix the comparison operator and the
assignment operator.
double equal sign (==) and the equal operator (=)
Precedence Operator
1 Parentheses, function calls
2 , ~, -, ++, --, new, void, delete
3 *, /, %
4 +, -
5 <<, >>, >>>
6 <, <=, >, >=
7 ==, !=, ===, !==
8 &
9 ^
10 |
11 &&
12 ||
13 ?:
14 =, +=, -=, *=, …
15 The comma (,) operator
“if” statement
“if … else” statement
“else if” statement
“if/if … else” statement
“switch” statement
if (condition)
{
statements;
}
It is the main conditional statement in JavaScript.
The keyword “if” always appears in lowercase.
The condition yields a logical true or false value.
The condition is true, statements are executed.
<script language=“JavaScript”>
var chr = “ ”;
…
if (chr == ‘A’ || chr == ‘O’) {
document.write(“Vowel variable”);
}
</script>
if (condition)
{
statements;
}
else
{
statements;
}
You can include an “else” clause in an if statement
when you want to execute some statements if the
condition is false.
49 Department of Software Engineering 04/30/2024
Ternary Shortcut (concise)
<script language=“JavaScript”>
If (3 > 2) {
alert(“True”);
}
else {
alert(“False”);
}
(3 > 2) ? alert(“True”) : alert(“False”);
</script>
Substitute for a simple “if/else” statement.
if (condition) {
statement;
}
else if (condition) {
statement;
}
…….
else {
statement;
}
Allows you to test for multiple expression for one true
value and executes a particular block of code.
51 Department of Software Engineering 04/30/2024
“if/if…else” statement example
<script language=“JavaScript”>
var chr;
chr = prompt(“Please enter a character : “,””);
if (chr >= ‘A’)
{
if (chr <= ‘Z’)
alert(“Uppercase”);
else if (chr >= ‘a’)
{
alert(“Lowercase”);
}
}
</script>
52 Department of Software Engineering 04/30/2024
“switch” statement
switch (expression)
{
case label1:
statements;
break;
default:
statements;
}
Allows you to merge several evaluation tests of the
same variable into a single block of statements.
<script language=“JavaScript”>
var chr;
chr = prompt(“Pls enter a character in lowercase:”,””);
switch(chr){
case ‘a’ :
alert(“Vowel a”); break;
case ‘e’ :
alert(“Vowel e”); break;
default :
alert(“Not a vowel”);
}
</script>
54 Department of Software Engineering 04/30/2024
Looping Statement
“for” Loops
“for/in” Loops
“while” Loops
“do … while” Loops
<script language=“JavaScript”>
var counter;
for (counter = 1; counter <= 10; counter++)
{
document.write(counter*counter + “ “);
}
</script>
Display the square of numbers
Output: 1 4 9 16 25 36 49 64 81 100
<script language=“JavaScript”>
var book;
var booklist = new Array(“Chinese”, “English”, “Jap”);
for (var counter in booklist) {
book += booklist[counter] + “ “;
}
alert(book);
</script>
<html>
<head>
<title>While loop example</title>
<script language=“JavaScript”>
var counter = 100;
var numberlist = “”;
while (counter > 0) {
numberlist += “Number “ + counter + “<br>”;
counter -= 10;
}
document.write(numberlist);
</script> <body> … </body>
</html>
do
{
statements;
counter increment/decrement;
}
while (termination condition)
The do/while loop always executes statements in the
loop in the first iteration of the loop.
The termination condition is placed at the bottom of
the loop.
https://www.w3schools.com/js/js_htmldom_methods.asp
<body>
<form name="myForm" action="demo_form.php"
onsubmit="return validateForm()" method="post">
First name: <input type="text" name="fname">
<input type="submit" value="Submit">
</form>
</body>
</html>
Used to make sure that one of the elements from drop down list has
been selected or not.
The pre defined function .selctedIndex can get the selected element
from the drop down list.
example
<html>
<head>
<script>
function validation()
{
if ( document.reg_form.dept.selectedIndex == 0 ) {
alert ( "Please select your departement." );
return false; }
}
</script>
</head>