5/26/2019 CIS 273: Web Design and Development home 8.1 Introduction to JavaScript JavaScript is a programming language that runs in a browser, enabling web pages supporting actions like responding to a button click. JavaScript can be included in the HTML le's header ©zyBooks 05/26/19 18:55 473675 part. Irving Jimenez StrayerCIS273Spring2019 PARTICIPATION ACTIVITY 8.1.1: JavaScript to change colors. Click the buttons. Try adding a third button for "blue". 1 2 3 4 5 function ChangeTextColor(newColor) { 6 var x = document.getElementById("Colorable"); 7 x.style.color = newColor; 8 } 9 10 11 h1 { 12 color: green; 13 background-color: lightgray; 14 font-size: 16pt; 15 } 16 p { 17 font-family: arial; 18 margin-left: 10px; 19 } Render web page Reset code ©zyBooks 05/26/19 18:55 473675 Irving Jimenez StrayerCIS273Spring2019 https://learn.zybooks.com/zybook/StrayerCIS273Spring2019/chapter/8/print 1/33 5/26/2019 CIS 273: Web Design and Development home Your web page ©zyBooks 05/26/19 18:55 473675 Irving Jimenez StrayerCIS273Spring2019 In the HTML above: The script tags indicates JavaScript code, consisting of a function named ChangeTextColor. A JavaScript function is a named group of statements that can be run by referring to that name. Two button elements are created, each with an attribute named onclick. The onclick attribute is set to the function ChangeTextColor. Thus, when a button is clicked, the function ChangeTextColor is run, using the value passed to the function (either 'white' or 'green'). The h1 heading has an id of Colorable. The ChangeTextColor function's statements change the h1's color. The function uses document.getElementById("idName"), which searches the HTML document for and returns an element whose id="idName". newColor and x are both examples of variables. A variable stores a value or a link to an element of a web page. Using the link stored in a variable allows JavaScript to directly modify the properties of an element de ned elsewhere in the HTML document. Ex: x stores the element with id="Colorable". PARTICIPATION ACTIVITY 8.1.2: The colorable JavaScript example. x = document.getElementById("Colorable") ©zyBooks 05/26/19 18:55 473675 Irving Jimenez onclick="ChangeTextColor('white')" StrayerCIS273Spring2019 Blue ... https://learn.zybooks.com/zybook/StrayerCIS273Spring2019/chapter/8/print 2/33 5/26/2019 CIS 273: Web Design and Development home Gives this h1 heading a label, so that a function can nd the heading to change the heading's color. ©zyBooks 05/26/19 18:55 473675 Indicates that the JavaScript Irving Jimenez StrayerCIS273Spring2019 function ChangeTextColor should be executed, with the value 'white'. Finds the element with id 'Colorable', and sets x to that element. x can then be used to change that element's attributes, like color. The HTML that should be added to create a third button. Reset The JavaScript example below shows a function with an "if-else" statement for setting the color of the rating stars based on the value passed to the function. The HTML below de nes ve span elements, which are inline containers used to manage HTML content. Each span element has a unique id and contains a single * for the rating star. The JavaScript code can change each rating stars' color by changing the span's color. PARTICIPATION ACTIVITY 8.1.3: Updating user ratings. Click the buttons. Try adding three more buttons for ratings 3, 2, and 1. Try replacing the * with a star ( ). To specify a star, use ★, which is the HTML entity for displaying a star. ★ ©zyBooks 05/26/19 18:55 473675 Irving Jimenez StrayerCIS273Spring2019 https://learn.zybooks.com/zybook/StrayerCIS273Spring2019/chapter/8/print 3/33 5/26/2019 CIS 273: Web Design and Development home 1 2 3 4 5 function UpdateRating(newRating) { 6 var star1 = document.getElementById("rating1"); 7 var star2 = document.getElementById("rating2"); 8 var star3 = document.getElementById("rating3"); 9 var star4 = document.getElementById("rating4"); 10 var star5 = document.getElementById("rating5"); 11 12 if (newRating == 5) { 13 star5.style.color = "blue"; 14 star4.style.color = "blue"; 15 star3.style.color = "blue"; 16 star2.style.color = "blue"; 17 star1.style.color = "blue"; 18 } 19 else if (newRating == 4) { Render web page ©zyBooks 05/26/19 18:55 473675 Irving Jimenez StrayerCIS273Spring2019 Reset code Your web page PARTICIPATION ACTIVITY 8.1.4: JavaScript for updating user ratings. Refer to the JavaScript example above ©zyBooks 05/26/19 18:55 473675 Irving Jimenez StrayerCIS273Spring2019 1) What is the id of the span containing the third rating star? Check Show answer https://learn.zybooks.com/zybook/StrayerCIS273Spring2019/chapter/8/print 4/33 5/26/2019 CIS 273: Web Design and Development home 2) If the user clicks the "Rate 4" button, to what color is the fourth rating star set? Check Show answer ©zyBooks 05/26/19 18:55 473675 Irving Jimenez StrayerCIS273Spring2019 More advanced interactive web pages, such as a user-entry form or a browser-based video game, may involve hundreds or thousands of JavaScript statements. JavaScript programs are thus commonly placed in a separate le, typically ending in .js, and linked to in an HTML le's head part. Here are two versions of the popular game Tetris, written in JavaScript: Tetris1, Tetris2. PARTICIPATION ACTIVITY 8.1.5: JavaScript example: Analog clock. JavaScript can also be used to draw graphics. Play around with this clock by changing the time. Note: No changes are needed. 1 2 3 4 5 .hour-input { 6 color: blue; 7 margin-right: 5px; 8 width: 30px 9 } 10 .minute-input { 11 color: red; 12 margin-left: 5px; 13 width: 30px 14 } 15 16 17 18 19 Draw current time Render web page Reset code https://learn.zybooks.com/zybook/StrayerCIS273Spring2019/chapter/8/print ©zyBooks 05/26/19 18:55 473675 Irving Jimenez StrayerCIS273Spring2019 5/33 5/26/2019 CIS 273: Web Design and Development home Your web page ©zyBooks 05/26/19 18:55 473675 Irving Jimenez StrayerCIS273Spring2019 8.2 Syntax and variables In 1995, Brendan Eich created JavaScript so the Netscape Navigator browser could dynamically respond to user events. Ex: The web page's content could change when the user clicked a button. JavaScript was standardized by Ecma International in 1997 and called ECMAScript. ECMAScript is the standardized language that has been improved over the years, and JavaScript is an implementation of ECMAScript. The latest version of ECMAScript is version 7 (ES7) and was released in 2016. Today, JavaScript is one of the most popular programming languages. JavaScript is supported by every major web browser and makes web applications like Gmail and Google Maps possible. JavaScript is also popular outside of the web browser. Ex: Node.js, which runs JavaScript, is a popular technology for creating server-side web applications. JavaScript is executed by an interpreter. An interpreter executes programming statements without rst compiling the statements into machine language. Modern JavaScript interpreters (also called JavaScript engines) use just-in-time (JIT) compilation©zyBooks to compile the JavaScript 05/26/19 18:55 473675 Irving Jimenez code at execution time into another format that can be executed quickly. StrayerCIS273Spring2019 PARTICIPATION ACTIVITY 8.2.1: JavaScript background. 1) ECMAScript and JavaScript are the same thing. True https://learn.zybooks.com/zybook/StrayerCIS273Spring2019/chapter/8/print 6/33 5/26/2019 CIS 273: Web Design and Development home False 2) JavaScript is only used for programs that run in a web browser. True False 3) Chrome and Firefox use the same JavaScript engine. ©zyBooks 05/26/19 18:55 473675 Irving Jimenez StrayerCIS273Spring2019 True False 4) JavaScript is syntactically identical to the Java programming language. True False ECMAScript name The name "ECMAScript" was a compromise between Netscape, Microsoft, and other organizations involved in the standardization of JavaScript. Brendan Eich once commented that "ECMAScript was always an unwanted trade name that sounds like a skin disease." Despite ECMAScript's similarity to eczema (a group of related skin diseases), the name has stuck. JavaScript is syntactically similar to many programming languages like C++ and Java. However, JavaScript programming is simpler in some ways. For example, variables are declared with the keyword var. A variable is a named container that stores a value. A variable does not have to be declared before being assigned a value. Figure 8.2.1: Declaring variables. ©zyBooks 05/26/19 18:55 473675 Irving Jimenez StrayerCIS273Spring2019 // Declaring variable x var x; // x is assigned a number x = 5; // x is dynamically re-assigned a string x = "hello"; // y may be assigned a value without first being declared 10 https://learn.zybooks.com/zybook/StrayerCIS273Spring2019/chapter/8/print 7/33 5/26/2019 CIS 273: Web Design and Development home y = 10; A name created by a programmer for an item like a variable or function is called an identi er. JavaScript imposes the following rules for identi ers: An identi er can be any combination of letters, digits, underscores, or $. ©zyBooks 05/26/19 18:55 473675 An identi er may not start with a digit. Irving Jimenez An identi er may not be a reserved word like var, function, orStrayerCIS273Spring2019 while. A JavaScript coding convention is to name JavaScript variables with camel casing, where the identi er starts with a lowercase letter, and subsequent words begin with a capital letter. Ex: lastPrice is preferred over LastPrice or last_price. PARTICIPATION ACTIVITY 8.2.2: Declaring and naming variables. 1) Which statement declares the variable sum without assigning a value to sum? sum; var sum; sum = 0; 2) Which identi er is illegally named? star_destroyer $save 9to5 3) Which variable is named with the preferred JavaScript naming conventions? total_points $totalPoints totalPoints ©zyBooks 05/26/19 18:55 473675 Irving Jimenez StrayerCIS273Spring2019 Variables are not explicitly assigned a data type. JavaScript uses dynamic typing, which allows the same JavaScript variable to be assigned different data types. Dynamic typing determines a variable's type at run-time. Every variable is assigned one of the data types listed in the table below. https://learn.zybooks.com/zybook/StrayerCIS273Spring2019/chapter/8/print 8/33 5/26/2019 CIS 273: Web Design and Development home Table 8.2.1: JavaScript data types. Data type Description Strings can be delimited with 'single' or "double" quotes string Example var name = "Sam"; var quote = 'The computer asked, ©zyBooks 05/26/19 18:55 473675 "Shall we play a game?"'; Irving Jimenez StrayerCIS273Spring2019 number Numbers may have decimal places or not var highScore = 950; var pi = 3.14; boolean true or false var hungry = true; var thirsty = false; array List of items var teams = ["Broncos", "Cowboys", "49ers"]; object Collection of property and value pairs var movie = {title:"Life is Beautiful", rating:"PG-13"}; unde ned Variable without a value var message; null Intentionally absent of any object value var book = null; PARTICIPATION ACTIVITY 8.2.3: Variable data types. 1) What is the data type of z? var z; unde ned string number ©zyBooks 05/26/19 18:55 473675 Irving Jimenez StrayerCIS273Spring2019 2) What is the data type of x? y = false; x = y; string https://learn.zybooks.com/zybook/StrayerCIS273Spring2019/chapter/8/print 9/33 5/26/2019 CIS 273: Web Design and Development home boolean number 3) What is syntactically wrong with the following code? name = 'Danny O'Sullivan'; name is assigned a value without being declared rst. ©zyBooks 05/26/19 18:55 473675 Irving Jimenez StrayerCIS273Spring2019 Variables may not be assigned strings delimited with single quotes. The single quotation mark in O'Sullivan is a syntax error. Constants A constant is an initialized variable whose value cannot change. ECMAScript 6 introduced the const keyword to de ne a constant. Most modern browsers support or partially support const. const PI = 3.14; const TAX_MONTH = "April"; JavaScript uses the // and /* */ operators to produce comments in code, similar to C++ and Java. A comment is any text intended for humans that is ignored by the JavaScript interpreter. Figure 8.2.2: Comments. // Single line comment /* Multi-line comment */ ©zyBooks 05/26/19 18:55 473675 Irving Jimenez StrayerCIS273Spring2019 JavaScript does not require that statements be terminated with a semicolon. Only when two statements reside on the same line must a semicolon separate the two statements. Good practice is to avoid placing two statements on the same line. Some developers prefer to use https://learn.zybooks.com/zybook/StrayerCIS273Spring2019/chapter/8/print 10/33 5/26/2019 CIS 273: Web Design and Development home semicolons at the end of statements, and others do not. Good practice is to consistently use semicolons or not throughout the code. Figure 8.2.3: Using semicolons. var totalPoints = 10; // No semicolon is required var totalLives = 3 ©zyBooks 05/26/19 18:55 473675 Irving Jimenez StrayerCIS273Spring2019 // Two statements on the same line require a semicolon totalPoints = 5; totalLives = 2 PARTICIPATION ACTIVITY 8.2.4: Detect the error. Indicate if the statements contain an error or not. 1) /* a is assigned 2 a = 2; Error No error 2) 3.12 = pi; Error No error 3) x = 10; var y = 20; Error No error A JavaScript program may obtain text input from the user with the prompt() function. The prompt() function prompts the user with a dialog box that allows the user to type a single line of text and press OK or Cancel. The prompt() function returns the string the user typed or null if ©zyBooks 05/26/19 18:55 473675 Irving Jimenez the user pressed Cancel. StrayerCIS273Spring2019 Output may be produced using the function console.log(), which displays text or numbers in the console. The console is a location where text output is displayed. Web browsers have a console (accessible from the brower's development tools) that displays output from code the browser executes. This chapter's activities display the console output in the web page. Figure 8.2.4: Using prompt() to get input from https://learn.zybooks.com/zybook/StrayerCIS273Spring2019/chapter/8/print 11/33 5/26/2019 g gp p () g p CIS 273: Web Design and Development home the user. // Display the prompt dialog box var name = prompt("What is your name?"); // Output to the console console.log("Hello, " + name + "!"); ©zyBooks 05/26/19 18:55 473675 Irving Jimenez StrayerCIS273Spring2019 Hello, Becky! PARTICIPATION ACTIVITY 8.2.5: prompt() and console.log(). 1) Write the function call to display the question variable to the user and retrieve the user's age. question = "How old are you?"; age = ______; Check Show answer 2) Write the code to display "You are X", where X is the value of the age variable. ©zyBooks 05/26/19 18:55 473675 Irving Jimenez StrayerCIS273Spring2019 age = 21; console.log(______); Check Show answer https://learn.zybooks.com/zybook/StrayerCIS273Spring2019/chapter/8/print 12/33 5/26/2019 CIS 273: Web Design and Development home PARTICIPATION ACTIVITY 8.2.6: JavaScript practice. The JavaScript code below initializes the variable tvShow to a popular TV show. Then, an if statement displays a message in the console if tvShow is null, otherwise the value of tvShow is displayed in the console. Change the code to©zyBooks prompt the user for 05/26/19 18:55 473675 the user's favorite TV show. Then, display "____ is your favorite TV show!" Irving in theJimenez console. StrayerCIS273Spring2019 Press "Run JavaScript" to run your code. Note: The console will display an error message if the JavaScript interpreter detects a syntax error. A syntax error is the incorrect typing of a programming statement. Ex: Forgetting to place "quotes" around a string value is a syntax error. 1 2 3 4 5 6 7 8 9 10 // Use prompt to get the user's favorite TV show var tvShow = "Sherlock"; if (tvShow === null) { console.log("You did not enter a TV show."); } else { console.log(tvShow); } Run JavaScript Reset code ©zyBooks 05/26/19 18:55 473675 Irving Jimenez StrayerCIS273Spring2019 https://learn.zybooks.com/zybook/StrayerCIS273Spring2019/chapter/8/print 13/33 5/26/2019 CIS 273: Web Design and Development home Your console output ©zyBooks 05/26/19 18:55 473675 Irving Jimenez StrayerCIS273Spring2019 CHALLENGE ACTIVITY 8.2.1: prompt() and console.log(). Start Write a statement that displays: This is awesome! 1 2 /* Your solution goes here */ 3 ©zyBooks 05/26/19 18:55 473675 Irving Jimenez StrayerCIS273Spring2019 1 Check 2 3 Next https://learn.zybooks.com/zybook/StrayerCIS273Spring2019/chapter/8/print 14/33 5/26/2019 CIS 273: Web Design and Development home Exploring further: A Short History of JavaScript from W3C.org JavaScript Lexical Grammar from MDN ©zyBooks 05/26/19 18:55 473675 Irving Jimenez StrayerCIS273Spring2019 8.3 Arithmetic JavaScript arithmetic operators perform arithmetic computations. Multiplication (*) and division (/ and %) have higher precedence than addition (+) and subtraction (-). Precedence may be changed with parenthesis using the same rules as basic arithmetic. Ex: 7 + 3 * 2 = 7 + 6 = 13 because * has precedence over +, but (7 + 3) * 2 = 10 * 2 = 20 because () is calculated before *. Table 8.3.1: JavaScript arithmetic operators. Arithmetic operator Description Example + Add // x = 3 x = 1 + 2; - Subtract // x = 1 x = 2 - 1; * Multiply // x = 6 x = 2 * 3; / Divide // x = 0.5 x = 1 / 2; % Modulus (remainder) // x = 0 x = 4 ©zyBooks % 2; 05/26/19 18:55 473675 Irving Jimenez StrayerCIS273Spring2019 ++ Increment // Same as x = x + 1 x++; -- Decrement // Same as x = x - 1 x--; https://learn.zybooks.com/zybook/StrayerCIS273Spring2019/chapter/8/print 15/33 5/26/2019 CIS 273: Web Design and Development home PARTICIPATION ACTIVITY 8.3.1: Arithmetic practice. 1) 3 + 5 * 2 = ? Check Show answer ©zyBooks 05/26/19 18:55 473675 Irving Jimenez StrayerCIS273Spring2019 2) (3 + 4) % 5 = ? Check Show answer 3) var points = 10; points--; What is points? Check Show answer 4) Using the ++ operator, write a statement to add 1 to points. Check Show answer Exponentiation ES7 introduces the exponentiation operator **, which returns the result of raising ©zyBooks the rst operand to the power of the second operand. Ex: 2 ** 3 = 23 =05/26/19 8. The 18:55 473675 Irving Jimenez exponentiation operator is not yet supported by all browsers. StrayerCIS273Spring2019 A compound assignment operator combines an assignment statement with an arithmetic operation. A collection of JavaScript compound assignment operators are summarized in the table below. https://learn.zybooks.com/zybook/StrayerCIS273Spring2019/chapter/8/print 16/33 5/26/2019 CIS 273: Web Design and Development home Table 8.3.2: Compound assignment operators. Assignment operator Description Add to += Example // Same as x = x + 2 x += 2; ©zyBooks 05/26/19 18:55 473675 -= Subtract from // Same as x = x - 2 x -= 2; *= Multiply by // Same as x = x * 3 x *= 3; /= Divide by // Same as x = x / 3 x /= 3; %= Mod by // Same as x = x % 4 x %= 4; PARTICIPATION ACTIVITY Irving Jimenez StrayerCIS273Spring2019 8.3.2: Practice with compound assignment operators. 1) points = 5; points ___ 2; What compound assignment operator makes points become 2.5? Check Show answer 2) points = 2; points *= 3 + 1; ©zyBooks 05/26/19 18:55 473675 Irving Jimenez StrayerCIS273Spring2019 What is points? Check Show answer https://learn.zybooks.com/zybook/StrayerCIS273Spring2019/chapter/8/print 17/33 5/26/2019 CIS 273: Web Design and Development home 3) points = 4; points %= 2; What is points? Check Show answer ©zyBooks 05/26/19 18:55 473675 Irving Jimenez StrayerCIS273Spring2019 The + operator is also the string concatenation operator. String concatenation appends one string after the end of another string, forming a single string. Ex: "back" + "pack" is "backpack". The JavaScript interpreter determines if + means "add" or "concatenate" based on the operands on either side of the operator. If both operands are numbers, + performs addition. Ex: 2 + 3 = 5. If both operands are strings, + performs string concatenation. Ex: "2" + "3" = "23". If one operand is a number and the other a string, + performs string concatenation. The number is converted into a string, and the two strings are concatenated into a single string. Ex: "2" + 3 = "2" + "3" = "23". For all other arithmetic operators, combining a number and a string in an arithmetic expression converts the string operand to a number and then performs the arithmetic operation. Ex: "2" * 3 = 2 * 3 = 6. PARTICIPATION ACTIVITY 8.3.3: Type conversion in arithmetic operations. Animation captions: 1. 2. 3. 4. number + number = number number + string = string number * number = number number * string = number The JavaScript functions parseInt() and parseFloat() convert strings into numbers. Ex: ©zyBooks 05/26/19 18:55 473675 parseInt("5") + 2 = 5 + 2 = 7, and Irving Jimenez parseFloat("2.4") + 6 = 2.4 + 6 = 8.4. StrayerCIS273Spring2019 If parseInt() or parseFloat() are given a non-number to parse, the functions return NaN. NaN is a JavaScript value that means Not a Number. Ex: parseInt("dog") is NaN. The JavaScript function isNaN() returns true if the argument is not a number, false otherwise. Ex: isNaN("dog") is true. PARTICIPATION 8.3.4: Arithmetic practice ACTIVITY https://learn.zybooks.com/zybook/StrayerCIS273Spring2019/chapter/8/print with numbers and strings. 18/33 5/26/2019 CIS 273: Web Design and Development home Determine the result of the following expressions. Type "quotes" around strings. If not a number, type NaN. 1) 10 + "ten" Check Show answer ©zyBooks 05/26/19 18:55 473675 Irving Jimenez StrayerCIS273Spring2019 2) "3" / "6" Check Show answer 3) "3" + 5 * 2 Check Show answer 4) parseFloat("3.2") + parseInt("2.7") Check Show answer 5) 3 + parseInt("pig") Check Show answer 6) 2 + isNaN("oink") + isNaN("5") Check CHALLENGE ACTIVITY Show answer ©zyBooks 05/26/19 18:55 473675 Irving Jimenez StrayerCIS273Spring2019 8.3.1: Arithmetic operators. https://learn.zybooks.com/zybook/StrayerCIS273Spring2019/chapter/8/print 19/33 5/26/2019 CIS 273: Web Design and Development home Start Write a statement that assigns nalValue with the division of value1 by value2. Ex: If value1 is 6 and value2 is 2, nalValue is 3. 1 var value1 = 6; // Code tested with values: 6 and 4 2 var value2 = 2; // Code tested with values: 2 and -2 3 4 var finalValue = 0; 5 1 Check 2 ©zyBooks 05/26/19 18:55 473675 Irving Jimenez StrayerCIS273Spring2019 3 4 Next Exploring further: Arithmetic operators from MDN MDN documentation for parseInt(), parseFloat(), and isNaN() 8.4 Conditionals if-else statement ©zyBooks 05/26/19 18:55 473675 Irving Jimenez StrayerCIS273Spring2019 An if-else statement executes a block of statements if the statement's condition is true, and optionally executes another block of statements if the condition is false. Construct 8.4.1: if-else statement. https://learn.zybooks.com/zybook/StrayerCIS273Spring2019/chapter/8/print 20/33 5/26/2019 CIS 273: Web Design and Development home if (condition) { // statements to execute when condition is true } else { // statements to execute when condition is false } PARTICIPATION ACTIVITY ©zyBooks 05/26/19 18:55 473675 Irving Jimenez StrayerCIS273Spring2019 8.4.1: Evaluating if-else statements. Animation captions: 1. 2. 3. 4. 5. 6. Variable x is assigned 6. Evaluate the expression: 6 % 2 = 0. 0 == 0 is true, so block under "if" executes. Variable y is assigned 5. Evaluate the expression: 5 % 2 = 1. 1 == 0 is false, so block under "else" executes. Relational and equality operators An if-else statement commonly involves a relational operator or equality operator. Each operator involves two operands and evaluates to a Boolean value meaning either true or false. Table 8.4.1: Relational and equality operators. Relational operator Name Example == Equality 2 == 2 "bat" == "bat" // true // true != Inequality 2 != 3 ©zyBooks // true 18:55 473675 05/26/19 "bat" != "zoo" Irving // true Jimenez StrayerCIS273Spring2019 === Identity 2 === 2 "2" === 2 // true // false !== Non-identity 2 !== 2 "2" !== 2 // false // true https://learn.zybooks.com/zybook/StrayerCIS273Spring2019/chapter/8/print 2 < 3 // t 21/33 5/26/2019 CIS 273: Web Design and Development home < Relational operator Less than Name 2 < 3 // true "bat" < Example "zoo" // true Less than or equal 2 2 // true StrayerCIS273Spring2019 "zoo" > "bat" // true >= Greater than or equal 3 >= 2 "zoo" >= "zoo" = 60 evaluates to true. Ternary operator returns "passing", so "passing" is displayed in the console. false || 20 60 "yep" : "nope"; Check Show answer ©zyBooks 05/26/19 18:55 473675 Irving Jimenez StrayerCIS273Spring2019 2) Complete the code to assign y with x if x is greater than 0, and -1 otherwise. y = (x > 0) ? ; Check Show answer https://learn.zybooks.com/zybook/StrayerCIS273Spring2019/chapter/8/print 29/33 5/26/2019 Check Show answer CIS 273: Web Design and Development home 3) What is boardType after the following statements? year = 1985; boardType = year >= 2015 ? "hoverboard" : "skateboard"; Check ©zyBooks 05/26/19 18:55 473675 Irving Jimenez StrayerCIS273Spring2019 Show answer 4) What is priority after the following statements? attempt = 4; priority = 2; attempt > 3 ? priority++ : priority--; Check Show answer switch statement The switch statement is an alternative to writing multiple "else if" statements. A switch statement compares an expression's value to several cases using strict equality (===) and executes the rst matching case's statements. If no case matches, an optional default case's statements execute. The break statement stops executing a case's statements and causes the statement immediately following the switch statement to execute. Omitting the break statement causes the next case's statements to execute, even though the case does not match. Construct 8.4.3: switch statement. ©zyBooks 05/26/19 18:55 473675 Irving Jimenez StrayerCIS273Spring2019 switch (expression) { case value1: // Statements executed when expression's value matches value1 break; // optional case value2: // Statements executed when expression's value matches value2 break; // optional // ... default: // Statements executed when no cases match https://learn.zybooks.com/zybook/StrayerCIS273Spring2019/chapter/8/print 30/33 5/26/2019 CIS 273: Web Design and Development home // Statements executed when no cases match } PARTICIPATION ACTIVITY 8.4.8: Evaluating the switch statement. Animation captions: 1. 2. 3. 4. 5. ©zyBooks 05/26/19 18:55 473675 Irving Jimenez StrayerCIS273Spring2019 switch statement examines the value variable. value === 1 is false, so the case does not match. value === 5 is false, so the case does not match. value === 10 is true, so the case matches, and the case's statements are executed. Break statement stops executing the switch statement. The code after the switch executes, outputting "dime" to the console. PARTICIPATION ACTIVITY 8.4.9: switch statement. switch (item) { case "apple": case "orange": fruits++; break; case "milk": drinks++; case "cheese": dairy++; break; case "beef": case "chicken": meat++; break; default: other++; } 1) If item is "beef", what variables are incremented? other meat only meat and other ©zyBooks 05/26/19 18:55 473675 Irving Jimenez StrayerCIS273Spring2019 2) If item is "milk", what variables are incremented? other drinks only drinks and dairy https://learn.zybooks.com/zybook/StrayerCIS273Spring2019/chapter/8/print 31/33 5/26/2019 CIS 273: Web Design and Development home 3) If item is "Apple", what variables are incremented? other fruits Nothing is incremented. PARTICIPATION ACTIVITY ©zyBooks 05/26/19 18:55 473675 Irving Jimenez StrayerCIS273Spring2019 8.4.10: Practice with the conditional operator and switch statement. Convert the rst if-else statement into an equivalent statement using the conditional operator. Convert the second group of if-else statements into an equivalent switch statement. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 var password = "qwerty"; // Convert into equivalent ternary statement if (password === "opensesame") { console.log("Welcome!"); } else { console.log("Invalid password"); } // Get a number between 0 and 6 representing the day of the week (0 = Sunday, var currDay = new Date().getDay(); // Convert into an equivalent switch statement if (currDay === 1) { console.log("I love Mondays!"); } else if (currDay === 2 || currDay === 3 || currDay === 4) { console log("Working hard!"); Run JavaScript Reset code ©zyBooks 05/26/19 18:55 473675 Irving Jimenez StrayerCIS273Spring2019 https://learn.zybooks.com/zybook/StrayerCIS273Spring2019/chapter/8/print 32/33 5/26/2019 CIS 273: Web Design and Development home Your console output ©zyBooks 05/26/19 18:55 473675 Irving Jimenez StrayerCIS273Spring2019 ©zyBooks 05/26/19 18:55 473675 Irving Jimenez StrayerCIS273Spring2019 https://learn.zybooks.com/zybook/StrayerCIS273Spring2019/chapter/8/print 33/33 5/19/2019 CIS 273: Web Design and Development home 7.1 Mobile websites and browsers Much of the web was inaccessible to mobile phones before 2007 because most mobile devices were unable to render complex HTML. The introduction of the iPhone in 2007 inaugurated the ©zyBooks 05/19/19 07:25 473675 smartphone era and led to the development of innovative mobile web browsers could render Irving that Jimenez the same web pages designed for traditional web browsers. A mobile StrayerCIS273Spring2019 web browser is a web browser designed for mobile devices that can display web pages using HTML, CSS, and JavaScript. Today's mobile browsers are much like their desktop counterparts although mobile browsers often lack the ability to use plugins developed for desktop browsers. The popularity of smartphones has encouraged web developers to create mobile websites. A mobile website is a website that is designed for mobile devices with smaller screen sizes and touch interfaces. Early mobile markup languages A number of markup languages were once used to create simple web pages for rst-generation smartphones and personal digital assistants (PDAs). Ex: HDML, WML, cHTML, iHTML, and XHTML-MP. Older markup languages were used to render simple web pages that often appeared on monochromatic screens. Some developers continue to use these markup languages to create web pages for feature phones, inexpensive phones that are popular in many developing countries. Figure 7.1.1: CNN.com for desktop and mobile browsers. ©zyBooks 05/19/19 07:25 473675 Irving Jimenez StrayerCIS273Spring2019 https://learn.zybooks.com/zybook/StrayerCIS273Spring2019/chapter/7/print 1/30 5/19/2019 CIS 273: Web Design and Development home Figure 7.1.2: Desktop vs. mobile access in North America. ©zyBooks 05/19/19 07:25 473675 Irving Jimenez StrayerCIS273Spring2019 Source: StatCounter.com Figure 7.1.3: Top 9 mobile browsers in North America. ©zyBooks 05/19/19 07:25 473675 Irving Jimenez StrayerCIS273Spring2019 Source: StatCounter.com https://learn.zybooks.com/zybook/StrayerCIS273Spring2019/chapter/7/print 2/30 5/19/2019 CIS 273: Web Design and Development home PARTICIPATION ACTIVITY 7.1.1: Mobile web browsers. Refer to the gures above. 1) According to StatCounter, the Safari mobile web browser is most often used to access the web in North America. ©zyBooks 05/19/19 07:25 473675 Irving Jimenez StrayerCIS273Spring2019 True False 2) The Chrome browser seems to be replacing the Android browser on many phones. True False 3) According to StatCounter, mobile browsers will likely account for more web tra c than desktop browsers in the next year. True False 4) StatCounter is able to track mobile and desktop browser usage by using a device's camera to watch users accessing the web. True False ©zyBooks 05/19/19 07:25 473675 Mobile and desktop websites are created with the same technologies: HTML, CSS, and Irving Jimenez StrayerCIS273Spring2019 JavaScript. However, mobile websites differ from desktop websites in some signi cant ways. Designers of mobile websites must consider: Screen size is much smaller than desktops. User interaction is with touch, not a mouse. Mobile devices may have limited or slower Internet connectivity. Many users have data plans that limit how much content can be downloaded. https://learn.zybooks.com/zybook/StrayerCIS273Spring2019/chapter/7/print 3/30 5/19/2019 CIS 273: Web Design and Development home Users might have a different purpose for accessing a website when using a mobile device vs. using a desktop. Limited memory and CPU speed of mobile devices means mobile browsers are not as powerful as desktop browsers. Mobile websites may take advantage of GPS and accelerometer data. PARTICIPATION ACTIVITY 7.1.2: Designing mobile websites. 1) Mobile websites often show less information than their desktop counterparts. ©zyBooks 05/19/19 07:25 473675 Irving Jimenez StrayerCIS273Spring2019 True False 2) Links are generally larger on mobile websites. True False 3) Mobile websites should not rely on mouse hovering to trigger actions on the website. True False 4) Phone numbers and addresses are typically of equal importance to desktop and mobile website users. True False 5) Navigation links are often just as visible on mobile websites as on desktop websites. True ©zyBooks 05/19/19 07:25 473675 Irving Jimenez StrayerCIS273Spring2019 False 6) Video is often played automatically on mobile websites. True https://learn.zybooks.com/zybook/StrayerCIS273Spring2019/chapter/7/print 4/30 5/19/2019 CIS 273: Web Design and Development home False 7) JavaScript does not run as quickly on a mobile web browser. True False ©zyBooks 05/19/19 07:25 473675 Irving Jimenez Developers implement mobile websites using three main techniques: StrayerCIS273Spring2019 1. Separate websites: Two different websites are created, one for desktop and one for mobile. 2. Dynamic serving: The same URL is requested by both desktop and mobile web browsers, but the web server sends back a desktop version to desktop browsers and a mobile version to mobile browsers. 3. Responsive web design: The web server sends back the same HTML to both desktop and mobile browsers, but the browsers alter the appearance of the web page to match the device size. The rst strategy is straightford and easy to implement. Developers can create the desktop website using one set of URLs and the mobile site using another. Ex: http://example.com/ vs. http://example.com/mobile. The second strategy is illustrated in the animation below. PARTICIPATION ACTIVITY 7.1.3: Dynamic serving. Animation captions: 1. User types a URL into the desktop browser, and an HTTP request is sent to the web server. 2. Web server examines the User-Agent string, which indicates a desktop Chrome browser made the request, so the desktop page is returned. 3. User types a URL into the mobile browser, and an HTTP request is sent to the web server. 4. Web server examines the User-Agent string, which indicates an iPhone browser made the request, so the mobile page is returned. ©zyBooks 05/19/19 07:25 473675 Table 7.1.1: Example user agent strings for mobile browsers. Irving Jimenez StrayerCIS273Spring2019 Mobile browser Chrome on Nexus 10 User agent Mozilla/5.0 (Linux; Android 4.3; Nexus 10 Build/JSS15Q) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/46.0.2490.76 Safari/537.36 https://learn.zybooks.com/zybook/StrayerCIS273Spring2019/chapter/7/print 5/30 5/19/2019 CIS 273: Web Design and Development home Mobile browser User agent Safari on iPhone Mozilla/5.0 (iPhone; CPU iPhone OS 9_1 like Mac OS X) ©zyBooks 05/19/19 07:25 473675 AppleWebKit/601.1.46 (KHTML, like Gecko) Version/9.0 Irving Jimenez Mobile/13B137 Safari/601.1 StrayerCIS273Spring2019 BlackBerry Z30 Mozilla/5.0 (BB10; Touch) AppleWebKit/537.10+ (KHTML, like Gecko) Version/10.0.9.2372 Mobile Safari/537.10+ MSIE on Nokia Lumia 520 Mozilla/5.0 (compatible; MSIE 10.0; Windows Phone 8.0; Trident/6.0; IEMobile/10.0; ARM; Touch; NOKIA; Lumia 520) PARTICIPATION ACTIVITY 7.1.4: Implementing mobile websites. 1) When implementing separate websites, a mobile browser accessing the desktop website may redirect the mobile browser to the mobile site automatically. True False 2) A mobile user should never have access to the desktop version of a website when a mobile version is available. True False 3) The web server detects mobile browsers by examining the UserAgent request header. ©zyBooks 05/19/19 07:25 473675 Irving Jimenez StrayerCIS273Spring2019 True False 4) Keeping the content on a desktop https://learn.zybooks.com/zybook/StrayerCIS273Spring2019/chapter/7/print 6/30 5/19/2019 CIS 273: Web Design and Development home website and a separate mobile website consistent can be a challenge. True False ©zyBooks 05/19/19 07:25 473675 The third implementation technique, responsive web design, is increasinglyIrving becoming the Jimenez StrayerCIS273Spring2019 preferred technique to create mobile websites. Responsive web design (RWD) is a collection of techniques to create web pages that adapt to the browser's size. RWD is characterized by three things: 1. Elements are laid out on uid, proportion-based grids that use relative units like percentages instead of absolute units like pixels. 2. Images are sized with relative units to adapt to various screen sizes. 3. CSS media queries apply different CSS styles depending on the browser's width. RWD allows developers to create a single web page that looks good on mobile, desktop, and tablets. The gure below shows a web page whose contents change depending on the browser's width. Ex: On the desktop version, the search box is on the right side of the window. On the tablet version, the search box occupies the entire width of the browser. And on the mobile version, the search box is replaced with a search button. This material discusses designing websites using RWD. Figure 7.1.4: Web page using responsive web design for desktop, tablet, and mobile. ©zyBooks 05/19/19 07:25 473675 Irving Jimenez StrayerCIS273Spring2019 https://learn.zybooks.com/zybook/StrayerCIS273Spring2019/chapter/7/print 7/30 5/19/2019 CIS 273: Web Design and Development home Source: www.smashingmagazine.com Responsive vs. adaptive ©zyBooks 05/19/19 07:25 473675 Irving Jimenez StrayerCIS273Spring2019 The term "adaptive design" is sometimes used by web designers to describe a website design philosophy that is similar to responsive web design. An adaptive website adapts to the width of the browser at speci c widths. Ex: A container is 400 pixels wide when the browser is wider than 500 pixels, but the container shrinks to 200 pixels when the browser is less than 500 pixels wide. A responsive website will instead smoothly adjust the width of the container to t the browser width. The differences between adaptive and responsive design are not always easy to pin down, and even seasoned web designers debate the differences between the two design methodologies. This material uses the term "responsive" in contexts where some designers would argue the term "adaptive" should be used instead. PARTICIPATION ACTIVITY 7.1.5: Responsive web design. 1) RWD requires the web server to examine the user agent string in HTTP requests. True False 2) RWD uses JavaScript to alter the page contents to t the browser. True False 3) Decreasing a desktop browser's width is an easy way to determine if RWD techniques are being used. ©zyBooks 05/19/19 07:25 473675 Irving Jimenez StrayerCIS273Spring2019 True False https://learn.zybooks.com/zybook/StrayerCIS273Spring2019/chapter/7/print 8/30 5/19/2019 CIS 273: Web Design and Development home Exploring further: Google's Mobile SEO Overview Mobile Web Wikipedia article The Difference Between Responsive and Adaptive Design ©zyBooks 05/19/19 07:25 473675 Irving Jimenez StrayerCIS273Spring2019 7.2 Mobile development tools Screen emulator Developers must test their mobile websites on a variety of mobile devices to ensure the websites work properly for all users. However, many desktop browsers contain development tools that can aid mobile website development without using a mobile device. The Chrome desktop browser's DevTools provides a screen emulator that can mimic a wide range of smartphones and tablets. A screen emulator is software that simulates how mobile device screens operate. Developers access the DevTools screen emulator by typing Ctrl-Shift-I in Chrome (Windows) or Command-Option-I (Mac). Figure 7.2.1: Chrome DevTools screen emulator. ©zyBooks 05/19/19 07:25 473675 Irving Jimenez StrayerCIS273Spring2019 https://learn.zybooks.com/zybook/StrayerCIS273Spring2019/chapter/7/print 9/30 5/19/2019 CIS 273: Web Design and Development home Source: cnn.com When the developer places the mouse pointer on the web page in the emulator, the pointer appears as a circle to simulate a nger. Pressing the mouse button simulates touching the mobile device. The developer can hold down the Shift key while dragging the mouse to simulate ©zyBooks 05/19/19 07:25 473675 a pinch gesture. Irving Jimenez StrayerCIS273Spring2019 A variety of mobile devices can be selected from the dropdown list at the top of the DevTools. Each device has a set width and height, and pressing the rotate button swaps the width and height to emulate rotating the device. When a device is selected, the emulator is in Device mode. Selecting "Responsive" from the dropdown list puts the emulator in Responsive mode and allows the developer to change the width and height to any value. Figure 7.2.2: Selecting a device to emulate. PARTICIPATION ACTIVITY 7.2.1: Chrome screen emulator. 1) A pinch gesture usually zooms in and out of the web page. ©zyBooks 05/19/19 07:25 473675 Irving Jimenez StrayerCIS273Spring2019 True False 2) The Chrome screen emulator can display a mobile website in portrait or landscape. https://learn.zybooks.com/zybook/StrayerCIS273Spring2019/chapter/7/print 10/30 5/19/2019 CIS 273: Web Design and Development home True False 3) The emulator is only capable of emulating the iPhone. True False 4) The developer can change the emulated width and height when the emulator is in Device mode. ©zyBooks 05/19/19 07:25 473675 Irving Jimenez StrayerCIS273Spring2019 True False 5) The www.whitehouse.gov home page looks identical in desktop Chrome and in an emulated iPhone 6 browser. True False Device pixel ratio Chrome's screen emulator allows developers to view or change the device pixel ratio. The device pixel ratio (DPR) is the ratio between device pixels and logical pixels. Ex: A DPR of 2 means 1 logical pixel is 2 device pixels wide and 2 device pixels tall, 4 device pixels altogether. A logical pixel is also called a device-independent pixel (DIP). The CSS "px" unit is a logical pixel unit. Ex: is 20 logical pixels wide. Figure 7.2.3: Logical and device pixels on standard and 2 DPR display. ©zyBooks 05/19/19 07:25 473675 Irving Jimenez StrayerCIS273Spring2019 https://learn.zybooks.com/zybook/StrayerCIS273Spring2019/chapter/7/print 11/30 5/19/2019 CIS 273: Web Design and Development home DPR values of 2 and above are common on high-end mobile devices like the Galaxy S5 or the iPhone and iPod Touch that use Apple's Retina display. A Retina display or high-density display is a screen that packs more pixels into a smaller area than traditional screens. Pixels are not visible at a viewing distance on a Retina display like pixels are on a standard display. Figure 7.2.4: DPR settings in Chrome's screen emulator. ©zyBooks 05/19/19 07:25 473675 Irving Jimenez StrayerCIS273Spring2019 Figure 7.2.5: Retina and standard display. Source: Retina display - Haotian0905 / Public Domain, Non-Retina display - Haotian0905 / Public Domain PARTICIPATION ACTIVITY 7.2.2: DPR and high-density displays. 1) How will a website image that looks good on a standard display look like on a Retina display? The image will look pixelated or blocky. ©zyBooks 05/19/19 07:25 473675 Irving Jimenez StrayerCIS273Spring2019 The image will look the same. The image will look sharper. 2) If an image that is 50 x 50 logical https://learn.zybooks.com/zybook/StrayerCIS273Spring2019/chapter/7/print 12/30 5/19/2019 CIS 273: Web Design and Development home pixels was modi ed for a 2 DPR display, how large is the new image? 50 x 50 25 x 25 100 x 100 3) An image that is 50 x 50 logical pixels will use how many total device pixels on a 3 DPR display? ©zyBooks 05/19/19 07:25 473675 Irving Jimenez StrayerCIS273Spring2019 250 22,500 1,000 Emulating network conditions Pressing Esc in DevTools shows "Network conditions" and "Sensors" tabs. The Network conditions tab allows the browser to modify the following: Disk cache - Disabling the cache forces the browser to download all web page resources every time Network throttling - Simulate slower networks like 2G or 3G or simulate being o ine User agent - Change the user agent string to any number of browser user agents Figure 7.2.6: Emulator con guration options. ©zyBooks 05/19/19 07:25 473675 Irving Jimenez StrayerCIS273Spring2019 PARTICIPATION ACTIVITY 7.2.3: Emulating network conditions. 1) If disk cache is disabled, the cache remains disabled when the DevTools are closed. https://learn.zybooks.com/zybook/StrayerCIS273Spring2019/chapter/7/print 13/30 5/19/2019 CIS 273: Web Design and Development home True False 2) Changing the Network throttling dropdown to "O ine" allows the developer to test how the website behaves with no Internet connection. True False ©zyBooks 05/19/19 07:25 473675 Irving Jimenez StrayerCIS273Spring2019 3) Changing the device in the emulator changes the user agent in the "Network conditions" tab. True False Emulating sensors Most desktop computers do not have touch screens, GPS chips, or accelerometers, so Chrome provides sensor emulators. The "Sensors" tab is shown in the gure below. Figure 7.2.7: Sensors to emulate geolocation and device orientation. ©zyBooks 05/19/19 07:25 473675 Irving Jimenez StrayerCIS273Spring2019 https://learn.zybooks.com/zybook/StrayerCIS273Spring2019/chapter/7/print 14/30 5/19/2019 CIS 273: Web Design and Development home PARTICIPATION ACTIVITY 7.2.4: Sensors emulator. 1) The geolocation (latitude and longitude) of the emulated device is modi ed by moving the desktop computer to a different location. True False ©zyBooks 05/19/19 07:25 473675 Irving Jimenez StrayerCIS273Spring2019 2) A developer can drag the image that looks like a mobile device to modify the accelerometer's alpha (rotation around the z-axis), beta (left-to-right tilt), and gamma (front-to-back tilt) values. True False Exploring further: Chrome DevTools 5 Ways to Support High-Density Retina Displays Chrome: Simulate Mobile Devices with Device Mode 7.3 Viewport A viewport is the visible area of a web page. Before smartphones, many web pages were ©zyBooks 05/19/19 07:25 473675 designed to t a browser that was nearly 1000 pixels wide. Mobile browsersIrving wereJimenez not wide enough to show all the content without forcing the user to scroll horizontally. StrayerCIS273Spring2019 So, mobile browsers pretended the browser's viewport was 980 pixels wide, which enabled most websites to t in the mobile browser. Using a viewport that was wider than the mobile device's screen required the user to zoom-in to comfortably read the text. Figure 7.3.1: Fitting the desktop viewport into a mobile viewport https://learn.zybooks.com/zybook/StrayerCIS273Spring2019/chapter/7/print 15/30 5/19/2019 mobile viewport. CIS 273: Web Design and Development home ©zyBooks 05/19/19 07:25 473675 Irving Jimenez StrayerCIS273Spring2019 The viewport meta tag allows developers to specify a number of viewport properties, like the width of a web page. A web page optimized for mobile browsers will use the viewport meta tag to set the viewport width (width property) to the device's screen width (device-width property). Setting the viewport's width to device-width ensures the web page ts the entire width of the mobile device's screen. The initial-scale property is usually set to 1, so the web page is initially zoomed in at 100%. Figure 7.3.2: Viewport meta tag with standard parameters. A web page not optimized for mobile devices is shown in the gure below. When the viewport meta tag is not used, the default viewport of 980 pixels is used, and the page is shrunk to t the mobile viewport. When the viewport meta tag is used, the text is much larger and easier to read. ©zyBooks 05/19/19 07:25 473675 However, the web page must be scrolled horizontally to see the entire page,Irving sinceJimenez the web page StrayerCIS273Spring2019 hasn't been optimized for mobile. Figure 7.3.3: Viewport meta tag used in web page. https://learn.zybooks.com/zybook/StrayerCIS273Spring2019/chapter/7/print 16/30 5/19/2019 CIS 273: Web Design and Development home ©zyBooks 05/19/19 07:25 473675 Irving Jimenez StrayerCIS273Spring2019 PARTICIPATION ACTIVITY 7.3.1: Viewport meta tag. 1) The height property is often used in the viewport meta tag. True False 2) Best practice is to set the initialscale property to 1. True False 3) Setting the viewport meta tag property user-scalable=no disables zooming. True False ©zyBooks 05/19/19 07:25 473675 Irving Jimenez StrayerCIS273Spring2019 Developers frequently want the content of a web page to occupy a xed percentage of the viewport. Most desktop and mobile browsers support CSS viewport units. A viewport unit (vw and vh) is a percentage of the browser viewport's width or height, where 1vw = 1% of viewport width and 1vh = 1% of viewport height. CSS also de nes minimum and maximum viewport units where 1vmin = 1vw or 1vh, whichever is smaller and 1vmax = 1vw or 1vh, whichever is larger. https://learn.zybooks.com/zybook/StrayerCIS273Spring2019/chapter/7/print 17/30 5/19/2019 CIS 273: Web Design and Development home PARTICIPATION ACTIVITY 7.3.2: Viewport units. Animation captions: 1. 2. 3. 4. 5. The First has a font size of 30vw, which is 30% of the viewport width. First font grows larger as the browser gets wider. ©zyBooks 05/19/19 07:25 473675 The Second has a height of 20vh, which is 20% of the viewport height. Irving Jimenez StrayerCIS273Spring2019 Second height increases as the browser height increases. The Third has a width of 90vmin, which is 90% of the viewport width when the viewport width < height. 6. 90vmin is 90% of the viewport height when the viewport width > height. PARTICIPATION ACTIVITY 7.3.3: Viewport units. 1) If a browser viewport is 400px wide, how wide is an element with width:50vw? 400px 200px 100px 2) If a browser viewport is 300px high, how wide is an element with width:10vh? 300px 30px 150px 3) If a browser viewport is 400px wide and 300px high, how wide is an element with width:50vmax? 400px 100px ©zyBooks 05/19/19 07:25 473675 Irving Jimenez StrayerCIS273Spring2019 200px 4) If a browser viewport is 400px wide, how wide are the two inner elements? https://learn.zybooks.com/zybook/StrayerCIS273Spring2019/chapter/7/print 18/30 5/19/2019 CIS 273: Web Design and Development home A B A = 200px, B = 150px A = 150px, B = 150px ©zyBooks 05/19/19 07:25 473675 Irving Jimenez StrayerCIS273Spring2019 A = 200px, B = 200px PARTICIPATION ACTIVITY 7.3.4: Practice with viewport units. The web page below displays three quotes that are embedded in a tags using the CSS class "quote". The "quote" class uses a xed width of 180px. Resize the web page by grabbing the right edge of the rectangle surrounding the page with the mouse and moving left or right. Note that the three quotes do not change in size. Do the following: 1. Change the "quote" class's width to 20vw and re-render the page. Resize the web page width and observe how the quotes' width changes with the web page's width. 2. Add "height: 80vh;" to the "quote" class and re-render the page. Resize the web page height and observe how the height of the colored part of the quotes changes with the web page height. The text remains xed. 3. Add "over ow: auto;" to the "quote" class and re-render the page. Resize the web page height and observe how the quotes' height with the web page height, and a vertical scrollbar is added to the quotes for viewing the hidden text. 4. Change the "quote" class's width to 120vw and re-render the page. The quotes are 20% wider than the web page, so a horizontal scrollbar appears. Resize the web page width and observe how the horizontal scrollbar is always necessary to view the hidden 20% of the web page. HTML CSS ©zyBooks 05/19/19 07:25 473675 Irving Jimenez StrayerCIS273Spring2019 https://learn.zybooks.com/zybook/StrayerCIS273Spring2019/chapter/7/print 19/30 5/19/2019 CIS 273: Web Design and Development home 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 Love is friendship that has caught fire. It is quiet understanding, mutual confidence, sharing and forgiving. It is loyalty through good and bad times. It settles for less than perfection and makes allowances for human weaknesses. - Ann Landers Love is the most important thing in the world, but baseball ©zyBooks 05/19/19 07:25 473675 is pretty good too. Irving Jimenez - Yogi Berra StrayerCIS273Spring2019 Love is patient, love is kind. It does not envy, it does not boast, it is not proud. It does not dishonor others, it is not self-seeking, it is not easily angered, it keeps no record of wrongs Love does not delight in evil but rejoices with the truth Render web page Reset code Your web page CHALLENGE ACTIVITY 7.3.1: Viewport. Start ©zyBooks 05/19/19 07:25 473675 Irving Jimenez StrayerCIS273Spring2019 Add a viewport tag with user-scalable set to no, width set to device-width, and initial-scale set to 1. 1 2 3 https://learn.zybooks.com/zybook/StrayerCIS273Spring2019/chapter/7/print 20/30 5/19/2019 CIS 273: Web Design and Development home ©zyBooks 05/19/19 07:25 473675 Irving Jimenez StrayerCIS273Spring2019 1 Check 2 Next Exploring further: CSS length (MDN) Using the viewport meta tag to control layout on mobile browsers 7.4 Fluid layouts Most websites use a xed or uid layout. A xed layout uses a xed-width container to envelop the web page contents. Ex: The entire contents t inside 960px. Resizing the browser or viewing the xed web page on different sized monitors will not change the appearance of the web page. A uid layout or liquid layout uses percentages for widths to display the web page contents. Ex: The contents t inside 95% of the browser's width. Fluid web pages dynamically resize to t any browser width. Figure 7.4.1: Fixed vs. uid layout. https://learn.zybooks.com/zybook/StrayerCIS273Spring2019/chapter/7/print ©zyBooks 05/19/19 07:25 473675 Irving Jimenez StrayerCIS273Spring2019 21/30 5/19/2019 CIS 273: Web Design and Development home ©zyBooks 05/19/19 07:25 473675 Irving Jimenez StrayerCIS273Spring2019 PARTICIPATION ACTIVITY 7.4.1: Fixed vs. uid layout. 1) Which option is a disadvantage of a xed layout? Fixed layouts are the same for every desktop browser. Fixed layouts make optimal use of all available viewport space. Smaller screen resolutions may require the user to scroll horizontally to see all content. 2) Which option is a disadvantage of a uid layout? Fluid layouts stretch to t any browser width. ©zyBooks 05/19/19 07:25 473675 Irving Jimenez StrayerCIS273Spring2019 Fluid layouts require testing on a wide range of browsers with different widths. Smaller screen resolutions may require the user to scroll https://learn.zybooks.com/zybook/StrayerCIS273Spring2019/chapter/7/print 22/30 5/19/2019 CIS 273: Web Design and Development home horizontally to see all content. 3) What must be done to convert a xed layout to a uid layout? Convert containers with "px" widths into percentages. Convert font sizes to "em". ©zyBooks 05/19/19 07:25 473675 Irving Jimenez StrayerCIS273Spring2019 Use a viewport meta tag. Fluid layouts are ideal for web pages that need to be viewed on mobile devices and tablets, which vary in screen sizes. Ex: A Galaxy S4 is 360 x 640 and an iPhone 6 is 375 x 627, a Nexus 7 tablet is 600 x 960 and an iPad Mini is 768 x 1024. Using a xed layout to target any one particular device results in a website that doesn't t other devices well. PARTICIPATION ACTIVITY 7.4.2: Convert a xed layout to a uid layout. The web page below displays a wireframe with a xed layout. A wireframe is a blueprint for a web page, showing how the future content will be arranged. The CSS uses "px" values to x the width of the web page's major containers. Resize the web page width and observe how the containers' width do not change. Viewing the web page on a small mobile device requires the user to scroll horizontally to see the rest of the page. Make the following CSS modi cations to convert the xed layout into a uid layout: 1. 2. 3. 4. Change the body width to 95%. Change the nav width to 20%. Change the #main width to 60%. Change the aside width to 20%. Re-render the web page. Resize the web page width and observe how the containers resize with the web page width. HTML CSS ©zyBooks 05/19/19 07:25 473675 Irving Jimenez StrayerCIS273Spring2019 https://learn.zybooks.com/zybook/StrayerCIS273Spring2019/chapter/7/print 23/30 5/19/2019 CIS 273: Web Design and Development home 1 2 3 4 Header 5 Nav 6 Main 7 Aside 8 Footer 9 10 ©zyBooks 05/19/19 07:25 473675 Irving Jimenez StrayerCIS273Spring2019 Render web page Reset code Your web page PARTICIPATION ACTIVITY 7.4.3: Fixed vs. uid layout. Refer to the Participation Activity above. ©zyBooks 05/19/19 07:25 473675 Irving Jimenez StrayerCIS273Spring2019 1) Changing the body from "width: 95%" to "width: 95vw" has no effect on the uid layout of the web page. True False https://learn.zybooks.com/zybook/StrayerCIS273Spring2019/chapter/7/print 24/30 5/19/2019 CIS 273: Web Design and Development home 2) Changing the body from "width: 95%" to "width: 90%" also requires changing the widths of nav, main, or aside so the containers will t the new body width. True False 3) The uid layout will widen the web page contents if a mobile device viewing the web page is rotated to landscape orientation. ©zyBooks 05/19/19 07:25 473675 Irving Jimenez StrayerCIS273Spring2019 True False 4) The current uid layout of the web page is an ideal layout for a mobile device. True False The Flexible Box or exbox is a CSS layout mode that provides an e cient way to lay out elements in a container so the elements behave predictably when the container is resized or viewed on different screen sizes. Many developers nd the exbox layout easier to use than oating elements when creating uid layouts. Most desktop and mobile browsers support exbox layouts. A ex container is an element that has the CSS property display set to flex or inline-flex. Ex: Flex containers hold ex items. A ex item is an element inside a ex container that is positioned and sized according to various CSS exbox properties. Figure 7.4.2: Flexbox container and items. ©zyBooks 05/19/19 07:25 473675 Irving Jimenez StrayerCIS273Spring2019 https://learn.zybooks.com/zybook/StrayerCIS273Spring2019/chapter/7/print 25/30 5/19/2019 CIS 273: Web Design and Development home PARTICIPATION ACTIVITY ex-basis 7.4.4: Flexbox properties/attributes. justify-content ex-grow ex ex-direction ex-shrink ©zyBooks 05/19/19 07:25 473675 Irving Jimenez StrayerCIS273Spring2019 Flex container property that de nes the alignment of the ex items. Flex item property that de nes the default size of the item before the remaining space is distributed. Flex container property that indicates which direction the ex items are placed in the ex container. Flex item property that indicates the growth factor of the ex item. Flex item property that indicates the shrink factor of the ex item. Flex item property that indicates ex-grow, ex-shrink, and exbasis combined. Reset PARTICIPATION ACTIVITY 7.4.5: Flexbox layout. ©zyBooks 05/19/19 07:25 473675 Irving Jimenez StrayerCIS273Spring2019 Animation captions: 1. spans entire width of . 2. with id container uses " ex-direction: row" to place ex items on the same row. https://learn.zybooks.com/zybook/StrayerCIS273Spring2019/chapter/7/print 26/30 5/19/2019 CIS 273: Web Design and Development home 3. , and all have ex property ex-grow = 0, so all three ex items grow at the same rate when the browser is made wider. 4. , and all have ex property ex-shrink = 1, so all three ex items shrink at the same rate when the browser is resized. 5. occupies 20% of the row, occupies 60%, and occupies 20%. 20% + 60% + 20% = 100% of the row. 6. spans entire width of . ©zyBooks 05/19/19 07:25 473675 Irving Jimenez StrayerCIS273Spring2019 PARTICIPATION ACTIVITY 7.4.6: Flexbox layout example. Refer to the animation above. 1) What attribute value or property makes the Main ex item wider than Nav and Aside? ex-grow ex-basis ex-shrink 2) How do the changes below affect the web page? nav { flex: 1 1 auto; } #main { flex: 3.5 1 auto; } aside { flex: 1 1 auto; } All three ex items are equal width. Nav and Aside are wider than Main. The layout will be nearly the same as before. 3) How do the changes below affect the web page? #container { display: flex; flexdirection: row; justify-content: center; } nav { flex: 0 1 auto; } #main { flex: 0 1 auto; } aside { flex: 0 1 auto; } ©zyBooks 05/19/19 07:25 473675 Irving Jimenez StrayerCIS273Spring2019 All three ex items are default width and centered https://learn.zybooks.com/zybook/StrayerCIS273Spring2019/chapter/7/print 27/30 5/19/2019 CIS 273: Web Design and Development home horizontally in the ex container. Nav and aside are wider than main. All three ex items will be default width, aligned to the left. 4) How does the change below affect the web page? ©zyBooks 05/19/19 07:25 473675 Irving Jimenez StrayerCIS273Spring2019 #container { display: flex; flexdirection: column; } No changes. All three ex items are stacked on top of one another. The direction of the ex items is reversed. PARTICIPATION ACTIVITY 7.4.7: Practice with exbox layout. The web page below uses a exbox layout to display four elements. Make the following modi cations: 1. Add " ex-basis: 20%;" to the .item class. Re-render the web page and verify that each ex item now occupies 20% of the ex container. 2. Add "justify-content: ex-end;" to the .container class. Re-render the web page and verify that the ex items are now aligned against the right edge of the ex container. Other values to try: ex-start, center, space-between, space-around 3. Add " ex-direction: row-reverse;" to the .container class. Re-render the web page and verify that the ex items are arranged in the opposite order, from D to A. Other values to try: column, column-reverse 4. Add " ex-grow:1" to the C using an inline style:
Purchase answer to see full attachment