Wiki

User Tools

Site Tools

Trace: • machine_functions • javascript • php
javascript

Differences

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

Link to this comparison view

Both sides previous revision Previous revision
Next revision 		Previous revision
javascript [2021/05/16 15:35]
admin 		javascript [2021/07/23 14:52] (current)
admin
Line 6: Line 6:
  
 https://​www.w3schools.com/​js/​js_htmldom.asp https://​www.w3schools.com/​js/​js_htmldom.asp
 +
 +## 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 ## jQuery
Line 14: 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(){}````+
  
  
Line 49: Line 91:
 ``` ```
  
-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() ​
Line 90: Line 130:
 ``` ```
  
-#### Create your own functions (plugins)+#### jQuery ​plugins
 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. 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.
  
Line 106: Line 146:
 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. 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. +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);​```
- +
-A callback function is executed after the current effect is finished. +
- +
-Typical syntax: ```$(selector).hide(speed,​callback);​```+
  
 Example: Example:
Line 127: Line 163:
 ```javascript ```javascript
 $("#​p1"​).css("​color",​ "​red"​).slideUp(2000).slideDown(2000);​ $("#​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.1621150531.txt.gz · Last modified: 2021/05/16 15:35 by admin

Page Tools