Download Introduction to Javascript - Lecture Slides | CSCI 2910 and more Study notes Computer Science in PDF only on Docsity!

CSCI 2910 – Client/Server-Side Programming Introduction to JavaScript – Page 1 of 47

CSCI 2910

Client/Server-Side Programming

Topic: Intro to JavaScript

CSCI 2910 – Client/Server-Side Programming Introduction to JavaScript – Page 2 of 47

Today’s Goals

With a little luck at the conclusion of this lecture, we should be able to:

• Define what type of programming language JavaScript is
• Describe the syntax of JavaScript
• Insert a JavaScript program into an XHTML file
• Hack into someone else’s JavaScript

CSCI 2910 – Client/Server-Side Programming Introduction to JavaScript – Page 3 of 47

What is JavaScript?

• JavaScript is a high-level language
• JavaScript is an interpreted language
  • A program called an interpreter runs on the client’s computer.
  • One instruction at a time, the interpreter figures out what to do by reading your text program file.
  • Interpreted programming language can run on any platform or O/S as long as there is an interpreter that runs on that particular setup.
  • Interpreted languages are usually slower.
  • Speed may not be a big factor because programs written in JavaScript are not usually that complex

CSCI 2910 – Client/Server-Side Programming Introduction to JavaScript – Page 4 of 47

What is JavaScript? (continued)

Interpreter Block Diagram

Compiled Code Block Diagram

CSCI 2910 – Client/Server-Side Programming Introduction to JavaScript – Page 5 of 47

What is JavaScript? (continued)

• JavaScript runs through a web browser
  • developed by Netscape in order to give dynamic operation and control to web pages
  • executed on the user's or client's computer, i.e., the interpreter is part of the browser, not the server software
• JavaScript is an object-oriented language
  • program elements are organized into "objects"
• JavaScript is case sensitive
• JavaScript is NOT Java
  • Java and JavaScript share many characteristics, but Java is a compiled language and it has a number of capabilities, instructions, and libraries not available to JavaScript.

CSCI 2910 – Client/Server-Side Programming Introduction to JavaScript – Page 6 of 47

JavaScript Syntax

• JavaScript programs are created with basic text editors just like your HTML web pages.
• The JavaScript interpreter that will be running your code will look line-by-line through the code to see what to do.
• In order for the interpreter to understand what you've written, there are some rules you must follow, i.e., syntax.

CSCI 2910 – Client/Server-Side Programming Introduction to JavaScript – Page 7 of 47

JavaScript Syntax – Terminating a Line

• In general, each instruction may cross more than one line on the screen. In other words, white space such as tabs, spaces, or carriage returns do not usually affect the flow of the program.
• Because of this, we need to have a way to indicate that we have reached the end of an instruction.
• In JavaScript, we do this with a semicolon (;). For example: A = B + C; CSCI 2910 – Client/Server-Side Programming Introduction to JavaScript – Page 8 of 47

JavaScript Syntax – Grouping Lines

• The program needs to know how to group sections of code together.
• Grouping might be required for things such as:
  • functions
  • loops
  • if-blocks
• We need to have a syntax for doing this. In JavaScript, we use the curly brackets ({ and }). For example: { Lines of code grouped together }

CSCI 2910 – Client/Server-Side Programming Introduction to JavaScript – Page 9 of 47

JavaScript Syntax – Comments

• All programming languages allow the programmer to add comments to their code that are "invisible" to the execution of the program.
• In JavaScript, there are two kinds. (Actually there are three, but one of them is sort of unofficial.) They are: - Block comments - End of line comments - Comments to force old browsers to ignore JavaScript (the unofficial one) CSCI 2910 – Client/Server-Side Programming Introduction to JavaScript – Page 10 of 47

Block Comments

/ This is a block comment. It is surrounded by the slash/asterisk and asterisk/slash that indicate the beginning and ending of a comment respectively. A block comment may span multiple lines. /

CSCI 2910 – Client/Server-Side Programming Introduction to JavaScript – Page 11 of 47

End of Line Comments

// This is an end of line comment. // Everything from the double // slashes to the end of the line // is ignored. // To use this method over // multiple lines, each line must // have its own set of double // slashes.

CSCI 2910 – Client/Server-Side Programming Introduction to JavaScript – Page 12 of 47

Comments for Old Browsers

• This third method of commenting is not an official method. It is simply a fix so that JavaScript can be commented out with HTML comment tags so that older browsers will ignore the script. <!-- The HTML comment character <!-- acts just like double slashes
• It is important to note that “- ->” doesn't do anything and is not a JavaScript comment character.

