Wiki

User Tools

Site Tools

Trace:
javascript

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
javascript [2021/05/16 14:41] – adminjavascript [2021/07/23 14:52] (current) – admin
Line 1: Line 1:
-# DOM+#Javascript 
 + 
 +## DOM
  
 The HTML DOM is a standard for how to get, change, add, or delete HTML elements. The HTML DOM is a standard for how to get, change, add, or delete HTML elements.
Line 5: Line 7:
 https://www.w3schools.com/js/js_htmldom.asp https://www.w3schools.com/js/js_htmldom.asp
  
-# jQuery+## Basic 
 + 
 +### Datatype 
 + 
 +``` 
 +var length = 16;                               // Number 
 +var lastName = "Johnson";                      // String 
 +var x = {firstName:"John", lastName:"Doe"};    // Object 
 +``` 
 + 
 +### Object 
 +Create an object with 3 properties: 
 +```javascript 
 +var object = { 
 +  ID: 1, 
 +  "name": "Tom", 
 +  grade: { 
 +    math: 94 
 +    physics:89 
 +  } 
 +  // When a function is used as an object property, it is called a method 
 +  sum: function(a,b){ 
 +    return a+b; 
 +  } 
 +} 
 +``` 
 + 
 +Use dot ```.``` or bracket ```[]``` to access or create properties 
 +```javascript 
 +object.ID = object.ID + 1; 
 +object["ID"] = object["ID"] + 1; 
 +object.grade.math = 100; 
 +// Method can be called in the same way 
 +object.sum(1, 2); 
 + 
 +// Create new properties or methods in the same way 
 +object[name + "-full"] = "Tom Hanks"; 
 +object.minus = function(a,b) { 
 +  return a-b; 
 +}; 
 +``` 
 + 
 +### Question Mark "?" 
 + 
 +Three use of question mark: [[https://www.freecodecamp.org/news/how-the-question-mark-works-in-javascript/|Link]] 
 + 
 +## jQuery
  
 Basic syntax is: ````$(selector).action()````\\ Basic syntax is: ````$(selector).action()````\\
Line 12: Line 60:
 A jQuery action() to be performed on the element(s)\\ A jQuery action() to be performed on the element(s)\\
  
 +By default, jQuery uses "\$" as a shortcut for "jQuery". Doing ````var $=function(){}```` is just defining a function called "\$", it is very same as doing ````var a=function(){}````
  
-## The $ mark 
-By default, jQuery uses "$" as a shortcut for "jQuery".  
  
-Doing ````var $=function(){}```` is just defining a function called "\$", it is very same as doing ````var a=function(){}````+### Start a jQuery codeblock
  
- +```javascript
-## Start a jQuery codeblock +
- +
-```+
 $(function() { $(function() {
-  ...+   // jQuery methods go here...
 }); });
 ``` ```
 is a short version of is a short version of
-```+```javascript
 $(document).ready(function() { $(document).ready(function() {
-  ... +   // jQuery methods go here...
 }); });
 ``` ```
-``` +```javascript 
-(function (d) { +(function ( $ ) { 
-  ...+   // jQuery methods go here...
 })(jQuery) })(jQuery)
 ``` ```
Line 42: Line 86:
 $(document).ready(function() {         $(document).ready(function() {        
     // Assign all list items on the page to be the  color red.       // Assign all list items on the page to be the  color red.  
-    //      This does not work until AFTER the entire DOM is "ready", hence the $(document).ready()+    // This does not work until AFTER the entire DOM is "ready", hence the $(document).ready()
     $('li').css('color', 'red');        $('li').css('color', 'red');   
 }); });
 ``` ```
  
-The pseudo-code for that block is:+The pseudo-code for that block is: When the document object model ````$(document) is ready .ready()````, call the following function ````function() {  }````. In that function, check for all ````<li>````'s on the page ````$('li')```` and using the jQuery method .CSS() to set the CSS property "color" to the value "red" ````.css('color', 'red')````;
  
-When the document object model ````$(document) is ready .ready()````, call the following function ````function() {  }````. In that function, check for all ````<li>````'s on the page ````$('li')```` and using the jQuery method .CSS() to set the CSS property "color" to the value "red" ````.css('color', 'red')````; 
  
 +### Functions in jQuery
  
-## Functions in jQuery +Example: hide the current element
- +
-**Example:** hide the current element+
 ```javascript ```javascript
 $(this).hide()  $(this).hide() 
 ``` ```
  
-**Example:** select the element with id="#p1" and trigger an alert when mouse down event happens on them.+Example: select the element with id="#p1" and trigger an alert when mouse down event happens on them.
 ```javascript ```javascript
 $("#p1").mousedown(function(){ $("#p1").mousedown(function(){
Line 66: Line 108:
 ``` ```
  
-**Example:** define a new function "publish" in jQuery, with two variables+Example: define a new function "publish" in jQuery, with two variables
 ```javascript ```javascript
 $.publish = function (topic, args) { $.publish = function (topic, args) {
Line 73: Line 115:
 ``` ```
  
-**Example:** use "on" method to attach multiple event handlers to <p> elements+Example: use "on" method to attach multiple event handlers to <p> elements
 ```javascript ```javascript
 $("p").on({ $("p").on({
Line 88: Line 130:
 ``` ```
  
-### callback function +#### jQuery plugins 
-For example, in ```$(selector).show(speed,callback);``` optional callback parameter is a function to be executed.+Example: to create a plugin that makes text within a set of retrieved elements green. All we have to do is add a function called greenify to ```$.fn``` and it will be available just like any other jQuery object method. 
 + 
 +```javascript 
 +$.fn.greenify = function() { 
 +    this.css( "color", "green" ); 
 +    return this;  // make your function chainable 
 +} 
 +$( "a" ).greenify(); // Makes all the links green. 
 +``` 
 + 
 +[[https://learn.jquery.com/plugins/basic-plugin-creation/|Some tips on creating good plugins (Minimizing Plugin Footprint, using the each() Method) ]] 
 + 
 +#### Callback function 
 +JavaScript statements are executed line by line. However, with effects, the next line of code can be run even though the effect is not finished. This can create errors. 
 + 
 +To prevent this, you can create a callback function. A callback function is executed after the current effect is finished. Typical syntax: ```$(selector).hide(speed,callback);``` 
 + 
 +Example: 
 + 
 +```javascript 
 +$("button").click(function(){ 
 +  $("p").hide("slow", function(){ 
 +    alert("The paragraph is now hidden"); 
 +  }); 
 +}); 
 +``` 
 + 
 +#### Chaining functions 
 +The following example chains together the css(), slideUp(), and slideDown() methods. The "p1" element first changes to red, then it slides up, and then it slides down: 
 + 
 +```javascript 
 +$("#p1").css("color", "red").slideUp(2000).slideDown(2000); 
 +``` 
 + 
 +#### Normal javascript function in jQuery? 
 +You might want to just have a function in jQuery to use the query features. However it could not be called outside of the jQuery namespace. Here's an example: 
 +```javascript 
 +$(document).ready( function () { 
 +    var MyBlah = function(blah) { alert(blah);  }; 
 +    MyBlah("Hello this works") // Inside the anonymous function we are cool. 
 + }); 
 + 
 +MyBlah("Oops") //This throws a JavaScript error (MyBlah is not a function) 
 +``` 
 + 
 +This is (sometimes) a desirable behavior since we do not pollute the global namespace, so if your function does not need to be called from other part of your code, this is the way to go. 
 + 
 +Declaring it outside the anonymous function places it in the global namespace, and it's accessible from everywhere. 
 + 
 +If you want to call it anywhere, use the `$.` namespace: 
 +```javascript 
 +$(document).ready( function () { 
 +    $.MyBlah = function(blah) { alert(blah);  }; 
 +    MyBlah("Hello this works") // Inside the anonymous function we are cool. 
 + }); 
 + 
 +$.MyBlah("Oops") //This throws a JavaScript error (MyBlah is not a function) 
 +```
javascript.1621147288.txt.gz · Last modified: (external edit)