Uploaded by Yeemon Oo

JS

advertisement
A computer program is a list of "instructions" to be "executed" by a computer.
In a programming language, these programming instructions are called statements.
A JavaScript program is a list of programming statements.
In HTML, JavaScript programs are executed by the web browser.
JavaScript Statements
JavaScript statements are composed of:
Values, Operators, Expressions, Keywords, and Comments.
..........................
Semicolons ;
Semicolons separate JavaScript statements.
Add a semicolon at the end of each executable statement:
let a, b, c; // Declare 3 variables
a = 5; // Assign the value 5 to a
b = 6; // Assign the value 6 to b
c = a + b; // Assign the sum of a and b to c
When separated by semicolons, multiple statements on one line are allowed:
a = 5; b = 6; c = a + b;
.....................................
JavaScript has 8 Datatypes
1. Char/String
2. Number
3. Bigint
4. Boolean
5. Undefined
6. Null
7. Symbol
8. Object
The Object Datatype
The object data type can contain:
1. An object
2. An array
3. A date
........................
// Numbers:
var length = 16;
var weight = 7.5;
// Strings:
var Gender ="F";
var color = "Yellow";
var lastName = "Johnson";
// Booleans
var x = true;
var y = false;
// Object:
const person = {firstName:"John", lastName:"Doe"};
// Array object:
const cars = ["Saab", "Volvo", "BMW"];
// Date object:
const date = new Date("2022-03-25");
.......................................
Variable and constant declaration
var FirstVar, SecondVar;
const ConstFirst =500, SecondConst= 100;
.........................................
OperatorDescription
+Addition
-Subtraction
*Multiplication
**Exponentiation (ES2016)
/Division
%Modulus (Division Remainder)
++Increment
--Decrement
........................................
OperatorExampleSame As
=x = yx = y
+=x += yx = x + y
-=x -= yx = x - y
*=x *= yx = x * y
/=x /= yx = x / y
%=x %= yx = x % y
**=x **= yx = x ** y
.........................................
<html>
<Head>
<Script Language="JavaScript">
document.write ('Hello World");
</Script>
</head>
</html>
...............................................
<HTML>
<HEAD>
<TITLE>Selection</TITLE>
<Script Language="Javascript">
var Age=0;
Age=window.prompt('Age', '');
Age= parseInt(Age);
if (Age > 18)
document.write('Adult ', Age);
else
document.write('Child ', Age);
</Script>
</HEAD>
</HTML>
................................................
<HTML>
<HEAD>
<TITLE>Sum</TITLE>
<Script Language="Javascript">
var FirstNumber=0; var SecondNumber=0;
var Sum=0;
FirstNumber=window.prompt('Enter First Number', '');
SecondNumber=window.prompt('Enter Second Number', '');
FirstNumber= parseInt(FirstNumber);
SecondNumber=parseInt(SecondNumber);
Sum = FirstNumber + SecondNumber;
document.write('The sum', Sum);
</Script>
</HEAD>
</HTML>
...............................................
<HTML>
<HEAD>
<TITLE>Selection</TITLE>
<Script Language="Javascript">
var FirstNumber=0; var SecondNumber=0;
var Sum=0;
FirstNumber=window.prompt('Enter First Number', '');
SecondNumber=window.prompt('Enter Second Number', '');
FirstNumber= parseInt(FirstNumber);
SecondNumber=parseInt(SecondNumber);
if (FirstNumber > SecondNumber)
document.write('First Number is Largest ', FirstNumber);
else
document.write('Second Number is Largest ',SecondNumber);
</Script>
</HEAD>
</HTML>
...............................................
<HTML>
<HEAD>
<TITLE>For loop</TITLE>
<Script Language="Javascript">
var text = "";
for (var i = 0; i < 5; i++) {
text += "The number is " + i + "<br>";
}
document.write (text);
</Script>
</HEAD>
</HTML>
..................................................
<HTML>
<HEAD>
<TITLE>Repetition</TITLE>
<Script Language="Javascript">
var Number=0; var Count=1; var Sum=0;
do
{
Number =window.prompt('Enter Number' + Count ,'');
Number =parseInt (Number);
Sum = Sum + Number;
Count =Count +1
}while (Count<6);
document.write('Sum of Five number is ',Sum);
</Script>
</HEAD>
</HTML>
................................
<HTML>
<HEAD>
<TITLE>Negative</TITLE>
<Script Language="Javascript">
var NewValue;
NewValue =window.prompt('enter a negative number','');
NewValue= parseFloat(NewValue);
while (NewValue>=0)
{
NewValue =window.prompt('enter a negative number','');
NewValue= parseFloat(NewValue);
}
document.write('NewValue ',NewValue);
</Script>
</HEAD>
</HTML>
............................................
<HTML>
<HEAD>
<TITLE>Switch</TITLE>
<Script Language="Javascript">
var day;
switch (new Date().getDay()) {
case 0:
day = "Sunday";
break;
case 1:
day = "Monday";
break;
case 2:
day = "Tuesday";
break;
case 3:
day = "Wednesday";
break;
case 4:
day = "Thursday";
break;
case 5:
day = "Friday";
break;
case 6:
day = "Saturday";
}
document.write ('Today is ' + day);
</script>
</Head>
</html>
..........................................
<HTML>
<HEAD>
<TITLE>Example1</TITLE>
<Script Language="Javascript">
var NumberOfTickets=0; var Discount=0.0; var Cost=0.0;
do
{
NumberOfTickets =window.prompt('How many tickets would you like to buy','');
NumberOfTickets= parseFloat(NumberOfTickets);
}
while ((NumberOfTickets<1) ||(NumberOfTickets >26))
Discount=0.2;
if (NumberOfTickets<10)
{Discount=0.0 }
else
{
if (NumberOfTickets<20) { Discount=0.1 }
}
Cost = NumberOfTickets*20* (1-Discount);
document.write ('Your Tickets cost ', Cost)
</Script>
</HEAD>
</HTML>
..................................................
<HTML>
<HEAD>
<TITLE>Total Mark</TITLE>
<Script Language="Javascript">
var Number=0; var Count=1; var Total=0;
do
{
Number =window.prompt('Enter Marks ' + Count ,'');
Number =parseInt (Number);
Total = Total + Number;
Average = Total/Count;
document.write('Marks ' + Count + ' = ' , Number);
document.write ('<br>');
Count =Count +1 ;
}while (Count<6);
document.write('Total is ',Total);
document.write ('<br>');
document.write('Average is ',Average);
</Script>
</HEAD>
</HTML>
....................................................
***String****
A variable or constant of type STRING is several characters in length. Strings vary in length and may even have no characters: an empty string. The characters can be letters and/or digits and/or any other printable symbol. Var TelephoneNumber = '44121654331' Var FirstName = 'Emma' Var UnRepeatable = '@!&&@@##!'
*** String Methods******
String length
String slice()
String substring()
String substr()
String replace()
String replaceAll()
String toUpperCase()
String toLowerCase()
String concat()
String trim()
String trimStart()
String trimEnd()
String padStart()
String padEnd()
String charAt()
String charCodeAt()
String split()
» length – finding the number of characters in the string.
For example, the length of the string "Computer Science" is 16 characters as spaces are counted as a character.
» substring – extracting part of a string.
For example, the substring "Science" could be extracted from "Computer Science".
» upper – converting all the letters in a string to uppercase. For example, the string "Computer Science" would become "COMPUTER SCIENCE".
» lower – converting all the letters in a string to lowercase. For example, the string "Computer Science" would become "computer science"
<HTML>
<HEAD>
<TITLE>String Method</TITLE>
<Script Language="Javascript">
var text = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
document.write ('String Length is ', text.length);
document.write ('<br>');
var str = "Apple, Banana, Kiwi";
var part = str.substring(7, 13); document.write ('Substring is ', part);
document.write ('<br>');
var text1 = "Hello World!";
var text2 = text1.toUpperCase();
document.write ('UpperCase is ', text2);
document.write ('<br>');
var str1 = "Computer Science!";
var str2 = str1.toLowerCase();
document.write ('LowerCase is ', str2);
</Script>
</HEAD>
</html>
..............................
**** Arrays *****
<HTML>
<HEAD>
<TITLE>Array</TITLE>
<Script Language="Javascript">
const cars = ["Saab", "Volvo", "BMW"];
document.write (cars);
</script>
</HEAD>
</html>
..........................................
<HTML>
<HEAD>
<TITLE>Array1</TITLE>
<Script Language="Javascript">
const NoStudent=3; var SMT1 = new Array(3);
var SMT2 = new Array(3);
var higets=0;
for (var i = 1; i <= NoStudent; i++) {
SMT1[i]=window.prompt('Enter Mark for Test1', '');
SMT1[i]= parseInt(SMT1[i]);
document.write ('Test1 Mark ' + SMT1[i]) ;
document.write ('<br>');
if ( SMT1[i] >= 80)
{ document.write ('Highest Mark ' + SMT1[i]);}
}
</script>
</HEAD>
</html>
..............................................
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>Sort in Reverse</h2>
<p>The reverse() method reverses the elements in an array.</p>
<p>By combining sort() and reverse() you can sort an array in descending order:</p>
<p id="demo1"></p>
<p id="demo2"></p>
<script>
// Create and display an array:
const fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo1").innerHTML = fruits;
// First sort the array
fruits.sort();
// Then reverse it:
fruits.reverse();
document.getElementById("demo2").innerHTML = fruits;
</script>
</body>
</html>
...................................
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>The sort() Method</h2>
<p>Click the buttons to sort the array alphabetically or numerically.</p>
<button onclick="myFunction1()">Sort Alphabetically</button>
<button onclick="myFunction2()">Sort Numerically</button>
<p id="demo"></p>
<script>
const points = [40, 100, 1, 5, 25, 10];
document.getElementById("demo").innerHTML = points; function myFunction1() {
points.sort();
document.getElementById("demo").innerHTML = points;
}
function myFunction2() {
points.sort(function(a, b){return a - b});
document.getElementById("demo").innerHTML = points;
}
</script>
</body>
</html>
....................................
Download