Coursera 笔记

Module 03 · JavaScript Programming for Web ApplicationsWeb 应用 JavaScript 编程

Module 3 Cheatsheet: JavaScript Programming for Web Applications模块 3 速查表：Web 应用 JavaScript 编程

Coursera ↗

Class or Method  类别或方法 Description  描述 Example  示例
appendChild() An HTML DOM method that after creating an element, you can use this function to place the element in the appropriate location within the document. The element to append is the only parameter.
HTML DOM 方法，在创建元素后，您可以使用此函数将元素放置在文档中的适当位置。要附加的元素是唯一参数。		 //Creates the element <p> and text “Hello World”. Appends Hello World <p> to the HTML document.
<head>
 <script>
  function addPara() {
   var newPara = document.createElement(“p”);
   var newText = document.createTextNode(“Hello World!”);
   newPara.appendChild(newText);
   document.body.appendChild(newPara);
  }
 </script>
</head>
<body onload=“addPara()”>
</body>
Arrays Created by declaring the array elements in [ ]. An array can be assigned to a variable, usually using the keyword const or var. Arrays use zero based indexing to access their elements.
通过在[]中声明数组元素来创建。数组可以被分配给变量，通常使用 const 或 var 关键字。数组使用基于 0 的索引来访问其元素。		 const Beatles = [“Ringo”, “Paul”, “George”, “John”];
//Here Beatles[0] is “Ringo”.
Date() Constructor is new Date([optional parameters]). If the constructor is declared with no parameters, it returns current local date and time. New dates can be created by passing parameters to new Date function.
构造函数为 new Date([可选参数])。如果构造函数未带参数声明，则返回当前本地日期和时间。可以通过向 new Date 函数传递参数来创建新的日期。		 //create a new date from a string
var newDate = new Date(“2021-1-17 13:15:30”);

//create a new date instance representing 17 Jan 2021 00:00:00
//note that the month number is zero-based
var newDate = new Date(2021, 0, 17);
document.createElement() Takes one tag name parameter and creates an element with that name. Can place the element elsewhere on the page using functions like insertBefore(), appendChild(), replaceChild().
接受一个标签名称参数并创建具有该名称的元素。可以使用 insertBefore()、appendChild()、replaceChild()等函数将元素放置在页面上的其他位置。		 //Creates the element <p> and text “Hello World”. Appends Hello World <p> to the HTML document.
<head>
 <script>
  function addPara() {
   var newPara = document.createElement(“p”);
   var newText = document.createTextNode(“Hello World!”);
   newPara.appendChild(newText);
   document.body.appendChild(newPara);
  }
 </script>
</head>
<body onload=“addPara()”>
</body>
document.createTextNode() Takes a string as input text and returns a text node with the input text.
接受一个字符串作为输入文本，并返回一个包含输入文本的文本节点。		 //Creates the element <p> and text “Hello World”. Appends Hello World <p> to the HTML document.
<head>
 <script>
  function addPara() {
   var newPara = document.createElement(“p”);
   var newText = document.createTextNode(“Hello World!”);
   newPara.appendChild(newText);
   document.body.appendChild(newPara);
  }
 </script>
</head>
<body onload=“addPara()”>
</body>
document.getElementById() A method of the DOM that takes an ID value parameter and returns an element that matches the id.
DOM 方法，接受一个 ID 值参数并返回匹配该 ID 的元素。		 //Changes the content of the div to “Hello World!”
<div id=“div1”>
 <p>Hello</p>
 <p>Hello</p>
</div>

<script>
 document.getElementById(“div1”).innerHTML = “<p>Hello World!</p>”;
