brief introduction to javascript...brief introduction to javascript author jingpeng li created date...

06/02/2017

1

Brief Introduction to JavaScript

CSCU9B2 Web Tech Lecture 4

Material from

http://www.w3schools.com/js/

JavaScript

• JavaScript is the programming language of the Web

• It can be used to make web pages dynamic • JavaScript is a Scripting Language • It runs within the browser

– it is a client-side scripting language

• JavaScript is programming code that can be inserted into HTML pages

• JavaScript is easy to learn…

CSCU9B2 Making the Most of the WWW 2

06/02/2017

2

JavaScript Can…

• Change HTML Content

• Change HTML Attributes

• Change HTML Styles (CSS)

• Can Validate Data

– Forms entry

• Examples…

– http://www.w3schools.com/js/js_examples.asp


JavaScript Is Not Java

• JavaScript (JS) and Java are two completely different languages, in both concept and design.

• Java (invented by Sun) is a more complex programming language in the same category as C, C++, C#.


http://www.w3schools.com/js/js_examples.asp

06/02/2017

3

HTML <script> element

• JavaScript in HTML must be inserted between <script> and </script> tags.

• JavaScript can be put in the <body> and in the <head> section of an HTML page.

• The lines between the <script> and </script> contain the JavaScript:

<script> alert("My First JavaScript"); </script>

• The browser will interpret and execute the JavaScript code between the <script> and </script> tags.


External JavaScripts

• Scripts can be placed in external files. External files often contain code to be used by several different web pages.

• JavaScript files have the file extension .js. • To use an external script, point to the .js file in

the "src" attribute of the <script> tag: • Example:

<head> <script src="myScript.js"></script> </head>


06/02/2017

4

JavaScript Basics

• Variables: number, strings, booleans, arrays

• Object variables

• Manipulating variables: – Calculations

– Comparisons

• Controlling logic flow (conditional statements) – If…else

– For loops

• Functions


JavaScript Syntax

• JavaScript is case sensitive

– Most programming languages are

• White space is ignored

• // is used to comment a line

• /* to comment multiple lines*/


06/02/2017

5

JavaScript Variables

• Variables are containers for holding data: var x;

x=5; var y=6; var z=x+y; //what value is z?

• Variable names must begin with a letter – Variable names can also begin with $ and _

• (but we will not use these)

• Variable names are case sensitive – y and Y are different variables


JavaScript Data Types

• Numbers, strings and booleans: var pi=3.14; var person="John Doe"; var answer='Yes I am!';

var lastname="Doe", age=30, job=true;

– Numbers may or may not have a decimal point

– Strings are delimited by single or double quotes

– Booleans are true or false


06/02/2017

6

JavaScript Arithmetic

• Adding numbers: var x=5+7+2;

• Adding strings: concatenation var person="John"+" "+ "Doe";

– person holds “John Doe”


Arithmetic Operators

Operator Description Example Result of x Result of y

+ Addition x=y+2 7 5

- Subtraction x=y-2 3 5

* Multiplication x=y*2 10 5

/ Division x=y/2 2.5 5

% Modulus (division remainder) x=y%2 1 5


06/02/2017

7

JavaScript Arrays

• Collection of data items: var cars = ["Saab", "Volvo", "BMW"];

var name = cars[0];

cars[2] = “Astra";

– Indexing starts from 0

• Can mix data types in an array: var person = ["John", "Doe", 46];


Properties and Methods

• Data items are “objects” that have properties and methods

• Strings: var myName = "Fred Joe Bloggs";

var strLen = myName.length;

var pos = myName.indexOf("Joe");

• Arrays: var person = ["John", "Doe", 46];

var last = person.pop(); // pops last element


06/02/2017

8

Real World Objects: Car • All cars have common properties and actions

– The properties include name, model, etc. (values differ from car to car)

– Actions (methods) can be performed: e.g. start, drive


Defining Objects in JS

• You can define your own object in JavaScript

• “Person” example with properties: person=new Object(); person.firstName="John"; person.lastName="Doe"; person.age=50; person.eyeColor="blue";

