Jordan Jozwiak CS50. Announcements Problem Set 6 has been returned. Final Project's Proposal is due...
22
Week 9 Jordan Jozwiak CS50
-
Upload
hector-foster -
Category
Documents
-
view
214 -
download
0
Transcript of Jordan Jozwiak CS50. Announcements Problem Set 6 has been returned. Final Project's Proposal is due...
Week 9Jordan Jozwiak
CS50
AnnouncementsProblem Set 6 has been returned.Final Project's Proposal is due by 11:00am on
Mon 11/15, per the specSUPERsection next week!
Also our last section
Problem Set 7Will be returned by Tuesday nightQuestions?
This WeekJavascriptDocument Object ModelAjax
Development of Interactivity
HTML – static web pages
PHP – dynamically generated web pages
Javascript – web pages with dynamic content
JavascriptProgramming Language used in web design
Unlike PHP, executed client-side!
Javascript code is included in HTML passed to browser.
JavascriptPHP Javascript
InterpretedLoosely-typed
Server-side execution
Client-side execution
Including JavascriptLike CSS, may be included either within the
HTML page or linked in from external .js file.
Linking in:<head> <script src="file.js"> </script></head>
Javascript syntaxVery similar syntax to C and PHP.
if, else, for, while, etc.strings are built into the language like in PHP
No types for variables or functions!x = 5;function increment(x) { return ++x; }
Variables in JavascriptInitializationGlobal - x = 5;Local - var x = 5;
Data Typesnumber, boolean, string, object, undefined, null
Operators in Javascript+ : Concatenation operator, joins two strings.== : Equality, can compare across types!typeof : Gives data type of value stored in a
variable.
‘For Each’ Loop in Javascriptweekdays["Sunday", "Monday",...,"Saturday"];
for(int i = 0; i < 7; i++) for(var day in weekdays)
{ {weekdays[i]; day;
} }
Document Object ModelContents of web page represented in a
structure called the Document Object Model.Allows us to access and manipulate HTML as
a set of objects.Each tag is an object!
Attributes are properties of objects.Contained tags are children of a parent tag.
Document Object ModelWe can access individual elements by id
using Javascript and get (or change) their contents!
Example: name =
document.getElementById('name').value;
Document Object ModelProperties of Javascript DOM objects:
innerHTML: text contained within elementnodeName: name of tag of the elementparentNode: parent of current element
(DOM object)Children: array of child elements (DOM
objects)Style: object representing CSS properties of
element<attribute>: each tag attribute has a property
Events
Events'Event handlers' listen for an event and then
execute code when that event happens.
Example: set up an 'onclick' event for a tag which does something when the content on the page is clicked by the user.
Development of InteractivityHTML – static web pages
PHP – dynamically generated web pages
Javascript – web pages with dynamic content
Ajax – dynamically load content from other pages
Ajax
Asynchronous Javascript and XML
Allows us to send requests to other pages for new content without reloading page!
AjaxRecipe for Ajax Calls:1. Create 'xhr' object2. Construct url3. Optional: Display 'loading' icon.4. Send out xhr:
1. Set up handler (do something on xhr.readyState == 4)
2. Open request3. Send request
Coding time!Cloud.cs50.net/~jjozwiak