</script>
document.getElementsByTagName() A method of the DOM that takes a tag name parameter and returns an array called “NodeList” that contains elements with the specified tag name.
DOM 方法，接受一个标签名参数，并返回一个名为“NodeList”的数组，该数组包含具有指定标签名的元素。		 //Gets an array of all elements in a document with the <p> tag.
var tagNameArray = document.getElementsByTagName(“p”);
document.write() Writes HTML or JavaScript to a document. Note that it overwrites any other text in the document so is mostly used for testing purposes only.
将 HTML 或 JavaScript 写入文档。请注意，它会覆盖文档中的任何其他文本，因此主要用于测试目的。		 //Writes “Hello World” to the output stream.
document.write(“Hello World”);
element.getAttribute() Returns the value of the specified attribute. Takes one parameter: the attribute name whose value is to be returned.
返回指定属性的值。接受一个参数：要返回值的属性名称。		 //Removes the CSS style color blue
<div id="div1" style="color: blue"></div>
<script>
 var div1 = document.getElementById("div1").getAttribute(“style”);
</script>
element.innerHTML() A property of the Element class that returns or alters contents of an HTML element as a text string.
元素类的一个属性，用于返回或更改 HTML 元素的文本字符串内容。		 //Changes the content of the div to “Hello World!”
<div id=“div1”>
 <p>Hello</p>
 <p>Hello</p>
</div>

<script>
 document.getElementById(“div1”).innerHTML = “<p>Hello World!</p>”;
</script>
element.removeAttribute() A property of the Element class that removes all previously set inline CSS styles for a particular element. Takes one parameter: the attribute name that is being removed.
元素类的一个属性，用于移除特定元素之前设置的所有内联 CSS 样式。接受一个参数：要移除的属性名称。		 //Removes the CSS style color blue
<div id="div1" style="color: blue"></div>
<script>
 var div1 = document.getElementById("div1").getAttribute(“style”);
</script>
element.setAttribute() A property of the Element class that overwrites all previously set inline CSS styles for a particular element. Takes two parameters: the attribute name that is being set and the attribute value the attribute is set to.
元素类的一个属性，用于覆盖特定元素之前设置的 所有内联 CSS 样式。接受两个参数：正在设置的属性名称和属性值。		 //In all elements named “theImage” sets the name of all src attributes to “another.gif”
document.getElementById(“theImage”).setAttribute(“src”, “another.gif”);
element.style() A property of the Element class that returns or alters inline CSS. Syntax is element.style.propertyName = value
元素类的一个属性，用于返回或修改内联 CSS。语法为：element.style.propertyName = value		 //Changes the CSS style color from blue to red
<div id="div1" style="color: blue"></div>
<script>
 var div1 = document.getElementById("div1");
 div1.style.color = "red";
