Scribd
Upload
2K views

L04 Javascript1

Uploaded by

AjathShatruRaju
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
2K views

L04 Javascript1

Uploaded by

AjathShatruRaju
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 62

CSIT128 / CSIT828

The Basics of JavaScript


Joseph Tonien
My First JavaScript

<button type="button" onclick="alert('Hi');">


Click me
</button>

<button type="button" onclick="alert(1+1);">


Click me
</button>
My First JavaScript

<button type="button" onclick="console.log('Hi');">


Click me
</button>

<button type="button" onclick="console.log(2+2);">


Click me
</button>
My First JavaScript

<button type="button" onclick="alert('Hi'); console.log(2+2);">


Click me
</button>
My First JavaScript

<button type="button" onclick="sayHi();">


Click me
</button>

<script>

function sayHi(){
alert("Hi");
}

</script>
Where to include JavaScript

You can put you JavaScript anywhere in your HTML file.

Common practice:
● In the head
● At the end of body

<script>

function sayHi(){
alert("Hi");
}

</script>
Where to include JavaScript

In the head

<head>

<title>JavaScript Example</title>

<script>

function sayHi(){
alert("Hi");
}

</script>
</head>
Where to include JavaScript

At the end of body (just before the closing body tag)

...

<script>

function sayHi(){
alert("Hi");
}

</script>

</body>

</html>
External JavaScript

Instead of putting javascript code inside your html file

<script>

function sayHi(){
alert("Hi");
}

</script>

you can specify an external javascript file:

<script type="text/javascript" src="js/myscript.js"></script>


Change content by JavaScript

<button type="button" onclick="changeToFrench();">


Click me to change the text to French
</button>
<span id="french">Hi there!</span>

<script>

function changeToFrench(){
document.getElementById("french").innerHTML = "Salut!";
}
</script>
Change style by JavaScript

<button type="button" onclick="changeHelloWorldStyle();">


Click me to change the style of the text
</button>
<span id="hello">Hello world</span>

<script>

function changeHelloWorldStyle(){
var e = document.getElementById("hello");
e.style.color = "orange";
e.style.fontSize = "30px";
e.style.fontStyle = "italic";
}

</script>
Basic JavaScript syntax

JavaScript statements are separated by semicolons

function changeHelloWorldStyle(){
var e = document.getElementById("hello");
e.style.color = "orange";
e.style.fontSize = "30px";
e.style.fontStyle = "italic";
}
Basic JavaScript syntax
JavaScript Comments
Code after double slashes // or between /* and */ is treated as a comment.
Comments are ignored, and will not be executed.

/*
this function change the style of the text
*/
function changeHelloWorldStyle(){
//get the html element
var e = document.getElementById("hello");
//change the style
e.style.color = "orange";
e.style.fontSize = "30px";
e.style.fontStyle = "italic";
}
Basic JavaScript syntax
JavaScript uses the var keyword to declare variables.

var studentName = "John";


var x, y;
x = 5;
y = x + 2;

All JavaScript identifiers are case sensitive.


● The variables studentName and StudentName are two different variables.
● The variables x and X are two different variables.
Basic JavaScript syntax

Variable naming: two good conventions

underscore:
student_name, student_id, first_name, last_name

camel case:
studentName, studentId, firstName, lastName
Basic JavaScript syntax

JavaScript has dynamic types. !!!


This means that the same variable can be used as different types:

var x; // x is undefined
alert(x);

var x = 2016; // x is a number


alert(x);

var x = "Wollongong"; // x is a string


alert(x);

A variable declared without a value will have the value undefined.


Basic JavaScript syntax

JavaScript data type: number

var age = 19;


var pi = 3.14;
var x;

alert(typeof age); //number


alert(typeof pi); //number
alert(x); //undefined
Basic JavaScript syntax
Arithmetic operators are used to perform arithmetic on numbers

+ Addition
- Subtraction
* Multiplication
/ Division
% Modulus
++ Increment
-- Decrement
Basic JavaScript syntax
Assignment operators

Operator Example Same As


