Download presentation
Presentation is loading. Please wait.
1
HTML and Basic JavaScript
Dr. Charles W. Kann III
2
Overview What is HTML? Basic JavaScript programming HTML forms Events
Image Maps
3
Basic HTML and Javascript
4
What is HTML History of HTML? Required tags in HTML 5
What are the sections of an HTML document Creating and validating an HTML page TOC
5
History of HTML HTML Hyper Text Markup Language
Comes from Standard Generalized Markup Language (SGML) Extended and Standardized by eXtensible Markup Language (XML) Document Type Definition (DTD) Latest iteration of HTML is HTML 5 TOC
6
Required Tags in HTML 5 HTML 5 requires the following tags
<!doctype html> <html>…</html> <head>…<title></title></head> <body></body> Should include <meta charset="UTF-8">, but do not need to For most assignments, some flexibility is allowed. But just because HTML allows it does not mean it is correct, or will be marked correct. TOC
7
Parts of an HTML document
There are two parts to every HTML document HEAD Contains meta data about the page. These are not displayed on page, or processed as part of executing or rendering the page BODY What goes on the page, or is executed or rendered as part of the page. TOC
8
HMTL Tags and attributes
HTML tags are how document elements are defined in HTML <tag>…</tag> for container tags Close tags in the order you open them! <tag /> for tags that are complete in themselves (eg. meta charset). Note that the doctype tag is weird in that you cannot close it… You should always close tags, if HTML requires it or not Attributes are how parameters are passed to tags. Think of them as parameters to a function <meta charset="UTF-8“ /> TOC
9
HTML page <!doctype html> <html> <head> <meta charset="UTF-8“ /> <title>Testing</title> </head> <body> …body of page </body> </html> TOC
10
HTML5 Validation https://validator.w3.org/
Note: HTML accepts indenting, and all tags are case insensitive. So you can really screw up the way the page looks. I never understand why, but students think that because they are doing assembly code or HTML, all rules of good coding behavior are suspended. Everything you learned in CS111/112/216 about good code applies! I do not need to tell you, you should just know. So points off on an assignment for bad/poorly written document is not disputable! TOC
11
HTML Comments <!-- Author: Charles Kann Purpose: Example page History: 12/16/ Initial release --> TOC
12
HTML Editor Choose one. Everyone is going to fight over which is their favorite. I have no dog in that hunt. Let me know if you have one that is particularly great. I will let the students present them, and each person can choose one. TOC
13
Basic JavaScript
14
JavaScript and Semicolons
Every statement in JavaScript should end in a semicolon (like Java) JavaScript normally doesn’t care if you include them or not. In CS103 we do not include because the student get them wrong, e.g. if(a==b); Here, I expect you to use them… I am the exception, because CS103 has mucked with my brain… TOC
15
<script></script> tags
All JavaScript code goes inside of <script></script> tags You do not need to include the language attribute in the script tag TOC
16
Comments in JavaScript
// - line comment /* … */ - block comment Use block comments for function/file preambles, line comments for comments inside a function. TOC
17
JavaScript and case sensitivity
HTML is not case sensitive JavaScript (like Java) is case sensitive. This is not as straight forward as it first looks, but remember it. TOC
18
JavaScript and var Keyword
JavaScript does not require you to use var keywords for variables. If it is not included, global scope is assumed. We are going to ALWAYS use var for every variable we create. We WANT to always know the scope of variables. Period. If I take points off on an assignment or test, and progressively more points as we cover more materials, you can complain to a hand. Multiple complaints will lead to more points off.
19
JavaScript data typing
JavaScript uses dynamic data typing. The datatype of a variable is determined by the type of the last variable it was last set to. Example: var a = “abc”; // a is a string a = 7; // now a is a number TOC
20
JavaScript Data types Six data types that are primitives: Object
Boolean: true/false Null: variable is defined, but no value is given (like an empty set) Undefined: variable is not defined (like a null set) Number: IEEE 754 double precision number String: Immutable text value Symbol (new in ECMAScript 6) : a unique and immutable primitive value and may be used as the key of an Object property Object TOC
21
Simple Input and Output in JavaScript
alert(string message) – creates a modal dialog box outputting the message. Good for debug printing. string s = creates a model dialog box prompt(string message, string prompt. Prints the message and prompts the users for input. The input is returned from the function. NOTE: There is no class String. “string” means you pass a string… Hence why string is used, not String console.log – Outputs information to the console. TOC
22
Evaluating JavaScript
The eval function evaluates JavaScript statements (any valid statement) and returns a number. If you need a number from a prompt call, do “var ans = eval(prompt(s1, s2));” TOC
23
Debugging JavaScript Always check the console before anything else.
When an error occurs, everything is likely to break… Do not panic Check to make sure you have the correct file open…. Look at the last changes you made… Really, you have heard this since day 1 in CS111, but it is time to believe it! Write code in increments, and test!
24
Simple JavaScript Programming
Sequence Selection Iteration Functions Scoping Arrays TOC
25
Sequence in JavaScript
Sequence is just that, one statement after another. That is what it is in JavaScript… JavaScript uses threads, and lots of things are going on asynchronously… Be careful how you put together multiple <script> sections. Generally script tags execute one after another, but I have seen weird behaviors This can obviously be impacted by events, such as onload, that we will see later. Notice when the text is rendered in the following example It might be different in different browsers, I have no idea… TOC
26
Sequence Example <!doctype html> <html> <head> <title>Testing</title> </head> <body> <script> alert("First"); </script> Render some text alert("Second"); </body> </html> TOC
27
Selection in JavaScript
if case Both have the same Java syntax (as horrible as the case statement is in Java, it is just as bad in JavaScript… I have never used it in Java, JavaScript, or C/C++, it only leads to problems). In JavaScript, the “=“ and “==“ are NEVER checked for. Java produces an error if “=“ is incorrectly used for “==“ (except boolean) When you understand JavaScript, you will know providing that check is unreasonable in JavaScript. TOC
28
JavaScript Iteration TOC for while do…while
All supported and just like Java (except for datatype issues) All iterations defined at: For syntax for object iterators (Arrays also….) for … in // property name for … of // property value foreach() // function for each member of an array. TOC
29
JavaScript Functions JavaScript functions (not methods) can be in the head (if they are meta data) or the body (if they are executed as the page is rendered). JavaScript supports anonymous and lamba functions. Scoping in JavaScript and HTML is: JavaScript function scope JavaScript global scope (default if nothing specified) HTML global scope, part of the DOM. We will ALWAYS use var statements (period, I want to use explicit scope). Let’s understand this in context
30
First Function <!doctype html> <html> <head> <title>HTML Form 1</title> <script> function mph(distance, time) { var speed = distance / time; return speed; } </script> </head> <body> <input type="text" name="inHTMLScope" value="Set"/> var miles = prompt("Enter miles, -1 to end"); while (miles != -1) { var hours = prompt("Enter time in hours"); alert("mph = " + mph(miles, hours)); miles = prompt("Enter miles, -1 to end"); alert(document.getElementsByName("inHTMLScope")[0].value); </body> </html>
31
About First Function Defined in head Called explicitly in the code.
distance, time function scoped Called explicitly in the code. miles, hours global scoped Note scoping and getElementsByName, getElementById Name is not unique (returns array) Id must be unique (returns variable)
32
IIFE and scope Functions are first class objects
Immediately Invoked Function Expression Way to produce lexical scoping using JavaScript Functional scope Sometimes called anonymous scope Sometimes mistakenly conflated with lambda functions
33
Anonymous functions (IFFY)
<!doctype html> <html> <head> <title>HTML Form 1</title> </head> <body onload="(function() { alert('page loaded');})()" > </body> </html>
34
Better Example (no JavaScript in HTML code)
<!doctype html> <html> <head> <title>HTML Form 1</title> <script> window.onload=function() { alert('page loaded'); } </script> </head> <body> </body> </html>
35
JavaScript Arrays Arrays are (somewhat) like an ArrayList is Java, but with array syntax (e.g you can use [], etc). You are just responsible for knowing how to use them as arrays, so other than syntax they will behave like Java Arrays Just as a word of warning, JavaScript arrays really are special cases of an object, with an integer for a key. Be careful about inferring things about them based on your knowledge of Java or MIPS arrays.
![JavaScript Arrays Arrays are (somewhat) like an ArrayList is Java, but with array syntax (e.g you can use [], etc).](http://slideplayer.com/slide/13423241/80/images/35/JavaScript+Arrays+Arrays+are+%28somewhat%29+like+an+ArrayList+is+Java%2C+but+with+array+syntax+%28e.g+you+can+use+%5B%5D%2C+etc%29..jpg "You are just responsible for knowing how to use them as arrays, so other than syntax they will behave like Java Arrays. Just as a word of warning, JavaScript arrays really are special cases of an object, with an integer for a key. Be careful about inferring things about them based on your knowledge of Java or MIPS arrays.")
36
Sorting Arrays (the compare function)
var cars = [ {type:"Volvo", year:2016}, {type:"Saab", year:2001}, {type:"BMW", year:2010}]; cars.sort(function(a, b){return a.year - b.year}); // Sort by year cars.sort(function(a, b){ // Sort by car name var x = a.type.toLowerCase(); var y = b.type.toLowerCase(); if (x < y) {return -1;} if (x > y) {return 1;} return 0; });
37
The compare function… The compare function is an example of what principal we just learned about?
38
forEach function forEach iterates through an array, executing a function on each object. The next slide is an example with an anonymous function. Remember, arrays are objects where the index is just the property name. So forEach, for…in, and for…of are applicable to all objects!
39
forEach Example var s=["First", "Second", "Third"]; s.forEach(function(e) { alert(e); });
![forEach Example var s=[ First , Second , Third ]; s.forEach(function(e) { alert(e); });](http://slideplayer.com/slide/13423241/80/images/39/forEach+Example+var+s%3D%5B+First+%2C+Second+%2C+Third+%5D%3B+s.forEach%28function%28e%29+%7B+alert%28e%29%3B+%7D%29%3B.jpg "forEach Example var s=[ First , Second , Third ]; s.forEach(function(e) { alert(e); });")
40
HTML FORMS TOC
41
HTML Input Elements We will only use HTML5 input elements directly. These render differently in different browsers. If you want to style them more nicely or more consistently, you can use JQuery, BootStrap, or write you own styling.
42
HTML Form Background Forms are made up of input elements
Often in a “form” block, but that is if we want to submit the form as a unit. We will process the individual fields. Input tags are used for input elements. The type attribute tells it what type of input element to create. Names are not unique (we will use this for radio buttons). Id must be unique. Names, ids, etc. are case sensitive (they are JavaScript components).
43
Checkboxes Square Can choose 1 or more (not grouped)
Each box generally has its own name. Each one must have a unique id. Checked specifies the property if it is checked or not
44
Radio Buttons Circles Exclusive in a group…
Groups are buttons that have the same name Each one must have a unique id. Checked specifies if it is checked or not. Only one can be checked in a group. If multiple boxes are marked “checked”, the last will be checked.
45
HTML5 input types A list of HTML 5 input types can be found at:
A Sample HTML form (yes, it looks horrible, but CSS will fix that). Play around with them, and see how they work.
46
HTML Events TOC
47
Events with forms Form elements can have events associated with them. This is JavaScript code, and is often a function (either an anonymous function, or a call to a function in the head if a lot is going on, or if it is reused a lot). Events are things which happen asynchronously in the program. They occur when something is done. For example, when a page loads. Most common events with form processing is the “onClick” event for a button. In the next example of an onClick event, the data on the form will be processed. TOC
48
Events on a Form First, let’s fix that slider… Now just for fun….
onChange event updates the box which shows the value Implement a way for the box with the value to update the slider to keep them in synch. Now just for fun…. Raj: What did you put as the one word description of yourself? Stuart: I put unobjectionable. But now I hear it out loud, it just seems like I'm being cocky. TOC
49
Image Maps TOC
50
Image Maps Allow some (very nice) interaction to added easily to web pages. First display the Image Then associate a Map overlay on it with behavior Maphilight gives extra (very nice) behavior. TOC
51
Simple Example, Rushmore Map
Similar presentations
