2. Agenda
• Overview of Course
• Professor Availability Info
• Blackboard Introduction
• Grading & Grading Scale
• How to Succeed in INFO 2016 Without Really Trying
• Academic Dishonesty
• HTML Basics
6. Grading & Grading Scale
100-90: A
89-85: A-
84-80: B+
79-75: B
74-72: B-
71-69: C+
68-66: C
65-63: C-
62-60: D
59-0: F
Participation 10%
5 HWs 25%
Website 50%
Presentation 15%
7. How to Succeed in INFO 2016
Without Really Trying
• Ask questions with any issues
• Submit homework assignments on time
• Participate in class
• Come to class on time
• Focus efforts on website components!!
8. Academic Dishonesty
• Please see Academic Dishonesty paragraphs on Course Syllabus
• Unless otherwise specified your work submitted should reflect you completed
100% of the work and did not have any assistance from a classmate [i.e. copying]
• You should be able to do all course work based on my instruction and/or similar
walkthroughs on YouTube
9. Tools Needed for Class
• WYSIWYG Editor
• Google WYSIWYG HTML Editor and choose the one you would like to use
• Notepad (or similar tool) to save HTML/CSS/JS files and open them in your
browser to check they work
• Purchased domain and hosting plan (I will walk you through this later in the
semester)
10. What is HTML?
• HTML is the language for describing the structure of Web pages. HTML gives
authors the means to:
• Publish online documents with headings, text, tables, lists, photos, etc.
• Retrieve online information via hypertext links, at the click of a button.
• Design forms for conducting transactions with remote services, for use in
searching for information, making reservations, ordering products, etc.
• Include spread-sheets, video clips, sound clips, and other applications directly in
their documents.
• With HTML, authors describe the structure of pages
using markup. The elements of the language label pieces of content such as
“paragraph,” “list,” “table,” and so on.
11. HTML Basics
• HTML stands for Hypertext Markup Language
• HTML consists of Tags and values
• Tags have Attributes specified as <font size=“+1”> where size is the attribute and
+1 is the value of the attribute. that are specified in the open bracket.
12. HTML Snippet
• In the following HTML snippet name the following: tag, attribute, attribute value
and value: <font size=“+1”>Test font</font>
• Tag = font
• Attribute = size
• Attribute value = +1
• Value = Test font
• Why does </font> appear at the end?
• To close out the tag in the HTML code
13. Static vs. Dynamic Websites
• Static Websites
• Never change
• Unless the HTML code is changed
and uploaded to web server
• Dynamic Websites
• Can change based on an event or
data based on code on the website
• Common occurrences of this are
dates/times on a website
14. Important Code
• <!DOCTYPE html>
<html lang="en">
<head>
<title>Title of the document</title>
</head>
<body>
</body>
</html>
• This HTML code indicates the title of
the web page is Important Code
• The <head> element is a container
for metadata (data about data) and
is placed between the <html> tag
and the <body> tag.
• Metadata is data about the HTML
document. Metadata is not
displayed.
• Metadata typically define the
document title, character set, styles,
scripts, and other meta information.
15. <body></body> tag
• The <body> tag defines the document's body.
• The <body> element contains all the contents of an HTML document, such as
headings, paragraphs, images, hyperlinks, tables, lists, etc.
• Note: There can only be one <body> element in an HTML document.
16. <ul></ul> tag
• An unordered HTML list:
• <ul>
• <li>Coffee</li>
• <li>Tea</li>
• <li>Milk</li>
• </ul>
• The <ul> tag defines an unordered
(bulleted) list.
• Use the <ul> tag together with the
<li> tag to create unordered lists.
• Tip: Use CSS to style lists.
• Tip: For ordered lists, use the <ol>
tag.
17. <li></li> tag
• The <li> tag defines a list item.
• The <li> tag is used inside ordered lists(<ol>), unordered lists (<ul>), and in menu lists
(<menu>).
• In <ul> and <menu>, the list items will usually be displayed with bullet points.
• In <ol>, the list items will usually be displayed with numbers or letters.
• Tip: Use CSS to style lists.
18. <a></a> tag
• The <a> tag defines a hyperlink, which is used to link from one page to another.
• The most important attribute of the <a> element is the href attribute, which
indicates the link's destination.
• By default, links will appear as follows in all browsers:
• An unvisited link is underlined and blue
• A visited link is underlined and purple
• An active link is underlined and red
19. <a href….</a>
• How to open a link in a new browser window:
• <a href="https://www.w3schools.com" target="_blank">Visit
W3Schools.com!</a>
• The hyperlink reference is to the website, the target opens the link in a new
browser window and the text Visit W3Schools.com! is the text listed which is
linked to the website.
21. Important Tags
• <p></p> for writing a paragraph with text
• <b> - Bold text
• <strong> - Important text
• <i> - Italic text
• <em> - Emphasized text
• <small> - Smaller text
22. <b> and <strong> tags
• In order to bold text you can use either the <b> or <strong> tags
• <b>Marino</b> will show up as Marino
• <strong>Marino</strong> will show up as Marino
• Notice they are both merely bold!
23. <i> and <em> tags
• In order to italicize text you can use either the <i> or <em> tags
• <i>Marino</i> will show up as Marino
• <em>Marino</em> will show up as Marino
• Notice they are both merely italic!
24. <small> tag
• This merely makes your text smaller without having to utilize the size attribute or
similar attributes within HTML code
• Ideally, you use this tag to deemphasize something [things that are not
important]
25. In Class Exercise
• Using the information taught in class create an HTML file index.html where you have a
paragraph describing yourself.
• Also, create a menu with the following links: Home, Favorite Sports Teams, and Contact
Me
• Have the Favorite Sports Teams have a dropdown menu of at least three teams you like.
(Examples can include teams from Baseball, Football, Soccer, Basketball, Hockey, College,
High School, etc.)
26. In Class Exercise Getting Started
• To write a paragraph use the
<p>…</p> tag
<html>
<head>
<title>Your Name</title>
</head>
<body>
<p>Put paragraph here</p>
</body>
</html>
27. In Class Exercise Getting Started
• To create your links use the <ul> and <il> tags
• Your code should go in the header section <head>
<ul>
<li><a href="" class="current">Home</a></li>
<li><a href="">Favorite Sports Teams</a></li>
<li><a href="">Contact Me</a></li>
</ul>
28. In Class Exercise Getting Started
• You should use the <select> tag for your dropdown
<select name="teams" id="teams">
<option value="1">Team 1</option>
<option value="2">Team 2</option>
<option value="3">Team 3</option>
</select>
31. HTML Review
• HTML stands for Hypertext Markup Language
• HTML consists of Tags and values
• Tags have Attributes specified as <font size=“+1”> where size is the attribute and
+1 is the value of the attribute. that are specified in the open bracket.
• Static websites never change unless you edit the code and upload updated
version
• Dynamic websites can change based on an event or data embedded within the
code; common with dates and times
32. HTML Snippet
• In the following HTML snippet name the following: tag, attribute, attribute value
and value: <font size=“+1”>Test font</font>
• Tag = font
• Attribute = size
• Attribute value = +1
• Value = Test font
• Why does </font> appear at the end?
• To close out the tag in the HTML code
33. Common HTML Tags
• <html>…</html> - begins and ends the entire HTML document
• <head>…</head> - defines information about the document
• <body>…</body> - defines the document’s body
• <p>…</p> - defines a paragraph
• <ul>…</ul> - defines an unordered list
• <ol>…</ol> - defines an ordered list
• <li>…</li> - defines a list item
• <a href>…</a> - hyperlink
• <img src…./> - defines an image
35. Styles & Fonts
Styles
• <h1 style="color:blue;">This is a
heading</h1>
• <p style="color:red;">This is a
paragraph.</p>
Fonts
• <h1 style="font-
family:verdana;">This is a
heading</h1>
• <p style="font-family:courier;">This
is a paragraph.</p>
36. Text Size & Alignment
Size
• <h1 style="font-size:300%;">This is a
heading</h1>
• <p style="font-size:160%;">This is a
paragraph.</p>
Alignment
• <h1 style="text-
align:center;">Centered
Heading</h1>
• <p style="text-
align:center;">Centered
paragraph.</p>
37. Language
• <html lang="en">
• https://www.tutorialrepublic.com/html-reference/html-language-codes.php
• All language codes listed above
38. Using Images
• <img src="img_girl.jpg" alt="Girl in a jacket" width="500" height="600">
• img src – image source
• alt – description
• width and height should be altered depending on needs
39. Images As Background
• <div style="background-image: url('img_girl.jpg');">
• <style>
• div {
• background-image: url('img_girl.jpg');
• }
• </style>
41. Building Tables
• Why build a table?
• Easiest way to organize info in an HTML file
• Assuming not using XML or JSON [covered later in the course]
42. Tags for building a table
• <table>…</table> - defines a table
• <tr>…</tr> - defines a table row, must appear within a table
• <td>…</td> - defines a table column, must appear within a table row
• <th>…</th> - defines a table header
43. <table></table> tag
• The <table> tag defines an HTML table.
• An HTML table consists of one <table> element and one or more <tr>, <th>, and
<td> elements.
44. <tr></tr> tag
• The <tr> tag defines a row in an HTML table.
• A <tr> element contains one or more <th> or <td> elements.
45. <td></td> tag
• The <td> tag defines a standard data cell in an HTML table.
• An HTML table has two kinds of cells:
Header cells - contains header information (created with the <th> element)
Data cells - contains data (created with the <td> element)
• The text in <td> elements are regular and left-aligned by default.
• The text in <th> elements are bold and centered by default.
46. <th></th> tag
• The <th> tag defines a header cell in an HTML table.
• An HTML table has two kinds of cells:
Header cells - contains header information (created with the <th> element)
Data cells - contains data (created with the <td> element)
• The text in <th> elements are bold and centered by default.
• The text in <td> elements are regular and left-aligned by default.
47. Building an HTML file with a Table
Begin with basic code:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>New Page 1</title>
</head>
<body>
</body>
</html>
48. Add Your Header
• <title>New Page 1</title>
• </head>
• <h1 align="center">Your Schedule</h1>
• <body>
• By adding the <h1></h1> code you have created an overall header
49. Begin creating your Table
• <body>
• <table border="0" width="100%">
• </table>
• </body>
• You can play around with the thickness of the table’s border by changing “0” to
different sizes
50. Building the Table’s Data
<table border="0" width="100%">
<tr>
<th>Course Name</th>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
51. Building the Table’s Data
<tr>
<th>Instructor</th>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<th>Number of Credits</th>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
53. Visual Table Notes
• Sizes of the cells in each row will change when you replace the code with
actual text
• What do you do if you are taking more than 4 courses?
• You will need to add an additional <td></td> for each section [Course Name,
Instructor, and Number of Credits] until you have enough cells to cover all of your
courses for the table you create in Assignment 2
54. <div></div> tag
• The <div> tag defines a division or a section in an HTML document.
• The <div> tag is used as a container for HTML elements - which is then styled with
CSS or manipulated with JavaScript.
• The <div> tag is easily styled by using the class or id attribute.
• Any sort of content can be put inside the <div> tag!
• Note: By default, browsers always place a line break before and after the <div>
element.
• For our purpose, it is important to note the <div> tag serves as a break for a
paragraph [<p></p> tag]
55. HTML Review
• <a href=“websitelink.com”>Website Link</a> serves as code for hyperlinking a
website
• As discussed href is “hyperlink reference”
• The <h1></h1> tag represents a header
• <h2></h2>, <h3></h3>, etc. also exist and get smaller
56. Keep in Mind Now, but for Later
• <form>…</form> - defines a form
• <input type…/> - defines a form input
• button
checkbox
file
hidden
image
password
radio
reset
submit
text
58. Building our Gallery
<table border="0" width="100%">
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
Change the highlighted
0 to a larger number so
we can see the border
59. Picture Gallery
• The code on the previous slide only gives us 4 boxes
• How do we get our 16?
60. Where do we
get Images?
• https://www.freeimages.co
m/search/baseball
• Or search Google for free
use images
62. Embedding Images
• <img src="img_girl.jpg" alt="Girl in a jacket" width="500" height="600">
• Where img src is your image source
• alt is your alternate description of the image
• width and height should be modified so that all pictures line up
63. How it looks?
• <td><img src="https://media.istockphoto.com/photos/baseball-with-clipping-
path-picture-
id177401325?b=1&k=20&m=177401325&s=170x170&h=AK3kCSUXA7K8BsjeydSH3U
5oNEkezA2gZ9c9KuDkJZg=" alt="baseball" width="100" height="100"></td>
• Use the direct image source for now, once we have an image saved to our web
space the img src is much shorter like in previous example
66. Of Note
• You don’t need to use alt tag if you don’t want to
• You can remove the table border once all 16 images are there
• You want to use the same height for each image
69. Reminder from HTML Lesson
• <form>…</form> - defines a form
• <input type…/> - defines a form input
• button
checkbox
file
hidden
image
password
radio
reset
submit
text
70. Inputs - HTML
<input type="text"> Displays a single-line text input field
<input type="radio"> Displays a radio button (for selecting one
of many choices)
<input type="checkbox"> Displays a checkbox (for selecting zero or
more of many choices)
<input type="submit"> Displays a submit button (for submitting
the form)
<input type="button"> Displays a clickable button
77. Check Boxes
<form>
<input type="checkbox" id="vehicle1" name="vehicle1" value="Bike">
<label for="vehicle1"> I have a bike</label><br>
<input type="checkbox" id="vehicle2" name="vehicle2" value="Car">
<label for="vehicle2"> I have a car</label><br>
<input type="checkbox" id="vehicle3" name="vehicle3" value="Boat">
<label for="vehicle3"> I have a boat</label>
</form>
79. Understanding PHP
• A PHP script can be placed anywhere in the document.
• A PHP script starts with <?php and ends with ?>:
• <?php
• // PHP code goes here
• ?>
• The default file extension for PHP files is ".php".
• A PHP file normally contains HTML tags, and some PHP scripting code.
83. Using PHP to Upload Files - HTML
<html>
<body>
<form action="upload.php" method="post" enctype="multipart/form-data">
Select image to upload:
<input type="file" name="fileToUpload" id="fileToUpload">
<input type="submit" value="Upload Image" name="submit">
</form>
</body>
</html>
84. upload.php
<?php
$target_dir = "uploads/";
$target_file = $target_dir . basename($_FILES["fileToUpload"]["name"]);
$uploadOk = 1;
$imageFileType = strtolower(pathinfo($target_file,PATHINFO_EXTENSION));
// Check if image file is a actual image or fake image
if(isset($_POST["submit"])) {
$check = getimagesize($_FILES["fileToUpload"]["tmp_name"]);
if($check !== false) {
echo "File is an image - " . $check["mime"] . ".";
$uploadOk = 1;
} else {
echo "File is not an image.";
$uploadOk = 0;
}
}
85. upload.php
// Check if file already exists
if (file_exists($target_file)) {
echo "Sorry, file already exists.";
$uploadOk = 0;
}
// Check file size
if ($_FILES["fileToUpload"]["size"] > 500000) {
echo "Sorry, your file is too large.";
$uploadOk = 0;
}
// Allow certain file formats
if($imageFileType != "jpg" && $imageFileType != "png" && $imageFileType != "jpeg"
&& $imageFileType != "gif" ) {
echo "Sorry, only JPG, JPEG, PNG & GIF files are allowed.";
$uploadOk = 0;
}
86. upload.php
// Check if $uploadOk is set to 0 by an error
if ($uploadOk == 0) {
echo "Sorry, your file was not uploaded.";
// if everything is ok, try to upload file
} else {
if (move_uploaded_file($_FILES["fileToUpload"]["tmp_name"], $target_file)) {
echo "The file ". htmlspecialchars( basename( $_FILES["fileToUpload"]["name"])). " has been uploaded.";
} else {
echo "Sorry, there was an error uploading your file.";
}
}
?>
87. What is the PHP Code Doing?
• PHP script explained:
• $target_dir = "uploads/" - specifies the directory where the file is going to be
placed
• $target_file specifies the path of the file to be uploaded
• $uploadOk=1 is not used yet (will be used later)
• $imageFileType holds the file extension of the file (in lower case)
• Next, check if the image file is an actual image or a fake image
88. PHP Open and Read
• <?php
• $myfile = fopen("webdictionary.txt", "r") or die("Unable to open file!");
• echo fread($myfile,filesize("webdictionary.txt"));
• fclose($myfile);
• ?>
89. PHP Create and Write
• <?php
• $myfile = fopen("newfile.txt", "w") or die("Unable to open file!");
• $txt = "John Doen";
• fwrite($myfile, $txt);
• $txt = "Jane Doen";
• fwrite($myfile, $txt);
• fclose($myfile);
• ?>
90. PHP/Forms In Class Assignment
Using PHP, JavaScript and/or HTML create a Contact form which will accept Name, Email,
and Comment as inputs. The Submit button can either return the input or provide an external
webpage noting your input has been emailed.
92. Have to edit welcome.php
<html>
<body>
Welcome <?php echo $_POST["name"]; ?><br>
Your email address is: <?php echo $_POST["email"]; ?>
Your comment was: <?php echo $_POST["comment"]; ?>
</body>
</html>
93. To Send via Email
<?php
$from = "matt.marino@shu.edu";
$to = "dspace-community@googlegroups.com";
$message = "Unsubscribe";
$info = "Unsubscribe";
$check = mail($to, "Unsubscribe",
$message, "From:matt.marino@shu.edu");
if ($check != true) { echo "Sorry... Error Sending E-Mail. E-Mail NOT Sent.";}
else { echo "Thank You. Your E-Mail Has Been Sent... We Will Get Back To You
Shortly...";}
Create a file mailtest.php
and upload to your
courses web space
Change the to
To your email address, so
you get the inputs
94. HTML for Email
<html>
<body>
<form action=“mailtest.php" method="post">
Name: <input type="text" name="name"><br>
E-mail: <input type="text" name="email"><br>
Comment: <input type="text" name="comment"><br>
<input type="submit">
</form>
</body>
</html>
PHP files must be live on a web server to
work properly
95. XHTML Basics
• XHTML stands for EXtensible HyperText Markup Language
• XHTML is a stricter, more XML-based version of HTML
• XHTML is HTML defined as an XML application
• XHTML is supported by all major browsers
96. XHTML for the Experts
• XML is a markup language where all documents must be marked up correctly (be
"well-formed").
• XHTML was developed to make HTML more extensible and flexible to work with
other data formats (such as XML). In addition, browsers ignore errors in HTML
pages, and try to display the website even if it has some errors in the markup. So
XHTML comes with a much stricter error handling.
97. Strict?
• <!DOCTYPE> is mandatory
• The xmlns attribute in <html> is mandatory
• <html>, <head>, <title>, and <body> are mandatory
• Elements must always be properly nested
• Elements must always be closed
• Elements must always be in lowercase
• Attribute names must always be in lowercase
• Attribute values must always be quoted
• Attribute minimization is forbidden
98. Example XHTML code
• <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
• "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
• <html xmlns="http://www.w3.org/1999/xhtml">
• <head>
• <title>Title of document</title>
• </head>
• <body>
• some content here...
• </body>
• </html>
99. Compared to HTML code
• <html>
• <head>
• </head>
• <body>
• </body>
• </html>
100. Importance of XHTML
• XHTML documents are XML conforming as they are readily viewed, edited, and
validated with standard XML tools.
• XHTML documents can be written to operate better than they did before in
existing browsers as well as in new browsers.
• XHTML documents can utilize applications such as scripts and applets that rely
upon either the HTML Document Object Model or the XML Document Object
Model.
• XHTML gives you a more consistent, well-structured format so that your
webpages can be easily parsed and processed by present and future web
browsers.
101. Importance of XHMTL
• You can easily maintain, edit, convert and format your document in the long run.
• Since XHTML is an official standard of the W3C, your website becomes more
compatible with many browsers and it is rendered more accurately.
• XHTML combines strength of HTML and XML. Also, XHTML pages can be
rendered by all XML enabled browsers.
• XHTML defines quality standard for your webpages and if you follow that, then
your web pages are counted as quality web pages. The W3C certifies those pages
with their quality stamp.
102. XML Basics
• Stands for eXtensible Markup Language
• Used to define customized markup languages
• We are already familiar with XML since we understand HTML
103. Interesting XML Notes
• XML is a software- and hardware-independent tool for storing and transporting
data.
• XML was designed to store and transport data
• XML was designed to be self-descriptive
• Maybe it is a little hard to understand, but XML does not DO anything.
104. XML Just Stores Data
• XML is just information wrapped in tags.
• XML is the parent language to HTML
• XML is used to contain data, not to display data
• XML tags are custom, defined by the author.
• HTML can enrich XML data but neither can replace the other. One is used for
storing (XML) and the other is used for displaying (HTML).
105. XML Rules
• XML elements must follow these rules:
• Can contain letters, numbers and other characters
• Can’t start with a number or punctuation character
• Can’t start with ‘xml’
• Can’t contain spaces
106. Writing in XML
• XML attributes must be quoted as in: <employee type=‘permanent’>
• Alternatively, you can write
• <employee>
<type>permanent</type>
</employee>
• Both above examples accomplish the same goal and there are no rules as to
which one is right. The second example is easier to read and looks nicer.
107. XML vs. HTML
• XML was designed to carry data - with focus on what data is
• HTML was designed to display data - with focus on how data looks
• XML tags are not predefined like HTML tags are
108. You Define XML Tags
• The XML language has no predefined tags.
• Tags are "invented" by the author of the XML document.
• HTML works with predefined tags like <p>, <h1>, <table>, etc.
• With XML, the author must define both the tags and the document structure.
109. Why Use XML?
• It simplifies data sharing
• It simplifies data transport
• It simplifies platform changes
• It simplifies data availability
110. More Reasons to use XML
• XML stores data in plain text format. This provides a software- and hardware-
independent way of storing, transporting, and sharing data.
• XML also makes it easier to expand or upgrade to new operating systems, new
applications, or new browsers, without losing data.
• With XML, data can be available to all kinds of "reading machines" like people,
computers, voice machines, news feeds, etc.
111. In What Ways Can We Use XML?
• Create a list of books
• Create a list of transactions
• Create a news article header
• Detail weather service information
• And much, much more!
112. XML Example Code
• <?xml version="1.0" encoding="UTF-8"?> Prolog
• <note> Root
• <to>Tove</to>
• <from>Jani</from>
• <heading>Reminder</heading>
• <body>Don't forget me this weekend!</body>
• </note> notice all have closing tags like HTML!!!!
113. XML can use HTML tags
• Tags you have previously seen can be used in XML, such as:
• <b></b> for bold text
• <i></i> for italicized text
114. Attributes Must Be Quoted
• <note date="12/18/1953">
• <to>Tove</to>
• <from>Jani</from>
• </note>
• In this example our attribute is our date 12/18/1953
115. Entity References
< < less than
> > greater than
& & ampersand
' ' apostrophe
" " quotation mark
Entity references help you to avoid errors
116. Comments in XML
• <!-- This is a comment -->
• This exact structure is required for XML comments
117. XML Elements
• An element can contain:
• Text
• Attributes
• other elements
• or a mix of the above
• Examples could be <rate>19.99</rate>
118. XML Naming Rules Reminder
• XML elements must follow these naming rules:
• Element names are case-sensitive
• Element names must start with a letter or underscore
• Element names cannot start with the letters xml (or XML, or Xml, etc)
• Element names can contain letters, digits, hyphens, underscores, and periods
• Element names cannot contain spaces
• Any name can be used, no words are reserved (except xml).
119. Standards Advising Naming Rules
• Create descriptive names, like this: <person>, <firstname>, <lastname>.
• Create short and simple names, like this: <book_title> not like this: <the_title_of_the_book>.
• Avoid "-". If you name something "first-name", some software may think you want to subtract "name" from "first".
• Avoid ".". If you name something "first.name", some software may think that "name" is a property of the object "first".
• Avoid ":". Colons are reserved for namespaces (more later).
• Non-English letters like éòá are perfectly legal in XML, but watch out for problems if your software doesn't support them.
122. XSLT
• XSLT - eXtensbile Stylesheet Language Transformations
• XSLT transform XML into HTML, before it is displayed by a browser
• You can transform a XML document into an HTML document just by linking the
XML document to the XSLT file by using the following line:
• <?xml-stylesheet type="text/xsl" href="xsltexample.xsl"?>
123. Another XML Example
• <xml>
<addressbook>
<address>
<name>Mark Nazzaro</name>
<email>nazzarma@shu.edu</email>
</address>
<address>
<name>David Rosenthal</name>
<email>rosentdv@shu.edu</email>
</address>
</addressbook>
</xml>
124. JSON Basics
• JSON stands for JavaScript Object Notation
• JSON is easier to parse than XML
• Properties make up a JSON object
• JSON.parse() parses retrieved data
• JSON.stringify() converts a JavaScript object into a string
125. JSON vs. XML
• Syntax for storing and exchanging
data
• Similar to XML:
• Hierarchical – values embedded
within values
• Human readable
• Both can use XMLHttpRequest
• Different from XML:
• No tags
• Shorter
• Quicker to read and write
• JSON uses arrays
• Easier to parse JSON
126. JSON Object Example
• A car is an object which has three properties describing it
• Make – String value representing the make of the car
• Model – String value representing the model of the car
• Price – Numeric value representing the price of the car
127. How That Looks in XML
<car>
<make>Chevrolet</make>
<model>Suburban</model>
<price>60000</price>
</car>
128. How It Looks in JSON
{
"make": "Chevrolet",
"model": "Suburban",
"price": 60000
}
130. Accessing Values in Objects
• In order to access the values of an
object, you can use the dot (.)
notation
myObj =
{“firstName”:”Matt”,”lastN
ame”:”Marino”,”age”:34};
firstName =
myObj.firstName;
lastName =
myObj.lastName;
age = myObj.age;
• You can also access the values using a
bracket notation
firstName = myObj[“firstName”];
lastName = myObj[“lastName”];
age = myObj[“age”];
• You can also access all of the values
using a for loop:
for (x in myObj)
{
}
131. Parsing
• When data is received from a web server, it can be parsed with JSON.parse() and
it becomes a JavaScript object.
var text = '{ "name":"John", "birth":"1986-12-14", "city":"New York"}';
var obj = JSON.parse(text);
obj.birth = new Date(obj.birth);
document.getElementById("demo").innerHTML = obj.name + ", " + obj.birth;
132. Stringify
• Convert a JavaScript object into a string
var obj = { "name":"John", "age":30, "city":"New York"};
var myJSON = JSON.stringify(obj);
document.getElementById("demo").innerHTML = myJSON
138. In Class Example
Create a booklist file in both XML and JSON (meaning two different files - one called
books.xml and one called books.json). Include in your data storage files the following book
info: title of book, author of book, and price of book.
139. In Class Example Help
• XML – refer back to slide 61
• JSON – refer back to slide 62
141. Echoing Form Data HTML Code
<HTML>
<HEAD>
<TITLE> Echoing Form Data Example </TITLE>
</HEAD>
<form method="post" action="echo.php">
<label for="name">What is your name?</label> <input type="text" name="name" id="name"><br>
<label for="yearborn">What year were you born? <input type="text" name="yearborn" id="yearborn"><br>
<label for="favcolor">What is your favorite color? <input type="text" name="favcolor" id="favcolor"><br>
<input type="Submit" value="Submit to Test PHP Script">
</form>
</BODY>
</HTML>
142. Echoing Form Data PHP Code (echo.php)
<HTML>
<HEAD>
<TITLE> Echoing Form Data Example </TITLE>
</HEAD>
<?php
// Initialize variables from form
$name = $_POST['name'];
$favcolor = $_POST['favcolor'];
$yearborn = $_POST['yearborn'];
// encode any special characters in these variables
$encoded_name = htmlentities($name);
$encoded_favcolor = htmlentities($favcolor);
print("<body bgcolor=$encoded_favcolor>");
// print the person's name
print("Hello $encoded_name<br>");
$currentdate = getdate();
$year = $currentdate["year"];
// Calculate age using the $yearborn field from the
submitted form
$age = $year - $yearborn;
// print the person's age
print("You are $age years old");
?>
</BODY>
</HTML>
143. Writing Form Data to a File on the
Server HTML Code
<HTML>
<HEAD>
<TITLE> Writing Form Data to a File on the Server Example </TITLE>
</HEAD>
<form method="post" action=“write.php">
<label for="name">What is your name?</label> <input type="text" name="name" id="name"><br>
<label for="yearborn">What year were you born? <input type="text" name="yearborn" id="yearborn"><br>
<label for="favcolor">What is your favorite color? <input type="text" name="favcolor" id="favcolor"><br>
<input type="Submit" value="Submit to Test PHP Script">
</form>
</BODY>
</HTML>
144. Writing Form Data to a File on the
Server PHP Code (write.php)
<HTML>
<HEAD>
<TITLE> Writing Form Data to a File on the Server Example </TITLE>
</HEAD>
<BODY>
<?php
// The next line opens a file handle to a file called output.txt
// the file handle is like an alias to the file
// the a in the fopen function means append so entries
// will be appended to the output.txt file
$out = fopen("outputoutput.txt", "a");
// if the file could not be opened for whatever reason, print
// an error message and exit the program
if (!$out) {
print("Could not append to file");
exit;
}
// fputs writes output to a file. the syntax is where to write
// followed by what to write
// $name is the contents of the name field in the sample
form
// t represents a tab character and n represents a new line
fputs($out,"$_POST[name]t");
fputs($out,"$_POST[yearborn]t");
fputs($out,"$_POST[favcolor]t");
fputs($out,"$_SERVER[REMOTE_ADDR]n");
print("Thanks you for completing our survey.");
fclose($out);
?>
</BODY>
</HTML>
145. Uploading Files HTML Code
<HTML>
<HEAD>
<TITLE> Uploading Files Example </TITLE>
</HEAD>
<form enctype="multipart/form-data" action="upload.php" method="POST">
<input type="hidden" name="MAX_FILE_SIZE" value="100000" />
Choose a file to upload: <input name="uploadedfile" type="file" /><br />
<input type="submit" value="Upload File" />
</form>
</BODY>
</HTML>
146. Uploading Files PHP Code (upload.php)
<HTML>
<HEAD>
<TITLE> Uploading Files - place file in
uploads folder </TITLE>
</HEAD>
<BODY>
<?php
$target_path = "uploads/";
$target_path = $target_path . basename(
$_FILES['uploadedfile']['name']);
if(move_uploaded_file($_FILES['uploadedfile']['tmp_name'
], $target_path)) {
echo "The file ". basename(
$_FILES['uploadedfile']['name']).
" has been uploaded";
} else{
echo "There was an error uploading the file, please try
again!";
}
?>
</BODY>
</HTML>
147. Vote Example HTML Code
<HTML>
<HEAD>
<TITLE> Vote to end class </TITLE>
</HEAD>
<form method="post" action="vote.php">
<label for="name">What is your name?</label> <input type="text" name="name" id="name"><br>
<p>Should we end Class now?</p>
<p>
<input type="radio" name="vote" value="Yes">Yes
<input type="radio" name="vote" value="No">No
<input type="radio" name="vote" value="Maybe">Maybe
<p align="left"><input type="submit" value="Submit" name="B1"><input type="reset" value="Reset"
name="B2"></p>
</form>
</BODY>
</HTML>
148. Vote Example PHP Code (vote.php)
<HTML>
<HEAD>
<TITLE> Recording Vote </TITLE>
</HEAD>
<BODY>
<?php
$out = fopen("outputvote.txt", "a");
if (!$out) {
print("Could not append to file");
exit;
}
fputs($out,"$_POST[name]t");
fputs($out,"$_POST[vote]n");
print("Thank you for voting");
fclose($out);
?>
</BODY>
</HTML>
150. Birthday PHP Code (bday.php)
<HTML>
<HEAD>
<TITLE> Birthday results </TITLE>
</HEAD>
<BODY>
<?php
$out = fopen("outputbirthday.txt", "a");
if (!$out) {
print("Could not append to file");
exit;
}
fputs($out,"$_POST[name]t");
fputs($out,"$_POST[month]t");
fputs($out,"$_POST[day]n");
print("Thank you for entering your birthday");
fclose($out);
?>
</BODY>
</HTML>
151. Timestamps HTML Code
<HTML>
<BODY style="background-color:orange">
<HEAD>
<TITLE> Time stamped comments </TITLE>
</HEAD>
<form method="post" action="timestamp.php">
<p> Enter your comments:
<p>
<textarea rows="5" cols="30" name="comment" wrap="physical"></textarea><br />
<input type="Submit" value="Submit Comments">
</form>
</BODY>
</HTML>
152. Timestamps PHP Code (timestamp.php)
<HTML>
<HEAD>
<TITLE> Timestamped Comments </TITLE>
</HEAD>
<?php
$name = $_POST['comment'];
$out = fopen("outputtimestamps.txt", "a");
if (!$out) {
print("Could not append to file");
exit;
}
fputs($out,"Comment timestamp: ");
fputs($out,date("m/j/y h:i", time()));
fputs($out,"...IP address: ");
fputs($out,$_SERVER[REMOTE_ADDR]);
fputs($out,"n");
fputs($out,"$_POST[comment]nn");
print("Thank you. Your comments are
important to us. ");
fclose($out);
?>
</BODY>
</HTML>
153. HTML Assignment
• Create a file called schedule.html to be uploaded to Blackboard.
• schedule.html should contain an introduction to yourself followed by a table
including your course schedule and an image you feel represents each of your
classes. For example, if you feel a course is chaotic you might use an image of
people playing dodgeball.
155. Why CSS?
• CSS stands for Cascading Style Sheets.
• CSS saves a lot of work. It can control the layout of multiple web pages all at
once.
• Websites generally have sub-folders where CSS files are stored
156. Syntax
• 3 Elements to a CSS Statement
• Selector
• What HTML sections does it affect?
• Property
• What attribute of that HTML section will be affected?
• Value
• What change will be made to that attribute?
157. Stylesheets
• While HTML defines where structures start and end, stylesheets define what they
look like
• When used properly, stylesheets allow for a consistent look and feel throughout
a website with one simple change of a file
• They are defined in three different ways:
• External: the styles are defined in a .css file (preferred)
• Internal: the styles are defined inside the HTML file, usually in the header section
• Inline: the style is defined inside an existing tag, usually in the body section
158. How to use the 3 Methods
• Inline - by using the style attribute inside HTML elements
• Internal - by using a <style> element in the <head> section
• External - by using a <link> element to link to an external CSS file
159. Inline Example
• An inline CSS is used to apply a unique style to a single HTML element.
• An inline CSS uses the style attribute of an HTML element.
• The following example sets the text color of the <h1> element to blue, and the
text color of the <p> element to red:
• <h1 style="color:blue;">A Blue Heading</h1>
• <p style="color:red;">A red paragraph.</p>
160. Internal Example
• An internal CSS is used to define a style for a
single HTML page.
• An internal CSS is defined in the <head>
section of an HTML page, within a <style>
element.
• The following example sets the text color of
ALL the <h1> elements (on that page) to blue,
and the text color of ALL the <p> elements to
red. In addition, the page will be displayed
with a "powderblue" background color:
<html>
<head>
<style>
body {background-color: powderblue;}
h1 {color: blue;}
p {color: red;}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
161. External Example [Most Common]
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
163. Beyond CSS Basics
• With CSS, you can control:
• Color
• Font
• size of text
• spacing between elements
• how elements are positioned and laid out
• what background images or background colors to be used
• different displays for different devices and screen sizes
164. Changing Stylesheets
• Changing a stylesheet on the fly can be done on the server when the request is
received. For example, the webserver can determine the type of browser
(Internet Explorer, Firefox, Chrome, iPhone, Blackberry) and render the page
appropriately
• You can also give that functionality to the user. Perhaps the user might want a
larger font or a different color. With JavaScript, you can create a button that
changes the stylesheet for the entire page.
165. Two More Stylesheet Examples
• styles.css
h1 {
border: 2px black solid;
color: black;
}
.justified {
text-align: left;
}
• styles2.css
h1 {
border: 2px red solid;
color: red;
}
.justified {
text-align: right;
}
166. How Stylesheets are put together
• Each style in a style sheet has three parts:
• A selector
• One or more properties
• One or more values for each property
• Syntax
selector {
property1: value1 [value2 …];
property2: value1 [value2 …];
}
• To associate a style sheet to an HTML document, use the <link> tag within the head tag:
• <link href=“styles.css” rel=“stylesheet” type=“text/css” />
167. Stylesheet styles
• #id – ID’s are used to define large structures in an HTML document. Each id can be
used only once in each HTML document.
• .class – Classes are styles that can be reused and applied to different elements via a
class parameter, such as <h1 class=“name”> …</h1>
• Element – elements are used to redefine how existing HTML elements (tags) are to
be formatted.
170. <style></style> tag
• The <style> tag is very important when using CSS code inside an HTML file
• All the CSS code must be in between the <style> and </style>
• Otherwise it is not recognized
171. CSS Properties
• The CSS color property defines the text color to be used.
• The CSS font-family property defines the font to be used.
• The CSS font-size property defines the text size to be used.
172. CSS Properties
• The CSS border property defines a border around an HTML element.
• The CSS padding property defines a padding (space) between the text and the
border.
• The CSS margin property defines a margin (space) outside the border.
173. CSS Properties
• Use the HTML style attribute for
inline styling
• Use the HTML <style> element to
define internal CSS
• Use the HTML <link> element to
refer to an external CSS file
• Use the HTML <head> element to
store <style> and <link> elements
• Use the CSS color property for text
colors
• Use the CSS font-family property for
text fonts
• Use the CSS font-size property for
text sizes
• Use the CSS border property for
borders
• Use the CSS padding property for
space inside the border
• Use the CSS margin property for
space outside the border
174. CSS Linking [External]
• This example uses a full URL to link to a style sheet:
• <link rel="stylesheet" href="https://www.w3schools.com/html/styles.css">
• This example links to a style sheet located in the html folder on the current web
site:
• <link rel="stylesheet" href="/html/styles.css">
• This example links to a style sheet located in the same folder as the current page:
• <link rel="stylesheet" href="styles.css">
176. Overwriting Link Defaults
• a:link {color:#FF0000;}
• color to apply to link before it’s visited
• a:visited {color:#00FF00;}
• color to apply to link before it’s visited
• a:hover {color:#FF00FF;}
• color to apply to link while mouse pointer is over it
• a:active {color:#0000FF;}
• color to apply while left mouse button is held down on link
177. In Class Exercise
Create a CSS file called example.css where you set a background color, header color and
alignment, and text color, size and font.
180. example.css text color, size, and
font
<style>
p {
color: blue;
size: 12px;
font: serif;
}
</style>
181. Check example.css in WYSIWYG First
• Put all of your pieces into the <style> tag within the <head> section of your HTML
“test” using your WYSIWYG
• Once checked, pull everything out of the <style> … </style> tag and put into
Notepad – save as example.css
182. Show How Internal Works
• Reference in an HTML file
• See if it works!
183. Quick Review
• 3 Elements to a CSS Statement
• Selector
• What HTML sections does it affect?
• Property
• What attribute of that HTML section will be affected?
• Value
• What change will be made to that attribute?
184. Quick Review
• External – separate .css file
• Internal – inside the <style> tag
• Inline – on the same line of code using the style attribute
185. CSS Inheritance
• Used when you have many sections of a website/web page and want them to
look differently
• Each section can be modified using both internal and inline CSS code
• Works like programming languages, such as Java or Python
186. General CSS – Remember?
• Uses our tags like paragraph <p> or header <h1> or <body>
<style>
p {
color: red;
}
</style> Internal CSS
187. Inheritance CSS
• First, create a class
<style>
.bobdole {
background-color: red;
color: blue;
}
</style>
Internal CSS
189. Another Example
<!DOCTYPE html>
<html>
<head>
<style>
.intro {
background-color: yellow;
}
</style>
</head>
<body>
<h1>Welcome to My Homepage</h1>
<div class="intro">
<p>My name is Jerry.</p>
<p>George is unemployed and lives
with his parents.</p>
</div>
<p>My neighbor is Kramer.</p>
<p class="intro">Gene sounds like
Mickey.</p>
</body>
</html>
190. Overwriting Link Defaults
• a:link {color:#FF0000;}
• color to apply to link before it’s visited
• a:visited {color:#00FF00;}
• color to apply to link before it’s visited
• a:hover {color:#FF00FF;}
• color to apply to link while mouse pointer is over it
• a:active {color:#0000FF;}
• color to apply while left mouse button is held down on link
191. Link Defaults
• By default, a link will appear like this (in all browsers):
• An unvisited link is underlined and blue
• A visited link is underlined and purple
• An active link is underlined and red
• You can change the link state colors, by using CSS:
211. In Class Exercise
Change your html page created in In Class Exercise 1 to include CSS code so that your links
and paragraph section are different colors, size, and font. Make sure to use internal CSS code
(i.e. code in the HTML file).
213. CSS Height and Width
<html>
<head>
<style>
div {
max-width: 500px;
height: 100px;
background-color: powderblue;
}
</style>
</head>
<body>
<h2>Set the max-width of an element</h2>
<div>This div element has a height of 100px and a max-width of 500px.</div>
<p>Resize the browser window to see the effect.</p>
</body>
</html>
225. CSS Image Gallery Example
@media only screen and (max-width: 700px) {
.responsive {
width: 49.99999%;
margin: 6px 0;
}
}
@media only screen and (max-width: 500px) {
.responsive {
width: 100%;
}
}
226. CSS Image Gallery Example
.clearfix:after {
content: "";
display: table;
clear: both;
}
</style>
</head>
<body>
<h2>Responsive Image Gallery</h2>
<h4>Resize the browser window to see the effect.</h4>
227. CSS Image Gallery Example
<div class="responsive">
<div class="gallery">
<a target="_blank"
href="img_5terre.jpg">
<img src="img_5terre.jpg"
alt="Cinque Terre" width="600"
height="400">
</a>
<div class="desc">Add a description of
the image here</div>
</div>
</div>
<div class="responsive">
<div class="gallery">
<a target="_blank"
href="img_forest.jpg">
<img src="img_forest.jpg"
alt="Forest" width="600"
height="400">
</a>
<div class="desc">Add a description of
the image here</div>
</div>
</div>
228. CSS Image Gallery Example
<div class="responsive">
<div class="gallery">
<a target="_blank"
href="img_lights.jpg">
<img src="img_lights.jpg"
alt="Northern Lights" width="600"
height="400">
</a>
<div class="desc">Add a description of
the image here</div>
</div>
</div>
<div class="responsive">
<div class="gallery">
<a target="_blank"
href="img_mountains.jpg">
<img src="img_mountains.jpg"
alt="Mountains" width="600"
height="400">
</a>
<div class="desc">Add a description of
the image here</div>
</div>
</div>
229. CSS Image Gallery Example
<div class="clearfix"></div>
<div style="padding:6px;">
<p>This example use media queries to re-arrange the images on different screen
sizes: for screens larger than 700px wide, it will show four images side by side, for
screens smaller than 700px, it will show two images side by side. For screens
smaller than 500px, the images will stack vertically (100%).</p>
<p>You will learn more about media queries and responsive web design later in
our CSS Tutorial.</p>
</div>
</body>
</html>
232. CSS Rotate
<html>
<head>
<style>
div {
width: 300px;
height: 100px;
background-color: yellow;
border: 1px solid black;
}
div#myDiv {
transform: rotate(20deg);
}
</style>
</head>
<body>
<h1>The rotate() Method</h1>
<p>The rotate() method rotates an element clockwise or
counter-clockwise.</p>
<div>
This a normal div element.
</div>
<div id="myDiv">
This div element is rotated clockwise 20 degrees.
</div>
</body>
</html>
233. CSS Transition
<html>
<head>
<style>
div {
width: 100px;
height: 100px;
background: red;
transition: width 2s, height 4s;
}
div:hover {
width: 300px;
height: 300px;
}
</style>
</head>
<body>
<h1>The transition Property</h1>
<p>Hover over the div element below, to see the
transition effect:</p>
<div></div>
</body>
</html>
234. CSS Animation
<html>
<head>
<style>
div {
width: 100px;
height: 100px;
background-color: red;
position: relative;
animation-name: example;
animation-duration: 4s;
}
@keyframes example {
0% {background-color:red; left:0px; top:0px;}
25% {background-color:yellow; left:200px; top:0px;}
50% {background-color:blue; left:200px; top:200px;}
75% {background-color:green; left:0px; top:200px;}
100% {background-color:red; left:0px; top:0px;}
}
</style>
</head>
<body>
<h1>CSS Animation</h1>
<div></div>
<p><b>Note:</b> When an animation is finished, it goes
back to its original style.</p>
</body>
</html>
236. CSS Thumbnail Image as Link
<html>
<head>
<style>
img {
border: 1px solid #ddd;
border-radius: 4px;
padding: 5px;
width: 150px;
}
img:hover {
box-shadow: 0 0 2px 1px rgba(0, 140, 186, 0.5);
}
</style>
</head>
<body>
<h2>Thumbnail Image as Link</h2>
<p>Use the border property to create thumbnail images. Wrap an anchor around the image to
use it as a link.</p>
<p>Hover over the image and click on it to see the effect.</p>
<a target="_blank" href="paris.jpg">
<img src="paris.jpg" alt="Paris" style="width:150px">
</a>
</body>
</html>
250. CSS Hoverable Buttons
</style>
</head>
<body>
<h2>Hoverable Buttons</h2>
<p>Use the :hover selector to change the style of the button when you move the mouse over it.</p>
<p><strong>Tip:</strong> Use the transition-duration property to determine the speed of the "hover" effect:</p>
<button class="button button1">Green</button>
<button class="button button2">Blue</button>
<button class="button button3">Red</button>
<button class="button button4">Gray</button>
<button class="button button5">Black</button>
</body>
</html>
251. CSS Assignment
• Create an HTML file called dropdown.html where you utilize internal CSS to
create a dropdown menu AND set CSS parameters [color, alignment, etc.] for
your headers and paragraphs.
• Your dropdown menu should include a Home, About Me, Class Info, and Contact
Me pages listed. Create dropdowns for both the About Me and Class Info
sections.
253. JavaScript Basics
• JavaScript is embedded in an HTML file using
<script></script>
• .js is the file extension for JavaScript
• Functions make up the majority of JavaScript
• If statements are used for condition execution in
JavaScript
• You comment out a single line of code using //
254. JavaScript Important Notes
• Like Java [uses functions]
• Interpreted by the browser, not compiled
• Complimentary to HTML, used for dynamic web pages and form validation
• OS and Browser (for the most part) independent
• JavaScript is either embedded in a webpage using <script> …</script> or in a
separate file usually with a .js extension.
• Like stylesheets and css files, JavaScript and js files allows for portability and
reusability.
• To reference an external JavaScript: <script src=“scripts.js”></script>
255. DIV and SPAN Reminder
• DIV – gives you the ability to identify particular sections (divisions) of a document
using the id attribute. Particularly useful in AJAX and dynamic HTML.
• SPAN – has the same attributes and uses above. Both tags have the style, class
and id attributes.
• Primary difference between the two is the DIV tag inherently breaks a paragraph.
• Both are typically used to apply styles to HTML documents.
256. JavaScript Intro
• JavaScript allows for client-side code execution.
• Similar to Java
• Typically used for client-side form validation, dynamic HTML and AJAX.
• Example:
<script>
document.write(“Our first JavaScript”);
</script>
• In the above example, code is written directly in the HTML document.
• In order for code to be reusable, the code can be stored in a .js file.
259. onclick
• Using standard HTML, a webpage is static (i.e. it won’t change until the HTML file
is changed)
• Using dynamic HTML and events like onClick, the content of a page or a tag can
be changed on the fly
260. onclick Example HTML
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="js/scripts.js"></script>
</head>
<body>
<div id="myDIV">TODO write content</div>
<button id="divChange" onclick="divChange()">Change the DIV value</button><br/>
<button id="divChangeBack" onclick="divChangeBack()">Change the DIV value back</button><br/>
<button id="docChange" onclick="docChange()">Change the entire document</button><br/>
</body>
</html>
261. onclick JavaScript code
function divChange()
{
previousDIV = document.getElementById("myDIV").innerHTML;
document.getElementById("myDIV").innerHTML="DIV has changed";
}
function divChangeBack()
{
document.getElementById("myDIV").innerHTML = previousDIV;
}
function docChange()
{
document.write("Document has changed");
}
262. Another onclick Example HTML
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link href="styles.css" rel="stylesheet" type="text/css" title="Default Style" id="defaultStyle" />
<link href="styles2.css" rel="stylesheet" type="text/css" title="Mobile Style" id="mobileStyle"/>
<script src="js/scripts.js"></script>
</head>
<body>
<h1>Here is my H1, watch it change.</h1>
<p class="justified">this is a test of the justified class</p>
<button id="styleSwitchButton" onclick="switchStyle()">Switch Style</button>
</body>
</html>
263. Another onclick Example JS
function switchStyle()
{
styleDefault = document.getElementById("defaultStyle");
styleMobile = document.getElementById("mobileStyle");
if (styleDefault.disabled)
{
styleDefault.disabled = false;
styleMobile.disabled = true;
}
else
{
styleDefault.disabled = true;
styleMobile.disabled = false;
}
}
264. JS Functions
• JavaScript code can be written as a block or code that will execute once or as
functions
• Functions are useful when they are used again and again within a page or a website.
One use for a function is form validation. Custom functions can be written to validate
the form before it is submitted.
265. JS Functions Cont.
• The function syntax is
function myFunction(){
• …..;
}
• In the above example, the function name is myFunction and it takes no
arguments
• A argument is passed for use within the function
• A function can return a value as well so it can be assigned to an outside variable.
• function myAdditionFunction(a, b) {
return a + b;
}
266. JS Comments
• When writing code, it is useful to embed comments, so the purpose of the code is
understood
// - this comments out a single line
• /*
• */ comments all content between and ignores line breaks
267. document
• Similar to java, there are objects within JavaScript
• The main one to remember is the document object. This object references the
entire HTML document.
• One typical use is the document.getElementById(“myid”).innerHTML=“some
string”;
• In the above example, the code will find an HTML element such as a <p>, <div> or
a <span> and change the “value” of that tag (i.e. the content between the open
and close tag).
• In order for the element to be referenced, the id attribute must be used in the
opening tag (<div id=“myid”>This text will change</div>
268. Variables
• In programming, variables allow for the storage of a value so it can be referenced later within the code.
• JavaScript creates variables using the following syntax:
var foo = “a”;
var bar = “b”;
• Javascript has no types. Programming languages typically have types like integer, string, decimal. Javascript stores everything
using the same variable type.
• It is possible to create a variable with no initial value
var myVar;
• var x = 1;
var y = 2;
var z = x + y;
• var x = “test”;
var y = “string”;
var z = x + “ “ + y;
269. Scope
• Variables have a limited scope when defined in a function.
Function myFunction() {
var myLocalVar = 1; //this var will not be accessible from outside
}
270. Operators
• + adds two operands
• - subtracts second operand from the
first
• * multiply both operands
• / divide first operand by the second
operand
• ++ increments the operator by one
• -- decrements the operator by one
• == Checks if two operands are equal,
if so, returns true, otherwise false
• != Checks if two operands are not
equal, if so, returns true, otherwise
false
• > Checks if the first operand is greater
than the second operand
• < Checks if the first operand is less
than the second operand
• >= Checks if the first operand is
greater than or equal to
• <= Checks if the first operand is less
than or equal to
271. Additional Operators
• && returns true if both statements are
true
• || returns true if either statement is true
• ^ returns true if only one statement is true
• = simple assignment operator
• += adds right operand to the left operand
and assigns to the left operand
• -= subtracts right operand from the left
operand and assigns to the left operand
• *= multiples right operand with the left
operand and assigns to the left operand.
• /= divides the left operand with the right
operand and assigns to the left operand.
• C += A is equal to c = c+a
• C -= A is equal to c = c-a
• C *= A is equal to c = c * a
• C /= A is equal to c = c/a
272. If Statement
• If statements are used for conditional execution.
• Else statements are used to run a different set of code if the if statement doesn’t
evaluate to true
• The syntax in Java is:
if (condition)
{
code to be executed
}
else
{
code to be executed
}
273. If in Action
var alertString='';
var firstName=document.getElementById("firstName");
var lastName=document.getElementById("lastName");
if (firstName.value == "")
{
alertString+='Enter your first namen';
}
if (lastName.value == "")
{
alertString+='Enter your last namen';
}
if (alertString != "")
{
alert(alertString);
}
274. AJAX
• Asynchronous JavaScript and XML
• Why asynchronous? – Allows time for the server to process the request and return
the results when complete. JavaScript proceeds while the server is processing
• Uses XMLHttpRequest – builtin javascript object for sending requests for XML using
JavaScript
• Two most useful methods for XMLHttpRequest are open and send.
• Open method has the following parameters
• Method – GET or POST. GET will be sufficient most times however it won’t be
sufficient when a uncached copy of the file is necessary
• url – the URL of the xml file or script
• Async – true or false – send the method asynchronously or not
275. AJAX Cont.
• For the response from the server, you can use the responseText or responseXML
property of the XMLHttpRequest object
• responseText is used when the response consists of plain text
• responseXML is used when the response consists of XML
276. What is a Cookie?
• A small piece of data sent from a website and stored in a user’s web browser
while a user is browsing a website
• When the user browses the same website in the future, the data stored in the
cookie can be retrieved by the website.
277. JavaScript Cookie
• Name: the name of the cookie
• Value: the value of the cookie
• Expires: the date/time when the cookie expires automatically
• Path: the path of the cookie
• Domain: the name of the server that created the cookie
• Secure: whether to use encryption to read/set the cookie
• Only small amounts of data can be stored in a cookie
• Cookies are available via JavaScript only to the domain used when the cookie was
created
• Cookies are available only to files in the same directory the cookie was created in (use
path “/” to make a cookie available to all files)
278. Setting a Cookie
• To set a cookie, you assign an appropriate value to document.cookie
• We can write a function so that we don’t need to write the same code again and again
function setCookie(name, value, expireDays)
{
var expires = new Date();
expires.setDate(expires.getDate() + expireDays);
var myCookie = name + "=" + escape(value) +
";expires=" + expires.toGMTString() +
";path=/";
document.cookie = myCookie;
}
279. Explaining What We Just Did
• Var expires is set to a new Date object. An object is a data structure which
contains properties and its behavior.
• The above Date object is created with no date and time. The Date() function is
called its constructor. When setDate is called, it is set with the current date and
the number of days in expiresDays is added hence setting the expire time.
• The myCookie var is nothing but a string. The escape function “escapes”
characters within a string. The characters it escapes are used in the URL and can
cause the HTTP request to fail
• In order to delete a cookie, we can just call setCookie(name, “”, -1). This will clear
out the cookie name and value and set it to expire to yesterday