– Or var person = {firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"};


06/02/2017

9

Document Object Model (DOM)

• Your web page as “objects”:


The DOM and JavaScript • In the DOM, all HTML elements are defined as objects. • A method is an action you can do (select an HTML element by id). • A property is a value that you can get or set (like changing the

content of an HTML element). <html> <body> <p id="demo"></p> <script> document.getElementById("demo").innerHTML = "Hello World!"; document.write(“<p>Bye for now…</p>”); </script> </body> </html>

– write and getElementById are methods, – innerHTML is a property.

• http://www.w3schools.com/jsref/prop_html_innerhtml.asp CSCU9B2 Making the Most of the WWW 18

http://www.w3schools.com/jsref/prop_html_innerhtml.asp



06/02/2017

10

Controlling Logic Flow

• Conditional statements:

• Execute different codes depending on a prior result

– If…else and Switch statements

• Repeatedly execute some code with different values

– For and While loops


If...else Statement

if (condition1) { code to be executed if condition1 is true } else if (condition2) { code to be executed if condition2 is true } else { code to be executed if neither condition1 nor condition2 is true }


06/02/2017

11

Example

• If the time is less than 10:00, you will get a "Good morning" greeting, • if not, but the time is less than 20:00, you will get a "Good day"

greeting, • otherwise you will get a "Good evening" greeting:

if (time<10) { x="Good morning"; } else if (time<20) { x="Good day"; } else { x="Good evening"; }


Switch Statement

switch(n) { case 1: execute code block 1 break; case 2: execute code block 2 break; default: code to be executed if n is different from case 1 and 2 }


06/02/2017

12

Switch Statement Example

var day=new Date().getDay(); switch (day) { case 0: x="Today is Sunday"; break; case 1: x="Today is Monday"; break; case 2: x="Today is Tuesday"; break; case 3: x="Today is Wednesday"; break; //..rest of week omitted. }


The For Loop

for (statement 1; statement 2; statement 3) { the code block to be executed } • Statement 1 is executed before the loop (the

code block) starts. • Statement 2 defines the condition for running

the loop (the code block). • Statement 3 is executed each time after the loop

(the code block) has been executed.


06/02/2017

13

For Loop Example

for (var i=0; i<5; i++) { x=x + "The number is " + i + "<br>"; } • From the example above, you can read: • Statement 1 sets a variable before the loop starts (var

i=0). • Statement 2 defines the condition for the loop to run (i

must be less than 5). • Statement 3 increases a value (i++) each time the code

block in the loop has been executed.


The For/In Loop

• Example: var txt=""; var person={fname:"John",lname:"Doe",age:25}; for (var x in person) { txt=txt + person[x]; }

(result is txt=“JohnDoe25”)


06/02/2017

14

The While Loop

while (condition) { code block to be executed } • Example:

i=0; while (i<5) { x=x + "The number is " + i + "<br>"; i++; }


Comparison Operators

Operator Description Comparing Returns

== equal to x==8 false

x==5 true

!= not equal x!=8 true

> greater than x>8 false

< less than x<8 true

>= greater than or equal to x>=8 false

<= less than or equal to x<=8 true


Assume x is 5

06/02/2017

15

Logical Operators

Operator Description Example

&& and (x < 10 && y > 1) is true

|| or (x==5 || y==5) is false

! not !(x==y) is true

• These 3 operators are “logically complete”

– They are enough to build any Boolean function.


JavaScript Functions

Often the JavaScript takes the form of a function in the head of the HTML

function increment (number) { return (number + 1) }

The function is then called from somewhere in the body of the HTML:

var xx = increment(something) ;


06/02/2017

16

Example: Event Handling

<!DOCTYPE html> <html> <head> <script> function myFunction() { alert("Hello World!"); } </script> </head> <body> <button onclick="myFunction()">Try it</button> </body> </html>


http://www.w3schools.com/js/js_htmldom_events.asp

Function Syntax 1

• Without arguments:

function myFunction1() { some code to be executed }

• To call the function:

myFunction1();


http://www.w3schools.com/js/js_htmldom_events.asp

06/02/2017

17

Function Syntax 2

• With arguments:

function myFunction2(var1,var2) { some code to be executed }

• To call the function:

myFunction2(argument1,argument2)


Function Syntax 3

function myFunction() { var x=5; return x; }

var myVar=myFunction();

• myVar holds the value 5


06/02/2017

18

Other Resources

• http://www.cs.stir.ac.uk/courses/CSCU9B2/resources/

– JavaScript examples.

• To probe further try the W3schools Javascript introduction (http://www.w3schools.com/js/)

• For further information, try searching the web for Javascript tutorials, or Javascript reference, or Javascript examples, ... or any of the books on the subject!


http://www.cs.stir.ac.uk/courses/CSCU9B2/resources/



brief introduction to javascript...brief introduction to javascript author jingpeng li created date...

Documents