Expressive JavaScript: Document Object Model (Document Object Model)
Content
- Introduction
- Values, Types and Operators
- Program structure
- Functions
- Data Structures: Objects and Arrays
- Higher order functions
- The secret life of objects
- Project: e-life
- Search and error handling
- Regular expressions
- Modules
- Project: programming language
- Javascript and browser
- Document Object Model
- Event handling
- Project: Platform Game
- Drawing on canvas
- HTTP
- Forms and form fields
- Project: Paint
- Node.js
- Project: website sharing experience
- Sandbox for code
When you open a web page in a browser, it receives HTML source code and parses (parsit) it in the same way as our parser from Chapter 11 parsed the program. The browser builds a model of the document structure and uses it to draw a page on the screen.
This document view is one of the toys available in the JavaScript sandbox. You can read it and change it. It changes in real time - as soon as you correct it, the page on the screen is updated to reflect the changes.
Document structure
')
You can think of HTML as a set of nested boxes. Tags like
<!doctype html> <html> <head> <title> </title> </head> <body> <h1> </h1> <p>, .</p> <p> ! <a href="http://eloquentjavascript.net"></a>.</p> </body> </html> This page has the following structure:
The data structure used by the browser to present the document reflects its shape. For each box there is an object with which we can interact and find out different data about it - which tag it represents, which boxes and text it contains. This view is called the Document Object Model (Document Object Model), or DOM for short.
We can access these objects through the global document variable. Its documentElement property refers to an object that represents the tag. It also provides the head and body properties, which contain objects for the corresponding elements.
Trees
Recall the syntax trees from chapter 11. Their structure is remarkably similar to the structure of a browser document. Each node can refer to other nodes, each of the branches can have its own branch. This structure is a typical example of nested structures, where elements contain sub-elements that resemble themselves.
We call the data structure a tree when it forks, has no cycles (a node cannot contain itself), and has a single distinct “root”. In the case of the DOM, document.documentElement acts as the root.
Trees are often found in computational science. In addition to representing recursive structures like an HTML document or program, they are often used to work with sorted datasets, because elements are usually easier to find or insert into a sorted tree than into a sorted one-dimensional array.
A typical tree has different nodes. The Egg syntax tree had variables, values, and applications. Applications have always had child branches, and variables and values ​​have been "leaves", that is, nodes without child branches.
The same with DOM. Nodes for ordinary elements representing HTML tags define the structure of the document. They may have child nodes. An example of such a node is document.body. Some of these child nodes may turn out to be leaves — for example, text or comments (in HTML, comments are written between characters).
Each DOM node object has a nodeType property that contains a numeric code that identifies the type of node. For ordinary elements, it is equal to 1, which is also defined as the constant property document.ELEMENT_NODE. For text nodes representing text fragments, it is 3 (document.TEXT_NODE). Comments - 8 (document.COMMENT_NODE).
That is, here is another way to graphically represent the document tree:
The leaves are text nodes, and the arrows show the father-child relationship between the nodes.
Standard
Using cryptic numbers to represent the type of a node is not a JavaScript approach. Later we will come across other parts of the DOM interface that also seem alien and awkward. The reason is that the DOM was developed not only for JavaScript. He is trying to define an interface that is not dependent on a language that can be used in other systems, not only in HTML, but also in XML, which is a general-purpose data format with syntax resembling HTML.
It turns out uncomfortable. Although standards are a very useful thing, in our case the advantage of language independence is not so useful. It is better to have an interface that is well adapted to the language you are using than an interface that will be familiar when using different languages.
To show inconvenient language integration, consider the childNodes property that DOM nodes have. It contains an object, similar to an array, with the length property, and numbered properties for accessing child nodes. But this is an instance of the NodeList type, not a real array, so it has no methods like forEach.
There are also problems associated with poor system forethought. For example, you cannot create a new node and immediately add properties or child nodes to it. First you need to create it, then add children one by one, and at the end assign properties one by one, using side effects. Code that works closely with DOM is long, ugly and with a lot of repetition.
But these problems are not fatal. JavaScript allows you to create abstractions. It is easy to write helper functions that allow you to express operations more clearly and briefly. In general, these kinds of tools provide a lot of programming libraries for the browser.
Tree traversal
DOM nodes contain many references to adjacent ones. This is shown in the diagram:
Although only one link of each type is shown here, each node has a parentNode property that points to its parent node. Also, each element node (type 1) has a childNodes property that points to an array-like object containing its child nodes.
In theory, you can go to any part of the tree using only these links. But JavaScript provides us with many additional helper links. The firstChild and lastChild properties point to the first and last child elements, or they are null for those nodes that have no children. The previousSibling and nextSibling points to the neighboring nodes - the nodes of the same parent as the current node, but that are in the list immediately before or after the current one. At the first node, the previousSibling property will be null, and the last nextSibling property will be null.
When working with such nested structures, recursive functions come in handy. The following one searches the document for text nodes containing the given string, and returns true when it finds:
function talksAbout(node, string) { if (node.nodeType == document.ELEMENT_NODE) { for (var i = 0; i < node.childNodes.length; i++) { if (talksAbout(node.childNodes[i], string)) return true; } return false; } else if (node.nodeType == document.TEXT_NODE) { return node.nodeValue.indexOf(string) > -1; } } console.log(talksAbout(document.body, "")); // → true Properties of the text node nodeValue contains a line of text.
Search for items
It is often useful to navigate through these links between parents, children and related nodes and go through the entire document. However, if we need a specific node in the document, it is very inconvenient to follow it, starting from document.body and stupidly going through the hard-coded path in the code. In doing so, we introduce into the program assumptions about the exact structure of the document - and we may later want to change it. Another complicating factor is that text nodes are created even for spaces between nodes. In the example document, the body tag has not three children (h1 and two p), but seven as many: these three plus spaces before, after and between them.
So if we need the href attribute from the link, we should not write something like “the second child of the sixth child of document.body” in the program. It would be better if we could say: "the first link in the document." And so you can do:
var link = document.body.getElementsByTagName("a")[0]; console.log(link.href); All element nodes have a getElementsByTagName method that collects all elements with a given tag that originate (direct or not direct descendants) from this node and returns it as an array-like object.
To find a specific node, you can set its id attribute and use the document.getElementById method.
<p> :</p> <p><img id="gertrude" src="img/ostrich.png"></p> <script> var ostrich = document.getElementById("gertrude"); console.log(ostrich.src); </script> The third method is getElementsByClassName, which, like getElementsByTagName, searches the contents of an element node and returns all elements containing a given string in its class.
Change the document
Almost everything in the DOM structure can be changed. Element nodes have a set of methods that are used to modify them. The removeChild method removes the specified child node. To add a node, you can use appendChild, which adds a node to the end of the list, or insertBefore, which adds the node passed in the first argument before the node passed in the second argument.
<p></p> <p></p> <p></p> <script> var paragraphs = document.body.getElementsByTagName("p"); document.body.insertBefore(paragraphs[2], paragraphs[0]); </script> A node can exist in a document in only one place. Therefore, by inserting paragraph “Three” before paragraph “One,” we actually remove it from the end of the list and insert it at the beginning, and we get “Three / One / Two.” All operations to insert a node will lead to its disappearance from the current position (if it had one).
The replaceChild method is used to replace one child node with another. It takes two nodes: a new one, and one that needs to be replaced. The replaced node must be a child of the element whose method we are calling. Both replaceChild and insertBefore as the first argument expect to get a new node.
Creating nodes
In the following example, we need to make a script that replaces all the pictures (tag) in the document with the text contained in their “alt” attribute, which specifies an alternative textual representation of the picture.
To do this, you must not only remove the pictures, but also add new text nodes to replace them. For this we use the document.createTextNode method.
<p> <img src="img/cat.png" alt=""> <img src="img/hat.png" alt="">.</p> <p><button onclick="replaceImages()"></button></p> <script> function replaceImages() { var images = document.body.getElementsByTagName("img"); for (var i = images.length - 1; i >= 0; i--) { var image = images[i]; if (image.alt) { var text = document.createTextNode(image.alt); image.parentNode.replaceChild(text, image); } } } </script> By getting the string, createTextNode gives us a type 3 DOM (text) node, which we can insert into the document so that it is shown on the screen.
The cycle of pictures begins at the end of the list of nodes. This is done because the list of nodes returned by the getElementsByTagName method (or the childNodes property) is constantly updated when the document changes. If we started from the beginning, deleting the first picture would result in the loss of the first item in the list, and during the second pass of the cycle, when i is 1, it would stop, because the length of the list would also become 1.
If you need to work with a fixed list of nodes instead of “live”, you can convert it to a real array using the slice method.
var arrayish = {0: "", 1: "", length: 2}; var real = Array.prototype.slice.call(arrayish, 0); real.forEach(function(elt) { console.log(elt); }); // → // You can use document.createElement to create element nodes (type 1). The method takes the tag name and returns a new empty node of the specified type. The following example defines the elt tool, which creates an element node and uses the remaining arguments as its children. This function is then used to add additional information to the quote.
<blockquote id="quote"> . , , . </blockquote> <script> function elt(type) { var node = document.createElement(type); for (var i = 1; i < arguments.length; i++) { var child = arguments[i]; if (typeof child == "string") child = document.createTextNode(child); node.appendChild(child); } return node; } document.getElementById("quote").appendChild( elt("footer", "—", elt("strong", " "), ", ", elt("em", " "), ", 1950")); </script> Attributes
Some attribute elements, such as href in links, can be accessed through the object property of the same name. This is possible for a limited number of commonly used standard attributes.
But HTML allows you to assign nodes to any attributes. This is useful because allows you to store additional information in the document. If you invent your own attribute names, they will not be among the properties of the element node. Instead, you will need to use the getAttribute and setAttribute methods to work with them.
<p data-classified="secret"> 00000000.</p> <p data-classified="unclassified"> .</p> <script> var paras = document.body.getElementsByTagName("p"); Array.prototype.forEach.call(paras, function(para) { if (para.getAttribute("data-classified") == "secret") para.parentNode.removeChild(para); }); </script> I recommend to put “data-“ before names of invented attributes to be sure that they do not conflict with any other. As a simple example, we will write syntax highlighting that looks for <pre> tags (“preformatted”, preformatted — used for code and simple text) with the data-language attribute and rather crudely tries to highlight keywords in the language.
function highlightCode(node, keywords) { var text = node.textContent; node.textContent = ""; // var match, pos = 0; while (match = keywords.exec(text)) { var before = text.slice(pos, match.index); node.appendChild(document.createTextNode(before)); var strong = document.createElement("strong"); strong.appendChild(document.createTextNode(match[0])); node.appendChild(strong); pos = keywords.lastIndex; } var after = text.slice(pos); node.appendChild(document.createTextNode(after)); } The highlightCode function accepts a <pre> node and a regular (with the global setting enabled), which is the same as the keyword of the programming language that contains the element.
The textContent property is used to get the entire text of the node, and then set to an empty string, which clears the node. In the loop, we go through all the occurrences of the keyword expression, add text between them in the form of simple text nodes, and add the matched text (keywords), enclosing them in <strong> elements (bold type).
We can automatically highlight the entire code of the page, looping through all the <pre> elements that have the data-language attribute, and calling on each highlightCode with the correct regularity.
var languages = { javascript: /\b(function|return|var)\b/g /* … etc */ }; function highlightAllCode() { var pres = document.body.getElementsByTagName("pre"); for (var i = 0; i < pres.length; i++) { var pre = pres[i]; var lang = pre.getAttribute("data-language"); if (languages.hasOwnProperty(lang)) highlightCode(pre, languages[lang]); } } Here is an example:
<p> , :</p> <pre data-language="javascript"> function id(x) { return x; } </pre> <script>highlightAllCode();</script> There is one commonly used attribute, a class, whose name is a keyword in JavaScript. For historical reasons, when older JavaScript implementations did not know how to handle property names that matched keywords, this attribute is available through a property called className. You can also access it by its real name “class” through the getAttribute and setAttribute methods.
Layout of elements (layout)
You may have noticed that different types of elements are arranged differently. Some, such as paragraphs <p> and headers <h1>, stretch the entire width of the document and appear on separate lines. Such elements are called block. Others like <a> or bold text <strong> appear on the same line as the text surrounding them. They are called inline.
For any document, browsers can build the location of elements, the layout, in which each will have the size and position based on its type and content. Then this alignment is used to create the appearance of the document.
The size and position of the element can be found through JavaScript. The offsetWidth and offsetHeight properties give the size in pixels occupied by the element. Pixel is the basic unit of measurement in browsers, and usually corresponds to the size of the minimum point on the screen. Similarly, clientWidth and clientHeight give the size of the inside of the element, not counting the border (or, as some say, the curb).
<p style="border: 3px solid red"> </p> <script> var para = document.body.getElementsByTagName("p")[0]; console.log("clientHeight:", para.clientHeight); console.log("offsetHeight:", para.offsetHeight); </script> The most effective way to find out the exact location of an element on the screen is the getBoundingClientRect method. It returns an object with the properties top, bottom, left, and right (top, bottom, left, and right) that contain the position of the element relative to the upper left corner of the screen in pixels. If you need to get this data for the entire document, you need to add the current scroll position, which is contained in the global variables pageXOffset and pageYOffset.
Parsing the document is a difficult task. In order to speed browser engines do not rebuild the document every time after its change, and wait for so long. how is it possible. When the JavaScript program that modified the document finishes working, the browser will have to calculate the new page layout to display the modified document on the screen. When a program asks for the position or size of something, reading properties like offsetHeight or calling getBoundingClientRect, the layout is also required to provide correct information.
A program that periodically reads the DOM layout and modifies the DOM causes the browser to recalculate the layout many times, and therefore will work slowly. In the following example, there are two different programs that build a line of X characters 2000 pixels wide and measure the running time.
<p><span id="one"></span></p> <p><span id="two"></span></p> <script> function time(name, action) { var start = Date.now(); // action(); console.log(name, "", Date.now() - start, "ms"); } time("", function() { var target = document.getElementById("one"); while (target.offsetWidth < 2000) target.appendChild(document.createTextNode("X")); }); // → 32 ms time("", function() { var target = document.getElementById("two"); target.appendChild(document.createTextNode("XXXXX")); var total = Math.ceil(2000 / (target.offsetWidth / 5)); for (var i = 5; i < total; i++) target.appendChild(document.createTextNode("X")); }); // → 1 ms </script> Styles
We have seen that different elements of HTML behave differently. Some are shown as blocks, others are embedded. Some add a visual style — for example,
.
, , . , , , . style ():
<p><a href="."> </a></p> <p><a href="." style="color: green"> </a></p>
style (color), . : “color: red; border: none”.
. , display , .
<strong></strong>, <strong style="display: block"> </strong>, <strong style="display: none"> </strong>.
, – display: none . . , .
JavaScript style. , . – , - .
<p id="para" style="color: purple"> </p> <script> var para = document.getElementById("para"); console.log(para.style.color); para.style.color = "magenta"; </script>
, font-family. JavaScript ( style["font-family"]), , : style.fontFamily
HTML CSS (Cascading Style Sheets, ). – . :
<style> strong { font-style: italic; color: gray; } </style> <p> <strong> strong</strong> .</p>
«» , . , , , font-style .
, . font-weight: normal, , , . , style, .
CSS . .abc , “abc”. #xyz id “xyz” ( id ).
.subtle { color: gray; font-size: 80%; } #header { background: blue; color: white; } /* p, a b, id main */ pab#main { margin-bottom: 20px; }
, . , , . , pa , p .a, .
p > a {…} , .
pa {…} , , .
. , 2-3 . (, , ) – - DOM.
querySelectorAll, document, -, , , .
<p> <span class="animal"></span></p> <p> </p> <p> <span class="character"> <span class="animal"> </span></span></p> <p> .</p> <script> function count(selector) { return document.querySelectorAll(selector).length; } console.log(count("p")); // <p> // → 4 console.log(count(".animal")); // animal // → 2 console.log(count("p .animal")); // animal <p> // → 2 console.log(count("p > .animal")); // <p> // → 1 </script>
getElementsByTagName, querySelectorAll . , .
querySelector ( All) . , . , null, .
position . static, , . relative, , top left . absolute, «» – , . , left top , position static. , .
. , .
<p style="text-align: center"> <img src="img/cat.png" style="position: relative"> </p> <script> var cat = document.querySelector("img"); var angle = 0, lastTime = null; function animate(time) { if (lastTime != null) angle += (time - lastTime) * 0.001; lastTime = time; cat.style.top = (Math.sin(angle) * 20) + "px"; cat.style.left = (Math.cos(angle) * 200) + "px"; requestAnimationFrame(animate); } requestAnimationFrame(animate); </script>
position: relative. top left , .
requestAnimationFrame animate , . animate requestAnimationFrame, . ( ) , 60 , .
DOM , . JavaScript, . requestAnimationFrame – , , , .
, ( lastTime), , . , , , .
Math.cos Math.sin. , , .
Math.cos Math.sin , (0, 0) . , 0 , , 2π ( 6.28) . Math.cos x , , Math.sin y. ( ) , 2π 0, – , a+2π , a.
angle , animation. image. top Math.sin 20 – . left Math.cos 200, .
. px , , ( , ems ). . – 0, .
JavaScript DOM. , JavaScript . DOM , . parentNode childNodes, .
, , - . , , color display. JavaScript style.
6. HTML . HTML :
<table> <tr> <th>name</th> <th>height</th> <th>country</th> </tr> <tr> <td>Kilimanjaro</td> <td>5895</td> <td>Tanzania</td> </tr> </table>
. : , .
, 6, MOUNTAINS.
buildTable, , , DOM, . , , , . Object.keys, , .
, , style.textAlign "right".
<style> /* */ table { border-collapse: collapse; } td, th { border: 1px solid black; padding: 3px 8px; } th { text-align: left; } </style> <script> function buildTable(data) { // } document.body.appendChild(buildTable(MOUNTAINS)); </script>
getElementsByTagName . , ( ) , .
, tagName. , . toLowerCase toUpperCase.
<h1> <span>span</span> .</h1> <p> <span></span>, <span></span> spans.</p> <script> function byTagName(node, tagName) { // } console.log(byTagName(document.body, "h1").length); // → 1 console.log(byTagName(document.body, "span").length); // → 3 var para = document.querySelector("p"); console.log(byTagName(para, "span").length); // → 2 </script>
, 
. - .
, . top left . , position.
<img src="img/cat.png" id="cat" style="position: absolute"> <img src="img/hat.png" id="hat" style="position: absolute"> <script> var cat = document.querySelector("#cat"); var hat = document.querySelector("#hat"); // Your code here. </script>
.
, , . , , , . style ():
<p><a href="."> </a></p> <p><a href="." style="color: green"> </a></p>
style (color), . : “color: red; border: none”.
. , display , .
<strong></strong>, <strong style="display: block"> </strong>, <strong style="display: none"> </strong>.
, – display: none . . , .
JavaScript style. , . – , - .
<p id="para" style="color: purple"> </p> <script> var para = document.getElementById("para"); console.log(para.style.color); para.style.color = "magenta"; </script>
, font-family. JavaScript ( style["font-family"]), , : style.fontFamily
HTML CSS (Cascading Style Sheets, ). – . :
<style> strong { font-style: italic; color: gray; } </style> <p> <strong> strong</strong> .</p>
«» , . , , , font-style .
, . font-weight: normal, , , . , style, .
CSS . .abc , “abc”. #xyz id “xyz” ( id ).
.subtle { color: gray; font-size: 80%; } #header { background: blue; color: white; } /* p, a b, id main */ pab#main { margin-bottom: 20px; }
, . , , . , pa , p .a, .
p > a {…} , .
pa {…} , , .
. , 2-3 . (, , ) – - DOM.
querySelectorAll, document, -, , , .
<p> <span class="animal"></span></p> <p> </p> <p> <span class="character"> <span class="animal"> </span></span></p> <p> .</p> <script> function count(selector) { return document.querySelectorAll(selector).length; } console.log(count("p")); // <p> // → 4 console.log(count(".animal")); // animal // → 2 console.log(count("p .animal")); // animal <p> // → 2 console.log(count("p > .animal")); // <p> // → 1 </script>
getElementsByTagName, querySelectorAll . , .
querySelector ( All) . , . , null, .
position . static, , . relative, , top left . absolute, «» – , . , left top , position static. , .
. , .
<p style="text-align: center"> <img src="img/cat.png" style="position: relative"> </p> <script> var cat = document.querySelector("img"); var angle = 0, lastTime = null; function animate(time) { if (lastTime != null) angle += (time - lastTime) * 0.001; lastTime = time; cat.style.top = (Math.sin(angle) * 20) + "px"; cat.style.left = (Math.cos(angle) * 200) + "px"; requestAnimationFrame(animate); } requestAnimationFrame(animate); </script>
position: relative. top left , .
requestAnimationFrame animate , . animate requestAnimationFrame, . ( ) , 60 , .
DOM , . JavaScript, . requestAnimationFrame – , , , .
, ( lastTime), , . , , , .
Math.cos Math.sin. , , .
Math.cos Math.sin , (0, 0) . , 0 , , 2π ( 6.28) . Math.cos x , , Math.sin y. ( ) , 2π 0, – , a+2π , a.
angle , animation. image. top Math.sin 20 – . left Math.cos 200, .
. px , , ( , ems ). . – 0, .
JavaScript DOM. , JavaScript . DOM , . parentNode childNodes, .
, , - . , , color display. JavaScript style.
6. HTML . HTML :
<table> <tr> <th>name</th> <th>height</th> <th>country</th> </tr> <tr> <td>Kilimanjaro</td> <td>5895</td> <td>Tanzania</td> </tr> </table>
. : , .
, 6, MOUNTAINS.
buildTable, , , DOM, . , , , . Object.keys, , .
, , style.textAlign "right".
<style> /* */ table { border-collapse: collapse; } td, th { border: 1px solid black; padding: 3px 8px; } th { text-align: left; } </style> <script> function buildTable(data) { // } document.body.appendChild(buildTable(MOUNTAINS)); </script>
getElementsByTagName . , ( ) , .
, tagName. , . toLowerCase toUpperCase.
<h1> <span>span</span> .</h1> <p> <span></span>, <span></span> spans.</p> <script> function byTagName(node, tagName) { // } console.log(byTagName(document.body, "h1").length); // → 1 console.log(byTagName(document.body, "span").length); // → 3 var para = document.querySelector("p"); console.log(byTagName(para, "span").length); // → 2 </script>
,
. - .
, . top left . , position.
<img src="img/cat.png" id="cat" style="position: absolute"> <img src="img/hat.png" id="hat" style="position: absolute"> <script> var cat = document.querySelector("#cat"); var hat = document.querySelector("#hat"); // Your code here. </script> .
, , . , , , . style ():
<p><a href="."> </a></p> <p><a href="." style="color: green"> </a></p>
style (color), . : “color: red; border: none”.
. , display , .
<strong></strong>, <strong style="display: block"> </strong>, <strong style="display: none"> </strong>.
, – display: none . . , .
JavaScript style. , . – , - .
<p id="para" style="color: purple"> </p> <script> var para = document.getElementById("para"); console.log(para.style.color); para.style.color = "magenta"; </script>
, font-family. JavaScript ( style["font-family"]), , : style.fontFamily
HTML CSS (Cascading Style Sheets, ). – . :
<style> strong { font-style: italic; color: gray; } </style> <p> <strong> strong</strong> .</p>
«» , . , , , font-style .
, . font-weight: normal, , , . , style, .
CSS . .abc , “abc”. #xyz id “xyz” ( id ).
.subtle { color: gray; font-size: 80%; } #header { background: blue; color: white; } /* p, a b, id main */ pab#main { margin-bottom: 20px; }
, . , , . , pa , p .a, .
p > a {…} , .
pa {…} , , .
. , 2-3 . (, , ) – - DOM.
querySelectorAll, document, -, , , .
<p> <span class="animal"></span></p> <p> </p> <p> <span class="character"> <span class="animal"> </span></span></p> <p> .</p> <script> function count(selector) { return document.querySelectorAll(selector).length; } console.log(count("p")); // <p> // → 4 console.log(count(".animal")); // animal // → 2 console.log(count("p .animal")); // animal <p> // → 2 console.log(count("p > .animal")); // <p> // → 1 </script>
getElementsByTagName, querySelectorAll . , .
querySelector ( All) . , . , null, .
position . static, , . relative, , top left . absolute, «» – , . , left top , position static. , .
. , .
<p style="text-align: center"> <img src="img/cat.png" style="position: relative"> </p> <script> var cat = document.querySelector("img"); var angle = 0, lastTime = null; function animate(time) { if (lastTime != null) angle += (time - lastTime) * 0.001; lastTime = time; cat.style.top = (Math.sin(angle) * 20) + "px"; cat.style.left = (Math.cos(angle) * 200) + "px"; requestAnimationFrame(animate); } requestAnimationFrame(animate); </script>
position: relative. top left , .
requestAnimationFrame animate , . animate requestAnimationFrame, . ( ) , 60 , .
DOM , . JavaScript, . requestAnimationFrame – , , , .
, ( lastTime), , . , , , .
Math.cos Math.sin. , , .
Math.cos Math.sin , (0, 0) . , 0 , , 2π ( 6.28) . Math.cos x , , Math.sin y. ( ) , 2π 0, – , a+2π , a.
angle , animation. image. top Math.sin 20 – . left Math.cos 200, .
. px , , ( , ems ). . – 0, .
JavaScript DOM. , JavaScript . DOM , . parentNode childNodes, .
, , - . , , color display. JavaScript style.
6. HTML . HTML :
<table> <tr> <th>name</th> <th>height</th> <th>country</th> </tr> <tr> <td>Kilimanjaro</td> <td>5895</td> <td>Tanzania</td> </tr> </table>
. : , .
, 6, MOUNTAINS.
buildTable, , , DOM, . , , , . Object.keys, , .
, , style.textAlign "right".
<style> /* */ table { border-collapse: collapse; } td, th { border: 1px solid black; padding: 3px 8px; } th { text-align: left; } </style> <script> function buildTable(data) { // } document.body.appendChild(buildTable(MOUNTAINS)); </script>
getElementsByTagName . , ( ) , .
, tagName. , . toLowerCase toUpperCase.
<h1> <span>span</span> .</h1> <p> <span></span>, <span></span> spans.</p> <script> function byTagName(node, tagName) { // } console.log(byTagName(document.body, "h1").length); // → 1 console.log(byTagName(document.body, "span").length); // → 3 var para = document.querySelector("p"); console.log(byTagName(para, "span").length); // → 2 </script>
,
. - .
, . top left . , position.
<img src="img/cat.png" id="cat" style="position: absolute"> <img src="img/hat.png" id="hat" style="position: absolute"> <script> var cat = document.querySelector("#cat"); var hat = document.querySelector("#hat"); // Your code here. </script>.
, , . , , , . style ():
<p><a href="."> </a></p> <p><a href="." style="color: green"> </a></p>
style (color), . : “color: red; border: none”.
. , display , .
<strong></strong>, <strong style="display: block"> </strong>, <strong style="display: none"> </strong>.
, – display: none . . , .
JavaScript style. , . – , - .
<p id="para" style="color: purple"> </p> <script> var para = document.getElementById("para"); console.log(para.style.color); para.style.color = "magenta"; </script>
, font-family. JavaScript ( style["font-family"]), , : style.fontFamily
HTML CSS (Cascading Style Sheets, ). – . :
<style> strong { font-style: italic; color: gray; } </style> <p> <strong> strong</strong> .</p>
«» , . , , , font-style .
, . font-weight: normal, , , . , style, .
CSS . .abc , “abc”. #xyz id “xyz” ( id ).
.subtle { color: gray; font-size: 80%; } #header { background: blue; color: white; } /* p, a b, id main */ pab#main { margin-bottom: 20px; }
, . , , . , pa , p .a, .
p > a {…} , .
pa {…} , , .
. , 2-3 . (, , ) – - DOM.
querySelectorAll, document, -, , , .
<p> <span class="animal"></span></p> <p> </p> <p> <span class="character"> <span class="animal"> </span></span></p> <p> .</p> <script> function count(selector) { return document.querySelectorAll(selector).length; } console.log(count("p")); // <p> // → 4 console.log(count(".animal")); // animal // → 2 console.log(count("p .animal")); // animal <p> // → 2 console.log(count("p > .animal")); // <p> // → 1 </script>
getElementsByTagName, querySelectorAll . , .
querySelector ( All) . , . , null, .
position . static, , . relative, , top left . absolute, «» – , . , left top , position static. , .
. , .
<p style="text-align: center"> <img src="img/cat.png" style="position: relative"> </p> <script> var cat = document.querySelector("img"); var angle = 0, lastTime = null; function animate(time) { if (lastTime != null) angle += (time - lastTime) * 0.001; lastTime = time; cat.style.top = (Math.sin(angle) * 20) + "px"; cat.style.left = (Math.cos(angle) * 200) + "px"; requestAnimationFrame(animate); } requestAnimationFrame(animate); </script>
position: relative. top left , .
requestAnimationFrame animate , . animate requestAnimationFrame, . ( ) , 60 , .
DOM , . JavaScript, . requestAnimationFrame – , , , .
, ( lastTime), , . , , , .
Math.cos Math.sin. , , .
Math.cos Math.sin , (0, 0) . , 0 , , 2π ( 6.28) . Math.cos x , , Math.sin y. ( ) , 2π 0, – , a+2π , a.
angle , animation. image. top Math.sin 20 – . left Math.cos 200, .
. px , , ( , ems ). . – 0, .
JavaScript DOM. , JavaScript . DOM , . parentNode childNodes, .
, , - . , , color display. JavaScript style.
6. HTML . HTML :
<table> <tr> <th>name</th> <th>height</th> <th>country</th> </tr> <tr> <td>Kilimanjaro</td> <td>5895</td> <td>Tanzania</td> </tr> </table>
. : , .
, 6, MOUNTAINS.
buildTable, , , DOM, . , , , . Object.keys, , .
, , style.textAlign "right".
<style> /* */ table { border-collapse: collapse; } td, th { border: 1px solid black; padding: 3px 8px; } th { text-align: left; } </style> <script> function buildTable(data) { // } document.body.appendChild(buildTable(MOUNTAINS)); </script>
getElementsByTagName . , ( ) , .
, tagName. , . toLowerCase toUpperCase.
<h1> <span>span</span> .</h1> <p> <span></span>, <span></span> spans.</p> <script> function byTagName(node, tagName) { // } console.log(byTagName(document.body, "h1").length); // → 1 console.log(byTagName(document.body, "span").length); // → 3 var para = document.querySelector("p"); console.log(byTagName(para, "span").length); // → 2 </script>
,
. - .
, . top left . , position.
<img src="img/cat.png" id="cat" style="position: absolute"> <img src="img/hat.png" id="hat" style="position: absolute"> <script> var cat = document.querySelector("#cat"); var hat = document.querySelector("#hat"); // Your code here. </script> .
, , . , , , . style ():
<p><a href="."> </a></p> <p><a href="." style="color: green"> </a></p>
style (color), . : “color: red; border: none”.
. , display , .
<strong></strong>, <strong style="display: block"> </strong>, <strong style="display: none"> </strong>.
, – display: none . . , .
JavaScript style. , . – , - .
<p id="para" style="color: purple"> </p> <script> var para = document.getElementById("para"); console.log(para.style.color); para.style.color = "magenta"; </script>
, font-family. JavaScript ( style["font-family"]), , : style.fontFamily
HTML CSS (Cascading Style Sheets, ). – . :
<style> strong { font-style: italic; color: gray; } </style> <p> <strong> strong</strong> .</p>
«» , . , , , font-style .
, . font-weight: normal, , , . , style, .
CSS . .abc , “abc”. #xyz id “xyz” ( id ).
.subtle { color: gray; font-size: 80%; } #header { background: blue; color: white; } /* p, a b, id main */ pab#main { margin-bottom: 20px; }
, . , , . , pa , p .a, .
p > a {…} , .
pa {…} , , .
. , 2-3 . (, , ) – - DOM.
querySelectorAll, document, -, , , .
<p> <span class="animal"></span></p> <p> </p> <p> <span class="character"> <span class="animal"> </span></span></p> <p> .</p> <script> function count(selector) { return document.querySelectorAll(selector).length; } console.log(count("p")); // <p> // → 4 console.log(count(".animal")); // animal // → 2 console.log(count("p .animal")); // animal <p> // → 2 console.log(count("p > .animal")); // <p> // → 1 </script>
getElementsByTagName, querySelectorAll . , .
querySelector ( All) . , . , null, .
position . static, , . relative, , top left . absolute, «» – , . , left top , position static. , .
. , .
<p style="text-align: center"> <img src="img/cat.png" style="position: relative"> </p> <script> var cat = document.querySelector("img"); var angle = 0, lastTime = null; function animate(time) { if (lastTime != null) angle += (time - lastTime) * 0.001; lastTime = time; cat.style.top = (Math.sin(angle) * 20) + "px"; cat.style.left = (Math.cos(angle) * 200) + "px"; requestAnimationFrame(animate); } requestAnimationFrame(animate); </script>
position: relative. top left , .
requestAnimationFrame animate , . animate requestAnimationFrame, . ( ) , 60 , .
DOM , . JavaScript, . requestAnimationFrame – , , , .
, ( lastTime), , . , , , .
Math.cos Math.sin. , , .
Math.cos Math.sin , (0, 0) . , 0 , , 2π ( 6.28) . Math.cos x , , Math.sin y. ( ) , 2π 0, – , a+2π , a.
angle , animation. image. top Math.sin 20 – . left Math.cos 200, .
. px , , ( , ems ). . – 0, .
JavaScript DOM. , JavaScript . DOM , . parentNode childNodes, .
, , - . , , color display. JavaScript style.
6. HTML . HTML :
<table> <tr> <th>name</th> <th>height</th> <th>country</th> </tr> <tr> <td>Kilimanjaro</td> <td>5895</td> <td>Tanzania</td> </tr> </table>
. : , .
, 6, MOUNTAINS.
buildTable, , , DOM, . , , , . Object.keys, , .
, , style.textAlign "right".
<style> /* */ table { border-collapse: collapse; } td, th { border: 1px solid black; padding: 3px 8px; } th { text-align: left; } </style> <script> function buildTable(data) { // } document.body.appendChild(buildTable(MOUNTAINS)); </script>
getElementsByTagName . , ( ) , .
, tagName. , . toLowerCase toUpperCase.
<h1> <span>span</span> .</h1> <p> <span></span>, <span></span> spans.</p> <script> function byTagName(node, tagName) { // } console.log(byTagName(document.body, "h1").length); // → 1 console.log(byTagName(document.body, "span").length); // → 3 var para = document.querySelector("p"); console.log(byTagName(para, "span").length); // → 2 </script>
,
. - .
, . top left . , position.
<img src="img/cat.png" id="cat" style="position: absolute"> <img src="img/hat.png" id="hat" style="position: absolute"> <script> var cat = document.querySelector("#cat"); var hat = document.querySelector("#hat"); // Your code here. </script>.
, , . , , , . style ():
<p><a href="."> </a></p> <p><a href="." style="color: green"> </a></p>
style (color), . : “color: red; border: none”.
. , display , .
<strong></strong>, <strong style="display: block"> </strong>, <strong style="display: none"> </strong>.
, – display: none . . , .
JavaScript style. , . – , - .
<p id="para" style="color: purple"> </p> <script> var para = document.getElementById("para"); console.log(para.style.color); para.style.color = "magenta"; </script>
, font-family. JavaScript ( style["font-family"]), , : style.fontFamily
HTML CSS (Cascading Style Sheets, ). – . :
<style> strong { font-style: italic; color: gray; } </style> <p> <strong> strong</strong> .</p>
«» , . , , , font-style .
, . font-weight: normal, , , . , style, .
CSS . .abc , “abc”. #xyz id “xyz” ( id ).
.subtle { color: gray; font-size: 80%; } #header { background: blue; color: white; } /* p, a b, id main */ pab#main { margin-bottom: 20px; }
, . , , . , pa , p .a, .
p > a {…} , .
pa {…} , , .
. , 2-3 . (, , ) – - DOM.
querySelectorAll, document, -, , , .
<p> <span class="animal"></span></p> <p> </p> <p> <span class="character"> <span class="animal"> </span></span></p> <p> .</p> <script> function count(selector) { return document.querySelectorAll(selector).length; } console.log(count("p")); // <p> // → 4 console.log(count(".animal")); // animal // → 2 console.log(count("p .animal")); // animal <p> // → 2 console.log(count("p > .animal")); // <p> // → 1 </script>
getElementsByTagName, querySelectorAll . , .
querySelector ( All) . , . , null, .
position . static, , . relative, , top left . absolute, «» – , . , left top , position static. , .
. , .
<p style="text-align: center"> <img src="img/cat.png" style="position: relative"> </p> <script> var cat = document.querySelector("img"); var angle = 0, lastTime = null; function animate(time) { if (lastTime != null) angle += (time - lastTime) * 0.001; lastTime = time; cat.style.top = (Math.sin(angle) * 20) + "px"; cat.style.left = (Math.cos(angle) * 200) + "px"; requestAnimationFrame(animate); } requestAnimationFrame(animate); </script>
position: relative. top left , .
requestAnimationFrame animate , . animate requestAnimationFrame, . ( ) , 60 , .
DOM , . JavaScript, . requestAnimationFrame – , , , .
, ( lastTime), , . , , , .
Math.cos Math.sin. , , .
Math.cos Math.sin , (0, 0) . , 0 , , 2π ( 6.28) . Math.cos x , , Math.sin y. ( ) , 2π 0, – , a+2π , a.
angle , animation. image. top Math.sin 20 – . left Math.cos 200, .
. px , , ( , ems ). . – 0, .
JavaScript DOM. , JavaScript . DOM , . parentNode childNodes, .
, , - . , , color display. JavaScript style.
6. HTML . HTML :
<table> <tr> <th>name</th> <th>height</th> <th>country</th> </tr> <tr> <td>Kilimanjaro</td> <td>5895</td> <td>Tanzania</td> </tr> </table>
. : , .
, 6, MOUNTAINS.
buildTable, , , DOM, . , , , . Object.keys, , .
, , style.textAlign "right".
<style> /* */ table { border-collapse: collapse; } td, th { border: 1px solid black; padding: 3px 8px; } th { text-align: left; } </style> <script> function buildTable(data) { // } document.body.appendChild(buildTable(MOUNTAINS)); </script>
getElementsByTagName . , ( ) , .
, tagName. , . toLowerCase toUpperCase.
<h1> <span>span</span> .</h1> <p> <span></span>, <span></span> spans.</p> <script> function byTagName(node, tagName) { // } console.log(byTagName(document.body, "h1").length); // → 1 console.log(byTagName(document.body, "span").length); // → 3 var para = document.querySelector("p"); console.log(byTagName(para, "span").length); // → 2 </script>
,
. - .
, . top left . , position.
<img src="img/cat.png" id="cat" style="position: absolute"> <img src="img/hat.png" id="hat" style="position: absolute"> <script> var cat = document.querySelector("#cat"); var hat = document.querySelector("#hat"); // Your code here. </script>.
, , . , , , . style ():
<p><a href="."> </a></p> <p><a href="." style="color: green"> </a></p>
style (color), . : “color: red; border: none”.
. , display , .
<strong></strong>, <strong style="display: block"> </strong>, <strong style="display: none"> </strong>.
, – display: none . . , .
JavaScript style. , . – , - .
<p id="para" style="color: purple"> </p> <script> var para = document.getElementById("para"); console.log(para.style.color); para.style.color = "magenta"; </script>
, font-family. JavaScript ( style["font-family"]), , : style.fontFamily
HTML CSS (Cascading Style Sheets, ). – . :
<style> strong { font-style: italic; color: gray; } </style> <p> <strong> strong</strong> .</p>
«» , . , , , font-style .
, . font-weight: normal, , , . , style, .
CSS . .abc , “abc”. #xyz id “xyz” ( id ).
.subtle { color: gray; font-size: 80%; } #header { background: blue; color: white; } /* p, a b, id main */ pab#main { margin-bottom: 20px; }
, . , , . , pa , p .a, .
p > a {…} , .
pa {…} , , .
. , 2-3 . (, , ) – - DOM.
querySelectorAll, document, -, , , .
<p> <span class="animal"></span></p> <p> </p> <p> <span class="character"> <span class="animal"> </span></span></p> <p> .</p> <script> function count(selector) { return document.querySelectorAll(selector).length; } console.log(count("p")); // <p> // → 4 console.log(count(".animal")); // animal // → 2 console.log(count("p .animal")); // animal <p> // → 2 console.log(count("p > .animal")); // <p> // → 1 </script>
getElementsByTagName, querySelectorAll . , .
querySelector ( All) . , . , null, .
position . static, , . relative, , top left . absolute, «» – , . , left top , position static. , .
. , .
<p style="text-align: center"> <img src="img/cat.png" style="position: relative"> </p> <script> var cat = document.querySelector("img"); var angle = 0, lastTime = null; function animate(time) { if (lastTime != null) angle += (time - lastTime) * 0.001; lastTime = time; cat.style.top = (Math.sin(angle) * 20) + "px"; cat.style.left = (Math.cos(angle) * 200) + "px"; requestAnimationFrame(animate); } requestAnimationFrame(animate); </script>
position: relative. top left , .
requestAnimationFrame animate , . animate requestAnimationFrame, . ( ) , 60 , .
DOM , . JavaScript, . requestAnimationFrame – , , , .
, ( lastTime), , . , , , .
Math.cos Math.sin. , , .
Math.cos Math.sin , (0, 0) . , 0 , , 2π ( 6.28) . Math.cos x , , Math.sin y. ( ) , 2π 0, – , a+2π , a.
angle , animation. image. top Math.sin 20 – . left Math.cos 200, .
. px , , ( , ems ). . – 0, .
JavaScript DOM. , JavaScript . DOM , . parentNode childNodes, .
, , - . , , color display. JavaScript style.
6. HTML . HTML :
<table> <tr> <th>name</th> <th>height</th> <th>country</th> </tr> <tr> <td>Kilimanjaro</td> <td>5895</td> <td>Tanzania</td> </tr> </table>
. : , .
, 6, MOUNTAINS.
buildTable, , , DOM, . , , , . Object.keys, , .
, , style.textAlign "right".
<style> /* */ table { border-collapse: collapse; } td, th { border: 1px solid black; padding: 3px 8px; } th { text-align: left; } </style> <script> function buildTable(data) { // } document.body.appendChild(buildTable(MOUNTAINS)); </script>
getElementsByTagName . , ( ) , .
, tagName. , . toLowerCase toUpperCase.
<h1> <span>span</span> .</h1> <p> <span></span>, <span></span> spans.</p> <script> function byTagName(node, tagName) { // } console.log(byTagName(document.body, "h1").length); // → 1 console.log(byTagName(document.body, "span").length); // → 3 var para = document.querySelector("p"); console.log(byTagName(para, "span").length); // → 2 </script>
,
. - .
, . top left . , position.
<img src="img/cat.png" id="cat" style="position: absolute"> <img src="img/hat.png" id="hat" style="position: absolute"> <script> var cat = document.querySelector("#cat"); var hat = document.querySelector("#hat"); // Your code here. </script>
.
, , . , , , . style ():
<p><a href="."> </a></p> <p><a href="." style="color: green"> </a></p>
style (color), . : “color: red; border: none”.
. , display , .
<strong></strong>, <strong style="display: block"> </strong>, <strong style="display: none"> </strong>.
, – display: none . . , .
JavaScript style. , . – , - .
<p id="para" style="color: purple"> </p> <script> var para = document.getElementById("para"); console.log(para.style.color); para.style.color = "magenta"; </script>
, font-family. JavaScript ( style["font-family"]), , : style.fontFamily
HTML CSS (Cascading Style Sheets, ). – . :
<style> strong { font-style: italic; color: gray; } </style> <p> <strong> strong</strong> .</p>
«» , . , , , font-style .
, . font-weight: normal, , , . , style, .
CSS . .abc , “abc”. #xyz id “xyz” ( id ).
.subtle { color: gray; font-size: 80%; } #header { background: blue; color: white; } /* p, a b, id main */ pab#main { margin-bottom: 20px; }
, . , , . , pa , p .a, .
p > a {…} , .
pa {…} , , .
. , 2-3 . (, , ) – - DOM.
querySelectorAll, document, -, , , .
<p> <span class="animal"></span></p> <p> </p> <p> <span class="character"> <span class="animal"> </span></span></p> <p> .</p> <script> function count(selector) { return document.querySelectorAll(selector).length; } console.log(count("p")); // <p> // → 4 console.log(count(".animal")); // animal // → 2 console.log(count("p .animal")); // animal <p> // → 2 console.log(count("p > .animal")); // <p> // → 1 </script>
getElementsByTagName, querySelectorAll . , .
querySelector ( All) . , . , null, .
position . static, , . relative, , top left . absolute, «» – , . , left top , position static. , .
. , .
<p style="text-align: center"> <img src="img/cat.png" style="position: relative"> </p> <script> var cat = document.querySelector("img"); var angle = 0, lastTime = null; function animate(time) { if (lastTime != null) angle += (time - lastTime) * 0.001; lastTime = time; cat.style.top = (Math.sin(angle) * 20) + "px"; cat.style.left = (Math.cos(angle) * 200) + "px"; requestAnimationFrame(animate); } requestAnimationFrame(animate); </script>
position: relative. top left , .
requestAnimationFrame animate , . animate requestAnimationFrame, . ( ) , 60 , .
DOM , . JavaScript, . requestAnimationFrame – , , , .
, ( lastTime), , . , , , .
Math.cos Math.sin. , , .
Math.cos Math.sin , (0, 0) . , 0 , , 2π ( 6.28) . Math.cos x , , Math.sin y. ( ) , 2π 0, – , a+2π , a.
angle , animation. image. top Math.sin 20 – . left Math.cos 200, .
. px , , ( , ems ). . – 0, .
JavaScript DOM. , JavaScript . DOM , . parentNode childNodes, .
, , - . , , color display. JavaScript style.
6. HTML . HTML :
<table> <tr> <th>name</th> <th>height</th> <th>country</th> </tr> <tr> <td>Kilimanjaro</td> <td>5895</td> <td>Tanzania</td> </tr> </table>
. : , .
, 6, MOUNTAINS.
buildTable, , , DOM, . , , , . Object.keys, , .
, , style.textAlign "right".
<style> /* */ table { border-collapse: collapse; } td, th { border: 1px solid black; padding: 3px 8px; } th { text-align: left; } </style> <script> function buildTable(data) { // } document.body.appendChild(buildTable(MOUNTAINS)); </script>
getElementsByTagName . , ( ) , .
, tagName. , . toLowerCase toUpperCase.
<h1> <span>span</span> .</h1> <p> <span></span>, <span></span> spans.</p> <script> function byTagName(node, tagName) { // } console.log(byTagName(document.body, "h1").length); // → 1 console.log(byTagName(document.body, "span").length); // → 3 var para = document.querySelector("p"); console.log(byTagName(para, "span").length); // → 2 </script>
,
. - .
, . top left . , position.
<img src="img/cat.png" id="cat" style="position: absolute"> <img src="img/hat.png" id="hat" style="position: absolute"> <script> var cat = document.querySelector("#cat"); var hat = document.querySelector("#hat"); // Your code here. </script>.
, , . , , , . style ():
<p><a href="."> </a></p> <p><a href="." style="color: green"> </a></p>
style (color), . : “color: red; border: none”.
. , display , .
<strong></strong>, <strong style="display: block"> </strong>, <strong style="display: none"> </strong>.
, – display: none . . , .
JavaScript style. , . – , - .
<p id="para" style="color: purple"> </p> <script> var para = document.getElementById("para"); console.log(para.style.color); para.style.color = "magenta"; </script>
, font-family. JavaScript ( style["font-family"]), , : style.fontFamily
HTML CSS (Cascading Style Sheets, ). – . :
<style> strong { font-style: italic; color: gray; } </style> <p> <strong> strong</strong> .</p>
«» , . , , , font-style .
, . font-weight: normal, , , . , style, .
CSS . .abc , “abc”. #xyz id “xyz” ( id ).
.subtle { color: gray; font-size: 80%; } #header { background: blue; color: white; } /* p, a b, id main */ pab#main { margin-bottom: 20px; }
, . , , . , pa , p .a, .
p > a {…} , .
pa {…} , , .
. , 2-3 . (, , ) – - DOM.
querySelectorAll, document, -, , , .
<p> <span class="animal"></span></p> <p> </p> <p> <span class="character"> <span class="animal"> </span></span></p> <p> .</p> <script> function count(selector) { return document.querySelectorAll(selector).length; } console.log(count("p")); // <p> // → 4 console.log(count(".animal")); // animal // → 2 console.log(count("p .animal")); // animal <p> // → 2 console.log(count("p > .animal")); // <p> // → 1 </script>
getElementsByTagName, querySelectorAll . , .
querySelector ( All) . , . , null, .
position . static, , . relative, , top left . absolute, «» – , . , left top , position static. , .
. , .
<p style="text-align: center"> <img src="img/cat.png" style="position: relative"> </p> <script> var cat = document.querySelector("img"); var angle = 0, lastTime = null; function animate(time) { if (lastTime != null) angle += (time - lastTime) * 0.001; lastTime = time; cat.style.top = (Math.sin(angle) * 20) + "px"; cat.style.left = (Math.cos(angle) * 200) + "px"; requestAnimationFrame(animate); } requestAnimationFrame(animate); </script>
position: relative. top left , .
requestAnimationFrame animate , . animate requestAnimationFrame, . ( ) , 60 , .
DOM , . JavaScript, . requestAnimationFrame – , , , .
, ( lastTime), , . , , , .
Math.cos Math.sin. , , .
Math.cos Math.sin , (0, 0) . , 0 , , 2π ( 6.28) . Math.cos x , , Math.sin y. ( ) , 2π 0, – , a+2π , a.
angle , animation. image. top Math.sin 20 – . left Math.cos 200, .
. px , , ( , ems ). . – 0, .
JavaScript DOM. , JavaScript . DOM , . parentNode childNodes, .
, , - . , , color display. JavaScript style.
6. HTML . HTML :
<table> <tr> <th>name</th> <th>height</th> <th>country</th> </tr> <tr> <td>Kilimanjaro</td> <td>5895</td> <td>Tanzania</td> </tr> </table>
. : , .
, 6, MOUNTAINS.
buildTable, , , DOM, . , , , . Object.keys, , .
, , style.textAlign "right".
<style> /* */ table { border-collapse: collapse; } td, th { border: 1px solid black; padding: 3px 8px; } th { text-align: left; } </style> <script> function buildTable(data) { // } document.body.appendChild(buildTable(MOUNTAINS)); </script>
getElementsByTagName . , ( ) , .
, tagName. , . toLowerCase toUpperCase.
<h1> <span>span</span> .</h1> <p> <span></span>, <span></span> spans.</p> <script> function byTagName(node, tagName) { // } console.log(byTagName(document.body, "h1").length); // → 1 console.log(byTagName(document.body, "span").length); // → 3 var para = document.querySelector("p"); console.log(byTagName(para, "span").length); // → 2 </script>
,
. - .
, . top left . , position.
<img src="img/cat.png" id="cat" style="position: absolute"> <img src="img/hat.png" id="hat" style="position: absolute"> <script> var cat = document.querySelector("#cat"); var hat = document.querySelector("#hat"); // Your code here. </script> .
, , . , , , . style ():
<p><a href="."> </a></p> <p><a href="." style="color: green"> </a></p>
style (color), . : “color: red; border: none”.
. , display , .
<strong></strong>, <strong style="display: block"> </strong>, <strong style="display: none"> </strong>.
, – display: none . . , .
JavaScript style. , . – , - .
<p id="para" style="color: purple"> </p> <script> var para = document.getElementById("para"); console.log(para.style.color); para.style.color = "magenta"; </script>
, font-family. JavaScript ( style["font-family"]), , : style.fontFamily
HTML CSS (Cascading Style Sheets, ). – . :
<style> strong { font-style: italic; color: gray; } </style> <p> <strong> strong</strong> .</p>
«» , . , , , font-style .
, . font-weight: normal, , , . , style, .
CSS . .abc , “abc”. #xyz id “xyz” ( id ).
.subtle { color: gray; font-size: 80%; } #header { background: blue; color: white; } /* p, a b, id main */ pab#main { margin-bottom: 20px; }
, . , , . , pa , p .a, .
p > a {…} , .
pa {…} , , .
. , 2-3 . (, , ) – - DOM.
querySelectorAll, document, -, , , .
<p> <span class="animal"></span></p> <p> </p> <p> <span class="character"> <span class="animal"> </span></span></p> <p> .</p> <script> function count(selector) { return document.querySelectorAll(selector).length; } console.log(count("p")); // <p> // → 4 console.log(count(".animal")); // animal // → 2 console.log(count("p .animal")); // animal <p> // → 2 console.log(count("p > .animal")); // <p> // → 1 </script>
getElementsByTagName, querySelectorAll . , .
querySelector ( All) . , . , null, .
position . static, , . relative, , top left . absolute, «» – , . , left top , position static. , .
. , .
<p style="text-align: center"> <img src="img/cat.png" style="position: relative"> </p> <script> var cat = document.querySelector("img"); var angle = 0, lastTime = null; function animate(time) { if (lastTime != null) angle += (time - lastTime) * 0.001; lastTime = time; cat.style.top = (Math.sin(angle) * 20) + "px"; cat.style.left = (Math.cos(angle) * 200) + "px"; requestAnimationFrame(animate); } requestAnimationFrame(animate); </script>
position: relative. top left , .
requestAnimationFrame animate , . animate requestAnimationFrame, . ( ) , 60 , .
DOM , . JavaScript, . requestAnimationFrame – , , , .
, ( lastTime), , . , , , .
Math.cos Math.sin. , , .
Math.cos Math.sin , (0, 0) . , 0 , , 2π ( 6.28) . Math.cos x , , Math.sin y. ( ) , 2π 0, – , a+2π , a.
angle , animation. image. top Math.sin 20 – . left Math.cos 200, .
. px , , ( , ems ). . – 0, .
JavaScript DOM. , JavaScript . DOM , . parentNode childNodes, .
, , - . , , color display. JavaScript style.
6. HTML . HTML :
<table> <tr> <th>name</th> <th>height</th> <th>country</th> </tr> <tr> <td>Kilimanjaro</td> <td>5895</td> <td>Tanzania</td> </tr> </table>
. : , .
, 6, MOUNTAINS.
buildTable, , , DOM, . , , , . Object.keys, , .
, , style.textAlign "right".
<style> /* */ table { border-collapse: collapse; } td, th { border: 1px solid black; padding: 3px 8px; } th { text-align: left; } </style> <script> function buildTable(data) { // } document.body.appendChild(buildTable(MOUNTAINS)); </script>
getElementsByTagName . , ( ) , .
, tagName. , . toLowerCase toUpperCase.
<h1> <span>span</span> .</h1> <p> <span></span>, <span></span> spans.</p> <script> function byTagName(node, tagName) { // } console.log(byTagName(document.body, "h1").length); // → 1 console.log(byTagName(document.body, "span").length); // → 3 var para = document.querySelector("p"); console.log(byTagName(para, "span").length); // → 2 </script>
,
. - .
, . top left . , position.
<img src="img/cat.png" id="cat" style="position: absolute"> <img src="img/hat.png" id="hat" style="position: absolute"> <script> var cat = document.querySelector("#cat"); var hat = document.querySelector("#hat"); // Your code here. </script>.
, , . , , , . style ():
<p><a href="."> </a></p> <p><a href="." style="color: green"> </a></p>
style (color), . : “color: red; border: none”.
. , display , .
<strong></strong>, <strong style="display: block"> </strong>, <strong style="display: none"> </strong>.
, – display: none . . , .
JavaScript style. , . – , - .
<p id="para" style="color: purple"> </p> <script> var para = document.getElementById("para"); console.log(para.style.color); para.style.color = "magenta"; </script>
, font-family. JavaScript ( style["font-family"]), , : style.fontFamily
HTML CSS (Cascading Style Sheets, ). – . :
<style> strong { font-style: italic; color: gray; } </style> <p> <strong> strong</strong> .</p>
«» , . , , , font-style .
, . font-weight: normal, , , . , style, .
CSS . .abc , “abc”. #xyz id “xyz” ( id ).
.subtle { color: gray; font-size: 80%; } #header { background: blue; color: white; } /* p, a b, id main */ pab#main { margin-bottom: 20px; }
, . , , . , pa , p .a, .
p > a {…} , .
pa {…} , , .
. , 2-3 . (, , ) – - DOM.
querySelectorAll, document, -, , , .
<p> <span class="animal"></span></p> <p> </p> <p> <span class="character"> <span class="animal"> </span></span></p> <p> .</p> <script> function count(selector) { return document.querySelectorAll(selector).length; } console.log(count("p")); // <p> // → 4 console.log(count(".animal")); // animal // → 2 console.log(count("p .animal")); // animal <p> // → 2 console.log(count("p > .animal")); // <p> // → 1 </script>
getElementsByTagName, querySelectorAll . , .
querySelector ( All) . , . , null, .
position . static, , . relative, , top left . absolute, «» – , . , left top , position static. , .
. , .
<p style="text-align: center"> <img src="img/cat.png" style="position: relative"> </p> <script> var cat = document.querySelector("img"); var angle = 0, lastTime = null; function animate(time) { if (lastTime != null) angle += (time - lastTime) * 0.001; lastTime = time; cat.style.top = (Math.sin(angle) * 20) + "px"; cat.style.left = (Math.cos(angle) * 200) + "px"; requestAnimationFrame(animate); } requestAnimationFrame(animate); </script>
position: relative. top left , .
requestAnimationFrame animate , . animate requestAnimationFrame, . ( ) , 60 , .
DOM , . JavaScript, . requestAnimationFrame – , , , .
, ( lastTime), , . , , , .
Math.cos Math.sin. , , .
Math.cos Math.sin , (0, 0) . , 0 , , 2π ( 6.28) . Math.cos x , , Math.sin y. ( ) , 2π 0, – , a+2π , a.
angle , animation. image. top Math.sin 20 – . left Math.cos 200, .
. px , , ( , ems ). . – 0, .
JavaScript DOM. , JavaScript . DOM , . parentNode childNodes, .
, , - . , , color display. JavaScript style.
6. HTML . HTML :
<table> <tr> <th>name</th> <th>height</th> <th>country</th> </tr> <tr> <td>Kilimanjaro</td> <td>5895</td> <td>Tanzania</td> </tr> </table>
. : , .
, 6, MOUNTAINS.
buildTable, , , DOM, . , , , . Object.keys, , .
, , style.textAlign "right".
<style> /* */ table { border-collapse: collapse; } td, th { border: 1px solid black; padding: 3px 8px; } th { text-align: left; } </style> <script> function buildTable(data) { // } document.body.appendChild(buildTable(MOUNTAINS)); </script>
getElementsByTagName . , ( ) , .
, tagName. , . toLowerCase toUpperCase.
<h1> <span>span</span> .</h1> <p> <span></span>, <span></span> spans.</p> <script> function byTagName(node, tagName) { // } console.log(byTagName(document.body, "h1").length); // → 1 console.log(byTagName(document.body, "span").length); // → 3 var para = document.querySelector("p"); console.log(byTagName(para, "span").length); // → 2 </script>
,
. - .
, . top left . , position.
<img src="img/cat.png" id="cat" style="position: absolute"> <img src="img/hat.png" id="hat" style="position: absolute"> <script> var cat = document.querySelector("#cat"); var hat = document.querySelector("#hat"); // Your code here. </script> .
, , . , , , . style ():
<p><a href="."> </a></p> <p><a href="." style="color: green"> </a></p>
style (color), . : “color: red; border: none”.
. , display , .
<strong></strong>, <strong style="display: block"> </strong>, <strong style="display: none"> </strong>.
, – display: none . . , .
JavaScript style. , . – , - .
<p id="para" style="color: purple"> </p> <script> var para = document.getElementById("para"); console.log(para.style.color); para.style.color = "magenta"; </script>
, font-family. JavaScript ( style["font-family"]), , : style.fontFamily
HTML CSS (Cascading Style Sheets, ). – . :
<style> strong { font-style: italic; color: gray; } </style> <p> <strong> strong</strong> .</p>
«» , . , , , font-style .
, . font-weight: normal, , , . , style, .
CSS . .abc , “abc”. #xyz id “xyz” ( id ).
.subtle { color: gray; font-size: 80%; } #header { background: blue; color: white; } /* p, a b, id main */ pab#main { margin-bottom: 20px; }
, . , , . , pa , p .a, .
p > a {…} , .
pa {…} , , .
. , 2-3 . (, , ) – - DOM.
querySelectorAll, document, -, , , .
<p> <span class="animal"></span></p> <p> </p> <p> <span class="character"> <span class="animal"> </span></span></p> <p> .</p> <script> function count(selector) { return document.querySelectorAll(selector).length; } console.log(count("p")); // <p> // → 4 console.log(count(".animal")); // animal // → 2 console.log(count("p .animal")); // animal <p> // → 2 console.log(count("p > .animal")); // <p> // → 1 </script>
getElementsByTagName, querySelectorAll . , .
querySelector ( All) . , . , null, .
position . static, , . relative, , top left . absolute, «» – , . , left top , position static. , .
. , .
<p style="text-align: center"> <img src="img/cat.png" style="position: relative"> </p> <script> var cat = document.querySelector("img"); var angle = 0, lastTime = null; function animate(time) { if (lastTime != null) angle += (time - lastTime) * 0.001; lastTime = time; cat.style.top = (Math.sin(angle) * 20) + "px"; cat.style.left = (Math.cos(angle) * 200) + "px"; requestAnimationFrame(animate); } requestAnimationFrame(animate); </script>
position: relative. top left , .
requestAnimationFrame animate , . animate requestAnimationFrame, . ( ) , 60 , .
DOM , . JavaScript, . requestAnimationFrame – , , , .
, ( lastTime), , . , , , .
Math.cos Math.sin. , , .
Math.cos Math.sin , (0, 0) . , 0 , , 2π ( 6.28) . Math.cos x , , Math.sin y. ( ) , 2π 0, – , a+2π , a.
angle , animation. image. top Math.sin 20 – . left Math.cos 200, .
. px , , ( , ems ). . – 0, .
JavaScript DOM. , JavaScript . DOM , . parentNode childNodes, .
, , - . , , color display. JavaScript style.
6. HTML . HTML :
<table> <tr> <th>name</th> <th>height</th> <th>country</th> </tr> <tr> <td>Kilimanjaro</td> <td>5895</td> <td>Tanzania</td> </tr> </table>
. : , .
, 6, MOUNTAINS.
buildTable, , , DOM, . , , , . Object.keys, , .
, , style.textAlign "right".
<style> /* */ table { border-collapse: collapse; } td, th { border: 1px solid black; padding: 3px 8px; } th { text-align: left; } </style> <script> function buildTable(data) { // } document.body.appendChild(buildTable(MOUNTAINS)); </script>
getElementsByTagName . , ( ) , .
, tagName. , . toLowerCase toUpperCase.
<h1> <span>span</span> .</h1> <p> <span></span>, <span></span> spans.</p> <script> function byTagName(node, tagName) { // } console.log(byTagName(document.body, "h1").length); // → 1 console.log(byTagName(document.body, "span").length); // → 3 var para = document.querySelector("p"); console.log(byTagName(para, "span").length); // → 2 </script>
,
. - .
, . top left . , position.
<img src="img/cat.png" id="cat" style="position: absolute"> <img src="img/hat.png" id="hat" style="position: absolute"> <script> var cat = document.querySelector("#cat"); var hat = document.querySelector("#hat"); // Your code here. </script>.
, , . , , , . style ():
<p><a href="."> </a></p> <p><a href="." style="color: green"> </a></p>
style (color), . : “color: red; border: none”.
. , display , .
<strong></strong>, <strong style="display: block"> </strong>, <strong style="display: none"> </strong>.
, – display: none . . , .
JavaScript style. , . – , - .
<p id="para" style="color: purple"> </p> <script> var para = document.getElementById("para"); console.log(para.style.color); para.style.color = "magenta"; </script>
, font-family. JavaScript ( style["font-family"]), , : style.fontFamily
HTML CSS (Cascading Style Sheets, ). – . :
<style> strong { font-style: italic; color: gray; } </style> <p> <strong> strong</strong> .</p>
«» , . , , , font-style .
, . font-weight: normal, , , . , style, .
CSS . .abc , “abc”. #xyz id “xyz” ( id ).
.subtle { color: gray; font-size: 80%; } #header { background: blue; color: white; } /* p, a b, id main */ pab#main { margin-bottom: 20px; }
, . , , . , pa , p .a, .
p > a {…} , .
pa {…} , , .
. , 2-3 . (, , ) – - DOM.
querySelectorAll, document, -, , , .
<p> <span class="animal"></span></p> <p> </p> <p> <span class="character"> <span class="animal"> </span></span></p> <p> .</p> <script> function count(selector) { return document.querySelectorAll(selector).length; } console.log(count("p")); // <p> // → 4 console.log(count(".animal")); // animal // → 2 console.log(count("p .animal")); // animal <p> // → 2 console.log(count("p > .animal")); // <p> // → 1 </script>
getElementsByTagName, querySelectorAll . , .
querySelector ( All) . , . , null, .
position . static, , . relative, , top left . absolute, «» – , . , left top , position static. , .
. , .
<p style="text-align: center"> <img src="img/cat.png" style="position: relative"> </p> <script> var cat = document.querySelector("img"); var angle = 0, lastTime = null; function animate(time) { if (lastTime != null) angle += (time - lastTime) * 0.001; lastTime = time; cat.style.top = (Math.sin(angle) * 20) + "px"; cat.style.left = (Math.cos(angle) * 200) + "px"; requestAnimationFrame(animate); } requestAnimationFrame(animate); </script>
position: relative. top left , .
requestAnimationFrame animate , . animate requestAnimationFrame, . ( ) , 60 , .
DOM , . JavaScript, . requestAnimationFrame – , , , .
, ( lastTime), , . , , , .
Math.cos Math.sin. , , .
Math.cos Math.sin , (0, 0) . , 0 , , 2π ( 6.28) . Math.cos x , , Math.sin y. ( ) , 2π 0, – , a+2π , a.
angle , animation. image. top Math.sin 20 – . left Math.cos 200, .
. px , , ( , ems ). . – 0, .
JavaScript DOM. , JavaScript . DOM , . parentNode childNodes, .
, , - . , , color display. JavaScript style.
6. HTML . HTML :
<table> <tr> <th>name</th> <th>height</th> <th>country</th> </tr> <tr> <td>Kilimanjaro</td> <td>5895</td> <td>Tanzania</td> </tr> </table>
. : , .
, 6, MOUNTAINS.
buildTable, , , DOM, . , , , . Object.keys, , .
, , style.textAlign "right".
<style> /* */ table { border-collapse: collapse; } td, th { border: 1px solid black; padding: 3px 8px; } th { text-align: left; } </style> <script> function buildTable(data) { // } document.body.appendChild(buildTable(MOUNTAINS)); </script>
getElementsByTagName . , ( ) , .
, tagName. , . toLowerCase toUpperCase.
<h1> <span>span</span> .</h1> <p> <span></span>, <span></span> spans.</p> <script> function byTagName(node, tagName) { // } console.log(byTagName(document.body, "h1").length); // → 1 console.log(byTagName(document.body, "span").length); // → 3 var para = document.querySelector("p"); console.log(byTagName(para, "span").length); // → 2 </script>
,
. - .
, . top left . , position.
<img src="img/cat.png" id="cat" style="position: absolute"> <img src="img/hat.png" id="hat" style="position: absolute"> <script> var cat = document.querySelector("#cat"); var hat = document.querySelector("#hat"); // Your code here. </script> .
, , . , , , . style ():
<p><a href="."> </a></p> <p><a href="." style="color: green"> </a></p>
style (color), . : “color: red; border: none”.
. , display , .
<strong></strong>, <strong style="display: block"> </strong>, <strong style="display: none"> </strong>.
, – display: none . . , .
JavaScript style. , . – , - .
<p id="para" style="color: purple"> </p> <script> var para = document.getElementById("para"); console.log(para.style.color); para.style.color = "magenta"; </script>
, font-family. JavaScript ( style["font-family"]), , : style.fontFamily
HTML CSS (Cascading Style Sheets, ). – . :
<style> strong { font-style: italic; color: gray; } </style> <p> <strong> strong</strong> .</p>
«» , . , , , font-style .
, . font-weight: normal, , , . , style, .
CSS . .abc , “abc”. #xyz id “xyz” ( id ).
.subtle { color: gray; font-size: 80%; } #header { background: blue; color: white; } /* p, a b, id main */ pab#main { margin-bottom: 20px; }
, . , , . , pa , p .a, .
p > a {…} , .
pa {…} , , .
. , 2-3 . (, , ) – - DOM.
querySelectorAll, document, -, , , .
<p> <span class="animal"></span></p> <p> </p> <p> <span class="character"> <span class="animal"> </span></span></p> <p> .</p> <script> function count(selector) { return document.querySelectorAll(selector).length; } console.log(count("p")); // <p> // → 4 console.log(count(".animal")); // animal // → 2 console.log(count("p .animal")); // animal <p> // → 2 console.log(count("p > .animal")); // <p> // → 1 </script>
getElementsByTagName, querySelectorAll . , .
querySelector ( All) . , . , null, .
position . static, , . relative, , top left . absolute, «» – , . , left top , position static. , .
. , .
<p style="text-align: center"> <img src="img/cat.png" style="position: relative"> </p> <script> var cat = document.querySelector("img"); var angle = 0, lastTime = null; function animate(time) { if (lastTime != null) angle += (time - lastTime) * 0.001; lastTime = time; cat.style.top = (Math.sin(angle) * 20) + "px"; cat.style.left = (Math.cos(angle) * 200) + "px"; requestAnimationFrame(animate); } requestAnimationFrame(animate); </script>
position: relative. top left , .
requestAnimationFrame animate , . animate requestAnimationFrame, . ( ) , 60 , .
DOM , . JavaScript, . requestAnimationFrame – , , , .
, ( lastTime), , . , , , .
Math.cos Math.sin. , , .
Math.cos Math.sin , (0, 0) . , 0 , , 2π ( 6.28) . Math.cos x , , Math.sin y. ( ) , 2π 0, – , a+2π , a.
angle , animation. image. top Math.sin 20 – . left Math.cos 200, .
. px , , ( , ems ). . – 0, .
JavaScript DOM. , JavaScript . DOM , . parentNode childNodes, .
, , - . , , color display. JavaScript style.
6. HTML . HTML :
<table> <tr> <th>name</th> <th>height</th> <th>country</th> </tr> <tr> <td>Kilimanjaro</td> <td>5895</td> <td>Tanzania</td> </tr> </table>
. : , .
, 6, MOUNTAINS.
buildTable, , , DOM, . , , , . Object.keys, , .
, , style.textAlign "right".
<style> /* */ table { border-collapse: collapse; } td, th { border: 1px solid black; padding: 3px 8px; } th { text-align: left; } </style> <script> function buildTable(data) { // } document.body.appendChild(buildTable(MOUNTAINS)); </script>
getElementsByTagName . , ( ) , .
, tagName. , . toLowerCase toUpperCase.
<h1> <span>span</span> .</h1> <p> <span></span>, <span></span> spans.</p> <script> function byTagName(node, tagName) { // } console.log(byTagName(document.body, "h1").length); // → 1 console.log(byTagName(document.body, "span").length); // → 3 var para = document.querySelector("p"); console.log(byTagName(para, "span").length); // → 2 </script>
,
. - .
, . top left . , position.
<img src="img/cat.png" id="cat" style="position: absolute"> <img src="img/hat.png" id="hat" style="position: absolute"> <script> var cat = document.querySelector("#cat"); var hat = document.querySelector("#hat"); // Your code here. </script> .
, , . , , , . style ():
<p><a href="."> </a></p> <p><a href="." style="color: green"> </a></p>
style (color), . : “color: red; border: none”.
. , display , .
<strong></strong>, <strong style="display: block"> </strong>, <strong style="display: none"> </strong>.
, – display: none . . , .
JavaScript style. , . – , - .
<p id="para" style="color: purple"> </p> <script> var para = document.getElementById("para"); console.log(para.style.color); para.style.color = "magenta"; </script>
, font-family. JavaScript ( style["font-family"]), , : style.fontFamily
HTML CSS (Cascading Style Sheets, ). – . :
<style> strong { font-style: italic; color: gray; } </style> <p> <strong> strong</strong> .</p>
«» , . , , , font-style .
, . font-weight: normal, , , . , style, .
CSS . .abc , “abc”. #xyz id “xyz” ( id ).
.subtle { color: gray; font-size: 80%; } #header { background: blue; color: white; } /* p, a b, id main */ pab#main { margin-bottom: 20px; }
, . , , . , pa , p .a, .
p > a {…} , .
pa {…} , , .
. , 2-3 . (, , ) – - DOM.
querySelectorAll, document, -, , , .
<p> <span class="animal"></span></p> <p> </p> <p> <span class="character"> <span class="animal"> </span></span></p> <p> .</p> <script> function count(selector) { return document.querySelectorAll(selector).length; } console.log(count("p")); // <p> // → 4 console.log(count(".animal")); // animal // → 2 console.log(count("p .animal")); // animal <p> // → 2 console.log(count("p > .animal")); // <p> // → 1 </script>
getElementsByTagName, querySelectorAll . , .
querySelector ( All) . , . , null, .
position . static, , . relative, , top left . absolute, «» – , . , left top , position static. , .
. , .
<p style="text-align: center"> <img src="img/cat.png" style="position: relative"> </p> <script> var cat = document.querySelector("img"); var angle = 0, lastTime = null; function animate(time) { if (lastTime != null) angle += (time - lastTime) * 0.001; lastTime = time; cat.style.top = (Math.sin(angle) * 20) + "px"; cat.style.left = (Math.cos(angle) * 200) + "px"; requestAnimationFrame(animate); } requestAnimationFrame(animate); </script>
position: relative. top left , .
requestAnimationFrame animate , . animate requestAnimationFrame, . ( ) , 60 , .
DOM , . JavaScript, . requestAnimationFrame – , , , .
, ( lastTime), , . , , , .
Math.cos Math.sin. , , .
Math.cos Math.sin , (0, 0) . , 0 , , 2π ( 6.28) . Math.cos x , , Math.sin y. ( ) , 2π 0, – , a+2π , a.
angle , animation. image. top Math.sin 20 – . left Math.cos 200, .
. px , , ( , ems ). . – 0, .
JavaScript DOM. , JavaScript . DOM , . parentNode childNodes, .
, , - . , , color display. JavaScript style.
6. HTML . HTML :
<table> <tr> <th>name</th> <th>height</th> <th>country</th> </tr> <tr> <td>Kilimanjaro</td> <td>5895</td> <td>Tanzania</td> </tr> </table>
. : , .
, 6, MOUNTAINS.
buildTable, , , DOM, . , , , . Object.keys, , .
, , style.textAlign "right".
<style> /* */ table { border-collapse: collapse; } td, th { border: 1px solid black; padding: 3px 8px; } th { text-align: left; } </style> <script> function buildTable(data) { // } document.body.appendChild(buildTable(MOUNTAINS)); </script>
getElementsByTagName . , ( ) , .
, tagName. , . toLowerCase toUpperCase.
<h1> <span>span</span> .</h1> <p> <span></span>, <span></span> spans.</p> <script> function byTagName(node, tagName) { // } console.log(byTagName(document.body, "h1").length); // → 1 console.log(byTagName(document.body, "span").length); // → 3 var para = document.querySelector("p"); console.log(byTagName(para, "span").length); // → 2 </script>
,
. - .
, . top left . , position.
<img src="img/cat.png" id="cat" style="position: absolute"> <img src="img/hat.png" id="hat" style="position: absolute"> <script> var cat = document.querySelector("#cat"); var hat = document.querySelector("#hat"); // Your code here. </script>
.
, , . , , , . style ():
<p><a href="."> </a></p> <p><a href="." style="color: green"> </a></p>
style (color), . : “color: red; border: none”.
. , display , .
<strong></strong>, <strong style="display: block"> </strong>, <strong style="display: none"> </strong>.
, – display: none . . , .
JavaScript style. , . – , - .
<p id="para" style="color: purple"> </p> <script> var para = document.getElementById("para"); console.log(para.style.color); para.style.color = "magenta"; </script>
, font-family. JavaScript ( style["font-family"]), , : style.fontFamily
HTML CSS (Cascading Style Sheets, ). – . :
<style> strong { font-style: italic; color: gray; } </style> <p> <strong> strong</strong> .</p>
«» , . , , , font-style .
, . font-weight: normal, , , . , style, .
CSS . .abc , “abc”. #xyz id “xyz” ( id ).
.subtle { color: gray; font-size: 80%; } #header { background: blue; color: white; } /* p, a b, id main */ pab#main { margin-bottom: 20px; }
, . , , . , pa , p .a, .
p > a {…} , .
pa {…} , , .
. , 2-3 . (, , ) – - DOM.
querySelectorAll, document, -, , , .
<p> <span class="animal"></span></p> <p> </p> <p> <span class="character"> <span class="animal"> </span></span></p> <p> .</p> <script> function count(selector) { return document.querySelectorAll(selector).length; } console.log(count("p")); // <p> // → 4 console.log(count(".animal")); // animal // → 2 console.log(count("p .animal")); // animal <p> // → 2 console.log(count("p > .animal")); // <p> // → 1 </script>
getElementsByTagName, querySelectorAll . , .
querySelector ( All) . , . , null, .
position . static, , . relative, , top left . absolute, «» – , . , left top , position static. , .
. , .
<p style="text-align: center"> <img src="img/cat.png" style="position: relative"> </p> <script> var cat = document.querySelector("img"); var angle = 0, lastTime = null; function animate(time) { if (lastTime != null) angle += (time - lastTime) * 0.001; lastTime = time; cat.style.top = (Math.sin(angle) * 20) + "px"; cat.style.left = (Math.cos(angle) * 200) + "px"; requestAnimationFrame(animate); } requestAnimationFrame(animate); </script>
position: relative. top left , .
requestAnimationFrame animate , . animate requestAnimationFrame, . ( ) , 60 , .
DOM , . JavaScript, . requestAnimationFrame – , , , .
, ( lastTime), , . , , , .
Math.cos Math.sin. , , .
Math.cos Math.sin , (0, 0) . , 0 , , 2π ( 6.28) . Math.cos x , , Math.sin y. ( ) , 2π 0, – , a+2π , a.
angle , animation. image. top Math.sin 20 – . left Math.cos 200, .
. px , , ( , ems ). . – 0, .
JavaScript DOM. , JavaScript . DOM , . parentNode childNodes, .
, , - . , , color display. JavaScript style.
6. HTML . HTML :
<table> <tr> <th>name</th> <th>height</th> <th>country</th> </tr> <tr> <td>Kilimanjaro</td> <td>5895</td> <td>Tanzania</td> </tr> </table>
. : , .
, 6, MOUNTAINS.
buildTable, , , DOM, . , , , . Object.keys, , .
, , style.textAlign "right".
<style> /* */ table { border-collapse: collapse; } td, th { border: 1px solid black; padding: 3px 8px; } th { text-align: left; } </style> <script> function buildTable(data) { // } document.body.appendChild(buildTable(MOUNTAINS)); </script>
getElementsByTagName . , ( ) , .
, tagName. , . toLowerCase toUpperCase.
<h1> <span>span</span> .</h1> <p> <span></span>, <span></span> spans.</p> <script> function byTagName(node, tagName) { // } console.log(byTagName(document.body, "h1").length); // → 1 console.log(byTagName(document.body, "span").length); // → 3 var para = document.querySelector("p"); console.log(byTagName(para, "span").length); // → 2 </script>
,
. - .
, . top left . , position.
<img src="img/cat.png" id="cat" style="position: absolute"> <img src="img/hat.png" id="hat" style="position: absolute"> <script> var cat = document.querySelector("#cat"); var hat = document.querySelector("#hat"); // Your code here. </script>.
, , . , , , . style ():
<p><a href="."> </a></p> <p><a href="." style="color: green"> </a></p>
style (color), . : “color: red; border: none”.
. , display , .
<strong></strong>, <strong style="display: block"> </strong>, <strong style="display: none"> </strong>.
, – display: none . . , .
JavaScript style. , . – , - .
<p id="para" style="color: purple"> </p> <script> var para = document.getElementById("para"); console.log(para.style.color); para.style.color = "magenta"; </script>
, font-family. JavaScript ( style["font-family"]), , : style.fontFamily
HTML CSS (Cascading Style Sheets, ). – . :
<style> strong { font-style: italic; color: gray; } </style> <p> <strong> strong</strong> .</p>
«» , . , , , font-style .
, . font-weight: normal, , , . , style, .
CSS . .abc , “abc”. #xyz id “xyz” ( id ).
.subtle { color: gray; font-size: 80%; } #header { background: blue; color: white; } /* p, a b, id main */ pab#main { margin-bottom: 20px; }
, . , , . , pa , p .a, .
p > a {…} , .
pa {…} , , .
. , 2-3 . (, , ) – - DOM.
querySelectorAll, document, -, , , .
<p> <span class="animal"></span></p> <p> </p> <p> <span class="character"> <span class="animal"> </span></span></p> <p> .</p> <script> function count(selector) { return document.querySelectorAll(selector).length; } console.log(count("p")); // <p> // → 4 console.log(count(".animal")); // animal // → 2 console.log(count("p .animal")); // animal <p> // → 2 console.log(count("p > .animal")); // <p> // → 1 </script>
getElementsByTagName, querySelectorAll . , .
querySelector ( All) . , . , null, .
position . static, , . relative, , top left . absolute, «» – , . , left top , position static. , .
. , .
<p style="text-align: center"> <img src="img/cat.png" style="position: relative"> </p> <script> var cat = document.querySelector("img"); var angle = 0, lastTime = null; function animate(time) { if (lastTime != null) angle += (time - lastTime) * 0.001; lastTime = time; cat.style.top = (Math.sin(angle) * 20) + "px"; cat.style.left = (Math.cos(angle) * 200) + "px"; requestAnimationFrame(animate); } requestAnimationFrame(animate); </script>
position: relative. top left , .
requestAnimationFrame animate , . animate requestAnimationFrame, . ( ) , 60 , .
DOM , . JavaScript, . requestAnimationFrame – , , , .
, ( lastTime), , . , , , .
Math.cos Math.sin. , , .
Math.cos Math.sin , (0, 0) . , 0 , , 2π ( 6.28) . Math.cos x , , Math.sin y. ( ) , 2π 0, – , a+2π , a.
angle , animation. image. top Math.sin 20 – . left Math.cos 200, .
. px , , ( , ems ). . – 0, .
JavaScript DOM. , JavaScript . DOM , . parentNode childNodes, .
, , - . , , color display. JavaScript style.
6. HTML . HTML :
<table> <tr> <th>name</th> <th>height</th> <th>country</th> </tr> <tr> <td>Kilimanjaro</td> <td>5895</td> <td>Tanzania</td> </tr> </table>
. : , .
, 6, MOUNTAINS.
buildTable, , , DOM, . , , , . Object.keys, , .
, , style.textAlign "right".
<style> /* */ table { border-collapse: collapse; } td, th { border: 1px solid black; padding: 3px 8px; } th { text-align: left; } </style> <script> function buildTable(data) { // } document.body.appendChild(buildTable(MOUNTAINS)); </script>
getElementsByTagName . , ( ) , .
, tagName. , . toLowerCase toUpperCase.
<h1> <span>span</span> .</h1> <p> <span></span>, <span></span> spans.</p> <script> function byTagName(node, tagName) { // } console.log(byTagName(document.body, "h1").length); // → 1 console.log(byTagName(document.body, "span").length); // → 3 var para = document.querySelector("p"); console.log(byTagName(para, "span").length); // → 2 </script>
,
. - .
, . top left . , position.
<img src="img/cat.png" id="cat" style="position: absolute"> <img src="img/hat.png" id="hat" style="position: absolute"> <script> var cat = document.querySelector("#cat"); var hat = document.querySelector("#hat"); // Your code here. </script>.
, , . , , , . style ():
<p><a href="."> </a></p> <p><a href="." style="color: green"> </a></p>
style (color), . : “color: red; border: none”.
. , display , .
<strong></strong>, <strong style="display: block"> </strong>, <strong style="display: none"> </strong>.
, – display: none . . , .
JavaScript style. , . – , - .
<p id="para" style="color: purple"> </p> <script> var para = document.getElementById("para"); console.log(para.style.color); para.style.color = "magenta"; </script>
, font-family. JavaScript ( style["font-family"]), , : style.fontFamily
HTML CSS (Cascading Style Sheets, ). – . :
<style> strong { font-style: italic; color: gray; } </style> <p> <strong> strong</strong> .</p>
«» , . , , , font-style .
, . font-weight: normal, , , . , style, .
CSS . .abc , “abc”. #xyz id “xyz” ( id ).
.subtle { color: gray; font-size: 80%; } #header { background: blue; color: white; } /* p, a b, id main */ pab#main { margin-bottom: 20px; }
, . , , . , pa , p .a, .
p > a {…} , .
pa {…} , , .
. , 2-3 . (, , ) – - DOM.
querySelectorAll, document, -, , , .
<p> <span class="animal"></span></p> <p> </p> <p> <span class="character"> <span class="animal"> </span></span></p> <p> .</p> <script> function count(selector) { return document.querySelectorAll(selector).length; } console.log(count("p")); // <p> // → 4 console.log(count(".animal")); // animal // → 2 console.log(count("p .animal")); // animal <p> // → 2 console.log(count("p > .animal")); // <p> // → 1 </script>
getElementsByTagName, querySelectorAll . , .
querySelector ( All) . , . , null, .
position . static, , . relative, , top left . absolute, «» – , . , left top , position static. , .
. , .
<p style="text-align: center"> <img src="img/cat.png" style="position: relative"> </p> <script> var cat = document.querySelector("img"); var angle = 0, lastTime = null; function animate(time) { if (lastTime != null) angle += (time - lastTime) * 0.001; lastTime = time; cat.style.top = (Math.sin(angle) * 20) + "px"; cat.style.left = (Math.cos(angle) * 200) + "px"; requestAnimationFrame(animate); } requestAnimationFrame(animate); </script>
position: relative. top left , .
requestAnimationFrame animate , . animate requestAnimationFrame, . ( ) , 60 , .
DOM , . JavaScript, . requestAnimationFrame – , , , .
, ( lastTime), , . , , , .
Math.cos Math.sin. , , .
Math.cos Math.sin , (0, 0) . , 0 , , 2π ( 6.28) . Math.cos x , , Math.sin y. ( ) , 2π 0, – , a+2π , a.
angle , animation. image. top Math.sin 20 – . left Math.cos 200, .
. px , , ( , ems ). . – 0, .
JavaScript DOM. , JavaScript . DOM , . parentNode childNodes, .
, , - . , , color display. JavaScript style.
6. HTML . HTML :
<table> <tr> <th>name</th> <th>height</th> <th>country</th> </tr> <tr> <td>Kilimanjaro</td> <td>5895</td> <td>Tanzania</td> </tr> </table>
. : , .
, 6, MOUNTAINS.
buildTable, , , DOM, . , , , . Object.keys, , .
, , style.textAlign "right".
<style> /* */ table { border-collapse: collapse; } td, th { border: 1px solid black; padding: 3px 8px; } th { text-align: left; } </style> <script> function buildTable(data) { // } document.body.appendChild(buildTable(MOUNTAINS)); </script>
getElementsByTagName . , ( ) , .
, tagName. , . toLowerCase toUpperCase.
<h1> <span>span</span> .</h1> <p> <span></span>, <span></span> spans.</p> <script> function byTagName(node, tagName) { // } console.log(byTagName(document.body, "h1").length); // → 1 console.log(byTagName(document.body, "span").length); // → 3 var para = document.querySelector("p"); console.log(byTagName(para, "span").length); // → 2 </script>
,
. - .
, . top left . , position.
<img src="img/cat.png" id="cat" style="position: absolute"> <img src="img/hat.png" id="hat" style="position: absolute"> <script> var cat = document.querySelector("#cat"); var hat = document.querySelector("#hat"); // Your code here. </script>
.
, , . , , , . style ():
<p><a href="."> </a></p> <p><a href="." style="color: green"> </a></p>
style (color), . : “color: red; border: none”.
. , display , .
<strong></strong>, <strong style="display: block"> </strong>, <strong style="display: none"> </strong>.
, – display: none . . , .
JavaScript style. , . – , - .
<p id="para" style="color: purple"> </p> <script> var para = document.getElementById("para"); console.log(para.style.color); para.style.color = "magenta"; </script>
, font-family. JavaScript ( style["font-family"]), , : style.fontFamily
HTML CSS (Cascading Style Sheets, ). – . :
<style> strong { font-style: italic; color: gray; } </style> <p> <strong> strong</strong> .</p>
«» , . , , , font-style .
, . font-weight: normal, , , . , style, .
CSS . .abc , “abc”. #xyz id “xyz” ( id ).
.subtle { color: gray; font-size: 80%; } #header { background: blue; color: white; } /* p, a b, id main */ pab#main { margin-bottom: 20px; }
, . , , . , pa , p .a, .
p > a {…} , .
pa {…} , , .
. , 2-3 . (, , ) – - DOM.
querySelectorAll, document, -, , , .
<p> <span class="animal"></span></p> <p> </p> <p> <span class="character"> <span class="animal"> </span></span></p> <p> .</p> <script> function count(selector) { return document.querySelectorAll(selector).length; } console.log(count("p")); // <p> // → 4 console.log(count(".animal")); // animal // → 2 console.log(count("p .animal")); // animal <p> // → 2 console.log(count("p > .animal")); // <p> // → 1 </script>
getElementsByTagName, querySelectorAll . , .
querySelector ( All) . , . , null, .
position . static, , . relative, , top left . absolute, «» – , . , left top , position static. , .
. , .
<p style="text-align: center"> <img src="img/cat.png" style="position: relative"> </p> <script> var cat = document.querySelector("img"); var angle = 0, lastTime = null; function animate(time) { if (lastTime != null) angle += (time - lastTime) * 0.001; lastTime = time; cat.style.top = (Math.sin(angle) * 20) + "px"; cat.style.left = (Math.cos(angle) * 200) + "px"; requestAnimationFrame(animate); } requestAnimationFrame(animate); </script>
position: relative. top left , .
requestAnimationFrame animate , . animate requestAnimationFrame, . ( ) , 60 , .
DOM , . JavaScript, . requestAnimationFrame – , , , .
, ( lastTime), , . , , , .
Math.cos Math.sin. , , .
Math.cos Math.sin , (0, 0) . , 0 , , 2π ( 6.28) . Math.cos x , , Math.sin y. ( ) , 2π 0, – , a+2π , a.
angle , animation. image. top Math.sin 20 – . left Math.cos 200, .
. px , , ( , ems ). . – 0, .
JavaScript DOM. , JavaScript . DOM , . parentNode childNodes, .
, , - . , , color display. JavaScript style.
6. HTML . HTML :
<table> <tr> <th>name</th> <th>height</th> <th>country</th> </tr> <tr> <td>Kilimanjaro</td> <td>5895</td> <td>Tanzania</td> </tr> </table>
. : , .
, 6, MOUNTAINS.
buildTable, , , DOM, . , , , . Object.keys, , .
, , style.textAlign "right".
<style> /* */ table { border-collapse: collapse; } td, th { border: 1px solid black; padding: 3px 8px; } th { text-align: left; } </style> <script> function buildTable(data) { // } document.body.appendChild(buildTable(MOUNTAINS)); </script>
getElementsByTagName . , ( ) , .
, tagName. , . toLowerCase toUpperCase.
<h1> <span>span</span> .</h1> <p> <span></span>, <span></span> spans.</p> <script> function byTagName(node, tagName) { // } console.log(byTagName(document.body, "h1").length); // → 1 console.log(byTagName(document.body, "span").length); // → 3 var para = document.querySelector("p"); console.log(byTagName(para, "span").length); // → 2 </script>
,
. - .
, . top left . , position.
<img src="img/cat.png" id="cat" style="position: absolute"> <img src="img/hat.png" id="hat" style="position: absolute"> <script> var cat = document.querySelector("#cat"); var hat = document.querySelector("#hat"); // Your code here. </script>.
, , . , , , . style ():
<p><a href="."> </a></p> <p><a href="." style="color: green"> </a></p>
style (color), . : “color: red; border: none”.
. , display , .
<strong></strong>, <strong style="display: block"> </strong>, <strong style="display: none"> </strong>.
, – display: none . . , .
JavaScript style. , . – , - .
<p id="para" style="color: purple"> </p> <script> var para = document.getElementById("para"); console.log(para.style.color); para.style.color = "magenta"; </script>
, font-family. JavaScript ( style["font-family"]), , : style.fontFamily
HTML CSS (Cascading Style Sheets, ). – . :
<style> strong { font-style: italic; color: gray; } </style> <p> <strong> strong</strong> .</p>
«» , . , , , font-style .
, . font-weight: normal, , , . , style, .
CSS . .abc , “abc”. #xyz id “xyz” ( id ).
.subtle { color: gray; font-size: 80%; } #header { background: blue; color: white; } /* p, a b, id main */ pab#main { margin-bottom: 20px; }
, . , , . , pa , p .a, .
p > a {…} , .
pa {…} , , .
. , 2-3 . (, , ) – - DOM.
querySelectorAll, document, -, , , .
<p> <span class="animal"></span></p> <p> </p> <p> <span class="character"> <span class="animal"> </span></span></p> <p> .</p> <script> function count(selector) { return document.querySelectorAll(selector).length; } console.log(count("p")); // <p> // → 4 console.log(count(".animal")); // animal // → 2 console.log(count("p .animal")); // animal <p> // → 2 console.log(count("p > .animal")); // <p> // → 1 </script>
getElementsByTagName, querySelectorAll . , .
querySelector ( All) . , . , null, .
position . static, , . relative, , top left . absolute, «» – , . , left top , position static. , .
. , .
<p style="text-align: center"> <img src="img/cat.png" style="position: relative"> </p> <script> var cat = document.querySelector("img"); var angle = 0, lastTime = null; function animate(time) { if (lastTime != null) angle += (time - lastTime) * 0.001; lastTime = time; cat.style.top = (Math.sin(angle) * 20) + "px"; cat.style.left = (Math.cos(angle) * 200) + "px"; requestAnimationFrame(animate); } requestAnimationFrame(animate); </script>
position: relative. top left , .
requestAnimationFrame animate , . animate requestAnimationFrame, . ( ) , 60 , .
DOM , . JavaScript, . requestAnimationFrame – , , , .
, ( lastTime), , . , , , .
Math.cos Math.sin. , , .
Math.cos Math.sin , (0, 0) . , 0 , , 2π ( 6.28) . Math.cos x , , Math.sin y. ( ) , 2π 0, – , a+2π , a.
angle , animation. image. top Math.sin 20 – . left Math.cos 200, .
. px , , ( , ems ). . – 0, .
JavaScript DOM. , JavaScript . DOM , . parentNode childNodes, .
, , - . , , color display. JavaScript style.
6. HTML . HTML :
<table> <tr> <th>name</th> <th>height</th> <th>country</th> </tr> <tr> <td>Kilimanjaro</td> <td>5895</td> <td>Tanzania</td> </tr> </table>
. : , .
, 6, MOUNTAINS.
buildTable, , , DOM, . , , , . Object.keys, , .
, , style.textAlign "right".
<style> /* */ table { border-collapse: collapse; } td, th { border: 1px solid black; padding: 3px 8px; } th { text-align: left; } </style> <script> function buildTable(data) { // } document.body.appendChild(buildTable(MOUNTAINS)); </script>
getElementsByTagName . , ( ) , .
, tagName. , . toLowerCase toUpperCase.
<h1> <span>span</span> .</h1> <p> <span></span>, <span></span> spans.</p> <script> function byTagName(node, tagName) { // } console.log(byTagName(document.body, "h1").length); // → 1 console.log(byTagName(document.body, "span").length); // → 3 var para = document.querySelector("p"); console.log(byTagName(para, "span").length); // → 2 </script>
,
. - .
, . top left . , position.
<img src="img/cat.png" id="cat" style="position: absolute"> <img src="img/hat.png" id="hat" style="position: absolute"> <script> var cat = document.querySelector("#cat"); var hat = document.querySelector("#hat"); // Your code here. </script> .
, , . , , , . style ():
<p><a href="."> </a></p> <p><a href="." style="color: green"> </a></p>
style (color), . : “color: red; border: none”.
. , display , .
<strong></strong>, <strong style="display: block"> </strong>, <strong style="display: none"> </strong>.
, – display: none . . , .
JavaScript style. , . – , - .
<p id="para" style="color: purple"> </p> <script> var para = document.getElementById("para"); console.log(para.style.color); para.style.color = "magenta"; </script>
, font-family. JavaScript ( style["font-family"]), , : style.fontFamily
HTML CSS (Cascading Style Sheets, ). – . :
<style> strong { font-style: italic; color: gray; } </style> <p> <strong> strong</strong> .</p>
«» , . , , , font-style .
, . font-weight: normal, , , . , style, .
CSS . .abc , “abc”. #xyz id “xyz” ( id ).
.subtle { color: gray; font-size: 80%; } #header { background: blue; color: white; } /* p, a b, id main */ pab#main { margin-bottom: 20px; }
, . , , . , pa , p .a, .
p > a {…} , .
pa {…} , , .
. , 2-3 . (, , ) – - DOM.
querySelectorAll, document, -, , , .
<p> <span class="animal"></span></p> <p> </p> <p> <span class="character"> <span class="animal"> </span></span></p> <p> .</p> <script> function count(selector) { return document.querySelectorAll(selector).length; } console.log(count("p")); // <p> // → 4 console.log(count(".animal")); // animal // → 2 console.log(count("p .animal")); // animal <p> // → 2 console.log(count("p > .animal")); // <p> // → 1 </script>
getElementsByTagName, querySelectorAll . , .
querySelector ( All) . , . , null, .
position . static, , . relative, , top left . absolute, «» – , . , left top , position static. , .
. , .
<p style="text-align: center"> <img src="img/cat.png" style="position: relative"> </p> <script> var cat = document.querySelector("img"); var angle = 0, lastTime = null; function animate(time) { if (lastTime != null) angle += (time - lastTime) * 0.001; lastTime = time; cat.style.top = (Math.sin(angle) * 20) + "px"; cat.style.left = (Math.cos(angle) * 200) + "px"; requestAnimationFrame(animate); } requestAnimationFrame(animate); </script>
position: relative. top left , .
requestAnimationFrame animate , . animate requestAnimationFrame, . ( ) , 60 , .
DOM , . JavaScript, . requestAnimationFrame – , , , .
, ( lastTime), , . , , , .
Math.cos Math.sin. , , .
Math.cos Math.sin , (0, 0) . , 0 , , 2π ( 6.28) . Math.cos x , , Math.sin y. ( ) , 2π 0, – , a+2π , a.
angle , animation. image. top Math.sin 20 – . left Math.cos 200, .
. px , , ( , ems ). . – 0, .
JavaScript DOM. , JavaScript . DOM , . parentNode childNodes, .
, , - . , , color display. JavaScript style.
6. HTML . HTML :
<table> <tr> <th>name</th> <th>height</th> <th>country</th> </tr> <tr> <td>Kilimanjaro</td> <td>5895</td> <td>Tanzania</td> </tr> </table>
. : , .
, 6, MOUNTAINS.
buildTable, , , DOM, . , , , . Object.keys, , .
, , style.textAlign "right".
<style> /* */ table { border-collapse: collapse; } td, th { border: 1px solid black; padding: 3px 8px; } th { text-align: left; } </style> <script> function buildTable(data) { // } document.body.appendChild(buildTable(MOUNTAINS)); </script>
getElementsByTagName . , ( ) , .
, tagName. , . toLowerCase toUpperCase.
<h1> <span>span</span> .</h1> <p> <span></span>, <span></span> spans.</p> <script> function byTagName(node, tagName) { // } console.log(byTagName(document.body, "h1").length); // → 1 console.log(byTagName(document.body, "span").length); // → 3 var para = document.querySelector("p"); console.log(byTagName(para, "span").length); // → 2 </script>
,
. - .
, . top left . , position.
<img src="img/cat.png" id="cat" style="position: absolute"> <img src="img/hat.png" id="hat" style="position: absolute"> <script> var cat = document.querySelector("#cat"); var hat = document.querySelector("#hat"); // Your code here. </script>.
, , . , , , . style ():
<p><a href="."> </a></p> <p><a href="." style="color: green"> </a></p>
style (color), . : “color: red; border: none”.
. , display , .
<strong></strong>, <strong style="display: block"> </strong>, <strong style="display: none"> </strong>.
, – display: none . . , .
JavaScript style. , . – , - .
<p id="para" style="color: purple"> </p> <script> var para = document.getElementById("para"); console.log(para.style.color); para.style.color = "magenta"; </script>
, font-family. JavaScript ( style["font-family"]), , : style.fontFamily
HTML CSS (Cascading Style Sheets, ). – . :
<style> strong { font-style: italic; color: gray; } </style> <p> <strong> strong</strong> .</p>
«» , . , , , font-style .
, . font-weight: normal, , , . , style, .
CSS . .abc , “abc”. #xyz id “xyz” ( id ).
.subtle { color: gray; font-size: 80%; } #header { background: blue; color: white; } /* p, a b, id main */ pab#main { margin-bottom: 20px; }
, . , , . , pa , p .a, .
p > a {…} , .
pa {…} , , .
. , 2-3 . (, , ) – - DOM.
querySelectorAll, document, -, , , .
<p> <span class="animal"></span></p> <p> </p> <p> <span class="character"> <span class="animal"> </span></span></p> <p> .</p> <script> function count(selector) { return document.querySelectorAll(selector).length; } console.log(count("p")); // <p> // → 4 console.log(count(".animal")); // animal // → 2 console.log(count("p .animal")); // animal <p> // → 2 console.log(count("p > .animal")); // <p> // → 1 </script>
getElementsByTagName, querySelectorAll . , .
querySelector ( All) . , . , null, .
position . static, , . relative, , top left . absolute, «» – , . , left top , position static. , .
. , .
<p style="text-align: center"> <img src="img/cat.png" style="position: relative"> </p> <script> var cat = document.querySelector("img"); var angle = 0, lastTime = null; function animate(time) { if (lastTime != null) angle += (time - lastTime) * 0.001; lastTime = time; cat.style.top = (Math.sin(angle) * 20) + "px"; cat.style.left = (Math.cos(angle) * 200) + "px"; requestAnimationFrame(animate); } requestAnimationFrame(animate); </script>
position: relative. top left , .
requestAnimationFrame animate , . animate requestAnimationFrame, . ( ) , 60 , .
DOM , . JavaScript, . requestAnimationFrame – , , , .
, ( lastTime), , . , , , .
Math.cos Math.sin. , , .
Math.cos Math.sin , (0, 0) . , 0 , , 2π ( 6.28) . Math.cos x , , Math.sin y. ( ) , 2π 0, – , a+2π , a.
angle , animation. image. top Math.sin 20 – . left Math.cos 200, .
. px , , ( , ems ). . – 0, .
JavaScript DOM. , JavaScript . DOM , . parentNode childNodes, .
, , - . , , color display. JavaScript style.
6. HTML . HTML :
<table> <tr> <th>name</th> <th>height</th> <th>country</th> </tr> <tr> <td>Kilimanjaro</td> <td>5895</td> <td>Tanzania</td> </tr> </table>
. : , .
, 6, MOUNTAINS.
buildTable, , , DOM, . , , , . Object.keys, , .
, , style.textAlign "right".
<style> /* */ table { border-collapse: collapse; } td, th { border: 1px solid black; padding: 3px 8px; } th { text-align: left; } </style> <script> function buildTable(data) { // } document.body.appendChild(buildTable(MOUNTAINS)); </script>
getElementsByTagName . , ( ) , .
, tagName. , . toLowerCase toUpperCase.
<h1> <span>span</span> .</h1> <p> <span></span>, <span></span> spans.</p> <script> function byTagName(node, tagName) { // } console.log(byTagName(document.body, "h1").length); // → 1 console.log(byTagName(document.body, "span").length); // → 3 var para = document.querySelector("p"); console.log(byTagName(para, "span").length); // → 2 </script>
,
. - .
, . top left . , position.
<img src="img/cat.png" id="cat" style="position: absolute"> <img src="img/hat.png" id="hat" style="position: absolute"> <script> var cat = document.querySelector("#cat"); var hat = document.querySelector("#hat"); // Your code here. </script>.
, , . , , , . style ():
<p><a href="."> </a></p> <p><a href="." style="color: green"> </a></p>
style (color), . : “color: red; border: none”.
. , display , .
<strong></strong>, <strong style="display: block"> </strong>, <strong style="display: none"> </strong>.
, – display: none . . , .
JavaScript style. , . – , - .
<p id="para" style="color: purple"> </p> <script> var para = document.getElementById("para"); console.log(para.style.color); para.style.color = "magenta"; </script>
, font-family. JavaScript ( style["font-family"]), , : style.fontFamily
HTML CSS (Cascading Style Sheets, ). – . :
<style> strong { font-style: italic; color: gray; } </style> <p> <strong> strong</strong> .</p>
«» , . , , , font-style .
, . font-weight: normal, , , . , style, .
CSS . .abc , “abc”. #xyz id “xyz” ( id ).
.subtle { color: gray; font-size: 80%; } #header { background: blue; color: white; } /* p, a b, id main */ pab#main { margin-bottom: 20px; }
, . , , . , pa , p .a, .
p > a {…} , .
pa {…} , , .
. , 2-3 . (, , ) – - DOM.
querySelectorAll, document, -, , , .
<p> <span class="animal"></span></p> <p> </p> <p> <span class="character"> <span class="animal"> </span></span></p> <p> .</p> <script> function count(selector) { return document.querySelectorAll(selector).length; } console.log(count("p")); // <p> // → 4 console.log(count(".animal")); // animal // → 2 console.log(count("p .animal")); // animal <p> // → 2 console.log(count("p > .animal")); // <p> // → 1 </script>
getElementsByTagName, querySelectorAll . , .
querySelector ( All) . , . , null, .
position . static, , . relative, , top left . absolute, «» – , . , left top , position static. , .
. , .
<p style="text-align: center"> <img src="img/cat.png" style="position: relative"> </p> <script> var cat = document.querySelector("img"); var angle = 0, lastTime = null; function animate(time) { if (lastTime != null) angle += (time - lastTime) * 0.001; lastTime = time; cat.style.top = (Math.sin(angle) * 20) + "px"; cat.style.left = (Math.cos(angle) * 200) + "px"; requestAnimationFrame(animate); } requestAnimationFrame(animate); </script>
position: relative. top left , .
requestAnimationFrame animate , . animate requestAnimationFrame, . ( ) , 60 , .
DOM , . JavaScript, . requestAnimationFrame – , , , .
, ( lastTime), , . , , , .
Math.cos Math.sin. , , .
Math.cos Math.sin , (0, 0) . , 0 , , 2π ( 6.28) . Math.cos x , , Math.sin y. ( ) , 2π 0, – , a+2π , a.
angle , animation. image. top Math.sin 20 – . left Math.cos 200, .
. px , , ( , ems ). . – 0, .
JavaScript DOM. , JavaScript . DOM , . parentNode childNodes, .
, , - . , , color display. JavaScript style.
6. HTML . HTML :
<table> <tr> <th>name</th> <th>height</th> <th>country</th> </tr> <tr> <td>Kilimanjaro</td> <td>5895</td> <td>Tanzania</td> </tr> </table>
. : , .
, 6, MOUNTAINS.
buildTable, , , DOM, . , , , . Object.keys, , .
, , style.textAlign "right".
<style> /* */ table { border-collapse: collapse; } td, th { border: 1px solid black; padding: 3px 8px; } th { text-align: left; } </style> <script> function buildTable(data) { // } document.body.appendChild(buildTable(MOUNTAINS)); </script>
getElementsByTagName . , ( ) , .
, tagName. , . toLowerCase toUpperCase.
<h1> <span>span</span> .</h1> <p> <span></span>, <span></span> spans.</p> <script> function byTagName(node, tagName) { // } console.log(byTagName(document.body, "h1").length); // → 1 console.log(byTagName(document.body, "span").length); // → 3 var para = document.querySelector("p"); console.log(byTagName(para, "span").length); // → 2 </script>
,
. - .
, . top left . , position.
<img src="img/cat.png" id="cat" style="position: absolute"> <img src="img/hat.png" id="hat" style="position: absolute"> <script> var cat = document.querySelector("#cat"); var hat = document.querySelector("#hat"); // Your code here. </script>
.
, , . , , , . style ():
<p><a href="."> </a></p> <p><a href="." style="color: green"> </a></p>
style (color), . : “color: red; border: none”.
. , display , .
<strong></strong>, <strong style="display: block"> </strong>, <strong style="display: none"> </strong>.
, – display: none . . , .
JavaScript style. , . – , - .
<p id="para" style="color: purple"> </p> <script> var para = document.getElementById("para"); console.log(para.style.color); para.style.color = "magenta"; </script>
, font-family. JavaScript ( style["font-family"]), , : style.fontFamily
HTML CSS (Cascading Style Sheets, ). – . :
<style> strong { font-style: italic; color: gray; } </style> <p> <strong> strong</strong> .</p>
«» , . , , , font-style .
, . font-weight: normal, , , . , style, .
CSS . .abc , “abc”. #xyz id “xyz” ( id ).
.subtle { color: gray; font-size: 80%; } #header { background: blue; color: white; } /* p, a b, id main */ pab#main { margin-bottom: 20px; }
, . , , . , pa , p .a, .
p > a {…} , .
pa {…} , , .
. , 2-3 . (, , ) – - DOM.
querySelectorAll, document, -, , , .
<p> <span class="animal"></span></p> <p> </p> <p> <span class="character"> <span class="animal"> </span></span></p> <p> .</p> <script> function count(selector) { return document.querySelectorAll(selector).length; } console.log(count("p")); // <p> // → 4 console.log(count(".animal")); // animal // → 2 console.log(count("p .animal")); // animal <p> // → 2 console.log(count("p > .animal")); // <p> // → 1 </script>
getElementsByTagName, querySelectorAll . , .
querySelector ( All) . , . , null, .
position . static, , . relative, , top left . absolute, «» – , . , left top , position static. , .
. , .
<p style="text-align: center"> <img src="img/cat.png" style="position: relative"> </p> <script> var cat = document.querySelector("img"); var angle = 0, lastTime = null; function animate(time) { if (lastTime != null) angle += (time - lastTime) * 0.001; lastTime = time; cat.style.top = (Math.sin(angle) * 20) + "px"; cat.style.left = (Math.cos(angle) * 200) + "px"; requestAnimationFrame(animate); } requestAnimationFrame(animate); </script>
position: relative. top left , .
requestAnimationFrame animate , . animate requestAnimationFrame, . ( ) , 60 , .
DOM , . JavaScript, . requestAnimationFrame – , , , .
, ( lastTime), , . , , , .
Math.cos Math.sin. , , .
Math.cos Math.sin , (0, 0) . , 0 , , 2π ( 6.28) . Math.cos x , , Math.sin y. ( ) , 2π 0, – , a+2π , a.
angle , animation. image. top Math.sin 20 – . left Math.cos 200, .
. px , , ( , ems ). . – 0, .
JavaScript DOM. , JavaScript . DOM , . parentNode childNodes, .
, , - . , , color display. JavaScript style.
6. HTML . HTML :
<table> <tr> <th>name</th> <th>height</th> <th>country</th> </tr> <tr> <td>Kilimanjaro</td> <td>5895</td> <td>Tanzania</td> </tr> </table>
. : , .
, 6, MOUNTAINS.
buildTable, , , DOM, . , , , . Object.keys, , .
, , style.textAlign "right".
<style> /* */ table { border-collapse: collapse; } td, th { border: 1px solid black; padding: 3px 8px; } th { text-align: left; } </style> <script> function buildTable(data) { // } document.body.appendChild(buildTable(MOUNTAINS)); </script>
getElementsByTagName . , ( ) , .
, tagName. , . toLowerCase toUpperCase.
<h1> <span>span</span> .</h1> <p> <span></span>, <span></span> spans.</p> <script> function byTagName(node, tagName) { // } console.log(byTagName(document.body, "h1").length); // → 1 console.log(byTagName(document.body, "span").length); // → 3 var para = document.querySelector("p"); console.log(byTagName(para, "span").length); // → 2 </script>
,
. - .
, . top left . , position.
<img src="img/cat.png" id="cat" style="position: absolute"> <img src="img/hat.png" id="hat" style="position: absolute"> <script> var cat = document.querySelector("#cat"); var hat = document.querySelector("#hat"); // Your code here. </script>.
, , . , , , . style ():
<p><a href="."> </a></p> <p><a href="." style="color: green"> </a></p>
style (color), . : “color: red; border: none”.
. , display , .
<strong></strong>, <strong style="display: block"> </strong>, <strong style="display: none"> </strong>.
, – display: none . . , .
JavaScript style. , . – , - .
<p id="para" style="color: purple"> </p> <script> var para = document.getElementById("para"); console.log(para.style.color); para.style.color = "magenta"; </script>
, font-family. JavaScript ( style["font-family"]), , : style.fontFamily
HTML CSS (Cascading Style Sheets, ). – . :
<style> strong { font-style: italic; color: gray; } </style> <p> <strong> strong</strong> .</p>
«» , . , , , font-style .
, . font-weight: normal, , , . , style, .
CSS . .abc , “abc”. #xyz id “xyz” ( id ).
.subtle { color: gray; font-size: 80%; } #header { background: blue; color: white; } /* p, a b, id main */ pab#main { margin-bottom: 20px; }
, . , , . , pa , p .a, .
p > a {…} , .
pa {…} , , .
. , 2-3 . (, , ) – - DOM.
querySelectorAll, document, -, , , .
<p> <span class="animal"></span></p> <p> </p> <p> <span class="character"> <span class="animal"> </span></span></p> <p> .</p> <script> function count(selector) { return document.querySelectorAll(selector).length; } console.log(count("p")); // <p> // → 4 console.log(count(".animal")); // animal // → 2 console.log(count("p .animal")); // animal <p> // → 2 console.log(count("p > .animal")); // <p> // → 1 </script>
getElementsByTagName, querySelectorAll . , .
querySelector ( All) . , . , null, .
position . static, , . relative, , top left . absolute, «» – , . , left top , position static. , .
. , .
<p style="text-align: center"> <img src="img/cat.png" style="position: relative"> </p> <script> var cat = document.querySelector("img"); var angle = 0, lastTime = null; function animate(time) { if (lastTime != null) angle += (time - lastTime) * 0.001; lastTime = time; cat.style.top = (Math.sin(angle) * 20) + "px"; cat.style.left = (Math.cos(angle) * 200) + "px"; requestAnimationFrame(animate); } requestAnimationFrame(animate); </script>
position: relative. top left , .
requestAnimationFrame animate , . animate requestAnimationFrame, . ( ) , 60 , .
DOM , . JavaScript, . requestAnimationFrame – , , , .
, ( lastTime), , . , , , .
Math.cos Math.sin. , , .
Math.cos Math.sin , (0, 0) . , 0 , , 2π ( 6.28) . Math.cos x , , Math.sin y. ( ) , 2π 0, – , a+2π , a.
angle , animation. image. top Math.sin 20 – . left Math.cos 200, .
. px , , ( , ems ). . – 0, .
JavaScript DOM. , JavaScript . DOM , . parentNode childNodes, .
, , - . , , color display. JavaScript style.
6. HTML . HTML :
<table> <tr> <th>name</th> <th>height</th> <th>country</th> </tr> <tr> <td>Kilimanjaro</td> <td>5895</td> <td>Tanzania</td> </tr> </table>
. : , .
, 6, MOUNTAINS.
buildTable, , , DOM, . , , , . Object.keys, , .
, , style.textAlign "right".
<style> /* */ table { border-collapse: collapse; } td, th { border: 1px solid black; padding: 3px 8px; } th { text-align: left; } </style> <script> function buildTable(data) { // } document.body.appendChild(buildTable(MOUNTAINS)); </script>
getElementsByTagName . , ( ) , .
, tagName. , . toLowerCase toUpperCase.
<h1> <span>span</span> .</h1> <p> <span></span>, <span></span> spans.</p> <script> function byTagName(node, tagName) { // } console.log(byTagName(document.body, "h1").length); // → 1 console.log(byTagName(document.body, "span").length); // → 3 var para = document.querySelector("p"); console.log(byTagName(para, "span").length); // → 2 </script>
,
. - .
, . top left . , position.
<img src="img/cat.png" id="cat" style="position: absolute"> <img src="img/hat.png" id="hat" style="position: absolute"> <script> var cat = document.querySelector("#cat"); var hat = document.querySelector("#hat"); // Your code here. </script>.
, , . , , , . style ():
<p><a href="."> </a></p> <p><a href="." style="color: green"> </a></p>
style (color), . : “color: red; border: none”.
. , display , .
<strong></strong>, <strong style="display: block"> </strong>, <strong style="display: none"> </strong>.
, – display: none . . , .
JavaScript style. , . – , - .
<p id="para" style="color: purple"> </p> <script> var para = document.getElementById("para"); console.log(para.style.color); para.style.color = "magenta"; </script>
, font-family. JavaScript ( style["font-family"]), , : style.fontFamily
HTML CSS (Cascading Style Sheets, ). – . :
<style> strong { font-style: italic; color: gray; } </style> <p> <strong> strong</strong> .</p>
«» , . , , , font-style .
, . font-weight: normal, , , . , style, .
CSS . .abc , “abc”. #xyz id “xyz” ( id ).
.subtle { color: gray; font-size: 80%; } #header { background: blue; color: white; } /* p, a b, id main */ pab#main { margin-bottom: 20px; }
, . , , . , pa , p .a, .
p > a {…} , .
pa {…} , , .
. , 2-3 . (, , ) – - DOM.
querySelectorAll, document, -, , , .
<p> <span class="animal"></span></p> <p> </p> <p> <span class="character"> <span class="animal"> </span></span></p> <p> .</p> <script> function count(selector) { return document.querySelectorAll(selector).length; } console.log(count("p")); // <p> // → 4 console.log(count(".animal")); // animal // → 2 console.log(count("p .animal")); // animal <p> // → 2 console.log(count("p > .animal")); // <p> // → 1 </script>
getElementsByTagName, querySelectorAll . , .
querySelector ( All) . , . , null, .
position . static, , . relative, , top left . absolute, «» – , . , left top , position static. , .
. , .
<p style="text-align: center"> <img src="img/cat.png" style="position: relative"> </p> <script> var cat = document.querySelector("img"); var angle = 0, lastTime = null; function animate(time) { if (lastTime != null) angle += (time - lastTime) * 0.001; lastTime = time; cat.style.top = (Math.sin(angle) * 20) + "px"; cat.style.left = (Math.cos(angle) * 200) + "px"; requestAnimationFrame(animate); } requestAnimationFrame(animate); </script>
position: relative. top left , .
requestAnimationFrame animate , . animate requestAnimationFrame, . ( ) , 60 , .
DOM , . JavaScript, . requestAnimationFrame – , , , .
, ( lastTime), , . , , , .
Math.cos Math.sin. , , .
Math.cos Math.sin , (0, 0) . , 0 , , 2π ( 6.28) . Math.cos x , , Math.sin y. ( ) , 2π 0, – , a+2π , a.
angle , animation. image. top Math.sin 20 – . left Math.cos 200, .
. px , , ( , ems ). . – 0, .
JavaScript DOM. , JavaScript . DOM , . parentNode childNodes, .
, , - . , , color display. JavaScript style.
6. HTML . HTML :
<table> <tr> <th>name</th> <th>height</th> <th>country</th> </tr> <tr> <td>Kilimanjaro</td> <td>5895</td> <td>Tanzania</td> </tr> </table>
. : , .
, 6, MOUNTAINS.
buildTable, , , DOM, . , , , . Object.keys, , .
, , style.textAlign "right".
<style> /* */ table { border-collapse: collapse; } td, th { border: 1px solid black; padding: 3px 8px; } th { text-align: left; } </style> <script> function buildTable(data) { // } document.body.appendChild(buildTable(MOUNTAINS)); </script>
getElementsByTagName . , ( ) , .
, tagName. , . toLowerCase toUpperCase.
<h1> <span>span</span> .</h1> <p> <span></span>, <span></span> spans.</p> <script> function byTagName(node, tagName) { // } console.log(byTagName(document.body, "h1").length); // → 1 console.log(byTagName(document.body, "span").length); // → 3 var para = document.querySelector("p"); console.log(byTagName(para, "span").length); // → 2 </script>
,
. - .
, . top left . , position.
<img src="img/cat.png" id="cat" style="position: absolute"> <img src="img/hat.png" id="hat" style="position: absolute"> <script> var cat = document.querySelector("#cat"); var hat = document.querySelector("#hat"); // Your code here. </script>
.
, , . , , , . style ():
<p><a href="."> </a></p> <p><a href="." style="color: green"> </a></p>
style (color), . : “color: red; border: none”.
. , display , .
<strong></strong>, <strong style="display: block"> </strong>, <strong style="display: none"> </strong>.
, – display: none . . , .
JavaScript style. , . – , - .
<p id="para" style="color: purple"> </p> <script> var para = document.getElementById("para"); console.log(para.style.color); para.style.color = "magenta"; </script>
, font-family. JavaScript ( style["font-family"]), , : style.fontFamily
HTML CSS (Cascading Style Sheets, ). – . :
<style> strong { font-style: italic; color: gray; } </style> <p> <strong> strong</strong> .</p>
«» , . , , , font-style .
, . font-weight: normal, , , . , style, .
CSS . .abc , “abc”. #xyz id “xyz” ( id ).
.subtle { color: gray; font-size: 80%; } #header { background: blue; color: white; } /* p, a b, id main */ pab#main { margin-bottom: 20px; }
, . , , . , pa , p .a, .
p > a {…} , .
pa {…} , , .
. , 2-3 . (, , ) – - DOM.
querySelectorAll, document, -, , , .
<p> <span class="animal"></span></p> <p> </p> <p> <span class="character"> <span class="animal"> </span></span></p> <p> .</p> <script> function count(selector) { return document.querySelectorAll(selector).length; } console.log(count("p")); // <p> // → 4 console.log(count(".animal")); // animal // → 2 console.log(count("p .animal")); // animal <p> // → 2 console.log(count("p > .animal")); // <p> // → 1 </script>
getElementsByTagName, querySelectorAll . , .
querySelector ( All) . , . , null, .
position . static, , . relative, , top left . absolute, «» – , . , left top , position static. , .
. , .
<p style="text-align: center"> <img src="img/cat.png" style="position: relative"> </p> <script> var cat = document.querySelector("img"); var angle = 0, lastTime = null; function animate(time) { if (lastTime != null) angle += (time - lastTime) * 0.001; lastTime = time; cat.style.top = (Math.sin(angle) * 20) + "px"; cat.style.left = (Math.cos(angle) * 200) + "px"; requestAnimationFrame(animate); } requestAnimationFrame(animate); </script>
position: relative. top left , .
requestAnimationFrame animate , . animate requestAnimationFrame, . ( ) , 60 , .
DOM , . JavaScript, . requestAnimationFrame – , , , .
, ( lastTime), , . , , , .
Math.cos Math.sin. , , .
Math.cos Math.sin , (0, 0) . , 0 , , 2π ( 6.28) . Math.cos x , , Math.sin y. ( ) , 2π 0, – , a+2π , a.
angle , animation. image. top Math.sin 20 – . left Math.cos 200, .
. px , , ( , ems ). . – 0, .
JavaScript DOM. , JavaScript . DOM , . parentNode childNodes, .
, , - . , , color display. JavaScript style.
6. HTML . HTML :
<table> <tr> <th>name</th> <th>height</th> <th>country</th> </tr> <tr> <td>Kilimanjaro</td> <td>5895</td> <td>Tanzania</td> </tr> </table>
. : , .
, 6, MOUNTAINS.
buildTable, , , DOM, . , , , . Object.keys, , .
, , style.textAlign "right".
<style> /* */ table { border-collapse: collapse; } td, th { border: 1px solid black; padding: 3px 8px; } th { text-align: left; } </style> <script> function buildTable(data) { // } document.body.appendChild(buildTable(MOUNTAINS)); </script>
getElementsByTagName . , ( ) , .
, tagName. , . toLowerCase toUpperCase.
<h1> <span>span</span> .</h1> <p> <span></span>, <span></span> spans.</p> <script> function byTagName(node, tagName) { // } console.log(byTagName(document.body, "h1").length); // → 1 console.log(byTagName(document.body, "span").length); // → 3 var para = document.querySelector("p"); console.log(byTagName(para, "span").length); // → 2 </script>
,
. - .
, . top left . , position.
<img src="img/cat.png" id="cat" style="position: absolute"> <img src="img/hat.png" id="hat" style="position: absolute"> <script> var cat = document.querySelector("#cat"); var hat = document.querySelector("#hat"); // Your code here. </script>.
, , . , , , . style ():
<p><a href="."> </a></p> <p><a href="." style="color: green"> </a></p>
style (color), . : “color: red; border: none”.
. , display , .
<strong></strong>, <strong style="display: block"> </strong>, <strong style="display: none"> </strong>.
, – display: none . . , .
JavaScript style. , . – , - .
<p id="para" style="color: purple"> </p> <script> var para = document.getElementById("para"); console.log(para.style.color); para.style.color = "magenta"; </script>
, font-family. JavaScript ( style["font-family"]), , : style.fontFamily
HTML CSS (Cascading Style Sheets, ). – . :
<style> strong { font-style: italic; color: gray; } </style> <p> <strong> strong</strong> .</p>
«» , . , , , font-style .
, . font-weight: normal, , , . , style, .
CSS . .abc , “abc”. #xyz id “xyz” ( id ).
.subtle { color: gray; font-size: 80%; } #header { background: blue; color: white; } /* p, a b, id main */ pab#main { margin-bottom: 20px; }
, . , , . , pa , p .a, .
p > a {…} , .
pa {…} , , .
. , 2-3 . (, , ) – - DOM.
querySelectorAll, document, -, , , .
<p> <span class="animal"></span></p> <p> </p> <p> <span class="character"> <span class="animal"> </span></span></p> <p> .</p> <script> function count(selector) { return document.querySelectorAll(selector).length; } console.log(count("p")); // <p> // → 4 console.log(count(".animal")); // animal // → 2 console.log(count("p .animal")); // animal <p> // → 2 console.log(count("p > .animal")); // <p> // → 1 </script>
getElementsByTagName, querySelectorAll . , .
querySelector ( All) . , . , null, .
position . static, , . relative, , top left . absolute, «» – , . , left top , position static. , .
. , .
<p style="text-align: center"> <img src="img/cat.png" style="position: relative"> </p> <script> var cat = document.querySelector("img"); var angle = 0, lastTime = null; function animate(time) { if (lastTime != null) angle += (time - lastTime) * 0.001; lastTime = time; cat.style.top = (Math.sin(angle) * 20) + "px"; cat.style.left = (Math.cos(angle) * 200) + "px"; requestAnimationFrame(animate); } requestAnimationFrame(animate); </script>
position: relative. top left , .
requestAnimationFrame animate , . animate requestAnimationFrame, . ( ) , 60 , .
DOM , . JavaScript, . requestAnimationFrame – , , , .
, ( lastTime), , . , , , .
Math.cos Math.sin. , , .
Math.cos Math.sin , (0, 0) . , 0 , , 2π ( 6.28) . Math.cos x , , Math.sin y. ( ) , 2π 0, – , a+2π , a.
angle , animation. image. top Math.sin 20 – . left Math.cos 200, .
. px , , ( , ems ). . – 0, .
JavaScript DOM. , JavaScript . DOM , . parentNode childNodes, .
, , - . , , color display. JavaScript style.
6. HTML . HTML :
<table> <tr> <th>name</th> <th>height</th> <th>country</th> </tr> <tr> <td>Kilimanjaro</td> <td>5895</td> <td>Tanzania</td> </tr> </table>
. : , .
, 6, MOUNTAINS.
buildTable, , , DOM, . , , , . Object.keys, , .
, , style.textAlign "right".
<style> /* */ table { border-collapse: collapse; } td, th { border: 1px solid black; padding: 3px 8px; } th { text-align: left; } </style> <script> function buildTable(data) { // } document.body.appendChild(buildTable(MOUNTAINS)); </script>
getElementsByTagName . , ( ) , .
, tagName. , . toLowerCase toUpperCase.
<h1> <span>span</span> .</h1> <p> <span></span>, <span></span> spans.</p> <script> function byTagName(node, tagName) { // } console.log(byTagName(document.body, "h1").length); // → 1 console.log(byTagName(document.body, "span").length); // → 3 var para = document.querySelector("p"); console.log(byTagName(para, "span").length); // → 2 </script>
,
. - .
, . top left . , position.
<img src="img/cat.png" id="cat" style="position: absolute"> <img src="img/hat.png" id="hat" style="position: absolute"> <script> var cat = document.querySelector("#cat"); var hat = document.querySelector("#hat"); // Your code here. </script>.
, , . , , , . style ():
<p><a href="."> </a></p> <p><a href="." style="color: green"> </a></p>
style (color), . : “color: red; border: none”.
. , display , .
<strong></strong>, <strong style="display: block"> </strong>, <strong style="display: none"> </strong>.
, – display: none . . , .
JavaScript style. , . – , - .
<p id="para" style="color: purple"> </p> <script> var para = document.getElementById("para"); console.log(para.style.color); para.style.color = "magenta"; </script>
, font-family. JavaScript ( style["font-family"]), , : style.fontFamily
HTML CSS (Cascading Style Sheets, ). – . :
<style> strong { font-style: italic; color: gray; } </style> <p> <strong> strong</strong> .</p>
«» , . , , , font-style .
, . font-weight: normal, , , . , style, .
CSS . .abc , “abc”. #xyz id “xyz” ( id ).
.subtle { color: gray; font-size: 80%; } #header { background: blue; color: white; } /* p, a b, id main */ pab#main { margin-bottom: 20px; }
, . , , . , pa , p .a, .
p > a {…} , .
pa {…} , , .
. , 2-3 . (, , ) – - DOM.
querySelectorAll, document, -, , , .
<p> <span class="animal"></span></p> <p> </p> <p> <span class="character"> <span class="animal"> </span></span></p> <p> .</p> <script> function count(selector) { return document.querySelectorAll(selector).length; } console.log(count("p")); // <p> // → 4 console.log(count(".animal")); // animal // → 2 console.log(count("p .animal")); // animal <p> // → 2 console.log(count("p > .animal")); // <p> // → 1 </script>
getElementsByTagName, querySelectorAll . , .
querySelector ( All) . , . , null, .
position . static, , . relative, , top left . absolute, «» – , . , left top , position static. , .
. , .
<p style="text-align: center"> <img src="img/cat.png" style="position: relative"> </p> <script> var cat = document.querySelector("img"); var angle = 0, lastTime = null; function animate(time) { if (lastTime != null) angle += (time - lastTime) * 0.001; lastTime = time; cat.style.top = (Math.sin(angle) * 20) + "px"; cat.style.left = (Math.cos(angle) * 200) + "px"; requestAnimationFrame(animate); } requestAnimationFrame(animate); </script>
position: relative. top left , .
requestAnimationFrame animate , . animate requestAnimationFrame, . ( ) , 60 , .
DOM , . JavaScript, . requestAnimationFrame – , , , .
, ( lastTime), , . , , , .
Math.cos Math.sin. , , .
Math.cos Math.sin , (0, 0) . , 0 , , 2π ( 6.28) . Math.cos x , , Math.sin y. ( ) , 2π 0, – , a+2π , a.
angle , animation. image. top Math.sin 20 – . left Math.cos 200, .
. px , , ( , ems ). . – 0, .
JavaScript DOM. , JavaScript . DOM , . parentNode childNodes, .
, , - . , , color display. JavaScript style.
6. HTML . HTML :
<table> <tr> <th>name</th> <th>height</th> <th>country</th> </tr> <tr> <td>Kilimanjaro</td> <td>5895</td> <td>Tanzania</td> </tr> </table>
. : , .
, 6, MOUNTAINS.
buildTable, , , DOM, . , , , . Object.keys, , .
, , style.textAlign "right".
<style> /* */ table { border-collapse: collapse; } td, th { border: 1px solid black; padding: 3px 8px; } th { text-align: left; } </style> <script> function buildTable(data) { // } document.body.appendChild(buildTable(MOUNTAINS)); </script>
getElementsByTagName . , ( ) , .
, tagName. , . toLowerCase toUpperCase.
<h1> <span>span</span> .</h1> <p> <span></span>, <span></span> spans.</p> <script> function byTagName(node, tagName) { // } console.log(byTagName(document.body, "h1").length); // → 1 console.log(byTagName(document.body, "span").length); // → 3 var para = document.querySelector("p"); console.log(byTagName(para, "span").length); // → 2 </script>
,
. - .
, . top left . , position.
<img src="img/cat.png" id="cat" style="position: absolute"> <img src="img/hat.png" id="hat" style="position: absolute"> <script> var cat = document.querySelector("#cat"); var hat = document.querySelector("#hat"); // Your code here. </script>
.
, , . , , , . style ():
<p><a href="."> </a></p> <p><a href="." style="color: green"> </a></p>
style (color), . : “color: red; border: none”.
. , display , .
<strong></strong>, <strong style="display: block"> </strong>, <strong style="display: none"> </strong>.
, – display: none . . , .
JavaScript style. , . – , - .
<p id="para" style="color: purple"> </p> <script> var para = document.getElementById("para"); console.log(para.style.color); para.style.color = "magenta"; </script>
, font-family. JavaScript ( style["font-family"]), , : style.fontFamily
HTML CSS (Cascading Style Sheets, ). – . :
<style> strong { font-style: italic; color: gray; } </style> <p> <strong> strong</strong> .</p>
«» , . , , , font-style .
, . font-weight: normal, , , . , style, .
CSS . .abc , “abc”. #xyz id “xyz” ( id ).
.subtle { color: gray; font-size: 80%; } #header { background: blue; color: white; } /* p, a b, id main */ pab#main { margin-bottom: 20px; }
, . , , . , pa , p .a, .
p > a {…} , .
pa {…} , , .
. , 2-3 . (, , ) – - DOM.
querySelectorAll, document, -, , , .
<p> <span class="animal"></span></p> <p> </p> <p> <span class="character"> <span class="animal"> </span></span></p> <p> .</p> <script> function count(selector) { return document.querySelectorAll(selector).length; } console.log(count("p")); // <p> // → 4 console.log(count(".animal")); // animal // → 2 console.log(count("p .animal")); // animal <p> // → 2 console.log(count("p > .animal")); // <p> // → 1 </script>
getElementsByTagName, querySelectorAll . , .
querySelector ( All) . , . , null, .
position . static, , . relative, , top left . absolute, «» – , . , left top , position static. , .
. , .
<p style="text-align: center"> <img src="img/cat.png" style="position: relative"> </p> <script> var cat = document.querySelector("img"); var angle = 0, lastTime = null; function animate(time) { if (lastTime != null) angle += (time - lastTime) * 0.001; lastTime = time; cat.style.top = (Math.sin(angle) * 20) + "px"; cat.style.left = (Math.cos(angle) * 200) + "px"; requestAnimationFrame(animate); } requestAnimationFrame(animate); </script>
position: relative. top left , .
requestAnimationFrame animate , . animate requestAnimationFrame, . ( ) , 60 , .
DOM , . JavaScript, . requestAnimationFrame – , , , .
, ( lastTime), , . , , , .
Math.cos Math.sin. , , .
Math.cos Math.sin , (0, 0) . , 0 , , 2π ( 6.28) . Math.cos x , , Math.sin y. ( ) , 2π 0, – , a+2π , a.
angle , animation. image. top Math.sin 20 – . left Math.cos 200, .
. px , , ( , ems ). . – 0, .
JavaScript DOM. , JavaScript . DOM , . parentNode childNodes, .
, , - . , , color display. JavaScript style.
6. HTML . HTML :
<table> <tr> <th>name</th> <th>height</th> <th>country</th> </tr> <tr> <td>Kilimanjaro</td> <td>5895</td> <td>Tanzania</td> </tr> </table>
. : , .
, 6, MOUNTAINS.
buildTable, , , DOM, . , , , . Object.keys, , .
, , style.textAlign "right".
<style> /* */ table { border-collapse: collapse; } td, th { border: 1px solid black; padding: 3px 8px; } th { text-align: left; } </style> <script> function buildTable(data) { // } document.body.appendChild(buildTable(MOUNTAINS)); </script>
getElementsByTagName . , ( ) , .
, tagName. , . toLowerCase toUpperCase.
<h1> <span>span</span> .</h1> <p> <span></span>, <span></span> spans.</p> <script> function byTagName(node, tagName) { // } console.log(byTagName(document.body, "h1").length); // → 1 console.log(byTagName(document.body, "span").length); // → 3 var para = document.querySelector("p"); console.log(byTagName(para, "span").length); // → 2 </script>
,
. - .
, . top left . , position.
<img src="img/cat.png" id="cat" style="position: absolute"> <img src="img/hat.png" id="hat" style="position: absolute"> <script> var cat = document.querySelector("#cat"); var hat = document.querySelector("#hat"); // Your code here. </script>.
, , . , , , . style ():
<p><a href="."> </a></p> <p><a href="." style="color: green"> </a></p>
style (color), . : “color: red; border: none”.
. , display , .
<strong></strong>, <strong style="display: block"> </strong>, <strong style="display: none"> </strong>.
, – display: none . . , .
JavaScript style. , . – , - .
<p id="para" style="color: purple"> </p> <script> var para = document.getElementById("para"); console.log(para.style.color); para.style.color = "magenta"; </script>
, font-family. JavaScript ( style["font-family"]), , : style.fontFamily
HTML CSS (Cascading Style Sheets, ). – . :
<style> strong { font-style: italic; color: gray; } </style> <p> <strong> strong</strong> .</p>
«» , . , , , font-style .
, . font-weight: normal, , , . , style, .
CSS . .abc , “abc”. #xyz id “xyz” ( id ).
.subtle { color: gray; font-size: 80%; } #header { background: blue; color: white; } /* p, a b, id main */ pab#main { margin-bottom: 20px; }
, . , , . , pa , p .a, .
p > a {…} , .
pa {…} , , .
. , 2-3 . (, , ) – - DOM.
querySelectorAll, document, -, , , .
<p> <span class="animal"></span></p> <p> </p> <p> <span class="character"> <span class="animal"> </span></span></p> <p> .</p> <script> function count(selector) { return document.querySelectorAll(selector).length; } console.log(count("p")); // <p> // → 4 console.log(count(".animal")); // animal // → 2 console.log(count("p .animal")); // animal <p> // → 2 console.log(count("p > .animal")); // <p> // → 1 </script>
getElementsByTagName, querySelectorAll . , .
querySelector ( All) . , . , null, .
position . static, , . relative, , top left . absolute, «» – , . , left top , position static. , .
. , .
<p style="text-align: center"> <img src="img/cat.png" style="position: relative"> </p> <script> var cat = document.querySelector("img"); var angle = 0, lastTime = null; function animate(time) { if (lastTime != null) angle += (time - lastTime) * 0.001; lastTime = time; cat.style.top = (Math.sin(angle) * 20) + "px"; cat.style.left = (Math.cos(angle) * 200) + "px"; requestAnimationFrame(animate); } requestAnimationFrame(animate); </script>
position: relative. top left , .
requestAnimationFrame animate , . animate requestAnimationFrame, . ( ) , 60 , .
DOM , . JavaScript, . requestAnimationFrame – , , , .
, ( lastTime), , . , , , .
Math.cos Math.sin. , , .
Math.cos Math.sin , (0, 0) . , 0 , , 2π ( 6.28) . Math.cos x , , Math.sin y. ( ) , 2π 0, – , a+2π , a.
angle , animation. image. top Math.sin 20 – . left Math.cos 200, .
. px , , ( , ems ). . – 0, .
JavaScript DOM. , JavaScript . DOM , . parentNode childNodes, .
, , - . , , color display. JavaScript style.
6. HTML . HTML :
<table> <tr> <th>name</th> <th>height</th> <th>country</th> </tr> <tr> <td>Kilimanjaro</td> <td>5895</td> <td>Tanzania</td> </tr> </table>
. : , .
, 6, MOUNTAINS.
buildTable, , , DOM, . , , , . Object.keys, , .
, , style.textAlign "right".
<style> /* */ table { border-collapse: collapse; } td, th { border: 1px solid black; padding: 3px 8px; } th { text-align: left; } </style> <script> function buildTable(data) { // } document.body.appendChild(buildTable(MOUNTAINS)); </script>
getElementsByTagName . , ( ) , .
, tagName. , . toLowerCase toUpperCase.
<h1> <span>span</span> .</h1> <p> <span></span>, <span></span> spans.</p> <script> function byTagName(node, tagName) { // } console.log(byTagName(document.body, "h1").length); // → 1 console.log(byTagName(document.body, "span").length); // → 3 var para = document.querySelector("p"); console.log(byTagName(para, "span").length); // → 2 </script>
,
. - .
, . top left . , position.
<img src="img/cat.png" id="cat" style="position: absolute"> <img src="img/hat.png" id="hat" style="position: absolute"> <script> var cat = document.querySelector("#cat"); var hat = document.querySelector("#hat"); // Your code here. </script>.
, , . , , , . style ():
<p><a href="."> </a></p> <p><a href="." style="color: green"> </a></p>
style (color), . : “color: red; border: none”.
. , display , .
<strong></strong>, <strong style="display: block"> </strong>, <strong style="display: none"> </strong>.
, – display: none . . , .
JavaScript style. , . – , - .
<p id="para" style="color: purple"> </p> <script> var para = document.getElementById("para"); console.log(para.style.color); para.style.color = "magenta"; </script>
, font-family. JavaScript ( style["font-family"]), , : style.fontFamily
HTML CSS (Cascading Style Sheets, ). – . :
<style> strong { font-style: italic; color: gray; } </style> <p> <strong> strong</strong> .</p>
«» , . , , , font-style .
, . font-weight: normal, , , . , style, .
CSS . .abc , “abc”. #xyz id “xyz” ( id ).
.subtle { color: gray; font-size: 80%; } #header { background: blue; color: white; } /* p, a b, id main */ pab#main { margin-bottom: 20px; }
, . , , . , pa , p .a, .
p > a {…} , .
pa {…} , , .
. , 2-3 . (, , ) – - DOM.
querySelectorAll, document, -, , , .
<p> <span class="animal"></span></p> <p> </p> <p> <span class="character"> <span class="animal"> </span></span></p> <p> .</p> <script> function count(selector) { return document.querySelectorAll(selector).length; } console.log(count("p")); // <p> // → 4 console.log(count(".animal")); // animal // → 2 console.log(count("p .animal")); // animal <p> // → 2 console.log(count("p > .animal")); // <p> // → 1 </script>
getElementsByTagName, querySelectorAll . , .
querySelector ( All) . , . , null, .
position . static, , . relative, , top left . absolute, «» – , . , left top , position static. , .
. , .
<p style="text-align: center"> <img src="img/cat.png" style="position: relative"> </p> <script> var cat = document.querySelector("img"); var angle = 0, lastTime = null; function animate(time) { if (lastTime != null) angle += (time - lastTime) * 0.001; lastTime = time; cat.style.top = (Math.sin(angle) * 20) + "px"; cat.style.left = (Math.cos(angle) * 200) + "px"; requestAnimationFrame(animate); } requestAnimationFrame(animate); </script>
position: relative. top left , .
requestAnimationFrame animate , . animate requestAnimationFrame, . ( ) , 60 , .
DOM , . JavaScript, . requestAnimationFrame – , , , .
, ( lastTime), , . , , , .
Math.cos Math.sin. , , .
Math.cos Math.sin , (0, 0) . , 0 , , 2π ( 6.28) . Math.cos x , , Math.sin y. ( ) , 2π 0, – , a+2π , a.
angle , animation. image. top Math.sin 20 – . left Math.cos 200, .
. px , , ( , ems ). . – 0, .
JavaScript DOM. , JavaScript . DOM , . parentNode childNodes, .
, , - . , , color display. JavaScript style.
6. HTML . HTML :
<table> <tr> <th>name</th> <th>height</th> <th>country</th> </tr> <tr> <td>Kilimanjaro</td> <td>5895</td> <td>Tanzania</td> </tr> </table>
. : , .
, 6, MOUNTAINS.
buildTable, , , DOM, . , , , . Object.keys, , .
, , style.textAlign "right".
<style> /* */ table { border-collapse: collapse; } td, th { border: 1px solid black; padding: 3px 8px; } th { text-align: left; } </style> <script> function buildTable(data) { // } document.body.appendChild(buildTable(MOUNTAINS)); </script>
getElementsByTagName . , ( ) , .
, tagName. , . toLowerCase toUpperCase.
<h1> <span>span</span> .</h1> <p> <span></span>, <span></span> spans.</p> <script> function byTagName(node, tagName) { // } console.log(byTagName(document.body, "h1").length); // → 1 console.log(byTagName(document.body, "span").length); // → 3 var para = document.querySelector("p"); console.log(byTagName(para, "span").length); // → 2 </script>
,
. - .
, . top left . , position.
<img src="img/cat.png" id="cat" style="position: absolute"> <img src="img/hat.png" id="hat" style="position: absolute"> <script> var cat = document.querySelector("#cat"); var hat = document.querySelector("#hat"); // Your code here. </script>
.
, , . , , , . style ():
<p><a href="."> </a></p> <p><a href="." style="color: green"> </a></p>
style (color), . : “color: red; border: none”.
. , display , .
<strong></strong>, <strong style="display: block"> </strong>, <strong style="display: none"> </strong>.
, – display: none . . , .
JavaScript style. , . – , - .
<p id="para" style="color: purple"> </p> <script> var para = document.getElementById("para"); console.log(para.style.color); para.style.color = "magenta"; </script>
, font-family. JavaScript ( style["font-family"]), , : style.fontFamily
HTML CSS (Cascading Style Sheets, ). – . :
<style> strong { font-style: italic; color: gray; } </style> <p> <strong> strong</strong> .</p>
«» , . , , , font-style .
, . font-weight: normal, , , . , style, .
CSS . .abc , “abc”. #xyz id “xyz” ( id ).
.subtle { color: gray; font-size: 80%; } #header { background: blue; color: white; } /* p, a b, id main */ pab#main { margin-bottom: 20px; }
, . , , . , pa , p .a, .
p > a {…} , .
pa {…} , , .
. , 2-3 . (, , ) – - DOM.
querySelectorAll, document, -, , , .
<p> <span class="animal"></span></p> <p> </p> <p> <span class="character"> <span class="animal"> </span></span></p> <p> .</p> <script> function count(selector) { return document.querySelectorAll(selector).length; } console.log(count("p")); // <p> // → 4 console.log(count(".animal")); // animal // → 2 console.log(count("p .animal")); // animal <p> // → 2 console.log(count("p > .animal")); // <p> // → 1 </script>
getElementsByTagName, querySelectorAll . , .
querySelector ( All) . , . , null, .
position . static, , . relative, , top left . absolute, «» – , . , left top , position static. , .
. , .
<p style="text-align: center"> <img src="img/cat.png" style="position: relative"> </p> <script> var cat = document.querySelector("img"); var angle = 0, lastTime = null; function animate(time) { if (lastTime != null) angle += (time - lastTime) * 0.001; lastTime = time; cat.style.top = (Math.sin(angle) * 20) + "px"; cat.style.left = (Math.cos(angle) * 200) + "px"; requestAnimationFrame(animate); } requestAnimationFrame(animate); </script>
position: relative. top left , .
requestAnimationFrame animate , . animate requestAnimationFrame, . ( ) , 60 , .
DOM , . JavaScript, . requestAnimationFrame – , , , .
, ( lastTime), , . , , , .
Math.cos Math.sin. , , .
Math.cos Math.sin , (0, 0) . , 0 , , 2π ( 6.28) . Math.cos x , , Math.sin y. ( ) , 2π 0, – , a+2π , a.
angle , animation. image. top Math.sin 20 – . left Math.cos 200, .
. px , , ( , ems ). . – 0, .
JavaScript DOM. , JavaScript . DOM , . parentNode childNodes, .
, , - . , , color display. JavaScript style.
6. HTML . HTML :
<table> <tr> <th>name</th> <th>height</th> <th>country</th> </tr> <tr> <td>Kilimanjaro</td> <td>5895</td> <td>Tanzania</td> </tr> </table>
. : , .
, 6, MOUNTAINS.
buildTable, , , DOM, . , , , . Object.keys, , .
, , style.textAlign "right".
<style> /* */ table { border-collapse: collapse; } td, th { border: 1px solid black; padding: 3px 8px; } th { text-align: left; } </style> <script> function buildTable(data) { // } document.body.appendChild(buildTable(MOUNTAINS)); </script>
getElementsByTagName . , ( ) , .
, tagName. , . toLowerCase toUpperCase.
<h1> <span>span</span> .</h1> <p> <span></span>, <span></span> spans.</p> <script> function byTagName(node, tagName) { // } console.log(byTagName(document.body, "h1").length); // → 1 console.log(byTagName(document.body, "span").length); // → 3 var para = document.querySelector("p"); console.log(byTagName(para, "span").length); // → 2 </script>
,
. - .
, . top left . , position.
<img src="img/cat.png" id="cat" style="position: absolute"> <img src="img/hat.png" id="hat" style="position: absolute"> <script> var cat = document.querySelector("#cat"); var hat = document.querySelector("#hat"); // Your code here. </script>.
, , . , , , . style ():
<p><a href="."> </a></p> <p><a href="." style="color: green"> </a></p>
style (color), . : “color: red; border: none”.
. , display , .
<strong></strong>, <strong style="display: block"> </strong>, <strong style="display: none"> </strong>.
, – display: none . . , .
JavaScript style. , . – , - .
<p id="para" style="color: purple"> </p> <script> var para = document.getElementById("para"); console.log(para.style.color); para.style.color = "magenta"; </script>
, font-family. JavaScript ( style["font-family"]), , : style.fontFamily
HTML CSS (Cascading Style Sheets, ). – . :
<style> strong { font-style: italic; color: gray; } </style> <p> <strong> strong</strong> .</p>
«» , . , , , font-style .
, . font-weight: normal, , , . , style, .
CSS . .abc , “abc”. #xyz id “xyz” ( id ).
.subtle { color: gray; font-size: 80%; } #header { background: blue; color: white; } /* p, a b, id main */ pab#main { margin-bottom: 20px; }
, . , , . , pa , p .a, .
p > a {…} , .
pa {…} , , .
. , 2-3 . (, , ) – - DOM.
querySelectorAll, document, -, , , .
<p> <span class="animal"></span></p> <p> </p> <p> <span class="character"> <span class="animal"> </span></span></p> <p> .</p> <script> function count(selector) { return document.querySelectorAll(selector).length; } console.log(count("p")); // <p> // → 4 console.log(count(".animal")); // animal // → 2 console.log(count("p .animal")); // animal <p> // → 2 console.log(count("p > .animal")); // <p> // → 1 </script>
getElementsByTagName, querySelectorAll . , .
querySelector ( All) . , . , null, .
position . static, , . relative, , top left . absolute, «» – , . , left top , position static. , .
. , .
<p style="text-align: center"> <img src="img/cat.png" style="position: relative"> </p> <script> var cat = document.querySelector("img"); var angle = 0, lastTime = null; function animate(time) { if (lastTime != null) angle += (time - lastTime) * 0.001; lastTime = time; cat.style.top = (Math.sin(angle) * 20) + "px"; cat.style.left = (Math.cos(angle) * 200) + "px"; requestAnimationFrame(animate); } requestAnimationFrame(animate); </script>
position: relative. top left , .
requestAnimationFrame animate , . animate requestAnimationFrame, . ( ) , 60 , .
DOM , . JavaScript, . requestAnimationFrame – , , , .
, ( lastTime), , . , , , .
Math.cos Math.sin. , , .
Math.cos Math.sin , (0, 0) . , 0 , , 2π ( 6.28) . Math.cos x , , Math.sin y. ( ) , 2π 0, – , a+2π , a.
angle , animation. image. top Math.sin 20 – . left Math.cos 200, .
. px , , ( , ems ). . – 0, .
JavaScript DOM. , JavaScript . DOM , . parentNode childNodes, .
, , - . , , color display. JavaScript style.
6. HTML . HTML :
<table> <tr> <th>name</th> <th>height</th> <th>country</th> </tr> <tr> <td>Kilimanjaro</td> <td>5895</td> <td>Tanzania</td> </tr> </table>
. : , .
, 6, MOUNTAINS.
buildTable, , , DOM, . , , , . Object.keys, , .
, , style.textAlign "right".
<style> /* */ table { border-collapse: collapse; } td, th { border: 1px solid black; padding: 3px 8px; } th { text-align: left; } </style> <script> function buildTable(data) { // } document.body.appendChild(buildTable(MOUNTAINS)); </script>
getElementsByTagName . , ( ) , .
, tagName. , . toLowerCase toUpperCase.
<h1> <span>span</span> .</h1> <p> <span></span>, <span></span> spans.</p> <script> function byTagName(node, tagName) { // } console.log(byTagName(document.body, "h1").length); // → 1 console.log(byTagName(document.body, "span").length); // → 3 var para = document.querySelector("p"); console.log(byTagName(para, "span").length); // → 2 </script>
,
. - .
, . top left . , position.
<img src="img/cat.png" id="cat" style="position: absolute"> <img src="img/hat.png" id="hat" style="position: absolute"> <script> var cat = document.querySelector("#cat"); var hat = document.querySelector("#hat"); // Your code here. </script> .
, , . , , , . style ():
<p><a href="."> </a></p> <p><a href="." style="color: green"> </a></p>
style (color), . : “color: red; border: none”.
. , display , .
<strong></strong>, <strong style="display: block"> </strong>, <strong style="display: none"> </strong>.
, – display: none . . , .
JavaScript style. , . – , - .
<p id="para" style="color: purple"> </p> <script> var para = document.getElementById("para"); console.log(para.style.color); para.style.color = "magenta"; </script>
, font-family. JavaScript ( style["font-family"]), , : style.fontFamily
HTML CSS (Cascading Style Sheets, ). – . :
<style> strong { font-style: italic; color: gray; } </style> <p> <strong> strong</strong> .</p>
«» , . , , , font-style .
, . font-weight: normal, , , . , style, .
CSS . .abc , “abc”. #xyz id “xyz” ( id ).
.subtle { color: gray; font-size: 80%; } #header { background: blue; color: white; } /* p, a b, id main */ pab#main { margin-bottom: 20px; }
, . , , . , pa , p .a, .
p > a {…} , .
pa {…} , , .
. , 2-3 . (, , ) – - DOM.
querySelectorAll, document, -, , , .
<p> <span class="animal"></span></p> <p> </p> <p> <span class="character"> <span class="animal"> </span></span></p> <p> .</p> <script> function count(selector) { return document.querySelectorAll(selector).length; } console.log(count("p")); // <p> // → 4 console.log(count(".animal")); // animal // → 2 console.log(count("p .animal")); // animal <p> // → 2 console.log(count("p > .animal")); // <p> // → 1 </script>
getElementsByTagName, querySelectorAll . , .
querySelector ( All) . , . , null, .
position . static, , . relative, , top left . absolute, «» – , . , left top , position static. , .
. , .
<p style="text-align: center"> <img src="img/cat.png" style="position: relative"> </p> <script> var cat = document.querySelector("img"); var angle = 0, lastTime = null; function animate(time) { if (lastTime != null) angle += (time - lastTime) * 0.001; lastTime = time; cat.style.top = (Math.sin(angle) * 20) + "px"; cat.style.left = (Math.cos(angle) * 200) + "px"; requestAnimationFrame(animate); } requestAnimationFrame(animate); </script>
position: relative. top left , .
requestAnimationFrame animate , . animate requestAnimationFrame, . ( ) , 60 , .
DOM , . JavaScript, . requestAnimationFrame – , , , .
, ( lastTime), , . , , , .
Math.cos Math.sin. , , .
Math.cos Math.sin , (0, 0) . , 0 , , 2π ( 6.28) . Math.cos x , , Math.sin y. ( ) , 2π 0, – , a+2π , a.
angle , animation. image. top Math.sin 20 – . left Math.cos 200, .
. px , , ( , ems ). . – 0, .
JavaScript DOM. , JavaScript . DOM , . parentNode childNodes, .
, , - . , , color display. JavaScript style.
6. HTML . HTML :
<table> <tr> <th>name</th> <th>height</th> <th>country</th> </tr> <tr> <td>Kilimanjaro</td> <td>5895</td> <td>Tanzania</td> </tr> </table>
. : , .
, 6, MOUNTAINS.
buildTable, , , DOM, . , , , . Object.keys, , .
, , style.textAlign "right".
<style> /* */ table { border-collapse: collapse; } td, th { border: 1px solid black; padding: 3px 8px; } th { text-align: left; } </style> <script> function buildTable(data) { // } document.body.appendChild(buildTable(MOUNTAINS)); </script>
getElementsByTagName . , ( ) , .
, tagName. , . toLowerCase toUpperCase.
<h1> <span>span</span> .</h1> <p> <span></span>, <span></span> spans.</p> <script> function byTagName(node, tagName) { // } console.log(byTagName(document.body, "h1").length); // → 1 console.log(byTagName(document.body, "span").length); // → 3 var para = document.querySelector("p"); console.log(byTagName(para, "span").length); // → 2 </script>
,
. - .
, . top left . , position.
<img src="img/cat.png" id="cat" style="position: absolute"> <img src="img/hat.png" id="hat" style="position: absolute"> <script> var cat = document.querySelector("#cat"); var hat = document.querySelector("#hat"); // Your code here. </script>.
, , . , , , . style ():
<p><a href="."> </a></p> <p><a href="." style="color: green"> </a></p>
style (color), . : “color: red; border: none”.
. , display , .
<strong></strong>, <strong style="display: block"> </strong>, <strong style="display: none"> </strong>.
, – display: none . . , .
JavaScript style. , . – , - .
<p id="para" style="color: purple"> </p> <script> var para = document.getElementById("para"); console.log(para.style.color); para.style.color = "magenta"; </script>
, font-family. JavaScript ( style["font-family"]), , : style.fontFamily
HTML CSS (Cascading Style Sheets, ). – . :
<style> strong { font-style: italic; color: gray; } </style> <p> <strong> strong</strong> .</p>
«» , . , , , font-style .
, . font-weight: normal, , , . , style, .
CSS . .abc , “abc”. #xyz id “xyz” ( id ).
.subtle { color: gray; font-size: 80%; } #header { background: blue; color: white; } /* p, a b, id main */ pab#main { margin-bottom: 20px; }
, . , , . , pa , p .a, .
p > a {…} , .
pa {…} , , .
. , 2-3 . (, , ) – - DOM.
querySelectorAll, document, -, , , .
<p> <span class="animal"></span></p> <p> </p> <p> <span class="character"> <span class="animal"> </span></span></p> <p> .</p> <script> function count(selector) { return document.querySelectorAll(selector).length; } console.log(count("p")); // <p> // → 4 console.log(count(".animal")); // animal // → 2 console.log(count("p .animal")); // animal <p> // → 2 console.log(count("p > .animal")); // <p> // → 1 </script>
getElementsByTagName, querySelectorAll . , .
querySelector ( All) . , . , null, .
position . static, , . relative, , top left . absolute, «» – , . , left top , position static. , .
. , .
<p style="text-align: center"> <img src="img/cat.png" style="position: relative"> </p> <script> var cat = document.querySelector("img"); var angle = 0, lastTime = null; function animate(time) { if (lastTime != null) angle += (time - lastTime) * 0.001; lastTime = time; cat.style.top = (Math.sin(angle) * 20) + "px"; cat.style.left = (Math.cos(angle) * 200) + "px"; requestAnimationFrame(animate); } requestAnimationFrame(animate); </script>
position: relative. top left , .
requestAnimationFrame animate , . animate requestAnimationFrame, . ( ) , 60 , .
DOM , . JavaScript, . requestAnimationFrame – , , , .
, ( lastTime), , . , , , .
Math.cos Math.sin. , , .
Math.cos Math.sin , (0, 0) . , 0 , , 2π ( 6.28) . Math.cos x , , Math.sin y. ( ) , 2π 0, – , a+2π , a.
angle , animation. image. top Math.sin 20 – . left Math.cos 200, .
. px , , ( , ems ). . – 0, .
JavaScript DOM. , JavaScript . DOM , . parentNode childNodes, .
, , - . , , color display. JavaScript style.
6. HTML . HTML :
<table> <tr> <th>name</th> <th>height</th> <th>country</th> </tr> <tr> <td>Kilimanjaro</td> <td>5895</td> <td>Tanzania</td> </tr> </table>
. : , .
, 6, MOUNTAINS.
buildTable, , , DOM, . , , , . Object.keys, , .
, , style.textAlign "right".
<style> /* */ table { border-collapse: collapse; } td, th { border: 1px solid black; padding: 3px 8px; } th { text-align: left; } </style> <script> function buildTable(data) { // } document.body.appendChild(buildTable(MOUNTAINS)); </script>
getElementsByTagName . , ( ) , .
, tagName. , . toLowerCase toUpperCase.
<h1> <span>span</span> .</h1> <p> <span></span>, <span></span> spans.</p> <script> function byTagName(node, tagName) { // } console.log(byTagName(document.body, "h1").length); // → 1 console.log(byTagName(document.body, "span").length); // → 3 var para = document.querySelector("p"); console.log(byTagName(para, "span").length); // → 2 </script>
,
. - .
, . top left . , position.
<img src="img/cat.png" id="cat" style="position: absolute"> <img src="img/hat.png" id="hat" style="position: absolute"> <script> var cat = document.querySelector("#cat"); var hat = document.querySelector("#hat"); // Your code here. </script> .
, , . , , , . style ():
<p><a href="."> </a></p> <p><a href="." style="color: green"> </a></p>
style (color), . : “color: red; border: none”.
. , display , .
<strong></strong>, <strong style="display: block"> </strong>, <strong style="display: none"> </strong>.
, – display: none . . , .
JavaScript style. , . – , - .
<p id="para" style="color: purple"> </p> <script> var para = document.getElementById("para"); console.log(para.style.color); para.style.color = "magenta"; </script>
, font-family. JavaScript ( style["font-family"]), , : style.fontFamily
HTML CSS (Cascading Style Sheets, ). – . :
<style> strong { font-style: italic; color: gray; } </style> <p> <strong> strong</strong> .</p>
«» , . , , , font-style .
, . font-weight: normal, , , . , style, .
CSS . .abc , “abc”. #xyz id “xyz” ( id ).
.subtle { color: gray; font-size: 80%; } #header { background: blue; color: white; } /* p, a b, id main */ pab#main { margin-bottom: 20px; }
, . , , . , pa , p .a, .
p > a {…} , .
pa {…} , , .
. , 2-3 . (, , ) – - DOM.
querySelectorAll, document, -, , , .
<p> <span class="animal"></span></p> <p> </p> <p> <span class="character"> <span class="animal"> </span></span></p> <p> .</p> <script> function count(selector) { return document.querySelectorAll(selector).length; } console.log(count("p")); // <p> // → 4 console.log(count(".animal")); // animal // → 2 console.log(count("p .animal")); // animal <p> // → 2 console.log(count("p > .animal")); // <p> // → 1 </script>
getElementsByTagName, querySelectorAll . , .
querySelector ( All) . , . , null, .
position . static, , . relative, , top left . absolute, «» – , . , left top , position static. , .
. , .
<p style="text-align: center"> <img src="img/cat.png" style="position: relative"> </p> <script> var cat = document.querySelector("img"); var angle = 0, lastTime = null; function animate(time) { if (lastTime != null) angle += (time - lastTime) * 0.001; lastTime = time; cat.style.top = (Math.sin(angle) * 20) + "px"; cat.style.left = (Math.cos(angle) * 200) + "px"; requestAnimationFrame(animate); } requestAnimationFrame(animate); </script>
position: relative. top left , .
requestAnimationFrame animate , . animate requestAnimationFrame, . ( ) , 60 , .
DOM , . JavaScript, . requestAnimationFrame – , , , .
, ( lastTime), , . , , , .
Math.cos Math.sin. , , .
Math.cos Math.sin , (0, 0) . , 0 , , 2π ( 6.28) . Math.cos x , , Math.sin y. ( ) , 2π 0, – , a+2π , a.
angle , animation. image. top Math.sin 20 – . left Math.cos 200, .
. px , , ( , ems ). . – 0, .
JavaScript DOM. , JavaScript . DOM , . parentNode childNodes, .
, , - . , , color display. JavaScript style.
6. HTML . HTML :
<table> <tr> <th>name</th> <th>height</th> <th>country</th> </tr> <tr> <td>Kilimanjaro</td> <td>5895</td> <td>Tanzania</td> </tr> </table>
. : , .
, 6, MOUNTAINS.
buildTable, , , DOM, . , , , . Object.keys, , .
, , style.textAlign "right".
<style> /* */ table { border-collapse: collapse; } td, th { border: 1px solid black; padding: 3px 8px; } th { text-align: left; } </style> <script> function buildTable(data) { // } document.body.appendChild(buildTable(MOUNTAINS)); </script>
getElementsByTagName . , ( ) , .
, tagName. , . toLowerCase toUpperCase.
<h1> <span>span</span> .</h1> <p> <span></span>, <span></span> spans.</p> <script> function byTagName(node, tagName) { // } console.log(byTagName(document.body, "h1").length); // → 1 console.log(byTagName(document.body, "span").length); // → 3 var para = document.querySelector("p"); console.log(byTagName(para, "span").length); // → 2 </script>
,
. - .
, . top left . , position.
<img src="img/cat.png" id="cat" style="position: absolute"> <img src="img/hat.png" id="hat" style="position: absolute"> <script> var cat = document.querySelector("#cat"); var hat = document.querySelector("#hat"); // Your code here. </script>.
, , . , , , . style ():
<p><a href="."> </a></p> <p><a href="." style="color: green"> </a></p>
style (color), . : “color: red; border: none”.
. , display , .
<strong></strong>, <strong style="display: block"> </strong>, <strong style="display: none"> </strong>.
, – display: none . . , .
JavaScript style. , . – , - .
<p id="para" style="color: purple"> </p> <script> var para = document.getElementById("para"); console.log(para.style.color); para.style.color = "magenta"; </script>
, font-family. JavaScript ( style["font-family"]), , : style.fontFamily
HTML CSS (Cascading Style Sheets, ). – . :
<style> strong { font-style: italic; color: gray; } </style> <p> <strong> strong</strong> .</p>
«» , . , , , font-style .
, . font-weight: normal, , , . , style, .
CSS . .abc , “abc”. #xyz id “xyz” ( id ).
.subtle { color: gray; font-size: 80%; } #header { background: blue; color: white; } /* p, a b, id main */ pab#main { margin-bottom: 20px; }
, . , , . , pa , p .a, .
p > a {…} , .
pa {…} , , .
. , 2-3 . (, , ) – - DOM.
querySelectorAll, document, -, , , .
<p> <span class="animal"></span></p> <p> </p> <p> <span class="character"> <span class="animal"> </span></span></p> <p> .</p> <script> function count(selector) { return document.querySelectorAll(selector).length; } console.log(count("p")); // <p> // → 4 console.log(count(".animal")); // animal // → 2 console.log(count("p .animal")); // animal <p> // → 2 console.log(count("p > .animal")); // <p> // → 1 </script>
getElementsByTagName, querySelectorAll . , .
querySelector ( All) . , . , null, .
position . static, , . relative, , top left . absolute, «» – , . , left top , position static. , .
. , .
<p style="text-align: center"> <img src="img/cat.png" style="position: relative"> </p> <script> var cat = document.querySelector("img"); var angle = 0, lastTime = null; function animate(time) { if (lastTime != null) angle += (time - lastTime) * 0.001; lastTime = time; cat.style.top = (Math.sin(angle) * 20) + "px"; cat.style.left = (Math.cos(angle) * 200) + "px"; requestAnimationFrame(animate); } requestAnimationFrame(animate); </script>
position: relative. top left , .
requestAnimationFrame animate , . animate requestAnimationFrame, . ( ) , 60 , .
DOM , . JavaScript, . requestAnimationFrame – , , , .
, ( lastTime), , . , , , .
Math.cos Math.sin. , , .
Math.cos Math.sin , (0, 0) . , 0 , , 2π ( 6.28) . Math.cos x , , Math.sin y. ( ) , 2π 0, – , a+2π , a.
angle , animation. image. top Math.sin 20 – . left Math.cos 200, .
. px , , ( , ems ). . – 0, .
JavaScript DOM. , JavaScript . DOM , . parentNode childNodes, .
, , - . , , color display. JavaScript style.
6. HTML . HTML :
<table> <tr> <th>name</th> <th>height</th> <th>country</th> </tr> <tr> <td>Kilimanjaro</td> <td>5895</td> <td>Tanzania</td> </tr> </table>
. : , .
, 6, MOUNTAINS.
buildTable, , , DOM, . , , , . Object.keys, , .
, , style.textAlign "right".
<style> /* */ table { border-collapse: collapse; } td, th { border: 1px solid black; padding: 3px 8px; } th { text-align: left; } </style> <script> function buildTable(data) { // } document.body.appendChild(buildTable(MOUNTAINS)); </script>
getElementsByTagName . , ( ) , .
, tagName. , . toLowerCase toUpperCase.
<h1> <span>span</span> .</h1> <p> <span></span>, <span></span> spans.</p> <script> function byTagName(node, tagName) { // } console.log(byTagName(document.body, "h1").length); // → 1 console.log(byTagName(document.body, "span").length); // → 3 var para = document.querySelector("p"); console.log(byTagName(para, "span").length); // → 2 </script>
,
. - .
, . top left . , position.
<img src="img/cat.png" id="cat" style="position: absolute"> <img src="img/hat.png" id="hat" style="position: absolute"> <script> var cat = document.querySelector("#cat"); var hat = document.querySelector("#hat"); // Your code here. </script>.
, , . , , , . style ():
<p><a href="."> </a></p> <p><a href="." style="color: green"> </a></p>
style (color), . : “color: red; border: none”.
. , display , .
<strong></strong>, <strong style="display: block"> </strong>, <strong style="display: none"> </strong>.
, – display: none . . , .
JavaScript style. , . – , - .
<p id="para" style="color: purple"> </p> <script> var para = document.getElementById("para"); console.log(para.style.color); para.style.color = "magenta"; </script>
, font-family. JavaScript ( style["font-family"]), , : style.fontFamily
HTML CSS (Cascading Style Sheets, ). – . :
<style> strong { font-style: italic; color: gray; } </style> <p> <strong> strong</strong> .</p>
«» , . , , , font-style .
, . font-weight: normal, , , . , style, .
CSS . .abc , “abc”. #xyz id “xyz” ( id ).
.subtle { color: gray; font-size: 80%; } #header { background: blue; color: white; } /* p, a b, id main */ pab#main { margin-bottom: 20px; }
, . , , . , pa , p .a, .
p > a {…} , .
pa {…} , , .
. , 2-3 . (, , ) – - DOM.
querySelectorAll, document, -, , , .
<p> <span class="animal"></span></p> <p> </p> <p> <span class="character"> <span class="animal"> </span></span></p> <p> .</p> <script> function count(selector) { return document.querySelectorAll(selector).length; } console.log(count("p")); // <p> // → 4 console.log(count(".animal")); // animal // → 2 console.log(count("p .animal")); // animal <p> // → 2 console.log(count("p > .animal")); // <p> // → 1 </script>
getElementsByTagName, querySelectorAll . , .
querySelector ( All) . , . , null, .
position . static, , . relative, , top left . absolute, «» – , . , left top , position static. , .
. , .
<p style="text-align: center"> <img src="img/cat.png" style="position: relative"> </p> <script> var cat = document.querySelector("img"); var angle = 0, lastTime = null; function animate(time) { if (lastTime != null) angle += (time - lastTime) * 0.001; lastTime = time; cat.style.top = (Math.sin(angle) * 20) + "px"; cat.style.left = (Math.cos(angle) * 200) + "px"; requestAnimationFrame(animate); } requestAnimationFrame(animate); </script>
position: relative. top left , .
requestAnimationFrame animate , . animate requestAnimationFrame, . ( ) , 60 , .
DOM , . JavaScript, . requestAnimationFrame – , , , .
, ( lastTime), , . , , , .
Math.cos Math.sin. , , .
Math.cos Math.sin , (0, 0) . , 0 , , 2π ( 6.28) . Math.cos x , , Math.sin y. ( ) , 2π 0, – , a+2π , a.
angle , animation. image. top Math.sin 20 – . left Math.cos 200, .
. px , , ( , ems ). . – 0, .
JavaScript DOM. , JavaScript . DOM , . parentNode childNodes, .
, , - . , , color display. JavaScript style.
6. HTML . HTML :
<table> <tr> <th>name</th> <th>height</th> <th>country</th> </tr> <tr> <td>Kilimanjaro</td> <td>5895</td> <td>Tanzania</td> </tr> </table>
. : , .
, 6, MOUNTAINS.
buildTable, , , DOM, . , , , . Object.keys, , .
, , style.textAlign "right".
<style> /* */ table { border-collapse: collapse; } td, th { border: 1px solid black; padding: 3px 8px; } th { text-align: left; } </style> <script> function buildTable(data) { // } document.body.appendChild(buildTable(MOUNTAINS)); </script>
getElementsByTagName . , ( ) , .
, tagName. , . toLowerCase toUpperCase.
<h1> <span>span</span> .</h1> <p> <span></span>, <span></span> spans.</p> <script> function byTagName(node, tagName) { // } console.log(byTagName(document.body, "h1").length); // → 1 console.log(byTagName(document.body, "span").length); // → 3 var para = document.querySelector("p"); console.log(byTagName(para, "span").length); // → 2 </script>
,
. - .
, . top left . , position.
<img src="img/cat.png" id="cat" style="position: absolute"> <img src="img/hat.png" id="hat" style="position: absolute"> <script> var cat = document.querySelector("#cat"); var hat = document.querySelector("#hat"); // Your code here. </script>
.
, , . , , , . style ():
<p><a href="."> </a></p> <p><a href="." style="color: green"> </a></p>
style (color), . : “color: red; border: none”.
. , display , .
<strong></strong>, <strong style="display: block"> </strong>, <strong style="display: none"> </strong>.
, – display: none . . , .
JavaScript style. , . – , - .
<p id="para" style="color: purple"> </p> <script> var para = document.getElementById("para"); console.log(para.style.color); para.style.color = "magenta"; </script>
, font-family. JavaScript ( style["font-family"]), , : style.fontFamily
HTML CSS (Cascading Style Sheets, ). – . :
<style> strong { font-style: italic; color: gray; } </style> <p> <strong> strong</strong> .</p>
«» , . , , , font-style .
, . font-weight: normal, , , . , style, .
CSS . .abc , “abc”. #xyz id “xyz” ( id ).
.subtle { color: gray; font-size: 80%; } #header { background: blue; color: white; } /* p, a b, id main */ pab#main { margin-bottom: 20px; }
, . , , . , pa , p .a, .
p > a {…} , .
pa {…} , , .
. , 2-3 . (, , ) – - DOM.
querySelectorAll, document, -, , , .
<p> <span class="animal"></span></p> <p> </p> <p> <span class="character"> <span class="animal"> </span></span></p> <p> .</p> <script> function count(selector) { return document.querySelectorAll(selector).length; } console.log(count("p")); // <p> // → 4 console.log(count(".animal")); // animal // → 2 console.log(count("p .animal")); // animal <p> // → 2 console.log(count("p > .animal")); // <p> // → 1 </script>
getElementsByTagName, querySelectorAll . , .
querySelector ( All) . , . , null, .
position . static, , . relative, , top left . absolute, «» – , . , left top , position static. , .
. , .
<p style="text-align: center"> <img src="img/cat.png" style="position: relative"> </p> <script> var cat = document.querySelector("img"); var angle = 0, lastTime = null; function animate(time) { if (lastTime != null) angle += (time - lastTime) * 0.001; lastTime = time; cat.style.top = (Math.sin(angle) * 20) + "px"; cat.style.left = (Math.cos(angle) * 200) + "px"; requestAnimationFrame(animate); } requestAnimationFrame(animate); </script>
position: relative. top left , .
requestAnimationFrame animate , . animate requestAnimationFrame, . ( ) , 60 , .
DOM , . JavaScript, . requestAnimationFrame – , , , .
, ( lastTime), , . , , , .
Math.cos Math.sin. , , .
Math.cos Math.sin , (0, 0) . , 0 , , 2π ( 6.28) . Math.cos x , , Math.sin y. ( ) , 2π 0, – , a+2π , a.
angle , animation. image. top Math.sin 20 – . left Math.cos 200, .
. px , , ( , ems ). . – 0, .
JavaScript DOM. , JavaScript . DOM , . parentNode childNodes, .
, , - . , , color display. JavaScript style.
6. HTML . HTML :
<table> <tr> <th>name</th> <th>height</th> <th>country</th> </tr> <tr> <td>Kilimanjaro</td> <td>5895</td> <td>Tanzania</td> </tr> </table>
. : , .
, 6, MOUNTAINS.
buildTable, , , DOM, . , , , . Object.keys, , .
, , style.textAlign "right".
<style> /* */ table { border-collapse: collapse; } td, th { border: 1px solid black; padding: 3px 8px; } th { text-align: left; } </style> <script> function buildTable(data) { // } document.body.appendChild(buildTable(MOUNTAINS)); </script>
getElementsByTagName . , ( ) , .
, tagName. , . toLowerCase toUpperCase.
<h1> <span>span</span> .</h1> <p> <span></span>, <span></span> spans.</p> <script> function byTagName(node, tagName) { // } console.log(byTagName(document.body, "h1").length); // → 1 console.log(byTagName(document.body, "span").length); // → 3 var para = document.querySelector("p"); console.log(byTagName(para, "span").length); // → 2 </script>
,
. - .
, . top left . , position.
<img src="img/cat.png" id="cat" style="position: absolute"> <img src="img/hat.png" id="hat" style="position: absolute"> <script> var cat = document.querySelector("#cat"); var hat = document.querySelector("#hat"); // Your code here. </script>.
, , . , , , . style ():
<p><a href="."> </a></p> <p><a href="." style="color: green"> </a></p>
style (color), . : “color: red; border: none”.
. , display , .
<strong></strong>, <strong style="display: block"> </strong>, <strong style="display: none"> </strong>.
, – display: none . . , .
JavaScript style. , . – , - .
<p id="para" style="color: purple"> </p> <script> var para = document.getElementById("para"); console.log(para.style.color); para.style.color = "magenta"; </script>
, font-family. JavaScript ( style["font-family"]), , : style.fontFamily
HTML CSS (Cascading Style Sheets, ). – . :
<style> strong { font-style: italic; color: gray; } </style> <p> <strong> strong</strong> .</p>
«» , . , , , font-style .
, . font-weight: normal, , , . , style, .
CSS . .abc , “abc”. #xyz id “xyz” ( id ).
.subtle { color: gray; font-size: 80%; } #header { background: blue; color: white; } /* p, a b, id main */ pab#main { margin-bottom: 20px; }
, . , , . , pa , p .a, .
p > a {…} , .
pa {…} , , .
. , 2-3 . (, , ) – - DOM.
querySelectorAll, document, -, , , .
<p> <span class="animal"></span></p> <p> </p> <p> <span class="character"> <span class="animal"> </span></span></p> <p> .</p> <script> function count(selector) { return document.querySelectorAll(selector).length; } console.log(count("p")); // <p> // → 4 console.log(count(".animal")); // animal // → 2 console.log(count("p .animal")); // animal <p> // → 2 console.log(count("p > .animal")); // <p> // → 1 </script>
getElementsByTagName, querySelectorAll . , .
querySelector ( All) . , . , null, .
position . static, , . relative, , top left . absolute, «» – , . , left top , position static. , .
. , .
<p style="text-align: center"> <img src="img/cat.png" style="position: relative"> </p> <script> var cat = document.querySelector("img"); var angle = 0, lastTime = null; function animate(time) { if (lastTime != null) angle += (time - lastTime) * 0.001; lastTime = time; cat.style.top = (Math.sin(angle) * 20) + "px"; cat.style.left = (Math.cos(angle) * 200) + "px"; requestAnimationFrame(animate); } requestAnimationFrame(animate); </script>
position: relative. top left , .
requestAnimationFrame animate , . animate requestAnimationFrame, . ( ) , 60 , .
DOM , . JavaScript, . requestAnimationFrame – , , , .
, ( lastTime), , . , , , .
Math.cos Math.sin. , , .
Math.cos Math.sin , (0, 0) . , 0 , , 2π ( 6.28) . Math.cos x , , Math.sin y. ( ) , 2π 0, – , a+2π , a.
angle , animation. image. top Math.sin 20 – . left Math.cos 200, .
. px , , ( , ems ). . – 0, .
JavaScript DOM. , JavaScript . DOM , . parentNode childNodes, .
, , - . , , color display. JavaScript style.
6. HTML . HTML :
<table> <tr> <th>name</th> <th>height</th> <th>country</th> </tr> <tr> <td>Kilimanjaro</td> <td>5895</td> <td>Tanzania</td> </tr> </table>
. : , .
, 6, MOUNTAINS.
buildTable, , , DOM, . , , , . Object.keys, , .
, , style.textAlign "right".
<style> /* */ table { border-collapse: collapse; } td, th { border: 1px solid black; padding: 3px 8px; } th { text-align: left; } </style> <script> function buildTable(data) { // } document.body.appendChild(buildTable(MOUNTAINS)); </script>
getElementsByTagName . , ( ) , .
, tagName. , . toLowerCase toUpperCase.
<h1> <span>span</span> .</h1> <p> <span></span>, <span></span> spans.</p> <script> function byTagName(node, tagName) { // } console.log(byTagName(document.body, "h1").length); // → 1 console.log(byTagName(document.body, "span").length); // → 3 var para = document.querySelector("p"); console.log(byTagName(para, "span").length); // → 2 </script>
,
. - .
, . top left . , position.
<img src="img/cat.png" id="cat" style="position: absolute"> <img src="img/hat.png" id="hat" style="position: absolute"> <script> var cat = document.querySelector("#cat"); var hat = document.querySelector("#hat"); // Your code here. </script> .
, , . , , , . style ():
<p><a href="."> </a></p> <p><a href="." style="color: green"> </a></p>
style (color), . : “color: red; border: none”.
. , display , .
<strong></strong>, <strong style="display: block"> </strong>, <strong style="display: none"> </strong>.
, – display: none . . , .
JavaScript style. , . – , - .
<p id="para" style="color: purple"> </p> <script> var para = document.getElementById("para"); console.log(para.style.color); para.style.color = "magenta"; </script>
, font-family. JavaScript ( style["font-family"]), , : style.fontFamily
HTML CSS (Cascading Style Sheets, ). – . :
<style> strong { font-style: italic; color: gray; } </style> <p> <strong> strong</strong> .</p>
«» , . , , , font-style .
, . font-weight: normal, , , . , style, .
CSS . .abc , “abc”. #xyz id “xyz” ( id ).
.subtle { color: gray; font-size: 80%; } #header { background: blue; color: white; } /* p, a b, id main */ pab#main { margin-bottom: 20px; }
, . , , . , pa , p .a, .
p > a {…} , .
pa {…} , , .
. , 2-3 . (, , ) – - DOM.
querySelectorAll, document, -, , , .
<p> <span class="animal"></span></p> <p> </p> <p> <span class="character"> <span class="animal"> </span></span></p> <p> .</p> <script> function count(selector) { return document.querySelectorAll(selector).length; } console.log(count("p")); // <p> // → 4 console.log(count(".animal")); // animal // → 2 console.log(count("p .animal")); // animal <p> // → 2 console.log(count("p > .animal")); // <p> // → 1 </script>
getElementsByTagName, querySelectorAll . , .
querySelector ( All) . , . , null, .
position . static, , . relative, , top left . absolute, «» – , . , left top , position static. , .
. , .
<p style="text-align: center"> <img src="img/cat.png" style="position: relative"> </p> <script> var cat = document.querySelector("img"); var angle = 0, lastTime = null; function animate(time) { if (lastTime != null) angle += (time - lastTime) * 0.001; lastTime = time; cat.style.top = (Math.sin(angle) * 20) + "px"; cat.style.left = (Math.cos(angle) * 200) + "px"; requestAnimationFrame(animate); } requestAnimationFrame(animate); </script>
position: relative. top left , .
requestAnimationFrame animate , . animate requestAnimationFrame, . ( ) , 60 , .
DOM , . JavaScript, . requestAnimationFrame – , , , .
, ( lastTime), , . , , , .
Math.cos Math.sin. , , .
Math.cos Math.sin , (0, 0) . , 0 , , 2π ( 6.28) . Math.cos x , , Math.sin y. ( ) , 2π 0, – , a+2π , a.
angle , animation. image. top Math.sin 20 – . left Math.cos 200, .
. px , , ( , ems ). . – 0, .
JavaScript DOM. , JavaScript . DOM , . parentNode childNodes, .
, , - . , , color display. JavaScript style.
6. HTML . HTML :
<table> <tr> <th>name</th> <th>height</th> <th>country</th> </tr> <tr> <td>Kilimanjaro</td> <td>5895</td> <td>Tanzania</td> </tr> </table>
. : , .
, 6, MOUNTAINS.
buildTable, , , DOM, . , , , . Object.keys, , .
, , style.textAlign "right".
<style> /* */ table { border-collapse: collapse; } td, th { border: 1px solid black; padding: 3px 8px; } th { text-align: left; } </style> <script> function buildTable(data) { // } document.body.appendChild(buildTable(MOUNTAINS)); </script>
getElementsByTagName . , ( ) , .
, tagName. , . toLowerCase toUpperCase.
<h1> <span>span</span> .</h1> <p> <span></span>, <span></span> spans.</p> <script> function byTagName(node, tagName) { // } console.log(byTagName(document.body, "h1").length); // → 1 console.log(byTagName(document.body, "span").length); // → 3 var para = document.querySelector("p"); console.log(byTagName(para, "span").length); // → 2 </script>
,
. - .
, . top left . , position.
<img src="img/cat.png" id="cat" style="position: absolute"> <img src="img/hat.png" id="hat" style="position: absolute"> <script> var cat = document.querySelector("#cat"); var hat = document.querySelector("#hat"); // Your code here. </script>.
, , . , , , . style ():
<p><a href="."> </a></p> <p><a href="." style="color: green"> </a></p>
style (color), . : “color: red; border: none”.
. , display , .
<strong></strong>, <strong style="display: block"> </strong>, <strong style="display: none"> </strong>.
, – display: none . . , .
JavaScript style. , . – , - .
<p id="para" style="color: purple"> </p> <script> var para = document.getElementById("para"); console.log(para.style.color); para.style.color = "magenta"; </script>
, font-family. JavaScript ( style["font-family"]), , : style.fontFamily
HTML CSS (Cascading Style Sheets, ). – . :
<style> strong { font-style: italic; color: gray; } </style> <p> <strong> strong</strong> .</p>
«» , . , , , font-style .
, . font-weight: normal, , , . , style, .
CSS . .abc , “abc”. #xyz id “xyz” ( id ).
.subtle { color: gray; font-size: 80%; } #header { background: blue; color: white; } /* p, a b, id main */ pab#main { margin-bottom: 20px; }
, . , , . , pa , p .a, .
p > a {…} , .
pa {…} , , .
. , 2-3 . (, , ) – - DOM.
querySelectorAll, document, -, , , .
<p> <span class="animal"></span></p> <p> </p> <p> <span class="character"> <span class="animal"> </span></span></p> <p> .</p> <script> function count(selector) { return document.querySelectorAll(selector).length; } console.log(count("p")); // <p> // → 4 console.log(count(".animal")); // animal // → 2 console.log(count("p .animal")); // animal <p> // → 2 console.log(count("p > .animal")); // <p> // → 1 </script>
getElementsByTagName, querySelectorAll . , .
querySelector ( All) . , . , null, .
position . static, , . relative, , top left . absolute, «» – , . , left top , position static. , .
. , .
<p style="text-align: center"> <img src="img/cat.png" style="position: relative"> </p> <script> var cat = document.querySelector("img"); var angle = 0, lastTime = null; function animate(time) { if (lastTime != null) angle += (time - lastTime) * 0.001; lastTime = time; cat.style.top = (Math.sin(angle) * 20) + "px"; cat.style.left = (Math.cos(angle) * 200) + "px"; requestAnimationFrame(animate); } requestAnimationFrame(animate); </script>
position: relative. top left , .
requestAnimationFrame animate , . animate requestAnimationFrame, . ( ) , 60 , .
DOM , . JavaScript, . requestAnimationFrame – , , , .
, ( lastTime), , . , , , .
Math.cos Math.sin. , , .
Math.cos Math.sin , (0, 0) . , 0 , , 2π ( 6.28) . Math.cos x , , Math.sin y. ( ) , 2π 0, – , a+2π , a.
angle , animation. image. top Math.sin 20 – . left Math.cos 200, .
. px , , ( , ems ). . – 0, .
JavaScript DOM. , JavaScript . DOM , . parentNode childNodes, .
, , - . , , color display. JavaScript style.
6. HTML . HTML :
<table> <tr> <th>name</th> <th>height</th> <th>country</th> </tr> <tr> <td>Kilimanjaro</td> <td>5895</td> <td>Tanzania</td> </tr> </table>
. : , .
, 6, MOUNTAINS.
buildTable, , , DOM, . , , , . Object.keys, , .
, , style.textAlign "right".
<style> /* */ table { border-collapse: collapse; } td, th { border: 1px solid black; padding: 3px 8px; } th { text-align: left; } </style> <script> function buildTable(data) { // } document.body.appendChild(buildTable(MOUNTAINS)); </script>
getElementsByTagName . , ( ) , .
, tagName. , . toLowerCase toUpperCase.
<h1> <span>span</span> .</h1> <p> <span></span>, <span></span> spans.</p> <script> function byTagName(node, tagName) { // } console.log(byTagName(document.body, "h1").length); // → 1 console.log(byTagName(document.body, "span").length); // → 3 var para = document.querySelector("p"); console.log(byTagName(para, "span").length); // → 2 </script>
,
. - .
, . top left . , position.
<img src="img/cat.png" id="cat" style="position: absolute"> <img src="img/hat.png" id="hat" style="position: absolute"> <script> var cat = document.querySelector("#cat"); var hat = document.querySelector("#hat"); // Your code here. </script>.
, , . , , , . style ():
<p><a href="."> </a></p> <p><a href="." style="color: green"> </a></p>
style (color), . : “color: red; border: none”.
. , display , .
<strong></strong>, <strong style="display: block"> </strong>, <strong style="display: none"> </strong>.
, – display: none . . , .
JavaScript style. , . – , - .
<p id="para" style="color: purple"> </p> <script> var para = document.getElementById("para"); console.log(para.style.color); para.style.color = "magenta"; </script>
, font-family. JavaScript ( style["font-family"]), , : style.fontFamily
HTML CSS (Cascading Style Sheets, ). – . :
<style> strong { font-style: italic; color: gray; } </style> <p> <strong> strong</strong> .</p>
«» , . , , , font-style .
, . font-weight: normal, , , . , style, .
CSS . .abc , “abc”. #xyz id “xyz” ( id ).
.subtle { color: gray; font-size: 80%; } #header { background: blue; color: white; } /* p, a b, id main */ pab#main { margin-bottom: 20px; }
, . , , . , pa , p .a, .
p > a {…} , .
pa {…} , , .
. , 2-3 . (, , ) – - DOM.
querySelectorAll, document, -, , , .
<p> <span class="animal"></span></p> <p> </p> <p> <span class="character"> <span class="animal"> </span></span></p> <p> .</p> <script> function count(selector) { return document.querySelectorAll(selector).length; } console.log(count("p")); // <p> // → 4 console.log(count(".animal")); // animal // → 2 console.log(count("p .animal")); // animal <p> // → 2 console.log(count("p > .animal")); // <p> // → 1 </script>
getElementsByTagName, querySelectorAll . , .
querySelector ( All) . , . , null, .
position . static, , . relative, , top left . absolute, «» – , . , left top , position static. , .
. , .
<p style="text-align: center"> <img src="img/cat.png" style="position: relative"> </p> <script> var cat = document.querySelector("img"); var angle = 0, lastTime = null; function animate(time) { if (lastTime != null) angle += (time - lastTime) * 0.001; lastTime = time; cat.style.top = (Math.sin(angle) * 20) + "px"; cat.style.left = (Math.cos(angle) * 200) + "px"; requestAnimationFrame(animate); } requestAnimationFrame(animate); </script>
position: relative. top left , .
requestAnimationFrame animate , . animate requestAnimationFrame, . ( ) , 60 , .
DOM , . JavaScript, . requestAnimationFrame – , , , .
, ( lastTime), , . , , , .
Math.cos Math.sin. , , .
Math.cos Math.sin , (0, 0) . , 0 , , 2π ( 6.28) . Math.cos x , , Math.sin y. ( ) , 2π 0, – , a+2π , a.
angle , animation. image. top Math.sin 20 – . left Math.cos 200, .
. px , , ( , ems ). . – 0, .
JavaScript DOM. , JavaScript . DOM , . parentNode childNodes, .
, , - . , , color display. JavaScript style.
6. HTML . HTML :
<table> <tr> <th>name</th> <th>height</th> <th>country</th> </tr> <tr> <td>Kilimanjaro</td> <td>5895</td> <td>Tanzania</td> </tr> </table>
. : , .
, 6, MOUNTAINS.
buildTable, , , DOM, . , , , . Object.keys, , .
, , style.textAlign "right".
<style> /* */ table { border-collapse: collapse; } td, th { border: 1px solid black; padding: 3px 8px; } th { text-align: left; } </style> <script> function buildTable(data) { // } document.body.appendChild(buildTable(MOUNTAINS)); </script>
getElementsByTagName . , ( ) , .
, tagName. , . toLowerCase toUpperCase.
<h1> <span>span</span> .</h1> <p> <span></span>, <span></span> spans.</p> <script> function byTagName(node, tagName) { // } console.log(byTagName(document.body, "h1").length); // → 1 console.log(byTagName(document.body, "span").length); // → 3 var para = document.querySelector("p"); console.log(byTagName(para, "span").length); // → 2 </script>
,
. - .
, . top left . , position.
<img src="img/cat.png" id="cat" style="position: absolute"> <img src="img/hat.png" id="hat" style="position: absolute"> <script> var cat = document.querySelector("#cat"); var hat = document.querySelector("#hat"); // Your code here. </script>
.
, , . , , , . style ():
<p><a href="."> </a></p> <p><a href="." style="color: green"> </a></p>
style (color), . : “color: red; border: none”.
. , display , .
<strong></strong>, <strong style="display: block"> </strong>, <strong style="display: none"> </strong>.
, – display: none . . , .
JavaScript style. , . – , - .
<p id="para" style="color: purple"> </p> <script> var para = document.getElementById("para"); console.log(para.style.color); para.style.color = "magenta"; </script>
, font-family. JavaScript ( style["font-family"]), , : style.fontFamily
HTML CSS (Cascading Style Sheets, ). – . :
<style> strong { font-style: italic; color: gray; } </style> <p> <strong> strong</strong> .</p>
«» , . , , , font-style .
, . font-weight: normal, , , . , style, .
CSS . .abc , “abc”. #xyz id “xyz” ( id ).
.subtle { color: gray; font-size: 80%; } #header { background: blue; color: white; } /* p, a b, id main */ pab#main { margin-bottom: 20px; }
, . , , . , pa , p .a, .
p > a {…} , .
pa {…} , , .
. , 2-3 . (, , ) – - DOM.
querySelectorAll, document, -, , , .
<p> <span class="animal"></span></p> <p> </p> <p> <span class="character"> <span class="animal"> </span></span></p> <p> .</p> <script> function count(selector) { return document.querySelectorAll(selector).length; } console.log(count("p")); // <p> // → 4 console.log(count(".animal")); // animal // → 2 console.log(count("p .animal")); // animal <p> // → 2 console.log(count("p > .animal")); // <p> // → 1 </script>
getElementsByTagName, querySelectorAll . , .
querySelector ( All) . , . , null, .
position . static, , . relative, , top left . absolute, «» – , . , left top , position static. , .
. , .
<p style="text-align: center"> <img src="img/cat.png" style="position: relative"> </p> <script> var cat = document.querySelector("img"); var angle = 0, lastTime = null; function animate(time) { if (lastTime != null) angle += (time - lastTime) * 0.001; lastTime = time; cat.style.top = (Math.sin(angle) * 20) + "px"; cat.style.left = (Math.cos(angle) * 200) + "px"; requestAnimationFrame(animate); } requestAnimationFrame(animate); </script>
position: relative. top left , .
requestAnimationFrame animate , . animate requestAnimationFrame, . ( ) , 60 , .
DOM , . JavaScript, . requestAnimationFrame – , , , .
, ( lastTime), , . , , , .
Math.cos Math.sin. , , .
Math.cos Math.sin , (0, 0) . , 0 , , 2π ( 6.28) . Math.cos x , , Math.sin y. ( ) , 2π 0, – , a+2π , a.
angle , animation. image. top Math.sin 20 – . left Math.cos 200, .
. px , , ( , ems ). . – 0, .
JavaScript DOM. , JavaScript . DOM , . parentNode childNodes, .
, , - . , , color display. JavaScript style.
6. HTML . HTML :
<table> <tr> <th>name</th> <th>height</th> <th>country</th> </tr> <tr> <td>Kilimanjaro</td> <td>5895</td> <td>Tanzania</td> </tr> </table>
. : , .
, 6, MOUNTAINS.
buildTable, , , DOM, . , , , . Object.keys, , .
, , style.textAlign "right".
<style> /* */ table { border-collapse: collapse; } td, th { border: 1px solid black; padding: 3px 8px; } th { text-align: left; } </style> <script> function buildTable(data) { // } document.body.appendChild(buildTable(MOUNTAINS)); </script>
getElementsByTagName . , ( ) , .
, tagName. , . toLowerCase toUpperCase.
<h1> <span>span</span> .</h1> <p> <span></span>, <span></span> spans.</p> <script> function byTagName(node, tagName) { // } console.log(byTagName(document.body, "h1").length); // → 1 console.log(byTagName(document.body, "span").length); // → 3 var para = document.querySelector("p"); console.log(byTagName(para, "span").length); // → 2 </script>
,
. - .
, . top left . , position.
<img src="img/cat.png" id="cat" style="position: absolute"> <img src="img/hat.png" id="hat" style="position: absolute"> <script> var cat = document.querySelector("#cat"); var hat = document.querySelector("#hat"); // Your code here. </script>.
, , . , , , . style ():
<p><a href="."> </a></p> <p><a href="." style="color: green"> </a></p>
style (color), . : “color: red; border: none”.
. , display , .
<strong></strong>, <strong style="display: block"> </strong>, <strong style="display: none"> </strong>.
, – display: none . . , .
JavaScript style. , . – , - .
<p id="para" style="color: purple"> </p> <script> var para = document.getElementById("para"); console.log(para.style.color); para.style.color = "magenta"; </script>
, font-family. JavaScript ( style["font-family"]), , : style.fontFamily
HTML CSS (Cascading Style Sheets, ). – . :
<style> strong { font-style: italic; color: gray; } </style> <p> <strong> strong</strong> .</p>
«» , . , , , font-style .
, . font-weight: normal, , , . , style, .
CSS . .abc , “abc”. #xyz id “xyz” ( id ).
.subtle { color: gray; font-size: 80%; } #header { background: blue; color: white; } /* p, a b, id main */ pab#main { margin-bottom: 20px; }
, . , , . , pa , p .a, .
p > a {…} , .
pa {…} , , .
. , 2-3 . (, , ) – - DOM.
querySelectorAll, document, -, , , .
<p> <span class="animal"></span></p> <p> </p> <p> <span class="character"> <span class="animal"> </span></span></p> <p> .</p> <script> function count(selector) { return document.querySelectorAll(selector).length; } console.log(count("p")); // <p> // → 4 console.log(count(".animal")); // animal // → 2 console.log(count("p .animal")); // animal <p> // → 2 console.log(count("p > .animal")); // <p> // → 1 </script>
getElementsByTagName, querySelectorAll . , .
querySelector ( All) . , . , null, .
position . static, , . relative, , top left . absolute, «» – , . , left top , position static. , .
. , .
<p style="text-align: center"> <img src="img/cat.png" style="position: relative"> </p> <script> var cat = document.querySelector("img"); var angle = 0, lastTime = null; function animate(time) { if (lastTime != null) angle += (time - lastTime) * 0.001; lastTime = time; cat.style.top = (Math.sin(angle) * 20) + "px"; cat.style.left = (Math.cos(angle) * 200) + "px"; requestAnimationFrame(animate); } requestAnimationFrame(animate); </script>
position: relative. top left , .
requestAnimationFrame animate , . animate requestAnimationFrame, . ( ) , 60 , .
DOM , . JavaScript, . requestAnimationFrame – , , , .
, ( lastTime), , . , , , .
Math.cos Math.sin. , , .
Math.cos Math.sin , (0, 0) . , 0 , , 2π ( 6.28) . Math.cos x , , Math.sin y. ( ) , 2π 0, – , a+2π , a.
angle , animation. image. top Math.sin 20 – . left Math.cos 200, .
. px , , ( , ems ). . – 0, .
JavaScript DOM. , JavaScript . DOM , . parentNode childNodes, .
, , - . , , color display. JavaScript style.
6. HTML . HTML :
<table> <tr> <th>name</th> <th>height</th> <th>country</th> </tr> <tr> <td>Kilimanjaro</td> <td>5895</td> <td>Tanzania</td> </tr> </table>
. : , .
, 6, MOUNTAINS.
buildTable, , , DOM, . , , , . Object.keys, , .
, , style.textAlign "right".
<style> /* */ table { border-collapse: collapse; } td, th { border: 1px solid black; padding: 3px 8px; } th { text-align: left; } </style> <script> function buildTable(data) { // } document.body.appendChild(buildTable(MOUNTAINS)); </script>
getElementsByTagName . , ( ) , .
, tagName. , . toLowerCase toUpperCase.
<h1> <span>span</span> .</h1> <p> <span></span>, <span></span> spans.</p> <script> function byTagName(node, tagName) { // } console.log(byTagName(document.body, "h1").length); // → 1 console.log(byTagName(document.body, "span").length); // → 3 var para = document.querySelector("p"); console.log(byTagName(para, "span").length); // → 2 </script>
,
. - .
, . top left . , position.
<img src="img/cat.png" id="cat" style="position: absolute"> <img src="img/hat.png" id="hat" style="position: absolute"> <script> var cat = document.querySelector("#cat"); var hat = document.querySelector("#hat"); // Your code here. </script> .
, , . , , , . style ():
<p><a href="."> </a></p> <p><a href="." style="color: green"> </a></p>
style (color), . : “color: red; border: none”.
. , display , .
<strong></strong>, <strong style="display: block"> </strong>, <strong style="display: none"> </strong>.
, – display: none . . , .
JavaScript style. , . – , - .
<p id="para" style="color: purple"> </p> <script> var para = document.getElementById("para"); console.log(para.style.color); para.style.color = "magenta"; </script>
, font-family. JavaScript ( style["font-family"]), , : style.fontFamily
HTML CSS (Cascading Style Sheets, ). – . :
<style> strong { font-style: italic; color: gray; } </style> <p> <strong> strong</strong> .</p>
«» , . , , , font-style .
, . font-weight: normal, , , . , style, .
CSS . .abc , “abc”. #xyz id “xyz” ( id ).
.subtle { color: gray; font-size: 80%; } #header { background: blue; color: white; } /* p, a b, id main */ pab#main { margin-bottom: 20px; }
, . , , . , pa , p .a, .
p > a {…} , .
pa {…} , , .
. , 2-3 . (, , ) – - DOM.
querySelectorAll, document, -, , , .
<p> <span class="animal"></span></p> <p> </p> <p> <span class="character"> <span class="animal"> </span></span></p> <p> .</p> <script> function count(selector) { return document.querySelectorAll(selector).length; } console.log(count("p")); // <p> // → 4 console.log(count(".animal")); // animal // → 2 console.log(count("p .animal")); // animal <p> // → 2 console.log(count("p > .animal")); // <p> // → 1 </script>
getElementsByTagName, querySelectorAll . , .
querySelector ( All) . , . , null, .
position . static, , . relative, , top left . absolute, «» – , . , left top , position static. , .
. , .
<p style="text-align: center"> <img src="img/cat.png" style="position: relative"> </p> <script> var cat = document.querySelector("img"); var angle = 0, lastTime = null; function animate(time) { if (lastTime != null) angle += (time - lastTime) * 0.001; lastTime = time; cat.style.top = (Math.sin(angle) * 20) + "px"; cat.style.left = (Math.cos(angle) * 200) + "px"; requestAnimationFrame(animate); } requestAnimationFrame(animate); </script>
position: relative. top left , .
requestAnimationFrame animate , . animate requestAnimationFrame, . ( ) , 60 , .
DOM , . JavaScript, . requestAnimationFrame – , , , .
, ( lastTime), , . , , , .
Math.cos Math.sin. , , .
Math.cos Math.sin , (0, 0) . , 0 , , 2π ( 6.28) . Math.cos x , , Math.sin y. ( ) , 2π 0, – , a+2π , a.
angle , animation. image. top Math.sin 20 – . left Math.cos 200, .
. px , , ( , ems ). . – 0, .
JavaScript DOM. , JavaScript . DOM , . parentNode childNodes, .
, , - . , , color display. JavaScript style.
6. HTML . HTML :
<table> <tr> <th>name</th> <th>height</th> <th>country</th> </tr> <tr> <td>Kilimanjaro</td> <td>5895</td> <td>Tanzania</td> </tr> </table>
. : , .
, 6, MOUNTAINS.
buildTable, , , DOM, . , , , . Object.keys, , .
, , style.textAlign "right".
<style> /* */ table { border-collapse: collapse; } td, th { border: 1px solid black; padding: 3px 8px; } th { text-align: left; } </style> <script> function buildTable(data) { // } document.body.appendChild(buildTable(MOUNTAINS)); </script>
getElementsByTagName . , ( ) , .
, tagName. , . toLowerCase toUpperCase.
<h1> <span>span</span> .</h1> <p> <span></span>, <span></span> spans.</p> <script> function byTagName(node, tagName) { // } console.log(byTagName(document.body, "h1").length); // → 1 console.log(byTagName(document.body, "span").length); // → 3 var para = document.querySelector("p"); console.log(byTagName(para, "span").length); // → 2 </script>
,
. - .
, . top left . , position.
<img src="img/cat.png" id="cat" style="position: absolute"> <img src="img/hat.png" id="hat" style="position: absolute"> <script> var cat = document.querySelector("#cat"); var hat = document.querySelector("#hat"); // Your code here. </script>Source: https://habr.com/ru/post/243815/
All Articles