= x = y x = y
+= x += y x = x + y
-= x -= y x = x - y
*= x *= y x = x * y
/= x /= y x = x / y
%= x %= y x = x % y
Basic JavaScript syntax

JavaScript data type: string

var age = "19";


var name = "John";
var x;

alert(typeof age); //string


alert(typeof name); //string
alert(x); //undefined
Basic JavaScript syntax

Strings are text, written within double or single quotes:

var firstName, lastName, fullName;

firstName = "John"; // using double quotes


lastName = 'Lee'; // using single quotes

fullName = firstName + " " + lastName;


alert(fullName);

Use + for string concatenation


Basic JavaScript syntax

Mixing between double or single quotes:

var x;

x = "I'm John"; //single quote inside double quotes


alert(x);

x = "My name is 'John'"; //single quotes inside double quotes


alert(x);

x = 'My name is "John"'; //double quotes inside single quotes


alert(x);
Basic JavaScript syntax
JavaScript evaluates expressions from left to right

var x;

x = 2016 + "Wollongong"; //2016Wollongong


alert(x);

x = 2016 + 1 + "Wollongong"; //2017Wollongong


alert(x);

x = "Wollongong" + 2016; //Wollongong2016


alert(x);

x = "Wollongong" + 2016 + 1; //Wollongong20161


alert(x);
Basic JavaScript syntax

JavaScript data type: boolean

var authenticated = false;


var isReturningUser = true;
var x;

alert(typeof authenticated); //boolean


alert(typeof isReturningUser); //boolean
alert(x); //undefined
Basic JavaScript syntax

JavaScript data type: boolean

var x = 5;
var positive = (x > 0);

alert(typeof positive); //boolean

if(positive){
alert("x is positive");
}
Basic JavaScript syntax
Comparison and Logical Operators

== equal to
=== equal value and equal type
!= not equal
!== not equal value or not equal type
> greater than
< less than
>= greater than or equal to
<= less than or equal to
? ternary operator
Basic JavaScript syntax

== equal to
=== equal value and equal type

var x = 5;
var y = "5";

if(x == y){
alert("yes");
}else{
alert("no");
}
Basic JavaScript syntax

== equal to
=== equal value and equal type

var x = 5;
var y = "5";

if(x === y){


alert("yes");
}else{
alert("no");
}
Basic JavaScript syntax

!= not equal
!== not equal value or not equal type

var x = 5;
var y = "5";

if(x != y){
alert("yes");
}else{
alert("no");
}
Basic JavaScript syntax

!= not equal
!== not equal value or not equal type

var x = 5;
var y = "5";

if(x !== y){


alert("yes");
}else{
alert("no");
}
Basic JavaScript syntax
? ternary operator
test ? expression1 : expression2

var x = 5;
var y = "x is " + ( x%2==0 ? "even" : "odd" );

alert(y);
Date

var now = new Date(); //current date & time

alert(now);
alert(typeof now); //object
Date

There are several ways to create a Date object.

var d = new Date();


var d = new Date(millisec);
var d = new Date(dateString);
var d = new Date(year, month, day, hour, min, sec, millisec);
Date

var d = new Date(millisec);

Dates are calculated in milliseconds from 01 January, 1970 00:00:00 Universal


Time (UTC). One day contains 86,400,000 millisecond.

var d = new Date(86400000);


alert(d); //02 Jan 1970 00:00:00 UTC
Date

var d = new Date(dateString);

//using YYYY-MM-DD format


var d = new Date("2000-01-30");
alert(d);

//using YYYY-MM-DDTHH:MI:SS
var d = new Date("2000-01-30T10:00:00");
alert(d);
Date

var d = new Date(year, month, day, hour, min, sec, millisec);

The last 4 parameters can be omitted.


Months count from 0 to 11. January is 0. December is 11.

var d = new Date(2000, 0, 1); // 01 Jan 2000


alert(d);
Date

getDate() Get the day as a number (1-31)


