EECS1012. Net-centric Introduction to Computing. Lecture Introduction to Javascript

Transcription

1 EECS 1012 Net-centric Introduction to Computing Lecture Introduction to Javascript Acknowledgements Contents are adapted from web lectures for Web Programming Step by Step, by M. Stepp, J. Miller, and V. Kirst. Slides have been ported to PPT by Dr. Xenia Mountrouidou. These slides have been edited for, York University. The contents of these slides may be modified and redistributed, please give appropriate credit. M.S. Brown, EECS York University 1 (Creative Commons) Michael S. Brown, 2017.

2 2 Intro to JavaScript (JS)

3 Client-side scripting 3 JavaScript runs on the browser (so we call this "client side". JS provides a way to dynamically modify the HTML content and appearance in the browser.

4 Why use client-side programming? 4 PHP already allows us to create dynamic web pages. Why also use client-side scripting? client-side scripting (JavaScript) benefits: usability: can modify a page without having to post back to the server (faster UI) efficiency: can make small, quick (dynamic) changes to page without waiting for server event-driven: can respond to user actions like clicks and key presses EECS 1012

5 What is JavaScript? 5 a lightweight programming language ("scripting language") used to make web pages interactive insert dynamic text into HTML (ex: user name) react to events (ex: page load or user click) can get information about a user's computer (ex: browser type, history, etc) perform calculations on user's computer (e.g.: for form validation) EECS 1012

6 JavaScript (JS) vs. Java 6 JS is interpreted, Java is compiled JS has more relaxed syntax and rules fewer and "looser" data types variables don't need to be declared errors often silent (few exceptions) JS is contained within a web page and integrates with its HTML/CSS content EECS 1012

7 JavaScript vs. Java 7 + = (JavaScript is "mellow" version of Java) EECS 1012 Interestingly, even though the name has "Java" in it, JavaScript is not affiliated with Java (from Sun Microsystems that is now part of the Oracle Corporation).

8 JavaScript vs. PHP 8 differences: JS focuses on user interfaces and interacting with a document; PHP is geared toward HTML output and file/form processing JS code runs on the client's browser; PHP code runs on the web server EECS 1012

9 Linking to a JavaScript file: script 9 <script src="filename" type="text/javascript"></script> HTML script tag should be placed in HTML page's head script code is stored in a separate.js file JS code can be placed directly in the HTML file's body or head (like CSS) but this is bad style (should separate content, presentation, and behavior) EECS 1012

10 Event-driven programming 10 EECS

11 Event-driven programming 11 Event-driven programming: writing programs driven by user events Many programs (e.g. Java, C++, PHP) start when the program is started. JavaScript programs instead wait for user actions called events and respond to them EECS

12 An example: start with a button 12 <button>click me!</button> HTML button's text appears inside tag; can also contain images To make a responsive button or other UI control: 1. choose the control (e.g. button) and event (e.g. mouse click) of interest 2. write a JavaScript function to run when the event occurs 3. attach the function to the event on the control EECS 1012

13 Your first JavaScript statement: alert 13 alert(" remains my favorite class!"); JS a JS command that pops up a dialog box with a message The appearance of the "alert" may look different depending on the browser and operating system EECS 1012

14 Defining a JavaScript function 14 function functionname() { statement ; statement ;... statement ; } JS function myfunction() { alert(" remains my favorite class!"); } JS the above could be the contents of example.js linked to our HTML page statements placed into functions can be evaluated in response to user events

15 Event handlers in HTML 15 <element attributes onclick="function();">... HTML <button onclick="myfunction();">click me!</button> HTML Linking HTML to JavaScript JavaScript functions can be set as event handlers when you interact with the element, the function will execute onclick is just one of many event HTML attributes we'll use

16 Putting it together 16 HTML FILE <!DOCTYPE html> <html> <head> <script src="example.js" type="text/javascript"></script> </head> <body> <button onclick="myfunction();"> Click Me! </button> </body> </html> JS file: example.js Event (click) of the HTML button, calls the specified handler function This statement links in the JS file. The JS file has our JavaScript code. Like CSS, this is done by file name. function myfunction() { alert(" remains my favorite class!"); }

17 Effect of the previous code 17 When this button is clicked, the "alert" is called from the function.

18 18 JavaScript Language

19 JavaScript 19 If you are new to programming, you are going to notice that many of the things you see in JavaScript are almost the same as PHP In fact, most programming languages are quite similar and generally you can learn them quickly once you have experience in another language

20 Variables 20 var clientname = "Connie Client"; var age = 32; var id = ; Variables are defined by the keyword variable Unlike PHP, we not need $ for the variable name This may be confusing switching between PHP and JS

21 JS data types 21 TYPE Explanation Example Number Integers and floats are not distinguished in Java script 99, 2.8, 5, -10 String A variable that is a collection of characters. Hello, Boolean Array Objects function A variable that wholes only two possible values true or false. A variable that is actually a collection of variables that can be access with an index Objects are special data types that have functions and data associated with them. These are more common in JS than PHP and we will need to use them often. A user defined function that can be called by an user event (e.g. mouse click, etc) true or false [1,2,3,4, ] [ hello, deaner, ] Document.getElementByID(); (example of an object) function name () { statements;.. }

22 Number type 22 var enrollment = 99; var mediangrade = 2.8; var credits = (2 * 3); same operators at PHP: + - * / % = -= *= /= %= same order of precedence as PHP auto converts strings to number like PHP "2" * 3 = 6

23 String type 23 var s = "Connie Client"; var len = s.length; // 13 var s2 = 'Melvin Merchant'; Like PHP, strings can be specified with both " and ' Unlike, PHP, variables are not interpreted in "" There is a built in property.length that returns the string length

24 Object property access 24 var s = "Connie Client"; var len = s.length; variable s is of type String, however, this can also be thought of as a "String object". we can access various properties of the object using a "." and the property's name. You are going to see this type of property access often in JavaScript (and other "Object Oriented" languages)

25 String concatenation (+ operator) 25 var s1 = "Hello "; var s2 = "World \n"; var s3 = s1 + s3; // s3 = "Hello World \n"; The plus operator is used for string concatenation There is no. operator for strings like PHP The. operator will be used for accessing objects data. For example, previous slide: s.length was the length of a string. The escape sequences are similar to PHP \n, \", \'

26 JavaScript Access to the HTML page 26 JavaScript Functions Define functions that are called when events occur on the HTML page in the browser. DOM JS needs a mechanism to access the HTML document's structure. The solution: Document Object Model (DOM) HTML consists of elements. Now that you have learned forms, you know some elements can generated events (like data input & button clicks) JavaScript adds the ability to attach code that response to HTML events. It also needs a mechanism to access the HTML elements.

27 Document Object Model (DOM) 27 most JS code manipulates elements on an HTML page we can examine elements' "state" e.g. see whether a box is checked we can change state e.g. insert some new text into a div we can change styles e.g. make a paragraph red

28 28 DOM element objects

29 Object function call syntax 29 document.getelementbyid("id") Object "document" Call the object's function (also called a method) getelementbyid(...)

30 DOM element properties 30 Property Type Description classname id innerhtml style tagname string string string string string The class attribute of the element ("" if no class is set) The id attribute of the element (undefined if no id is set) The HTML markup and content inside the element, i.e. between its opening and close tags ("" if there is no content) An object representing the elements style attributes (see slide X) The element's HTML tag, in uppercase (e.g. "P", "DIV", "H1", "SPAN", etc) EECS 1012

31 Additional DOM properties 31 Property Type Description checked boolean whether a checkbox or radio button is checked disabled boolean Whether a form control is disabled href string The URL for a link (a) src string Source URL for an image (img) value string Text inside a form control such as an input or textarea EECS 1012

32 Accessing elements: 32 document.getelementbyid document.getelementbyid() returns the DOM object for an element with a given id can change the text inside most elements by setting the innerhtml property can change the text in form controls by setting the value property EECS

33 Example 33 replacetext.html <html> <head> <script src="replacetext.js" type="text/javascript"></script> </head> <body> <button onclick="changetext();">click me!</button> <p id="mytext"> Replace this text </p> </body> </html> replacetext.js function changetext() { var paragraph = document.getelementbyid("mytext"); paragraph.innerhtml = "Changed the text with JS!"; }

34 JS program breakdown 34 (1) Creates a button, links click event to JS function changetext() (1) Browser Output <body> <button onclick="changetext();">click me!</button> <p id="mytext"> Replace this text </p> </body> (2) (2) Creates a paragraph with ID mytext. You have seen this with CSS before. function changetext() { var paragraph = document.getelementbyid("mytext"); paragraph.innerhtml = "Changed the text with JS!"; } When the event happens. this code is executed. (1) Retrieves the element by ID name "mytext" (2) Changes its innerhtml data property. (1) (2) Browser Output

35 Accessing elements: 35 document.getelementbyid Previous example showed how to change the "innerhtml" property We can also change the style properties of the HTML element using JavaScript EECS

36 Changing element style: 36 element.style CSS Attribute color padding background-color border-top-width Font size Font famiy DOM Property / style object color padding backgroundcolor bordertopwidth fontsize fontfamily EECS 1012

37 Example 37 <html> changestyle.html <head> <script src="example2.js" type="text/javascript"></script> </head> <body> <button onclick="changetext();">change Style!</button> <span id="output">replace me</span> <input id="textbox" type="text"> </body> </html> changestyle.js function changetext() { var text = document.getelementbyid("textbox"); text.style.color = "blue"; /* Changes style color to blue */ text.style.fontsize = "3em"; /* Changes style fontsize to 3em */ text.style.fontfamily = "monospace"; /* Changes fontfamily to monospace */ }

38 Result from previous slide 38 After clicking button. We retrieve this element using the DOM getelementbyid(). <input id="textbox" type="text"> The input field id name is "textbox". function changetext() { var text = document.getelementbyid("textbox"); text.style.color = "blue"; text.style.fontsize = "3em"; text.style.fontfamily = "monospace"; } Change the style

39 39 More Javascript Syntax

40 Comments (same as Java) 40 // single-line comment /* multi-line comment */ JS identical to Java's comment syntax recall: 4 comment syntaxes HTML: <!-- comment --> CSS/JS/PHP: /* comment */ Java/JS/PHP: // comment PHP: # comment EECS 1012

41 More on JS string type 41 var count = 10; var s1 = "" + count; // "10" var s2 = count + " bananas, ah ah ah!"; // "10 bananas, ah ah ah!" var n1 = parseint("42 is the answer"); // 42 Number var n2 = parsefloat("3.403 is a test"); // Number Concatenation with an empty string is a quick way to convert a variable to a string (see var s1 example) Unlike PHP, if we want to convert a string to a number, we have to use a function parseint() /* means parse Integer*/ parsefloat() /* means parse Float */

42 Yet more on JS string type 42 var s = "a string"; var firstletter = s[0]; var firstletter = s.charat(0); var lastletter = s.charat(s.length - 1); // fails in IE // does work in IE One drawback of JavaScript is that it is not standardized across browsers Accessing characters in a string works like PHP for some browsers, e.g. s[0], s[1], s[2],... We can to use the s.charat(index) method. s.charat(0), s.charat(1), s.charat(2)

43 Special values: null and undefined 43 var ned = null; var benson = 9; // at this point in the code, // ned is null // benson's 9 // caroline is undefined JS undefined : has not been declared, does not exist null : exists, but was specifically assigned an empty or null value Why does JavaScript have both of these? EECS 1012

44 Logical operators same as PHP 44 > < >= <= &&! ==!= ===!== most logical operators automatically convert types: 5 < "7" is true 42 == 42.0 is true "5.0" == 5 is true === and!== are strict equality tests; checks both type and value "5.0" === 5 is false EECS 1012

45 if/else statement (same as PHP) 45 if (condition) { statements; } else if (condition) { statements; } else { statements; } JS identical structure to Java's if/else statement JavaScript allows almost anything as a condition EECS 1012

46 Boolean type 46 var ilike190m = true; var ieisgood = "IE6" > 0; // false if ("web devevelopment is great") { /* true */ } if (0) { /* false */ } any value can be used as a Boolean JS "falsey" values: 0, 0.0, NaN, "", null, and undefined "truthy" values: anything else converting a value into a Boolean explicitly: var boolvalue = Boolean(otherValue); var boolvalue =!!(othervalue); EECS 1012

47 for-loop (same as PHP andjava) 47 var sum = 0; for (var i = 0; i < 100; i++) { sum = sum + i; } JS var s1 = "hello"; var s2 = ""; for (var i = 0; i < s.length; i++) { s2 += s1.charat(i) + s1.charat(i); } // s2 stores "hheelllloo" JS EECS

48 while loops (same as PHP) 48 while (condition) { statements; } JS Example only difference from PHP is in the JS variable syntax. var i=0; var sum = 0; while (i < 100) { /* loops whie i is less than 100 */ sum = sum + i; /* adds up 0 to 99 */ i++; /* adds one to I */ } JS EECS

49 Popup boxes 49 alert("message"); // message confirm("message"); // returns true or false prompt("message"); // returns user input string JS EECS

50 Arrays 50 var name = []; // empty array var name = [value, value,..., value]; // pre-filled name[index] = value; // store element var ducks = ["Huey", "Dewey", "Louie"]; var stooges = []; // stooges.length is 0 stooges[0] = "Larry"; // stooges.length is 1 stooges[1] = "Moe"; // stooges.length is 2 stooges[4] = "Curly"; // stooges.length is 5 stooges[4] = "Shemp"; // stooges.length is 5 JS JS EECS 1012

51 Finish with another example (ver 1) 51 <html> add.html <head> <script src="add.js" type="text/javascript"></script> </head> <body> <h1>the Amazing Adder</h1> <div> <input id="num1" type="text" size="3"> + <input id="num2" type="text" size="3"> = <span id="answer"></span> <br> <button onclick="compute();">compute!</button> </div> </body> </html> function compute() { var input1 = document.getelementbyid("num1"); var input2 = document.getelementbyid("num2"); var answer = document.getelementbyid("answer"); var result = input1.value + input2.value; answer.innerhtml = result; } add.js

52 Finish with another example (ver 1) 52 <input id="num1" type="text" size="3"> + <input id="num2" type="text" size="3"> = <span id="answer"></span> <br> <button onclick="compute();">compute!</button> function compute() { var input1 = document.getelementbyid("num1"); var input2 = document.getelementbyid("num2"); var answer = document.getelementbyid("answer"); var result = input1.value + input2.value; answer.innerhtml = result; } There is an empty span here with id=answer The uses the DOM to get the elements. input1 and input2 are <input> so to access their data we use ".value". answer is a <span> so to change its value we use "innerhtml" Placed the results in the span elements "innerhtml"

53 But wait? 53 function compute() { var input1 = document.getelementbyid("num1"); var input2 = document.getelementbyid("num2"); var answer = document.getelementbyid("answer"); var result = input1.value + input2.value; answer.innerhtml = result; } Why is the answer "1010"? Because input1.value="10" and input2.value="10", are strings. So, "10" + "10" in JavaScript is "1010", because + is the concatenation operator. If we want to convert these, we need to use the function parseint( );

54 Finish with another example (ver 2) 54 <input id="num1" type="text" size="3"> + <input id="num2" type="text" size="3"> = <span id="answer"></span> <br> <button onclick="compute();">compute!</button> function compute() { var input1 = document.getelementbyid("num1"); var input2 = document.getelementbyid("num2"); var answer = document.getelementbyid("answer"); var result = parseint(input1.value) + parseint(input2.value); answer.innerhtml = result; } We only need to modify the JS code.

55 One more example <!DOCTYPE html> example3.html <html> <head> <script src="example3.js" type="text/javascript"></script> </head> <body> <p> Click image to see some of my favorite foods: <img onclick="changeimage();" src="dosa.jpg" height="100" id="food"></p> </body> </html> var i = 1; example3.js function changeimage() { var foodimage = document.getelementbyid("food"); var images = ["dosa.jpg", "falafel.jpg", "pide.jpg", "malaxiangguo.jpg"]; foodimage.src = images[i]; i++; if (i > 3) { i = 0; } }

56 Previous JS example 56 Attaches code to an "onclick" event for an image! Events do not have to be only for buttons! When the image is clicked, the code gets the image's element using the DOM and changes the images source An array of four images is used to store the image names A "global" variable is declared (outside the function) that keeps its value between function calls

57 Result of previous code 57 Each time you click the image, the image changes!

58 Recap 58 This lecture has introduced you to JavaScript The language is similar to PHP, however, variables syntax are different (no need for the $) Other differences with strings, arrays, etc.. but overall quite similar JS is also more object-oriented, so we have more object notation, e.g. var.innerhtml, var.style.color, etc. JS is also "event" driven, which we will explore more in coming lectures