The Master said, “If one considers the old and learns the new, one can become a teacher.” The Master said, “By reviewing old knowledge you gain new understanding and experience. By this you become a teacher. “Especially us programmers, full stack engineers or not, have all eighteen skills in one piece. But sometimes things get forgotten if you haven’t used them for a long time, even if you can’t remember them at all, especially the basics. Therefore, I plan to write a series of blog posts on “reviewing the old and learning the new”. On the one hand, I am forgetful about these basic things, so it will be convenient for me to read them in the future. Second, I hope I can help some friends who just started. All of the points recorded in this series are the most basic (say three important things) knowledge. Most of them are notes I accumulated while studying.

Review the old and know the new series are some basic knowledge, god can directly skip.

Let me write v out front

If you can master all the weapons, if you can master all the weapons, you can skip this post. Just when you forget, you can take it out and review it.

V Basic Concepts

JavaScript is a literal scripting language that is dynamically typed, weakly typed, prototype-based, with built-in support for types. Its interpreter is called JavaScript engine, as part of the browser, widely used in client-side scripting language, was first used in HTML (standard Common Markup Language, an application) web pages, used to add dynamic features to HTML pages.

In a nutshell: javascript is an object-based, event-driven, secure, weakly typed scripting language.

1. Declare the keyword var

2. Variable name:

  • The value consists of digits, letters, underscores (_), and $(.)
  • Numbers can’t start
  • Strictly case sensitive
  • Cannot be named by keyword

3. Data type:

  • Basic data types

    • Numeric types (integer and floating point)
    • String type
    • Boolean type

  • Reference (compound) data types

    • Function: the function ()
    • Object: the object ()

  • The special data type is undefined

4. Check datatypes: typeof()

5. Operator priority: ()>! > > arithmetic relationship > & > | | > > conditions assignment

6. Type conversion mode:

  • ParseInt () converts a string to an integer
  • ParseFloat () converts a string type to a floating point type
  • NaN is not a number

Introduction to V function

1. Definition of functions: Functions (also called methods) are used to classify a piece of code for a purpose.

2. Function life:

Function Function name ([parameter 1],[parameter 2]…)

{

// Code module

}

3. Timer: setInterval(” function name “, milliseconds) PS: This part is detailed below

4. System functions:

  • Date function

    • GetYear (): Returns a two – or four-digit number representing the year

      <script type="text/javascript">
var d = new Date()
document.write(d.getYear())
</script>
Copy the code

    • GetMonth (): Returns a number representing the month

      <script type="text/javascript"> var d=new Date() document.write(d.goetmonth ())Copy the code

    • GetDate (): returns a day of the month

      <script type="text/javascript">
var d = new Date()
document.write(d.getDate())
</script>
Copy the code

    • ToLocaleString (): Converts a Date object to a string based on the local time and returns the result

      <script type="text/javascript">
var d = new Date()
document.write(d.toLocaleString())
</script>
Copy the code

  • The Math object

    • Abs (): absolute value of the returned number

      <script type="text/javascript"> document.write(math.abs (7.25) + "<br />")//7.5 document.write(math.abs (-7.25) + "<br / > ") / 7.25 / document. Write (Math. Abs (7.25 -)) / / 2.75 < / script >Copy the code

    • Round (): Can round a number to the nearest whole number

      <script type="text/javascript"> document.write(math.round (0.60) + "<br />")//1 document.write(math.round (0.50) + "<br / > ") / / 1 document. Write (Math, round (0.49) + "< br / >") / / 0 document. Write (Math, round (4.40) + "< br / >") / / - 4 Document. The write (Math. Round (4.60)) / / - 5 < / script >Copy the code

    • Random (): returns a random number between 0 and 1

      <script type="text/javascript"> document.write(math.random ())// Output random decimal, e.g. 0.5031703060958534 </script>Copy the code

    • Floor (): a number can be rounded down

      <script type="text/javascript"> document.write(math.floor (0.60) + "<br />")//0 document.write(math.floor (0.40) + "<br / > ") / / 0 document. Write (Math) floor (5) + "< br / >") / / 5 document. Write (Math) floor (5.1) + "< br / >") / / 5 Document. The write (Math. Floor (5.1) + "< br / >") / / - 6 document. Write (Math) floor (5.9)) / / - 6 < / script >Copy the code

    • Ceil (): Can round up a number

      <script type="text/javascript"> document.write(math.ceil (0.60) + "<br />")//1 document.write(math.ceil (0.40) + "<br / > ") / / 1 document. Write (math.h ceil (5) + "< br / >") / / 5 document. Write (math.h ceil (5.1) + "< br / >") / / 6 Document. Write (math.h ceil (5.1) + "< br / >") / / - 5 document. Write (math.h ceil (5.9)) / / - 5 < / script >Copy the code

    • Max (): Returns the larger of two specified numbers

      < script type = "text/javascript" > document. Write (Math. Max (5, 7) + "< br / >") / / 7 document. Write (Math. Max (3, 5) + "< br / >") / / 5 Document. The write (Math. Max (- 3-5) + "< br / >") / / - 3 document. Write (Math. Max (7.25, 7.30)) / / 7.3 < / script >Copy the code

    • Min (): returns the lowest number in the specified number. The effect is similar to that of Max

  • The array functions

    • Concat (): method used to join two or more arrays. This method does not alter the existing array, but simply returns a copy of the concatenated array

      <script type="text/javascript"> var a = [1,2,3]; Document. The write (a.c oncat (4, 5)); / / 1, 2, 3, 4, 5 < / script >Copy the code

    • Join (): The join() method is used to put all the elements of an array into a string. Elements are separated by the specified delimiter.

      <script type="text/javascript"> var arr = new Array(3) arr[0] = "1" arr[1] = "2" arr[2] = "3" Document. The write (arr. The join ()) / / 1, 2, 3 < / script >Copy the code

    • Pop (): method used to delete and return the last element of the array

      <script type="text/javascript"> var arr = new Array(3) arr[0] =" 1" arr[1] =" 2" arr[2] =" 3" document.write(arr)//1,2,3 Document.write ("<br />") document.write(arr.pop())//3 document.write("<br />") document.write(arr)//1,2 </script>Copy the code

    • Push (): Adds one or more elements to the end of an array and returns a new length.

      <script type="text/javascript"> var arr = new Array(3) arr[0] = "1" arr[1] = "2" arr[2] = "3" document.write(arr + "<br / / / > ") 1, 2, 3 document. Write (arr. Push (" a ") + "< br / >"), / / a document. Write (arr) / / 1, 2, 3, a < / script >Copy the code

