ICCT Wiki

User Tools

Site Tools

Trace: • lecture16 • lecture2
eg-259:lecture5

Differences

This shows you the differences between two versions of the page.

Link to this comparison view

Both sides previous revisionPrevious revision
Next revision		Previous revision
eg-259:lecture5 [2013/02/06 16:14] – [Exercise] eechriseg-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 14th February, 2012.+**Contact Hour 7**: To be discussed on Tuesday 11th February, 2013.
  
 **Lecturer**: [[C.P.Jobling@Swansea.ac.uk|Dr Chris P. Jobling]]. **Lecturer**: [[C.P.Jobling@Swansea.ac.uk|Dr Chris P. Jobling]].
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 ''describe()'' and ''farewell()''. Function ''describe()'' is called when the document is loaded by the browser as defined by the ''onload'' attribute of the ''<body>'' element. Similarly, ''farewell()'' is called when the link "Back to examples" is clicked. This causes a //click event// to happen and the ''onclick'' attribute of the link causes ''farewell()'' to be called((The original example used ''onunliad'' on the body tag to calle farewell(). This doesn't work with modern browsers because they typically prevent pop-ups when a page us unloaded (i.e. reloaded or replaced by another document) because of the annoying way that unscrupulous website owners would use pop-ups to direct you to another site when trying to leave.)). The attributes ''onload'' and ''onclick'' are two of the standard events that can be defined in HTML and which provide the simplest (although discouraged) way to communicate from the document to the script. We will describe many more later.+The script itself defines the two functions ''describe()'' and ''farewell()''. Function ''describe()'' is called when the document is loaded by the browser as defined by the ''onload'' attribute of the ''<body>'' element. Similarly, ''farewell()'' is called when the link "Back to examples" is clicked. This causes a //click event// to happen and the ''onclick'' attribute of the link causes ''farewell()'' to be called((The original example used ''onunload'' on the body tag to calle farewell(). This doesn't work with modern browsers because they typically prevent pop-ups when a page us unloaded (i.e. reloaded or replaced by another document) because of the annoying way that unscrupulous website owners would use pop-ups to direct you to another site when trying to leave.)). The attributes ''onload'' and ''onclick'' are two of the standard events that can be defined in HTML and which provide the simplest (although discouraged) way to communicate from the document to the script. We will describe many more later.
  
  
Line 371: Line 372:
 </code> </code>
  
 +===== Playing with JavaScript =====
  
 +At least 3 ways:
 +
 +  * Put code in ''<script>'' tags or link code to ''<script>'' tags in an HTML page. Reload page to execute.
 +  * //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://jsfiddle.net/cpjobling/vPAMw/2/|Fiddle with jsFiddle]]
 +===== Demo of the Console =====
 +
 +{{:eg-253:2013-02-06_1729.png?200|}}
 ===== 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://eloquentjavascript.net/chapter2.html|Chapter 2]] of Eloquent JavaScript.
- +
-  * [[http://www.openjs.com/tutorials/basic_tutorial/variables.php|Variables]] +
-  * [[http://www.openjs.com/tutorials/basic_tutorial/operators.php|Operators]] +
- +
-For even more details see [[http://eloquentjavascript.net/chapter2.html|Chapter 2]] of Eloquent JavaScript.+
  
  
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("Answer: " + result);       console.log("Answer: " + result);
 </code> </code>
-does almost the same thing as ''document.write'', but without destroying any content.+It's better than ''document.write'' because as well as outputting string versions of its arguments, it will actually output objects that you can browse. 
 +===== Screen Output: jQuery magic ===== 
 +  * HTML placeholder 
 +<code html> 
 +<div id="result"> 
 +</div> 
 +</code> 
 +  * Output function 
 +<code javascript> 
 +$('#result').append('<p>The html you would have written with <code>document.write()</code></p>'); 
 +</code> 
 +  * Result 
 +<code html> 
 +<div id="result"> 
 +<p>The html you would have written with <code>document.write()</code></p> 
 +</div> 
 +</code>
 ===== Screen Output: alert ===== ===== Screen Output: alert =====
  
Line 686: Line 712:
  
 <code javascript> <code javascript>
-            // Declare variables we'll be using +// 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 +// Find point in DOM where result will be appended as HTML 
-            result_element = $('#result'); +result_element = $('#result');
-               +
-            // Get the coefficients of the equation from the user +
-            a = prompt("What is the value of 'a'? \n", "1"); +
-            b = prompt("What is the value of 'b'? \n", "3"); +
-            c = prompt("What is the value of 'c'? \n", "2");+
  
-            // Compute the square root and denominator of the result +// Get the coefficients of the equation from the user 
-            root_part = Math.sqrt(b * b - 4.0 * a * c); +a = prompt("What is the value of 'a'? \n", "1"); 
-            denom = 2.0 * a;+b = prompt("What is the value of 'b'? \n", "3"); 
 +c = prompt("What is the value of 'c'? \n", "2");
  
-            // Compute and display the two roots +// 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("<p>The first root is: " + root1 + "<br />"); +root1 = (-b + root_part) / denom; 
-            result_element.append("The second root is: " + root2 + "</p>");  +root2 = (-b - root_part) / denom; 
-</code>+ 
 +// Display results in page 
 +result_element.append("<p>The first root is: " + root1 + "<br />"); 
 +result_element.append("The second root is: " + root2 + "</p>"); </code>
 ===== Summary of this Lecture ===== ===== Summary of this Lecture =====
  
eg-259/lecture5.1360167277.txt.gz · Last modified: 2013/02/06 16:14 by eechris