Operators
- &&
- ||
- !
- ==
- !=
- ===
- !==
most logical operators automatically convert types:
- && and (FALSE overrides)
- || or
- ! inverts boolean value
- == equals
- != not equals
- ===
- !==
- 5 < “7” is true
- 42 == 42.0 is true
- “5.0” == 5 is true
- === and !== are strict equality tests; checks both type and value ”5.0” === 5 is false
What is the Prototype JavaScript Framework?
The Prototype JavaScript library adds many useful features:
- many useful extensions to the DOM
- added methods to String, Array, Date, Number, Object
- improves event-driven programming
- many cross-browser compatibility fixes
- makes Ajax programming easier
What is client-side scripting?
- Browser requests a document from a web server using a specific URL
- Web server sends back the site
- Then, browser interprets and executes the page including any script code that manipulates the page
- The scripts already reside on the client browser
What are client-side scripts?
- Scripts are embedded within and interact with HTML, selecting elements of it, then manipulating those elements to provide an interactive experience.
- Scripts interact with CSS
- Scripts put less stress on the server
- Faster response than from web server
server-side programming (PHP) benefits
- create dynamic web pages
- more secure: client can’t see source code
- not subject to browser compatibility issues
- powerful: can write files, open connections to servers, connect to databases, etc.
client-side scripting (JavaScript) benefits:
- can modify a page without having to post back to server (faster UI - bettter usability)
- event-driven: can respond to user actions (e.g. clicks)
How is JavaScript linked in HTML?
script src=”filename” type=”text/javascript”>
- placed in HTML head
- script code is stored in a separate .js file
- can be inside HTML file, like CSS, but not recommeded
What is JavaScript + uses?
a lightweight intepreted object-oriented programming language (“scripting language”)
- adds interactivity
- react to events (e.g. onlick)
- creates cookies
- validates forms (and other calculates)
- create animations
- get user information about a user’s computer (e.g. browser type)
- a web standard (though not supported by all browsers)
- add html on the fly
Problems of JavaScript
- the DOM can be clunky to use
- code portability not guaranteed across browsers
- solution: some problems can be avoided with hacks (checking if browser is IE, etc.)
JavaScript vs. PHP
(similarities & differences)
Similarities:
- both are interpreted, not compiled
- both are relaxed about syntax, rules, and types
- both are case-sensitive
- both have built-in regular expressions for powerful text processing
Differences:
- JS is more object-oriented: noun.verb(), less procedural: verb(noun)
- JS focuses on user interfaces and interacting with a document; PHP is geared toward HTML output, databases and file/form processing
- JS code runs on the client’s browser; PHP code runs on the web server
process of event-driven programming
- user interacts with page
- an “event” occurs
- A piece of JS code runs in response
- the page updates
give an example of an event handler
onclick is an example of an event handler, a ‘responsive’ JavaScript function
synchronous vs asynchronous web communication
Synchronous web communication (click, wait, refresh)
Asynchronous web communication (user can keep interacting with page while data loads) – made possible by AJAX
Describe a Web Application
Web applications are dynamic websites that mimics the feel of a desktop app and presents a continuous user experience rather than disjoint pages by downloading data from a server in the background (e.g., Google Docs).
What is AJAX
Ajax is useful for web applications.
- Asynchronous JavaScript and XML
- Enables asynchronous web communciation
- NOT a programming language
- A way of using JavaScript
- Ajax can only fetch files from the same server that the page is on
What are undefined and null values
undefined: has not be declared, does not exist
null: exists, but was specifically assigned an empty (null) value
describe the following parts of JS:
s1.charAt(1)
charAt(1) is a function because of the ()
s1 is an object because it has a . after it
give 3 examples of how javascript would change html
1. change html content when an event occurs
button type=”button” onclick=’document.getElementById(“demo”).innerHTML = “Hello JavaScript!”’>Click Me!
2. change html attribute when an event occurs (e.g. update shopping card item number)
3. show hidden hmtl content when an event occurs (previoulsy hiddent content appears)