V Browser object BOM

1. Windows objects:

  • Location Address object
  • History History object
  • Document Document object
  • Event Event object
  • Screen Screen object
  • Navigator browser object

2. Call method:

  • Windows. property =” “
  • Windows. Methods ();

3. Three pop-up dialog box methods for Windows objects:

  • Alert () displays an alert box Demo with a specified message and an OK button
  • Confirm () displays a dialog Demo with a specified message and OK and cancel buttons
  • Prompt () is used to display a dialog box Demo that prompts the user for input

4. Two methods of Windows object popup:

  • Open() is used to Open a new browser window or find a named window

    parameter describe
    URL An optional string that declares the URL of the document to display in the new window. If this parameter is omitted, or if its value is an empty string, the new window will not display any documents.
    name An optional string that is a comma-separated list of features, including numbers, letters, and underscores, that declares the name of the new window. This name can be used as a tagThe value of the target property of and. If this parameter specifies an existing window, the open() method no longer creates a new window, but simply returns a reference to the specified window. In this case features will be ignored.
    features An optional string that declares the standard browser characteristics for the new window to display. If you omit this parameter, the new window will have all the standard characteristics. inCharacteristics of the windowIn this table, we explain the format of the string in detail.
    replace  An optional Boolean value. Specifies whether the URL loaded into the window creates a new entry in the window’s browsing history or replaces the current entry in the browsing history. The following values are supported: * true – URL replaces the current entry in the browsing history.
    • False – URL Creates a new entry in the browsing history. |

  • ShowModalDialog () pops up a modal window

5. The Windows object has two methods to start the timer:

  • The setInterval() method calls a function or evaluates an expression at a specified period in milliseconds. The setInterval() method keeps calling the function until clearInterval() is called or the window is closed. The ID value returned by setInterval() can be used as an argument to the clearInterval() method.
  • The setTimeout() method is used to call a function or evaluate an expression after a specified number of milliseconds.

6. Document Three methods to find objects:

  • The getElementById() method returns a reference to the first object with the specified ID
  • The getElementsByTagName() method returns a collection of objects with the specified label name.
  • The getElementsByName() method returns a collection of objects with the specified name.

7. Common JS events:

  • The onclick event occurs when the object is clicked
  • Onmouseover Mouse over event
  • The onMouseout event occurs when the mouse pointer moves out of the specified object.
  • The onload event occurs immediately after the page or image is loaded.
  • The onFocus event occurs when the object gains focus.
  • The onblur event occurs when an object loses focus.
  • The onFocus event occurs when the object gains focus.
  • The onFocus event occurs when the object gains focus.

8. Browser object properties:

  • The appName property returns the name of the browser.
  • The appCodeName property is a read-only string that declares the browser code name.
  • The appVersion property returns the platform and version information of the browser. The property is a read-only string.

vDOM

DOM is primarily intended for real-world use, so I’ll just list a few common DOM attributes

DOM attributes: 1.

  • The childNodes property returns a collection of children of a node as a NodeList object
  • DocumentElement root node
  • The document body main body
  • Document.body. childNode gets the collection of children of the body element
  • NodeName node name
  • The Attributes attribute returns a collection of attributes for the specified node, called NamedNodeMap
  • NodeType nodeType
  • Value nodeValue node

V regular expression

I’m not going to go into regular expressions, but I think you can definitely meet all your needs here.

V Other knowledge

Prohibit others from loading your page with an iframe

if (window.location ! = window.parent.location) window.parent.location = window.location;Copy the code

Use the browser as an editor

data:text/html, <html contenteditable>
Copy the code

V Blog Summary

This is all about getting started with javascript, just hoping to help some beginners, or some forgetful people like me, recover their memories.

Part of the blog post was taken from W3C

 

About the author: Focus on basic platform project development. If you have any questions or suggestions, please feel free to comment! Copyright notice: The copyright of this article belongs to the author and the blog garden, welcome to reprint, but without the consent of the author must retain this statement, and give the original text link in a prominent place on the page of the article. For the record: all comments and messages will be answered as soon as possible. You are welcome to correct your mistakes and make progress together. Or direct private message I support the blogger: if you think the article is helpful to you, you can click on the lower right corner of the article [recommendation]. Your encouragement is the author to adhere to the original and continuous writing of the biggest power! \