</script>
Error Objects Instance creates two properties about the error: message that contains description of the error and the name property identifies the type of error. Generic error plus 6 other core errors: TypeError, RangeError, URIError, EvalError, ReferenceError, SyntaxError.
实例创建了两个关于错误的属性：包含错误描述的消息和标识错误类型的名称属性。通用错误加 6 个其他核心错误：TypeError、RangeError、URIError、EvalError、ReferenceError、SyntaxError。
Error object can be extended to create custom error messages using the throw keyword.
错误对象可以扩展以使用 throw 关键字创建自定义错误消息。		 //Catch statement defines a block of code to be executed if an error occurs in the try block.
catch (err) {
 document.getElementById(“myfile”).innerHTML = err.name;
}
//Creates custom error message
throw new Error(“Only values 1-10 are permitted”);
History Objects The history object is part of the window object and contains the URLs visited by the user within a browser window. It exposes useful methods and properties that let you navigate back and forth through the user's history and manipulate the contents of the history stack.
历史对象是窗口对象的一部分，包含用户在浏览器窗口中访问的 URL。它公开了有用的方法和属性，允许您在用户的历史记录中前后导航并操作历史记录栈的内容。		 //Go back two pages if the history exists in the history list.
history.go(-2);
insertBefore() An HTML DOM method that, after creating an element, places a child element in the appropriate location before an existing child. The method takes two parameters, the node object to be inserted and the existing node to insert before.
HTML DOM 方法，在创建元素后，将子元素放置在现有子元素之前的位置。该方法接受两个参数，要插入的节点对象和要插入之前存在的节点。		 //Creates a new <li> element and places it in the elementList before the first child of <ul>
let newLI = document.createElement("li");
newLI.innerText = "new Element";
let elementList = document.getElementById("thisList");
elementList.insertBefore(newLI, elementList.childNodes[0]);
Location Objects The location object is part of the window object and contains information about the current URL.
位置对象是窗口对象的一部分，包含有关当前 URL 的信息。		 //Returns the hostname property
let myhost = location.hostname;
Navigator Objects The navigator object is part of the window object class in the DOM that represents the client Internet browser, also called the user agent. There is no standard for this object so what it returns differs from browser to browser.
导航对象是 DOM 中代表客户端 Internet 浏览器的窗口对象类的一部分，也称为用户代理。该对象没有标准，因此它返回的内容因浏览器而异。		 //Retrieves the name of the browser
var browsername = navigator.appName;
onload() A DOM event that starts a method when a page is loaded.
页面加载时启动方法的 DOM 事件。		 //Executes myFunction after MyHTMLPage has been loaded
document.getElementById(“MyHTMLPage”).onload = function () {myFunction};
replaceChild() After creating an element, this function replaces a child node with a new node.
在创建一个元素后，此函数用新节点替换子节点。		 //Creates a new node and replaces the second element in “thisList” with the word “blue”
let secondBullet = document.createTextNode(“blue”);
var myList = document.getElementById(“thisList”).childNodes[1];
myList.replaceChild(secondBullet,   myList.childNodes[1]);
Screen Objects The screen object is part of the window object class in the DOM that can be used to return properties about the user’s screen.
屏幕对象是 DOM 中窗口对象类的一部分，可以用来返回有关用户屏幕的属性。		 //Returns the height and width of the user’s screen
var height=screen.height;
var width=screen.width;
Window Objects The DOM window object is at the top of the DOM hierarchy and serves as the global object. Everything in the DOM takes place in a window. The window object controls the environment that contains the document.
DOM 窗口对象位于 DOM 层次结构的顶部，充当全局对象。DOM 中的所有内容都在窗口中进行。窗口对象控制包含文档的环境。		 //Opens a new browser window with the specified URL
window.open(“http://www.w3schools.com”);
window.open() Opens a new window. The first parameter is a path, a URL, or an empty string, and optional parameters include the window name, features such as the placement of the window or the dimensions, and a Boolean replace value. The feature parameter is a comma separated string of name-value pairs and the replace parameter is an optional Boolean. This parameter has been deprecated so modern browsers may not support it. This method returns a reference to the new window object.
打开新窗口。第一个参数是路径、URL 或空字符串，可选参数包括窗口名称、窗口位置或尺寸等特性，以及一个可选的布尔值 replace。特性参数是一个以逗号分隔的名称-值对字符串，而 replace 参数是一个可选的布尔值。此参数已被弃用，因此现代浏览器可能不支持它。此方法返回对新窗口对象的引用。		 //Opens a new window that opens the IBM home page and has a width of 600 and a height of 800)
let thisWindow = window.open(“http://www.ibm.com”, “myWindow”, “width”=600, “height”=800);
window.scrollTo() Scrolls to a particular place in a window. Parameters include the x-coordinate which is the left-most pixel and the y-coordinate which is the upper-most pixel.
将滚动条滚动到窗口的特定位置。参数包括 x 坐标，即最左边的像素，以及 y 坐标，即最上面的像素。		 //Scrolls the window to the pixel located at the coordinate (20, 200)
window.scrollTo(20, 200);
Wrapper Objects Primitive types can be converted to objects using wrapper objects. They are the same name as the primitive except they start with uppercase letter. The typeof keyword returns a string indicating the data type of the operand.
原始类型可以通过包装对象转换为对象。它们的名称与原始类型相同，只是以大写字母开头。 typeof 关键字返回一个表示操作数数据类型的字符串。		 //Enables the use of properties and methods of the String class such as the property n.length
let n = new String (“abc”);

//Returns string
typeof “abc”;

//Returns object
typeof new String(“abc”);