IS2802Introduction to Multimedia Applications for BusinessLecture 2: Introduction to JavaScript

Rob Gleasure

R.Gleasure@ucc.ie

www.robgleasure.com

Lecture Outline

Marking this term and description of continuous assessment JavaScript

What is JavaScript? Why is JavaScript useful? The JavaScript Syntax JavaScript variables JavaScript operators

Exercise

Continuous assessment for IS2802 You have been hired to design a website called ‘The Big Screen’,

which provides users with critiques of box office movies. This website may contain any number of WebPages, however it must include a homepage/welcome page and five movies up for critique (whether these five movies are each on separate pages, all on a single page, etc, is up to you).

The site should be clear, well presented and professional, and the purpose of the site should be immediately obvious

The style should be memorable and ‘catchy’, whilst avoiding anything while is likely to become irritating over prolonged use.

Continuous assessment for IS2802 (continued) The site is endorsed by Google and they have requested a discrete

advertising slot with the Google Chrome logo on the home page. For users browsing in Google Chrome, they want this advert to simply say ‘Brought to you by Chrome’. For all users browsing in another browser, they want the advert to show the text ‘Get a fast, free browser’, the clicking of which will bring that user to the Chrome download page at www.google.com/chrome.

The customers are also very keen to reinforce their brand. To this end, they have also requested that the main page possess a tasteful banner. They would like this banner to react dynamically when a user scrolls their mouse over it, for example by triggering a subtle change in the interface, or in the banner itself.

Continuous assessment for IS2802 (continued) This project is worth 50%, with the exam worth the remaining 50%

50% will be calculated over 100 marks, distributed as follows: Quality of underlying HTML and CSS (30/100)

Functionality Robustness to bugs/glitches Consistency across browsers Commenting, indentation and clarity

Continuous assessment for IS2802 (continued)

Application of JavaScript (30/100) Functionality Robustness to bugs/glitches Consistency across browsers Commenting, indentation and clarity

Style and presentation of content (20/100) Memorability and clarity of purpose Tone and cohesiveness Use of colours and images Presentation of text

Additional features and/or application of further learning (20/100)

What is JavaScript?

JavaScript is a Client-side scripting Language, embedded within HTML or XML and run on the user’s browser

It is the most widely used client-side scripting language on the web, and is supported by the major browsers

It is often combined with CSS, XML and PHP for expansive web projects, capable of handling extremely complex interactions with users and other machines on the Internet

It is not the same as Java (a generic programming language developed by Sun Microsystems)

What is JavaScript?

JavaScript's came from ECMAScript.

ECMAScript was developed and maintained by the ECMA Organisation.

The development of the standard is ongoing (as with so many web technologies).

You don’t have to be an expert programmer to use JavaScript. Many web designers are not really proficient with Java, C++, VB, etc. but can still utilise JavaScript with great results.

What is JavaScript?

A browser contains the JavaScript interpreter, which is necessary to process the commands in a JS script

JavaScript can only operate within the user’s browser – It can’t manipulate files (create, update, delete) on the user’s

system It can’t execute operations outside the browser (such as

launching an installer, or initiating a download)

By not allowing such operations a much greater level of protection is given to website users

Why is JavaScript Useful?

Uses of JavaScript include: Making the web page different depending on the browser and

browser features Dynamically generating HTML Code for parts of the page Monitoring user events & specifying reactions Validating user input Remembering user information, such as passwords, previous

search strings, etc

The JavaScript Syntax

JavaScript revolves around variables, loops, conditions, and functions

Each line of code (i.e. statements and declarations) end with a semi-colon

some line of code;

The amount of space between statements doesn’t matter

Blocks of code (code under Functions, loops, etc) should be enclosed in braces

{ ….one or more lines of code in here…. }

The JavaScript Syntax

JavaScript is Case Sensitive - not using proper uppercase or lowercase letters will give a syntax error

The JavaScript code can be put in the <head> section or the <body> section of the HTML / XHTML document (we’ll come back to this)

The code is enclosed within <script> </script> tags

The <script> tags have a type attribute which should be set to text/JavaScript, i.e. <script type=“text/JavaScript”>

The JavaScript Syntax

Example of a script structure within the <head> tag

<head>

<script type=“text/JavaScript”>

<!-- Hide script from incompatible browsers

…Script code goes here…

// -->

</script>

</head>

Our first JavaScript page!

Open Notepad and enter the following:

<html> <body>

<script type="text/JavaScript"> <!--

document.write("Hello World!") -->

</script> </body>

</html>

Save page as js_intro.html (all files) and open it in the browser you have prepared

Our first JavaScript page!

So what does this code all mean?

<html> <body>

<script type="text/JavaScript"> <!--

document.write("Hello World!"); --> </script>

</body> </html>

Tells browser we’re using a script Specified that this was JavaScript

Surrounded our script in HTML comments

