1 / 31

Web primer: HTML, CSS, JS

CS569 Selected Topics in Software Engineering Spring 2012. Web primer: HTML, CSS, JS. Why you need to know HTML, CSS and JS…. They are foundational to how information is displayed and manipulated on the web

yama
Download Presentation

Web primer: HTML, CSS, JS

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. CS569 Selected Topics in Software EngineeringSpring 2012 Web primer:HTML, CSS, JS

  2. Why you need to knowHTML, CSS and JS… • They are foundational to how information is displayed and manipulated on the web • So they are useful for you to know about even if you become a web developer instead of a mobile or cloud developer. • They are foundational to many mobile+cloud technologies… • … including Google App Engine and Appcelerator Titanium, which are the 2 techs I will use in demos

  3. Big picture • User types URL into browser (or clicks link) • Browser calls up the server, sends URL • Server figures out how to handle request • Maybe just sends a file back • Maybe calls some custom code (JSP or servlet) • Server sends HTML+CS+JS to browser • Browser interprets HTML+CS+JS • User interacts with page and is happy

  4. Big picture Browser Server Servlet Data store URL Request Query, etc Data HTML+CS+JS HTML+CS+JS

  5. HyperText Markup Language (HTML) • The notation used to describe web pages • Tags enclosed in angle brackets <> indicate the parts of the web page • In the 90’s web browsers interpreted HTML (and CSS and JS) very differently • Much much much more consistent since HTML4

  6. Example <html> <b>Welcome to CS569</b><br> It is nice to see you all here today.<BR><BR> I hope that you are learning. </html> <html> </html> indicates the beginning and end of the web page <b> </b> indicates a bolded part of the page <br> is equivalent to a newline

  7. More realistic example <html><head><title>Hi!!!</title></head><body> <h1>Welcome to CS569</h1> <table> <tr><td>Student<td>Grade <tr><td>Alice<td>A <tr><td>Bob<td>B </table> </body></html> <head> indicates the page header (e.g., metadata) <h1> big heading <table> table, <tr> row, <td> cell

  8. HTML pointers • Not case sensitive • Most of the time you must include “end tags” • Use indentation and blank lines to enhance readability, like any programming language • Some tags you should know: UL, LI, DIV, SPAN, TABLE, TR, TD, BFORM, INPUT, SELECT, OPTION HEAD, BODY, SCRIPT, STYLE

  9. Cascading Style Sheets (CSS) • CSS controls the appearance of tags • Can be mixed into HTML or stored separately • CSS instructions override the default appearance of tags in the browser • CSS instructions can override one another (hence the name “cascading”)

  10. Example <html> <b style=“color:red”>Welcome to CS569</b><br> It is nice to see you all here today.<BR><BR> <span style=“color: #ff0000; font-weight: bold”> I hope that you are learning. </span> </html> style attribute denotes CSS mixed into HTML color parameter specifies text color; font-weight is usually normal or bold <span> just means “here is a section that I want to style with CSS”

  11. Reusable CSS <html><link rel=stylesheethref=“style.css”> <b id=hdr>Welcome to CS569</b><br> It is nice to see you all here today.<BR><BR> <span class=msg>I hope that you are learning.</span> </html> #hdr { color: red } .msg { color: blue; font-weight: bold } <link> references the CSS file (shown below) id gives a name to a tag class gives a category #id and .class in the CSS assign style to tags

  12. CSS pointers • CSS assigned directly to tags (style attribute mixed with HTML) overrides anything defined in the CSS files • Other options (for your experimentation): • CSS files can be embedded directly into <head> • Multiple CSS files can be referenced • CSS files can import other CSS files

  13. Other CSS to read about • width, height, padding, margin, display, color, background-color, cursor, font-weight, font-family, font-size • If you’re really interested in this, read about how you can assign CSS at runtime through the .style property of tags. • Though this is more of a web development form of DHTML than a mobile+cloud thing.

  14. JavaScript (JS) • JS enables your browser to interact with the user without making a “round-trip” to server • Can interact with the web page (represented as a “document object”, aka “document object model” or “DOM) • To read values from forms • To catch user interface events • To insert elements into the page • To change or remove elements

  15. A few simple examples • Show an alert box • Detect user input and respond • (e.g., to validate input and display message)(e.g., to handle events and display output) • Collect user input, retrieve more data

  16. About debugging • Personally, “alert” has always worked great for me (the browser-based “println”) • Or document.write(), which is useful for generating HTML when the page is rendered • Some people prefer to use Firebug • Sometimes I use Google Chrome’s developer tools to inspect the page at runtime

  17. Data structures • You can use arrays varmyarr = [4, 5, 2.5, “bugs”, null]; // FYI, myarr[1] === 5 • You can use associative arrays / objects varmyobj = {id:4, age:5, liabilityK:2.5, nickname:”bugs”, advisory:null}; // FYI, myobj.age === myobj[“age”] === 5

  18. Regular expressions • Simple thing to do is a “test”: /^\-?[0-9]+$/.test(“8883”) • / and / delimit the express • ^ means “must begin at start of string” • $ means “and must end at end of string” • \- means a hyphen (has to be escaped with \) • ? Is 0 or 1, + is 1 or more, * is 0 or more • [0-9] means “any digit”

  19. Useful facts about JS functions • Functions are objects • So references to functions can be passed around • And functions can be defined inside functions • Functions can be named members • And functions can have members • Function variables are subject to closure. • Which can be handy for defining private variables.

  20. Functions are objects • All functions are objects, and references to functions can be passed like C pointers varmyfunc = function(a,b) {return a+" "+b;}; varrv = myfunc("happy", "birthday"); alert(rv);

  21. References to functions are handy • For example, some JS APIs expect you to pass them a reference to a function. For example: <span id=prompt>Name:</span><input id=nm> <script> varfnCheck = function() { document.getElementById("prompt").innerHTML = (document.getElementById("nm").value == '')? "Enter a name!!!":"Name:"; setTimeout(fnCheck, 1000); } setTimeout(fnCheck, 10000); </script>

  22. Functions can be defined inside functions • When a function is called, it can define more functions inside of it function setupTimers() { for (var i = 1; i <= 3; i++) { var timer = function() {alert("wake up!");} setTimeout(timer, i*10000); } } setupTimers();

  23. Functions can be members(aka “methods”) • You can assign a function to a slot in an associative array / object. • The function can reference the containing object via the “this” variable, as in Java. var obj = { ctr:0, incr:function() {return ++this.ctr;} }; for (var i = 0; i < 10; i++) document.write(obj.incr()+" ");

  24. Functions can have members • Functions are objects, right? So they can have members if they are instantiated (with “new”) • This can be confusing to some programmers and is therefore often avoided (which is ok). varCounterObj = function() { this.ctr = 0; this.incr = function() {return ++this.ctr;}; }; varcobj = new CounterObj(); for (var i = 0; i < 10; i++) document.write(cobj.incr()+" "); c

  25. Function variables are subject to closure. • When a function is invoked, it canaccess any variable that was in scope when the function was defined. • If variable x is available when function is created, then variable x should be available at invocation. • This can be very good or very annoying.

  26. Good closure: when you want to create private or temp variables • The “ctr” variable below is only visible to the incr function… effectively, it is a private variable. varCounterObj = function() { var ctr = 0; this.incr = function() {return ++ctr;}; }; var cobj = new CounterObj(); for (var i = 0; i < 10; i++) document.write(cobj.incr()+" ");

  27. A cleaner way to use private variables (no need for the “new” keyword) • Function defines private vars, then returns an object that contains functionality as members. varcounterObj = function() { var ctr = 0; return {incr: function() {return ++ctr;}} }; var cobj = counterObj(); for (var i = 0; i < 10; i++) document.write(cobj.incr()+" ");

  28. You can also use nameless functions to avoid polluting the namespace. • For example, this version of the example avoids polluting the namespace with “counterObj”. (function() { varcounterObj = function() { var ctr = 0; return {incr: function() {return ++ctr;}} }; var cobj = counterObj(); for (var i = 0; i < 10; i++) document.write(cobj.incr()+" "); })();

  29. Bad closure: when several functions access the same variable • All the “timer” functions access the same variable i • Closure means variables are not copied—they’re shared <script> function setupTimers() { for (var i = 1; i <= 3; i++) { var timer = function() {alert("wake up! "+i);} setTimeout(timer, i*10000); } } setupTimers(); </script>

  30. Working around closure • Make a new variable for each function. • Each new variable is a local variable. function setupTimers() { for (var i = 1; i <= 3; i++) { var makeTimer = function(j) { var timer = function() {alert("wake up! "+j);} setTimeout(timer, j*1000); }; makeTimer(i); } } setupTimers();

  31. What is next for you • Get “JavaScript: The Good Parts” • Over the next few weeks, read chapter 3, chapter 4, Appendix A, and Appendix B • If you don’t know regexps, also read chapter 7 • You can live without the “prototype” feature of JS, but if you want inheritance, also read chapter 5 • After reading it, try stuff out in your browser. • If you already know all that stuff, then spend some time reading the web about AJAX.

More Related