Info + Web Tech Course

1. Info + Web Tech Course • Web Programming • Anselm Spoerri PhD (MIT) • SC&I @ Rutgers University • aspoerri@rutgers.edu

2. Lecture 2 - Overview • Course Assignments • Quizzes: start on Sat and end on Sun • Quiz 1: HTML and CSS • JavaScript • Basics • Ex1 Lab • What to Do BEFORE Next Class • JavaScript videos in Week 3 (in green)

3. Atom Text Editor • Snippets / Macros • html ... Tab • Loren .. • Project • Folders from different locations on HD • Multiple Panes • Navigate to Line or Symbol or Bookmark • Control G • Control / Command R • Folding • Edit > Folding > ... • Indentation • Edit > Lines > Auto Indent • ctrl / cmd + [ or ] • Comments • Edit > Toggle Comments ctrl / cmd+ • Selection and Cursors • Single | Double | Triple | SHIFT | CTRL • Multiple Cursors: ctrl / cmd + click • Find + Replace

4. Ex1 Lab – Create Layout • HTML5 Layout + Internal CSS • header | navigation | content | sidebar | footer • image and content flows around it • sidebar right floated and other content flows around it • http://comminfo.rutgers.edu/~aspoerri/Teaching/WebProg/demos/images/

5. Ex1 Lab – Add Buttons • Buttons • Assign unique ids

6. JavaScript Basics • syntax • js_statements • js_variables • js_functions • test yourself • Scope - js_scope • Variable declared outside function, becomes GLOBAL. • Global variable has global scope: All scripts and functions on page can access it. • Variables declared within a JavaScript function, become LOCAL to the function. • Local variables have local scope: They can only be accessed within the function. • Variables created without the keyword var, are always global, even if they are created inside a function. • Global variables live as long as your application (window / web page) lives. • Local variables have short lives. They are created when the function is invoked, and deleted when the function is finished.

7. JavaScript Basics • js_events • test yourself • js_if_else • test yourself • js_arrays • test yourself • Debugging - js_debugging • Best Practices - js_best_practices • Avoid Global Variables ... Use local variables instead, and learn how to use closures. • Always Declare Local Variables • Declarations on Top • Initialize Variables • Never Declare Number, String, or Boolean Objects

8. Ex1 Lab – Interactivity + Function + Array + Counter • Add Interactivity to Buttons • onclick • Create Function • Name function “changeDisplay” • Specify parameter = button name • Create Global Array • Increment array when specific button is pressed • Button displays Counter • Update button text to show how many times it has been pressed • Only increment counter if different button has been pressed

9. Document Object Model

10. JavaScript HTML DOM • DOM Document Object https://www.w3schools.com/jsref/dom_obj_document.asp • js_htmldom_methods • js_htmldom_elements test yourself • js_htmldom_html test yourself • js_htmldom_css test yourself DOM Style Object: better way for setting of inline CSS since it does not overwrite other CSS properties in style attribute • js_htmldom_events test yourself • js_htmldom_eventlistener • Reference: jsref/dom_obj_style

11. Ex1 Lab – Change Layout: Linear vs. Right Sidebar • Create “Linear Flow” Layout • Clicking on “Linear” button will create “linear flow” layout • Modify DOM by assigning CSS rules to specific elements • Create “Right Sidebar” Layout • Clicking on “Right Sidebar” button will create “right sidebar” next to 2nd content • Modify DOM by assigning CSS rules to specific elements

12. Prerequisites • JavaScript • W3Schools: http://www.w3schools.com/js/default.asp examples whereto syntax statements variables assignment datatypes functions objects scope events arrays array_methods if_else loop_for errors debugging best_practices mistakes Quiz