UCI js-jquery 学习笔记

FE

Javascript & jQuery 学习笔记

Book: Interactive Front-End Web Development Jon Duckett 1st edition

Functions, Methods & Objects

Function Expressions

  • Function Declaration

    1
    2
    3
    function area(width, height) {
    	return width*height;
    }

  • Function Expression

    1
    2
    3
    var area = function(width, height) {  // anonymous function
    	return width*height;
    }

  • Immediately Invoked Function Expression(IFFE)

    1
    2
    3
    4
    5
    var area = (function() {  
    	var width = 3;
    	var height = 2;
    	return width * height;
    } () )   // (): call the function immediately   ): all as an expression

Creat A Object

  • Literal Notation

    1
    2
    3
    4
    5
    6
    7
    8
    var hotel = {
     name: 'Wanda',
     rooms: 40,
     booked: 25,
     checkAvailability: function() {
    	 return this.rooms - this.booked;
     }
    };

  • Object Constructor Notation And Templates

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    // Creat then Add Properties
    var hotel = new Object();
     
    /** Properties */
    hotel.name = 'Wanda'; 
    hotel.rooms = 40;
    hotel.booked = 25;
    /** Method */
    hotel.checkAvailability = function() {
    	 return this.rooms - this.booked;
    };
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    // Creat Object with Properties
    function Hotel(name, rooms, booked) {
    /** Properties */
    this.name = name; 
    this.rooms = rooms;
    this.booked = booked;
    /** Method */
    this.checkAvailability = function() {
    	 return this.rooms - this.booked;
    };
    }

    var WandaHotel = new Hotel("Wanda", 40, 25);

Built-in Objects

Browser object model

  • window
    • document
    • history
    • location: URL of current page
    • navigator: info about browser
    • screen: device’s display info

Document Object Model (DOM)

Global Javascript Objects

  • String Number Boolean Date Math Regex …
  • Date Object
    • Year: 4 digits
    • Day: 1-31
    • Month Hour Minutes Seconds Milliseconds: 0- …

Decision & Loop

Short Circuit Value

  • short-circuit (stop) as soon as logical operators have a reslut.

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    /** left (done return the value) => right */
    var artist = "Wayne";
    var result = artist || "Unknown";  // result = "Wayne"

    /** left => right(done) */
    var artist = "";
    var result = artist || "Unknown";  // result = "Unknown"

    /** create objects or set values */
    var result = artist || {}          // result = {}

Operator precedence

  • the && operator is executed before the || operator.

Document Object Model (DOM)

Accessing Element

Methods that return a single element node.

  • getElementById('id')
  • querySelector('css')

    Methods that return more elements(as a nodelist => collection).

  • getElementsByClassName('class')
  • getElementsByTagName('tag') getElementBy… ==> live NodeList
  • querySelectorAll('css') ==> static NodeList

Whitespace Nodes

  • ul
    • /space: create extra text nodes
    • li
    • /space
    • li
    • …
  • ==> problems: iterate through nodes in the DOM tree/ nextSibling / firstChild
  • ==> solutions: use JS library such as jQuery

Access & Update Element Content

Element node: <li> <em> / Text node: “word”

  • nodeValue: get & update a TEXT NODE.
  • textContent: ignore any makeup inside the element, return the text value.
  • innerText: DON’T USE: never implement in Firefox, obeys CSS(hide elements) and performs bad(check elements visible or not). Use textContent instead.
  • innerHTML: add or remove HTML content, but has SECURITY RISKS.
    (eg. To remove one <li> from <ul>, need to provide entire fragment minus that <li> element).
  • DOM manipulation:
    • createElement(): Create the element.
    • createTextNode(): Give a content.
    • appendChild(): Add text to the element and Add it to the DOM.
    • removeChild(): select elment -> parent of element -> parentNode.removeChild(removeNode).
    • insertBefore(): list.insertBefore(newItemFirst, list.firstChild)

Attribute Nodes

  • getAttribute()
  • hasAttribute()
  • setAttribute('class', 'className')
  • removeAttribute()
  • className: get & change class attribute.
  • id

Events

Event Flow

  • Event Bubbling: <a>-><li>-><ul>-><body>
  • Event Capturing: Document-><html>-><body>-><ul>
  • Final parameter in the addEventListener() decides the Event Flow.
    • false: bubbling phase (default)
    • true: capturing phase (not supported in IE8)

Event Object

  • target(or srcElement): the target of the event.
  • type: type of event that was fired.
  • cancelable: whether you can canel the default behavior of the element.
  • preventDefault() stopPropagation()