getDay() Get the weekday as a number (0-6)
Sunday is 0, Saturday is 6
getFullYear() Get the four digit year (yyyy)
getHours() Get the hour (0-23)
getMilliseconds() Get the milliseconds (0-999)
getMinutes() Get the minutes (0-59)
getMonth() Get the month (0-11)
January is 0, December is 11
getSeconds() Get the seconds (0-59)
getTime() Get the milliseconds since 01/Jan/1970
Date

var now = new Date();


alert("now is " + now);
alert("getDate returns " + now.getDate());
alert("getDay returns " + now.getDay());
alert("getFullYear returns " + now.getFullYear());
alert("getHours returns " + now.getHours());
alert("getMilliseconds returns " + now.getMilliseconds());
alert("getMinutes returns " + now.getMinutes());
alert("getMonth returns " + now.getMonth());
alert("getSeconds returns " + now.getSeconds());
alert("getTime returns " + now.getTime());
Date

setDate() Set the day as a number (1-31)


setFullYear() Set the year (optionally month and day)
setHours() Set the hour (0-23)
setMilliseconds() Set the milliseconds (0-999)
setMinutes() Set the minutes (0-59)
setMonth() Set the month (0-11)
setSeconds() Set the seconds (0-59)
setTime() Set the milliseconds since 01/Jan/1970
Date

var now = new Date();


alert(now);

var tomorrow = new Date();


tomorrow.setDate(now.getDate() + 1);
alert(tomorrow);

var hundredDayAgo = new Date();


hundredDayAgo.setDate(now.getDate() - 100);
alert(hundredDayAgo);
String

var text = "One Fish, Two Fish, Red Fish, Blue Fish";

var textLength = text.length;


→ 39

var upper = text.toUpperCase();


→ ONE FISH, TWO FISH, RED FISH, BLUE FISH

var lower = text.toLowerCase();


→ one fish, two fish, red fish, blue fish
String

var text = "One Fish, Two Fish, Red Fish, Blue Fish";

var fishIndex = text.indexOf("Fish"); → 4


var catIndex = text.indexOf("cat"); → -1

var redFound = text.includes("Red"); → true


var greenFound = text.includes("Green"); → false
String

var text = "One Fish, Two Fish, Red Fish, Blue Fish";

var s1 = text.slice(10, 12); → Tw

var s2 = text.slice(10); → Two Fish, Red Fish, Blue Fish

var s3 = text.slice(-9, -6); → Blu

var s4 = text.slice(-9); → Blue Fish


Array

var arrayName = [item0, item1, ...];

var subjects = ["ISIT206", "MATH121", "CSCI301"];

alert(subjects); //ISIT206,MATH121,CSCI301

alert(typeof subjects); //object


Array

!!!
var arrayName = [item0, item1, ...];

Array can contain items of different types

var info = ["John", new Date("1996-01-20"), "CSCI204", 85];

alert(info); //John,Sat Jan 20 1996...,CSCI204,85

alert(typeof info); //object


Array

var subjects = ["ISIT206", "MATH121", "CSCI301"];

subjects[1] = "LOGIC101"; //change the content of item 1


subjects[3] = "LAW201"; //add new item 3

alert(subjects[0]); //ISIT206
alert(subjects[1]); //LOGIC101
alert(subjects[2]); //CSCI301
alert(subjects[3]); //LAW201
Array

Length of array

var subjects = ["ISIT206", "MATH121", "CSCI301"];

subjects[1] = "LOGIC101";
subjects[3] = "LAW201";

// loop through an array


for(var i = 0; i < subjects.length; i++){
alert(subjects[i]);
}
Array

var square = []; //empty array

for(var i = 0; i < 10; i++) {


square[i] = i*i;
}

for(var i = 0; i < square.length; i++) {


alert(square[i]);
}
Array

The push() method adds a new element to the end of an array

var square = []; //empty array

for(var i = 0; i < 10; i++) {


square.push(i*i);
}

for(var i = 0; i < square.length; i++) {


alert(square[i]);
}
Object

var info = {name: "John", dob: new Date("1996-01-20"), year: 2};

alert(info); //[object Object]

alert(typeof info); //object

Object is defined by a list of property:value

var objectName = {property1:value1, property2:value2, ...};


