Introduction to Javascript - Lecture Slides | CSCI 2910, Study notes of Computer Science

Download Introduction to Javascript - Lecture Slides | CSCI 2910 and more Study notes Computer Science in PDF only on Docsity! 1 Introduction to JavaScript – Page 1 of 47CSCI 2910 – Client/Server-Side Programming CSCI 2910 Client/Server-Side Programming Topic: Intro to JavaScript Introduction to JavaScript – Page 2 of 47CSCI 2910 – Client/Server-Side Programming 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 Introduction to JavaScript – Page 3 of 47CSCI 2910 – Client/Server-Side Programming 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 Introduction to JavaScript – Page 4 of 47CSCI 2910 – Client/Server-Side Programming What is JavaScript? (continued) Interpreter Block Diagram Compiled Code Block Diagram Introduction to JavaScript – Page 5 of 47CSCI 2910 – Client/Server-Side Programming 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. Introduction to JavaScript – Page 6 of 47CSCI 2910 – Client/Server-Side Programming 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. 2 Introduction to JavaScript – Page 7 of 47CSCI 2910 – Client/Server-Side Programming 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; Introduction to JavaScript – Page 8 of 47CSCI 2910 – Client/Server-Side Programming 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 } Introduction to JavaScript – Page 9 of 47CSCI 2910 – Client/Server-Side Programming 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) Introduction to JavaScript – Page 10 of 47CSCI 2910 – Client/Server-Side Programming 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. */ Introduction to JavaScript – Page 11 of 47CSCI 2910 – Client/Server-Side Programming 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. Introduction to JavaScript – Page 12 of 47CSCI 2910 – Client/Server-Side Programming 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. 5 Introduction to JavaScript – Page 25 of 47CSCI 2910 – Client/Server-Side Programming 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. Introduction to JavaScript – Page 26 of 47CSCI 2910 – Client/Server-Side Programming 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 Introduction to JavaScript – Page 27 of 47CSCI 2910 – Client/Server-Side Programming 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 Introduction to JavaScript – Page 28 of 47CSCI 2910 – Client/Server-Side Programming 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 Introduction to JavaScript – Page 29 of 47CSCI 2910 – Client/Server-Side Programming 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. Introduction to JavaScript – Page 30 of 47CSCI 2910 – Client/Server-Side Programming Escape Characters \n newline \t tab \r carriage return \\ backslash \" double quote \' single quote 6 Introduction to JavaScript – Page 31 of 47CSCI 2910 – Client/Server-Side Programming Functions • JavaScript allows for the definition of functions in the case of repeated operations or operations that are too large to be embedded into a tag (We’ll discuss embedding functions into a tag later). • There are three important things you need to include with a function: – the function's name, – any parameters passed to the function, and – the code to execute. • The general format is shown below. function functionName(passed parameters) { // statements to execute } Introduction to JavaScript – Page 32 of 47CSCI 2910 – Client/Server-Side Programming Function (continued) • The word "function" above indicates that we are creating a function. • The string functionName is the name of the function. We need this so we know what to call when we are trying to execute the function. • The items between the parenthesis should be a list of the variables being passed to the function. The items should be separated with commas. • The curly brackets ({ and }) surround the code we are going to be using to create the function. Introduction to JavaScript – Page 33 of 47CSCI 2910 – Client/Server-Side Programming Inserting JavaScript into XHTML • Except for some special cases which will be discussed later, JavaScript should be inserted into an XHTML file between <script>...</script> tags. <script language="javascript" type="text/javascript"> <!-- document.writeln("<h1>Hello, World!</h1>"); // --> </script> Double slash hides “-->” from interpreter HTML comment tag hides script from old browsers <script> tag identifies script language and MIME type. Introduction to JavaScript – Page 34 of 47CSCI 2910 – Client/Server-Side Programming JavaScript in Web Pages There are two ways JavaScript scripts are executed in web pages – As the page is loaded, embedded scripts are executed and the script's output is inserted where the script occurred in the page – If an event occurs that is associated with a script, the script is executed Introduction to JavaScript – Page 35 of 47CSCI 2910 – Client/Server-Side Programming Where to Insert JavaScript There are 5 places where scripts may be inserted: • In the head of the page: between <head> tags – Scripts in the header can’t create output within the HTML document, but can be referred to by other scripts. – Header is often used for functions. • In the body of the page: between <body> tags – Output from scripts contained in the body is displayed as part of the HTML document when the browser loads the page Introduction to JavaScript – Page 36 of 47CSCI 2910 – Client/Server-Side Programming Where to Insert JavaScript (continued) • After the body of the page (after </body>) – In this case, the script can see all XHTML objects in a body tag – Example: Used to place a cursor in a field • Within an XHTML tag, such as <body>, <a>, <input>, <img> or <form> – This is called an event handler and allows the script to work with HTML elements. – In this case, no <script> tag is used. • In a separate file 7 Introduction to JavaScript – Page 37 of 47CSCI 2910 – Client/Server-Side Programming 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". Introduction to JavaScript – Page 38 of 47CSCI 2910 – Client/Server-Side Programming 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: <a href="somesite.htm" onClick = "javascript:function();">link text</a> Introduction to JavaScript – Page 39 of 47CSCI 2910 – Client/Server-Side Programming Object Models JavaScript provides access to a number of different components on the client’s side: – HTML elements – Browser information – JavaScript-specific objects Introduction to JavaScript – Page 40 of 47CSCI 2910 – Client/Server-Side Programming 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) Introduction to JavaScript – Page 41 of 47CSCI 2910 – Client/Server-Side Programming 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 Introduction to JavaScript – Page 42 of 47CSCI 2910 – Client/Server-Side Programming 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