Different Types of Events

  • W3C DOM Events
  • HTML5 Events
    • beforeunload: when user leaves the unsaved changes.
    • hashchange: when the URL hash changes.
    • DOMContentLoaded: after HTML loaded. NOT contain any scripts generated HTML.
  • BOM（Browser Object Model）Events

data-* Attribute (* is lowcase)

custom attribute: <li data-state="stop"> <li data-animal-tpye="bird">

jQuery

jQuery selector

  • :header: selects all elements that are headers, like <h1> ... <h6>
  • :lt(3): selects elements at an index less than the specified index(3).
  • … P302

Ready to work

1
2
3
4
/** as soon as the DOM has loaded */
$(document).ready(function() {
	// script goes here
});
1
2
3
4
/** commonly used */
$(function() {
	// script goes here
});
  • load Event: when script relies on assets to have loaded.
  • .ready() Method: when DOESNOT wait for assets to finish loading.

AJAX

  • <script> tag: synchronous processing model.
  • Ajax(Asynchronous Javascript And XML): asynchronous(non-blocking) processing model. Now used to refer to a group of technologies that offer asynchronous functionality in the browser.

Requests & Responses

  • The Request

    1
    2
    3
    4
    var xhr = new XMLHttpRequest();
    // 1. HTTP method 2. url 3. if asynchronous
    xhr.open('GET', 'data/test.json', true); 
    xhr.send('search=arduino');

  • TheResponse

    1
    2
    3
    4
    5
    xhr.onload = function() {
    	if (xhr.status === 200) {
    		// code to process the results from the server
    	}
    }

Working with Json Data

  • JSON.stringify(): coverts javaScript objects into String formatted using Json.
  • JSON.parse(): coverts Json data into a JavaScript objects ready to use.
  • status property： 200: OK; 304: Not modified; 404: Page not found; 500: Internal error on the server.
  • Run the code locally: Not get a server status property.

Working with data from other servers

  • Proxy: to create a file on server that collects the data from remote server.
  • JSON-P(JSON with Padding): adding a <script> elementto load JSON data.
  • CORS(Cross-Origin Resource Sharing): adding extra infor to the HTTP headers.

jQuery & AJAX

$.each()

  • json: .(json, function(key, value) {})
  • array: .(arr, function(index, value) {})

.find()

$(data).find('#container')

  • As a selector. Because $.ajax can’t load one part of the page.

.load(‘url part-of-the-page’)

  • load('url #container'): the string has a SPACE between url and fragment.

$.ajax()

  • More powerful and more complex than .load().
  • There are several shorthand methods.

APIS

本文标题:UCI js-jquery 学习笔记

文章作者:Wayne

发布时间:2020年07月09日 - 19时20分

最后更新:2022年05月28日 - 19时09分

原始链接:http://yoursite.com/2020/07/09/js-jquery-uci/

许可协议: "署名-非商用-相同方式共享 3.0" 转载请保留原文链接及作者。

文章目录
  1. 1. Javascript & jQuery 学习笔记
    1. 1.1. Functions, Methods & Objects
      1. 1.1.1. Function Expressions
      2. 1.1.2. Creat A Object
      3. 1.1.3. Built-in Objects
        1. 1.1.3.1. Browser object model
        2. 1.1.3.2. Document Object Model (DOM)
        3. 1.1.3.3. Global Javascript Objects
    2. 1.2. Decision & Loop
      1. 1.2.1. Short Circuit Value
      2. 1.2.2. Operator precedence
    3. 1.3. Document Object Model (DOM)
      1. 1.3.1. Accessing Element
        1. 1.3.1.1. Methods that return a single element node.
        2. 1.3.1.2. Methods that return more elements(as a nodelist => collection).
      2. 1.3.2. Whitespace Nodes
      3. 1.3.3. Access & Update Element Content
      4. 1.3.4. Attribute Nodes
    4. 1.4. Events
      1. 1.4.1. Event Flow
      2. 1.4.2. Event Object
      3. 1.4.3. Different Types of Events
      4. 1.4.4. data-* Attribute (* is lowcase)
    5. 1.5. jQuery
      1. 1.5.1. jQuery selector
      2. 1.5.2. Ready to work
    6. 1.6. AJAX
      1. 1.6.1. Requests & Responses
      2. 1.6.2. Working with Json Data
      3. 1.6.3. Working with data from other servers
      4. 1.6.4. jQuery & AJAX
        1. 1.6.4.1. $.each()
        2. 1.6.4.2. .find()
        3. 1.6.4.3. .load(‘url part-of-the-page’)
        4. 1.6.4.4. $.ajax()
    7. 1.7. APIS