CSCI 2910 – Client/Server-Side Programming Introduction to JavaScript – Page 19 of 47

Flow Control – "While" (continued)

• Syntax:

while(condition) { // statements to execute }

• Example:

while(temperature > 72) air_conditioner_value = On; CSCI 2910 – Client/Server-Side Programming Introduction to JavaScript – Page 20 of 47

Flow Control – "For"

• It is also possible to create a loop that uses a counter or index. A for-loop is a single statement that: - initializes a index, - performs a operation on that index at the end of the loop, and - defines a condition on which to stop executing the loop.
• Its syntax is shown below:

for ( initialization ; terminating condition ; operation ) { // statements to execute }

CSCI 2910 – Client/Server-Side Programming Introduction to JavaScript – Page 21 of 47

Flow Control (continued)

• This is NOT a comprehensive list of flow control formats.
• For more information on elements of flow control in JavaScript, check out one of the on-line resources:

http://www.devguru.com/technologies/javascript/11470.asp http://www.hscripts.com/tutorials/javascript/switch-case.php http://www.javascriptkit.com/javatutors/primer1.shtml

CSCI 2910 – Client/Server-Side Programming Introduction to JavaScript – Page 22 of 47

Operators

• As with any programming language, there are operators that are used to processes information. These include: - Arithmetic operators - Bitwise operator - Assignment operators - Comparison operators - Logical operators - String operators

CSCI 2910 – Client/Server-Side Programming Introduction to JavaScript – Page 23 of 47

Arithmetic Operators

• • Addition operator: adds two values Example: A + B
• – Subtraction operator: subtracts one number from another Example: A – B
• • Multiplication operator: multiplies two numerical values Example: A * B
• / Division operator: divides one number into another Example: A/B
• ++ Increment operator: adds one to its operand Example: A++
• -- Decrement operator: subtracts one from its operand Example: A--
• % Modulus operator: returns the integer remainder of a division of the second value into the first Example: A % B

CSCI 2910 – Client/Server-Side Programming Introduction to JavaScript – Page 24 of 47

Bitwise Logical Operations

• ~ Bitwise NOT operator: Inverts each bit of the single operand placed to the right of the symbol
• & Bitwise AND: Takes the logical-bitwise AND of two values
• | Bitwise OR operator: Takes the logical- bitwise OR of two values
• ^ Bitwise XOR: Takes the logical-bitwise exclusive-OR of two values

CSCI 2910 – Client/Server-Side Programming Introduction to JavaScript – Page 25 of 47

Bitwise Shift Operations

• << Left shift: Shifts the left operand left by the number of places specified by the right operand filling in with zeros on the right side.

• Sign-propagating right shift: Shifts the left operand right by the number of places specified by the right operand filling in with the sign bit on the left side.

• Zero-fill right shift operator: Shifts the left operand right by the number of places specified by the right operand filling in with zeros on the left side.

CSCI 2910 – Client/Server-Side Programming Introduction to JavaScript – Page 26 of 47

Assignment Operators

• The equal sign, ‘=‘, sets the element on the left side equal to the value of the element on the right side
• There are some short-hand uses of the equal sign:
  • a += b is equivalent to a = a + b
  • a -= b is equivalent to a = a - b
  • a *= b is equivalent to a = a * b
  • a /= b is equivalent to a = a / b
  • a %= b is equivalent to a = a % b
  • a &= b is equivalent to a = a & b
  • a |= b is equivalent to a = a | b
  • a ^= b is equivalent to a = a ^ b
  • a <<= b is equivalent to a = a << b
  • a >>= b is equivalent to a = a >> b
  • a >>>= b is equivalent to a = a >>> b

CSCI 2910 – Client/Server-Side Programming Introduction to JavaScript – Page 27 of 47

Comparison Operators

• Returns true if the first value is greater than the second

• = Returns true if the first value is greater than or equal to the second

• < Returns true the first value is less than the second
• <= Returns true if the first value is less than or equal to the second
• == Returns true if first value is equal to second
• != Returns true if first value is not equal to second CSCI 2910 – Client/Server-Side Programming Introduction to JavaScript – Page 28 of 47

Logical Operators

-! Returns true if its operand is zero or false

• && Returns false if either operand is zero or false
• || Returns false if both operands are zero or false

CSCI 2910 – Client/Server-Side Programming Introduction to JavaScript – Page 29 of 47

Strings

• Strings are identified using double quotes, e.g., "This is a JavaScript string.“
• Two strings can be concatenated using the ‘+’, e.g., "David " + "Tarnoff" equals "David Tarnoff"
• Some characters are interpreted as white space or act as control characters and require an alternative method of being entered. These are called escape characters.

CSCI 2910 – Client/Server-Side Programming Introduction to JavaScript – Page 30 of 47

Escape Characters

\n newline \t tab \r carriage return \ backslash " double quote ' single quote

CSCI 2910 – Client/Server-Side Programming Introduction to JavaScript – Page 37 of 47

Events

• Sometimes, you will need to execute a section of JavaScript code in response to an event.
• Events are things that happen to an object.
  • For example, assume we have an object "person".
  • An event might be that their eyes become dry. What would they do? Blink! person.onDryEyes = blink();
  • The object in this example is "person".
  • "blink()" is a method or function.
  • The event is "onDryEyes".

CSCI 2910 – Client/Server-Side Programming Introduction to JavaScript – Page 38 of 47

Events (continued)

• Examples of events for your HTML pages include:
  • onLoad
  • onClick
  • onMouseOver
  • onMouseOut
• Each of these events can execute a script.
• Events must be placed in a tag. For example:

link text

CSCI 2910 – Client/Server-Side Programming Introduction to JavaScript – Page 39 of 47

Object Models

JavaScript provides access to a number of different components on the client’s side:

• HTML elements
• Browser information
• JavaScript-specific objects

CSCI 2910 – Client/Server-Side Programming Introduction to JavaScript – Page 40 of 47

Object Models (continued)

• As stated earlier, JavaScript is an object- based language. Can you name some objects related to the client viewing a page?
• To support standard implementation across all browsers and applications, a set of object models has been created for use with JavaScript. - Browser Object Model (BOM) - Document Object Model (DOM)

CSCI 2910 – Client/Server-Side Programming Introduction to JavaScript – Page 41 of 47

Browser Object Model

• The BOM defines the components and hierarchy of the collection of objects that define the browser window.
• For the most part, we will only be working with the following components of the BOM. - window object - location object - history object - document object - navigator object - screen object

CSCI 2910 – Client/Server-Side Programming Introduction to JavaScript – Page 42 of 47

Window Object

Window object

History object

Location object

Navigator object

Screen object

Document object

• Top level in the BOM
• Allows access to properties and method of:
  • display window
  • browser itself
  • methods thing such as error message and alert boxes
  • status bar

CSCI 2910 – Client/Server-Side Programming Introduction to JavaScript – Page 43 of 47

Document Object

• Top of the Document Object Model (DOM).
• This is probably the one you’ll use most.
• Allows access to elements of the displayed document such as images and form inputs.
• The root that leads to the arrays of the document: forms[ ] array, links[ ] array, and images[ ] array.
• Least compliance to standard here – Netscape 6, Opera 6, and Mozilla 1.0 are the best.

CSCI 2910 – Client/Server-Side Programming Introduction to JavaScript – Page 44 of 47

Navigator Object

• Provides access to information and methods regarding the client’s browser and operating system.
• Commonly used to determine client’s browser capabilities so page can be modified real time for best viewing.
• Example: A script may check the browser type in order to modify CSS styles.

CSCI 2910 – Client/Server-Side Programming Introduction to JavaScript – Page 45 of 47

History Object

• Provides access to the pages the client has visited during the current browser session.
• Methods such as back() and forward() can be used to move through the history.
• Can also be used to jump to any point in the history.
• As with any browser history, it only allows for a single path.

CSCI 2910 – Client/Server-Side Programming Introduction to JavaScript – Page 46 of 47

Other BOM Objects

• Location Object – Provides access to and manipulation of the URL of the loaded page.
• Screen Object – Provides access to information about the client’s display properties such as screen resolution and color depth.
• More information can be found at: http://javascript.about.com/library/bltut22.htm http://www-128.ibm.com/developerworks/web/library/wa-jsdom/

CSCI 2910 – Client/Server-Side Programming Introduction to JavaScript – Page 47 of 47

Document Object Model

• Document is modeled as a tree.
• DOM Changes based on page displayed. Example:

  My Page

  Here’s the first paragraph.

  Here’s the second paragraph.

html

head body title h1 p

bob jim

• Another example can be found at: http://oopweb.com/JavaScript/Documents/jsintro/Volume/part2/part2.htm