is2802 introduction to multimedia applications for business lecture 2: introduction to javascript...
TRANSCRIPT
![Page 1: IS2802 Introduction to Multimedia Applications for Business Lecture 2: Introduction to JavaScript Rob Gleasure R.Gleasure@ucc.ie](https://reader034.vdocument.in/reader034/viewer/2022051417/56649f065503460f94c1c125/html5/thumbnails/1.jpg)
IS2802Introduction to Multimedia Applications for BusinessLecture 2: Introduction to JavaScript
Rob Gleasure
www.robgleasure.com
![Page 2: IS2802 Introduction to Multimedia Applications for Business Lecture 2: Introduction to JavaScript Rob Gleasure R.Gleasure@ucc.ie](https://reader034.vdocument.in/reader034/viewer/2022051417/56649f065503460f94c1c125/html5/thumbnails/2.jpg)
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
![Page 3: IS2802 Introduction to Multimedia Applications for Business Lecture 2: Introduction to JavaScript Rob Gleasure R.Gleasure@ucc.ie](https://reader034.vdocument.in/reader034/viewer/2022051417/56649f065503460f94c1c125/html5/thumbnails/3.jpg)
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.
![Page 4: IS2802 Introduction to Multimedia Applications for Business Lecture 2: Introduction to JavaScript Rob Gleasure R.Gleasure@ucc.ie](https://reader034.vdocument.in/reader034/viewer/2022051417/56649f065503460f94c1c125/html5/thumbnails/4.jpg)
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.
![Page 5: IS2802 Introduction to Multimedia Applications for Business Lecture 2: Introduction to JavaScript Rob Gleasure R.Gleasure@ucc.ie](https://reader034.vdocument.in/reader034/viewer/2022051417/56649f065503460f94c1c125/html5/thumbnails/5.jpg)
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
![Page 6: IS2802 Introduction to Multimedia Applications for Business Lecture 2: Introduction to JavaScript Rob Gleasure R.Gleasure@ucc.ie](https://reader034.vdocument.in/reader034/viewer/2022051417/56649f065503460f94c1c125/html5/thumbnails/6.jpg)
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)
![Page 7: IS2802 Introduction to Multimedia Applications for Business Lecture 2: Introduction to JavaScript Rob Gleasure R.Gleasure@ucc.ie](https://reader034.vdocument.in/reader034/viewer/2022051417/56649f065503460f94c1c125/html5/thumbnails/7.jpg)
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)
![Page 8: IS2802 Introduction to Multimedia Applications for Business Lecture 2: Introduction to JavaScript Rob Gleasure R.Gleasure@ucc.ie](https://reader034.vdocument.in/reader034/viewer/2022051417/56649f065503460f94c1c125/html5/thumbnails/8.jpg)
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.
![Page 9: IS2802 Introduction to Multimedia Applications for Business Lecture 2: Introduction to JavaScript Rob Gleasure R.Gleasure@ucc.ie](https://reader034.vdocument.in/reader034/viewer/2022051417/56649f065503460f94c1c125/html5/thumbnails/9.jpg)
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
![Page 10: IS2802 Introduction to Multimedia Applications for Business Lecture 2: Introduction to JavaScript Rob Gleasure R.Gleasure@ucc.ie](https://reader034.vdocument.in/reader034/viewer/2022051417/56649f065503460f94c1c125/html5/thumbnails/10.jpg)
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
![Page 11: IS2802 Introduction to Multimedia Applications for Business Lecture 2: Introduction to JavaScript Rob Gleasure R.Gleasure@ucc.ie](https://reader034.vdocument.in/reader034/viewer/2022051417/56649f065503460f94c1c125/html5/thumbnails/11.jpg)
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…. }
![Page 12: IS2802 Introduction to Multimedia Applications for Business Lecture 2: Introduction to JavaScript Rob Gleasure R.Gleasure@ucc.ie](https://reader034.vdocument.in/reader034/viewer/2022051417/56649f065503460f94c1c125/html5/thumbnails/12.jpg)
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”>
![Page 13: IS2802 Introduction to Multimedia Applications for Business Lecture 2: Introduction to JavaScript Rob Gleasure R.Gleasure@ucc.ie](https://reader034.vdocument.in/reader034/viewer/2022051417/56649f065503460f94c1c125/html5/thumbnails/13.jpg)
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>
![Page 14: IS2802 Introduction to Multimedia Applications for Business Lecture 2: Introduction to JavaScript Rob Gleasure R.Gleasure@ucc.ie](https://reader034.vdocument.in/reader034/viewer/2022051417/56649f065503460f94c1c125/html5/thumbnails/14.jpg)
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
![Page 15: IS2802 Introduction to Multimedia Applications for Business Lecture 2: Introduction to JavaScript Rob Gleasure R.Gleasure@ucc.ie](https://reader034.vdocument.in/reader034/viewer/2022051417/56649f065503460f94c1c125/html5/thumbnails/15.jpg)
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
![Page 16: IS2802 Introduction to Multimedia Applications for Business Lecture 2: Introduction to JavaScript Rob Gleasure R.Gleasure@ucc.ie](https://reader034.vdocument.in/reader034/viewer/2022051417/56649f065503460f94c1c125/html5/thumbnails/16.jpg)
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
![Page 17: IS2802 Introduction to Multimedia Applications for Business Lecture 2: Introduction to JavaScript Rob Gleasure R.Gleasure@ucc.ie](https://reader034.vdocument.in/reader034/viewer/2022051417/56649f065503460f94c1c125/html5/thumbnails/17.jpg)
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
![Page 18: IS2802 Introduction to Multimedia Applications for Business Lecture 2: Introduction to JavaScript Rob Gleasure R.Gleasure@ucc.ie](https://reader034.vdocument.in/reader034/viewer/2022051417/56649f065503460f94c1c125/html5/thumbnails/18.jpg)
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
![Page 19: IS2802 Introduction to Multimedia Applications for Business Lecture 2: Introduction to JavaScript Rob Gleasure R.Gleasure@ucc.ie](https://reader034.vdocument.in/reader034/viewer/2022051417/56649f065503460f94c1c125/html5/thumbnails/19.jpg)
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
![Page 20: IS2802 Introduction to Multimedia Applications for Business Lecture 2: Introduction to JavaScript Rob Gleasure R.Gleasure@ucc.ie](https://reader034.vdocument.in/reader034/viewer/2022051417/56649f065503460f94c1c125/html5/thumbnails/20.jpg)
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’
![Page 21: IS2802 Introduction to Multimedia Applications for Business Lecture 2: Introduction to JavaScript Rob Gleasure R.Gleasure@ucc.ie](https://reader034.vdocument.in/reader034/viewer/2022051417/56649f065503460f94c1c125/html5/thumbnails/21.jpg)
JavaScript Operators
There are a number of types of Operators: Arithmetic operators Comparison operators Logical operators Assignment operators
![Page 22: IS2802 Introduction to Multimedia Applications for Business Lecture 2: Introduction to JavaScript Rob Gleasure R.Gleasure@ucc.ie](https://reader034.vdocument.in/reader034/viewer/2022051417/56649f065503460f94c1c125/html5/thumbnails/22.jpg)
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”
![Page 23: IS2802 Introduction to Multimedia Applications for Business Lecture 2: Introduction to JavaScript Rob Gleasure R.Gleasure@ucc.ie](https://reader034.vdocument.in/reader034/viewer/2022051417/56649f065503460f94c1c125/html5/thumbnails/23.jpg)
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
![Page 24: IS2802 Introduction to Multimedia Applications for Business Lecture 2: Introduction to JavaScript Rob Gleasure R.Gleasure@ucc.ie](https://reader034.vdocument.in/reader034/viewer/2022051417/56649f065503460f94c1c125/html5/thumbnails/24.jpg)
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
![Page 25: IS2802 Introduction to Multimedia Applications for Business Lecture 2: Introduction to JavaScript Rob Gleasure R.Gleasure@ucc.ie](https://reader034.vdocument.in/reader034/viewer/2022051417/56649f065503460f94c1c125/html5/thumbnails/25.jpg)
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)
![Page 26: IS2802 Introduction to Multimedia Applications for Business Lecture 2: Introduction to JavaScript Rob Gleasure R.Gleasure@ucc.ie](https://reader034.vdocument.in/reader034/viewer/2022051417/56649f065503460f94c1c125/html5/thumbnails/26.jpg)
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
![Page 27: IS2802 Introduction to Multimedia Applications for Business Lecture 2: Introduction to JavaScript Rob Gleasure R.Gleasure@ucc.ie](https://reader034.vdocument.in/reader034/viewer/2022051417/56649f065503460f94c1c125/html5/thumbnails/27.jpg)
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
![Page 28: IS2802 Introduction to Multimedia Applications for Business Lecture 2: Introduction to JavaScript Rob Gleasure R.Gleasure@ucc.ie](https://reader034.vdocument.in/reader034/viewer/2022051417/56649f065503460f94c1c125/html5/thumbnails/28.jpg)
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.
![Page 29: IS2802 Introduction to Multimedia Applications for Business Lecture 2: Introduction to JavaScript Rob Gleasure R.Gleasure@ucc.ie](https://reader034.vdocument.in/reader034/viewer/2022051417/56649f065503460f94c1c125/html5/thumbnails/29.jpg)
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.
![Page 30: IS2802 Introduction to Multimedia Applications for Business Lecture 2: Introduction to JavaScript Rob Gleasure R.Gleasure@ucc.ie](https://reader034.vdocument.in/reader034/viewer/2022051417/56649f065503460f94c1c125/html5/thumbnails/30.jpg)
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
![Page 31: IS2802 Introduction to Multimedia Applications for Business Lecture 2: Introduction to JavaScript Rob Gleasure R.Gleasure@ucc.ie](https://reader034.vdocument.in/reader034/viewer/2022051417/56649f065503460f94c1c125/html5/thumbnails/31.jpg)
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
![Page 32: IS2802 Introduction to Multimedia Applications for Business Lecture 2: Introduction to JavaScript Rob Gleasure R.Gleasure@ucc.ie](https://reader034.vdocument.in/reader034/viewer/2022051417/56649f065503460f94c1c125/html5/thumbnails/32.jpg)
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’?
![Page 33: IS2802 Introduction to Multimedia Applications for Business Lecture 2: Introduction to JavaScript Rob Gleasure R.Gleasure@ucc.ie](https://reader034.vdocument.in/reader034/viewer/2022051417/56649f065503460f94c1c125/html5/thumbnails/33.jpg)
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?
![Page 34: IS2802 Introduction to Multimedia Applications for Business Lecture 2: Introduction to JavaScript Rob Gleasure R.Gleasure@ucc.ie](https://reader034.vdocument.in/reader034/viewer/2022051417/56649f065503460f94c1c125/html5/thumbnails/34.jpg)
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