eg-259:lecture5
Differences
This shows you the differences between two versions of the page.
Both sides previous revisionPrevious revisionNext revision | Previous revision | ||
eg-259:lecture5 [2013/02/06 16:13] – [Another example] eechris | eg-259:lecture5 [2013/02/12 08:27] (current) – [Screen Output: jQuery magic] eechris | ||
---|---|---|---|
Line 5: | Line 5: | ||
- | **Contact Hour 7**: To be discussed on Tuesday | + | **Contact Hour 7**: To be discussed on Tuesday |
**Lecturer**: | **Lecturer**: | ||
Line 169: | Line 169: | ||
Although JavaScript looks like it should be a win-win for both developers and users, this is not always the case: | Although JavaScript looks like it should be a win-win for both developers and users, this is not always the case: | ||
- | * Most scripts rely upon manipulating elements of the DOM. Support for a standard set of DOM objects currently does not exist((Although the situtaion is much better now as HTML5 is more prescriptive about what the DOM should be and what browsers should do in given situations.))and access to objects differs from Browser to Browser. | + | * Most scripts rely upon manipulating elements of the DOM. Support for a standard set of DOM objects currently does not exist((Although the situtaion is much better now as HTML5 is more prescriptive about what the DOM should be and what browsers should do in given situations.)) and access to objects differs from Browser to Browser. |
* If your script does not work then your web page is useless! | * If your script does not work then your web page is useless! | ||
* Because of the problems of broken scripts, many Web surfers disable JavaScript support in their browser. | * Because of the problems of broken scripts, many Web surfers disable JavaScript support in their browser. | ||
* Scripts can run slowly and complex scripts take a long time to start up((Again modern browser developers have put a lot of effort into making script engines more efficient. Conversely, web applications rely more and more on scripts, so this speed advantage may not last long)). | * Scripts can run slowly and complex scripts take a long time to start up((Again modern browser developers have put a lot of effort into making script engines more efficient. Conversely, web applications rely more and more on scripts, so this speed advantage may not last long)). | ||
+ | * To overcome browser issues, modern developers make use of libraries that provide better abstractions of the DOM and allow separation of concerns between the application data and the display of that data in HTML((Two popular libraries are jQuery and BackboneJS.)) | ||
Line 266: | Line 267: | ||
===== The Script Itself ===== | ===== The Script Itself ===== | ||
- | The script itself defines the two functions '' | + | The script itself defines the two functions '' |
Line 371: | Line 372: | ||
</ | </ | ||
+ | ===== Playing with JavaScript ===== | ||
+ | At least 3 ways: | ||
+ | |||
+ | * Put code in ''< | ||
+ | * //Better//: Run code inside jsFiddle | ||
+ | * //Best//: run code in developer tools and use JavaScript console. Gives full access to the HTML, CSS and code as it will be when deployed. | ||
+ | ===== A JavaScript Playground ===== | ||
+ | |||
+ | Provided by jsFiddle. Use this and the developer tools console to play with JavaScript. | ||
+ | |||
+ | * [[http:// | ||
+ | ===== Demo of the Console ===== | ||
+ | |||
+ | {{: | ||
===== Identifiers and Comments ===== | ===== Identifiers and Comments ===== | ||
Line 447: | Line 462: | ||
===== More on Variables and Operators ===== | ===== More on Variables and Operators ===== | ||
- | Visit the OpenJS tutorial for an interactive presentation. | + | Visit [[http:// |
- | + | ||
- | * [[http:// | + | |
- | * [[http:// | + | |
- | + | ||
- | For even more details see [[http:// | + | |
Line 554: | Line 564: | ||
---- | ---- | ||
- | In Firebug | + | In Firefox and Chrome developer tools there is a JavaScript console. You can write to it using: |
<code javascript> | <code javascript> | ||
console.log(" | console.log(" | ||
</ | </ | ||
- | does almost the same thing as '' | + | It's better than '' |
+ | ===== Screen Output: jQuery magic ===== | ||
+ | * HTML placeholder | ||
+ | <code html> | ||
+ | <div id=" | ||
+ | </ | ||
+ | </ | ||
+ | * Output function | ||
+ | <code javascript> | ||
+ | $('# | ||
+ | </ | ||
+ | * Result | ||
+ | <code html> | ||
+ | <div id=" | ||
+ | < | ||
+ | </ | ||
+ | </ | ||
===== Screen Output: alert ===== | ===== Screen Output: alert ===== | ||
Line 686: | Line 712: | ||
<code javascript> | <code javascript> | ||
- | | + | // Declare variables we'll be using |
- | var | + | var |
- | result_element, | + | result_element, |
- | a, b, c, | + | a, b, c, |
- | root_part, denom, | + | root_part, denom, |
- | root1, root2; | + | root1, root2; |
- | | + | // Find point in DOM where result will be appended as HTML |
- | result_element = $('# | + | result_element = $('# |
- | + | ||
- | // Get the coefficients of the equation from the user | + | |
- | a = prompt(" | + | |
- | b = prompt(" | + | |
- | c = prompt(" | + | |
- | | + | // Get the coefficients |
- | | + | a = prompt("What is the value of ' |
- | | + | b = prompt(" |
+ | c = prompt(" | ||
- | | + | // Compute the square root and denominator of the result |
- | root1 = (-b + root_part) / denom; | + | root_part = Math.sqrt(b * b - 4.0 * a * c); |
- | root2 = (-b - root_part) / denom; | + | denom = 2.0 * a; |
- | + | ||
- | // Display results in page | + | // Compute and display the two roots |
- | result_element.append("< | + | root1 = (-b + root_part) / denom; |
- | result_element.append(" | + | root2 = (-b - root_part) / denom; |
- | </ | + | |
+ | // Display results in page | ||
+ | result_element.append("< | ||
+ | result_element.append(" | ||
===== Summary of this Lecture ===== | ===== Summary of this Lecture ===== | ||
Line 780: | Line 805: | ||
Write, test and debug (if necessary) HTML5 files that include JavaScript scripts for the following problems. When required to write functions, you must include a script to test the function with at least two different data sets. | Write, test and debug (if necessary) HTML5 files that include JavaScript scripts for the following problems. When required to write functions, you must include a script to test the function with at least two different data sets. | ||
- | - Correct | + | - Modify |
- //Input//: Three numbers, using prompt to get each. //Output//: The largest of the three input numbers. //Hint//: Use the predefined function '' | - //Input//: Three numbers, using prompt to get each. //Output//: The largest of the three input numbers. //Hint//: Use the predefined function '' | ||
eg-259/lecture5.1360167220.txt.gz · Last modified: 2013/02/06 16:13 by eechris