Our first JavaScript page!

The actual JavaScript code

document.write("Hello World!");

This line writes a string ‘Hello World’ into our HTML document document.write() can be used to write text, HTML, or both

Note: the semi-colon (;) is not necessary when only one instruction is placed per line, but it’s still good practice

JavaScript Variables

Variables are one of the most fundamental components of programming

JavaScript variables are declared with the var keyword

Variable names are case sensitive, can’t contain spaces, and must begin with a letter or an underscore

Variable Scope: A variable declared within a function is only accessible within that

function. Variables declared outside functions on a page are accessible to

all functions on the page

JavaScript Variables

Identifiers An identifier in JavaScript is the name used to refer to variables

and functions.

Examples of Variables t IS2802 _harvest

Invalid identifiers might include 3value My value

JavaScript Variables

JavaScript supports three primitive data types: Numbers (Integers and Floating point variables) Boolean values Text strings.

There are also several other data types we will come across Objects Arrays Exponential numbers Hexadecimal numbers The null literal

JavaScript Variables

Example of variable declaration:

var myNumber; //declare variable called //‘myNumber’

var myNumber = 100; //declare number variable //called ‘myNumber’

var myName = “name”; // declare string variable //called ‘myNumber’

JavaScript Operators

There are a number of types of Operators: Arithmetic operators Comparison operators Logical operators Assignment operators

Arithmetic Operators

Addition The + operator adds its two numeric operands, returning a

number 5 + 4;

returns 9

If either operand is a string, then the other will be converted to a string and it will return a string that is the result of concatenating the second operand onto the first X = “conan”; Y = “the barbarian”; X + Y;

returns “conan the barbarian”

Arithmetic Operators

Subtraction The – operator subtracts its second operand from its first

5 - 4;

returns 1 Both operands must be numbers

Multiplication The * operator multiplies its two operands (which must be

numbers) 5 * 4;

returns 20

Arithmetic Operators

Division The / operator divides its first operand by its second (which must

be numbers) 5 / 4;

returns 1.25

Modulo The % operator returns the remainder when the first operand is

divided by the second (which must be numbers) 5 % 4;

returns 1

Comparison Operators

These are operators that compare values of various types and return a Boolean value (true or false)

Use of these operators often involves flow controls, i.e. structures which control the flow of the program (if x then y, where a is true do b, etc)

Comparison Operators

Equality (==) The == operator returns true if two operands are equal and

returns false if they are not 5 == 4;

returns false

Two variables are only equal if they contain the same value Two Strings are only equal if they each contain exactly the same

characters (note that ‘A’ and ‘a’ are separate characters

Comparison Operators

Inequality (!=) The != operator tests for the exact opposite of the == operator If two variables are equal to each other, then comparing them

with ! = will return false 5 != 4;

returns true

Less than (<) The < operator evaluates to true if the first operand is less than

its second operand, otherwise it evaluates to false 5 < 4;

returns false

Comparison Operators

Greater than (>) The > operator evaluates to true if the first operand is less than

its second operator, otherwise it is false. 5 > 4;

returns true

Less than or equal (<=) The <= operator evaluates to true if its first operand is less than

or equal to its second operand – otherwise it is false.

Greater than or equal (>=) The >= operator evaluates to true if the value of its first operand

is greater than or equal to the second operand – otherwise it’s false.

Logical Operators

The logical operands expect their operands to be Boolean values

Usually used with the comparison operators to express complex comparisons that involve more than one variable.

Logical Operators

Logical AND (&&) The && operator evaluates to true if and only if both its first

operand and its second operand are true. If either operand equates to false, then the result will be false.

Logical OR (||) The || operator evaluates to true if its first operand or its second

operand or both are true

Logical NOT The ! operator is placed before a single operand Its purpose is to invert the Boolean value of its operand

Logical Operators

Operator Meaning Example of Use

&& and x=6; y=3;(x < 10 && y > 1) returns true

|| or x=6; y=3; (x==5 || y==4) returns false

! not x=6; y=3; !(x==y) returns true

Exercise

What would the comparison operator for:

‘return true if the number x is equal to the number y, or the number y is not equal to z’?

‘return true if the number x is not equal to the number y, and the number y is not equal to z’?

‘return false if the number x is equal to the number y, or the number y is equal to z’?

Exercise

Open js_intro.html Insert a JavaScript container tag into the body of js_intro.html Create a variable called greeting and store the string ‘Hello world’ in

this variable Use the document.write() function to output greeting as html How could you make this string emboldened?

References and Further Reading http://www.w3schools.com/JS/default.asp http://www.tizag.com/javascriptT/index.php http://www.ecma-international.org/memento/index.html

Also, although not particularly relevant to this lecture, some comparisons made with the newest versions of the most popular browsers

http://lifehacker.com/5844150/browser-speed-tests-firefox-7-chrome-14-internet-explorer-9-and-more