Object
Access the values of an object

var info = {
name: "John",
dob: new Date("1996-01-20"),
year: 2
}; //it is better to write this way

alert(info.name); //John
alert(info["name"]); //John

Object values can be obtained by two ways:

obj.property

obj["property"]
Object
Change the values of an object

var info = {
name: "John",
dob: new Date("1996-01-20"),
year: 2
};

// two ways:
info.year = 1;
info["year"] = 1;
Object
Delete object properties

var info = {
name: "John",
dob: new Date("1996-01-20"),
year: 2
};

// two ways:
delete info.year;
delete info["year"];
Object
Create an empty object

var info = { };

info.firstName = "John";
info.lastName = "Lee";

alert(info["firstName"]);
alert(info.lastName);
Array vs Object

var arrayName = [item0, item1, ... ];


var objectName = {property1:value1, }
property2:value2, ... ;

Arrays use numbered index:

arrayName[0] = "LOGIC101";
arrayName[1] = "CSCI111";

Objects use named index:

objectName["firstName"] = "John";
objectName.lastName = "Lee";
Array Sorting
var subjects = ["ISIT206", "MATH121", "CSCI301"];
subjects.sort();

Now subjects is ["CSCI301", "ISIT206", "MATH121"]

var numbers = [1, 20, -3, 4];


numbers.sort();

Now numbers is [-3, 1, 20, 4] !!!

numbers.sort(function (a, b) { return a - b; });


Now numbers is [-3, 1, 4, 20]
Array Sorting
var numbers = [1, 20, -3, 4];
numbers.sort(function (a, b) { return a - b; });
Now numbers is [-3, 1, 4, 20]

In general:
the_array_to_be_sorted.sort(the_sorting_function ...);

The sorting function function (a, b) must


● return a positive value to indicate a > b
● return a negative value to indicate a < b
● return zero to indicate a = b
Array Sorting
ninja_results = [
{name: "John", level: 4, seconds: 85},
{name: "Peter", level: 2, seconds: 35},
{name: "Kate", level: 4, seconds: 80},
{name: "Luke", level: 5, seconds: 120}
];

We want to sort the ninja results based on the level first,


if two persons achieved the same level, then we compare the
number of seconds.

http://www.uow.edu.au/~dong/w3/example/js/ninja.html
Array Sorting Before sorting
ninja_results = [
ninja_results.sort(
{name: "John", level: 4, seconds: 85},
function (p1, p2) {
{name: "Peter", level: 2, seconds: 35},
if (p1["level"] > p2["level"]){
{name: "Kate", level: 4, seconds: 80},
return 1; // sort
{name: "Luke", level: 5, seconds: 120}
}
];
if (p1["level"] < p2["level"]){
return -1; // don’t sort
}
//at this point the two persons have the same level
if (p1["seconds"] < p2["seconds"]){
return 1; // sort
}
if (p1["seconds"] > p2["seconds"]){
return -1; // don’t sort After sorting

} ninja_results = [

return 0; {name: "Peter", level: 2, seconds: 35},

} {name: "John", level: 4, seconds: 85},

); {name: "Kate", level: 4, seconds: 80},


{name: "Luke", level: 5, seconds: 120}
];
Confirm box
A confirm box is often used if you want the user to verify or accept something.

When a confirm box pops up, the user will have to click either "OK" or "Cancel".

If the user clicks "OK", the box returns true.

If the user clicks "Cancel", the box returns false.

var ok = confirm("Do you want to proceed with the order?");


if(ok){
alert("User clicked OK");
}else{
alert("User clicked Cancel.");
}
Prompt box
When a prompt box pops up, the user will have to click either "OK" or "Cancel".

If the user clicks "OK" the box returns the input value.

If the user clicks "Cancel" the box returns null.

We can also specify the default text in the input box:

prompt("sometext","defaultText");

var name = prompt("Please enter your name", "cat in the hat");


if(name != null){
alert("Hello " + name);
}
References

http://www.w3schools.com/js

Robert W. Sebesta, Programming the World Wide Web, Pearson.

You might also like