CSc 337 LECTURE 5 GRID LAYOUT AND JAVASCRIPT
![Arrays var name = []; // empty array var name = [value, . .](https://slidetodoc.com/presentation_image_h/96396b134c76f2430fcad5ca79c2f3de/image-36.jpg "Arrays var name = []; // empty array var name = [value, . .")
![Array methods var a = ["Stef", "Jason"]; a. push("Brian"); a. unshift("Kelly"); a. pop(); a.](https://slidetodoc.com/presentation_image_h/96396b134c76f2430fcad5ca79c2f3de/image-37.jpg "Array methods var a = [\"Stef\", \"Jason\"]; a. push(\"Brian\"); a. unshift(\"Kelly\"); a. pop(); a.")
- Slides: 39
CSc 337 LECTURE 5: GRID LAYOUT AND JAVASCRIPT
Layouts Flexbox - designed for one-dimensional layouts Grid - designed for two-dimensional layouts
Grid Layout Use if you want rows and columns Works similarly to Flexbox ◦ outer container display: grid ◦ inner items end up in a grid
Grid Layout By default all items are in one column to change the number of rows and columns specify the grid template in the container CSS: grid-template-rows: width … grid-template-columns: width … width is the width of the column write a width as many times as columns you want
Grid Layout Example: . container { display: grid; grid-template-rows: 200 px; grid-template-columns: 200 px; } Creates a grid with three rows and three columns
fr Unit Calculates percentages of the container for you Example: grid-template-rows: 2 fr 3 fr gives you 2 rows first takes up 2/5 of vertical space second takes up 3/5 of vertical space
Specifying many columns Tedious to write out widths many times repeat Example: grid-template-rows: repeat(3, 1 fr); Creates 3 rows of equal height
Template shorthand Create a grid template in one line: grid-template: rows / columns; Example: grid-template: repeat(3, 1 fr) / repeat(3, 1 fr);
Alignment vs. float vs flexbox vs grid vs. position 1. if possible, lay out an element by aligning its content • horizontal alignment: text-align • set this on a block element; it aligns the content within it (not the block element itself) • vertical alignment: vertical-align • set this on an inline element, and it aligns it vertically within its containing element 2. if alignment won't work and you want a one-dimensional layout try flexbox 3. if alignment won't work and you want a two-dimensional layout try grid 4. if flexbox and grid won't work, try floating 5. if floating won't work, try positioning the element • absolute/fixed positioning are a last resort and should not be overused
The display property h 2 { display: inline; background-color: yellow; } This is a heading This is another heading property display CSS output description sets the type of CSS box model an element is displayed with • values: none, inline, block, run-in, compact, . . . • use sparingly, because it can radically alter the page layout
Displaying block elements as inline <ul id="topmenu"> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> </ul> HTML #topmenu li { display: inline; border: 2 px solid gray; margin-right: 1 em; } CSS Item 1 Item 2 Item 3 output • lists and other block elements can be displayed inline • flow left-to-right on same line • width is determined by content (block elements are 100% of page width)
Details about inline boxes • size properties (width, height, min-width, etc. ) are ignored for inline boxes • margin-top and margin-bottom are ignored, but marginleft and margin-right are not • the containing block box's text-align property controls horizontal position of inline boxes within it • text-align does not align block boxes within the page • each inline box's vertical-align property aligns it vertically within its block box
Exercise - Boxes Generate the appearance on the next slide, starting from this HTML and CSS code. <div id="outer"> <div class="box"></div> <div class="box"></div> #outer { border: 2 px dashed black; padding: 10 px; }. box { width: 100 px; height: 100 px; background-color: black; margin: 10 px; }
Exercise - Boxes
Exercise - nested boxes Given the code below, write boxes. css to make the appearance on the next slide. <!DOCTYPE html> <head> <link href="boxes. css" type="text/css" rel="stylesheet" /> </head> <body> <div id="outer-box"> <div id="inner-box"></div> </body> </html>
Exercise - nested boxes The outer border of the box is red, the inner border of the box is black, and the inner background color of the box is yellow. Both the outer and inner borders have a width of 50 pixels. The yellow portion of the box has a width and height of 200 pixels. The overall box has a width and height of 400 pixels.
Combination layouts Most pages use many different layouts Combine and nest as needed. Example: https: //www. cs. arizona. edu/
Java. Script It's time to make our pages interactive!
Client-side scripting • client-side script: code runs in browser after page is sent back from server often this code manipulates the page or responds to user actions
What is Java. Script? • 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 user click) § get information about a user's computer (ex: browser type) § perform calculations on user's computer (ex: form validation) • a web standard (but not supported identically by all browsers) • NOT related to Java other than by name and some syntactic similarities
Java. Script vs. Java • interpreted like Python, not compiled like Java • more relaxed syntax and rules § "looser" data types like Python § variables don't need to be declared like Python § errors often silent (few exceptions) + = Java. Script • key construct is the function rather than the class § "first-class" functions are used in many situations • contained within a web page and integrates with its HTML/CSS content
Linking to a Java. Script file: script <script src="filename" type="text/javascript"></script> <script src="example. js" 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)
A Java. Script statement: alert("message"); alert("IE 6 detected. JS Suck-mode enabled. "); JS output • a JS command that pops up a dialog box with a message
Variables and types var name = expression; var age = 32; var weight = 127. 4; var client. Name = "Connie Client"; JS JS • variables are declared with the var keyword (case sensitive) • types are not specified, but JS does have types ("loosely typed") • Number, Boolean, String, Array, Object, Function, Null, Undefined • can find out a variable's type by calling typeof
Number type var enrollment = 99; var median. Grade = 2. 8; var credits = 5 + 4 + (2 * 3); • integers and real numbers are the same type (no int vs. double) • same operators: + - * / % ++ -- = += -= *= /= %= • similar precedence to Java • many operators auto-convert types: "2" * 3 is 6 JS
String type var s = "Connie Client"; f. Name = s. substring(0, s. index. Of(" ")); len = s. length; s 2 = 'Melvin Merchant'; // "Connie" // 13 // can use "" or ' ' • methods: char. At, char. Code. At, from. Char. Code, index. Of, last. Index. Of, replace, split, substring, to. Lower. Case, to. Upper. Case • char. At returns a one-letter String (there is no char type) • length property (not a method as in Java) • concatenation with + : 1 + 1 is 2, but "1" + 1 is "11"
More about String • escape sequences behave as in Java: ' " & n t \ • to convert between numbers and Strings: var var var count = 10; s 1 = "" + count; s 2 = count + " bananas, ah ah!"; n 1 = parse. Int("42 is the answer"); n 2 = parse. Float("booyah"); // // "10" "10 bananas, ah ah!" 42 Na. N • to access characters of a String, use [index] or char. At: var first. Letter = s[0]; var first. Letter = s. char. At(0); var last. Letter = s. char. At(s. length - 1);
Comments (same as Java ) // single-line comment /* multi-line comment */ • identical to Java's comment syntax • recall: 4 comment syntaxes • HTML: <!-- comment --> • CSS/JS: /* comment */ • Java/JS: // comment JS
for loop (same as Java) for (initialization; condition; update) { statements; } var sum = 0; for (var i = 0; i < 100; i++) { sum = sum + i; } var s 1 = "hello"; var s 2 = ""; for (var i = 0; i < s. length; i++) { s 2 += s 1[i] + s 1[i]; } // s 2 stores "hheelllloo“ JS JS JS
Math object var rand 1 to 10 = Math. floor(Math. random() * 10 + 1); var three = Math. floor(Math. PI); JS • methods: abs, ceil, cos, floor, log, max, min, pow, random, round, sin, sqrt, tan • properties: E, PI
Logical operators • Relational: > < >= <= • Logical: && || ! • Equality: == != === !== • most logical operators automatically convert types. These are all true: • 5 < "7" • 42 == 42. 0 • "5. 0" == 5 • The === and !== are strict equality tests; checks both type and value: • "5. 0" === 5 is false
Boolean type var i. Like. JS = true; var ie. Is. Good = "IE 6" > 0; if ("web dev is great") { if (0) { /* false */ } // false /* true */ } • any value can be used as a Boolean • "falsey" values: 0, 0. 0, Na. N, "", null, and undefined • "truthy" values: anything else • converting a value into a Boolean explicitly: • var bool. Value = Boolean(other. Value); • var bool. Value = !!(other. Value); JS
Special values: null and undefined var ned = null; var benson = 9; var caroline; // at this point in the code, // ned is null // benson's 9 // caroline is undefined • undefined : has not been declared, does not exist • null : exists, but was specifically assigned an empty or null value • Why does Java. Script have both of these? JS
if/else statement (same as Java) if (condition) { statements; } else { statements; } • identical structure to Java's if/else statement • Java. Script allows almost anything as a condition JS
while loops (same as Java) while (condition) { statements; } do { statements; } while (condition); JS JS • break and continue keywords also behave as in Java but do not use them in this class!
Arrays var name = []; // empty array var name = [value, . . . , value]; // pre-filled name[index] = value; // store element PHP var ducks = ["Huey", "Dewey", "Louie"]; var stooges = []; stooges[0] = "Larry"; stooges[1] = "Moe"; stooges[4] = "Curly"; stooges[4] = "Shemp"; // // // stooges. length is is is 0 1 2 5 5 • two ways to initialize an array • length property (grows as needed when elements are added) PHP
Array methods var a = ["Stef", "Jason"]; a. push("Brian"); a. unshift("Kelly"); a. pop(); a. shift(); a. sort(); // // // Stef, Jason, Brian Kelly, Stef, Jason, Stef JS • array serves as many data structures: list, queue, stack, . . . • methods: concat, join, pop, push, reverse, shift, slice, sort, splice, to. S tring, unshift • push and pop add / remove from back • unshift and shift add / remove from front • shift and pop return the element that is removed
Splitting strings: split and join var s = "the quick brown fox"; var a = s. split(" "); // ["the", "quick", "brown", "fox"] a. reverse(); // ["fox", "brown", "quick", "the"] s = a. join("!"); // "fox!brown!quick!the“ JS • split breaks apart a string into an array using a delimiter • can also be used with regular expressions surrounded by /: var a = s. split(/[ t]+/); • join merges an array into a single string, placing a delimiter between them
Defining functions function name() { statement ; . . . statement ; } function my. Function() { alert("Hello!"); alert("How are you? "); } JS 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
Csc 337
Csc 337
Faa field approval
Pga vs lga
01:640:244 lecture notes - lecture 15: plat, idah, farad
337 form example
337 form example
337info
Adxl 337
Layout ritel adalah
Awt layout
Layout visual merchandising
Grid bag layout
Numerator vs denominator layout
Language
Smil head layout root-layout
Fixed vs fluid layout
Inline internal and external javascript
Asynchronous javascript and xml
What is ajax
Msdn admin
Stosujac petle i jedna instrukcje document.write
Operatory w js
Slidetodoc.com
Javascript kmeans
Pada tahun 1995 javascript diperkenalkan pertama kali oleh
Alert(document.cookie)
Okno dialogowe javascript
Struktura e kontrollit ne javascript
Java vs javascript
Inside which html element so we put the javascript?
Cognos mashup services
Javascript zadaci
Fundamentos de javascript
Jscript vs javascript
Dynamic documents with javascript
Expressions régulières javascript
Miscellaneous operators in javascript
Document
Javascript origin
