Basic JavaScript Exercises (ii) Summary

Mission Purpose

• Learn and Practice JavaScript's basic syntax and language characteristics
• Practice using JavaScript to implement a simple sorting algorithm

Task description

• Based on the previous task
• Limit the number of inputs to 10-100
• The number of queue elements is limited to 60, and when more than 60 are added, alert is prompted when adding elements
• The way the queue is displayed changes, directly with the height of the number size
• Implement a simple sorting function, such as bubble sort (without limiting the specific algorithm), expressed in a visual way, see reference below

Task considerations

• While implementing simple functionality, learn about JavaScript basic syntax, events, and DOM knowledge
• Please note that the code style is neat and elegant
• The code contains the necessary comments
• Example diagram is for reference only and does not need to be fully consistent
• The concrete algorithm and the visual form do not have the special restriction, only request can show the algorithm the process
• We recommend that you do not use any third-party libraries, frameworks

Online learning Resources

• JavaScript Introductory article
• MDN JavaScript

Basic JavaScript Exercises (ii) Summary

1 , JavaScript parseint () Function

The parseint () function parses a string and returns an integer.

The cardinality parameter is used to specify which number system to use, for example, a radix of 16 indicates that numbers in a string are resolved from hexadecimal numbers to decimal numbers.

If the cardinality parameter is omitted, JavaScript will assume the following scenario:

• ? If the string starts with "0x", the cardinality parameter is 16 (hexadecimal).
• ? If the string starts with another, the cardinality parameter is 10 (decimal).

Note : Only the first number in a string is returned. Leading and trailing spaces are allowed.

Grammar:

parseint (string, radix)

String: The strings that will be parsed.

Radix: Optional, number from 2 to 36, indicating the number system used.

return value : number. When the first character cannot be converted to a number, a Nan is returned.

2 , HTML DOM childNodes Property

The ChildNodes property returns a collection of child nodes for a node as a node list object. In code, the node collection is already sorted, and can be accessed by subscript, starting with the subscript 0. This property is a read-only property.

You can use the length property of the Node list object to determine the number of child nodes, and then you can loop through all the child nodes and extract the information from them.

Note : The whitespace in the element is considered as the text, and the text is also considered a node. Annotations are also considered nodes.

The ChildNodes property differs from the Children property:

The Children property returns a collection of node element nodes, with no text and comment nodes, and the ChildNodes property contains.

Grammar:

element. childNodes

Return value: The node List object that represents the collection of nodes. The nodes in the returned collection in the source code are sorted.

3 , HTML DOM Style Object

The Style object represents a separate style statement.

Access a Style object

The style object can be accessed through the header of the document, or through specific HTML elements.

Eg:var x = document.getElementsByTagName ("STYLE");

var x = document.getElementById ("myH1"). Style;

Create Style Object

You can use the Document.createelement () method to create a <style> element, or you can set a style property for an already existing element.

var x = document.createelement ("STYLE");

document.getElementById ("MyH1"). Style.color = "Red";

4 , submitted Jobs

Code Address: https://github.com/Nunawading2016/2017-IFE-Baidu/blob/master/task2-1

Demo Address: http://htmlpreview.github.io/?https://github.com/Nunawading2016/2017-IFE-Baidu/blob/master/task2-1/index.html

Basic JavaScript Exercises (ii) Summary