is2802 introduction to multimedia applications for business lecture 2: introduction to javascript...
Post on 16-Jan-2016
217 Views
Preview:
TRANSCRIPT
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
top related