JavaScript Knowledge Point 01

JS Basics

• The page consists of three parts:
  • HTML: Hypertext Markup Language, responsible for page structure
  • CSS: Cascading style Sheets, responsible for page styles
  • JS: A lightweight scripting language, responsible for the dynamic and data interaction of the page
    Small summary: structure, style and behavior, three-phase separation
  • Write structure in HTML page
  • Introducing CSS styles through the href attribute of the link tag
  • The JS script is introduced through the SRC attribute of the script tag.
• There are three ways to introduce CSS into a page
  • In-line<div style="width:200px;height:300px;"></div>
  • Inline: Write a in the header<style>选择器{key:value}</style>
  • Outer chain: Write a in the header<link rel="stylesheet" href="css/index.css"/>
• JS introduces the page in a similar way to CSS

  • Inline: In the development process, it is recommended to place the script on the bottom of the body; If you want to put the script tag right in the head, you need to add window.onload.

    window.onload=function(){document.body.innerHTML=‘XXXXXX‘;}

  • In line:<div onclick="xxxx" onmouseover="xxxx"></div>
  • Outside chain:<script src="01.js"></script>
    Note: If script as the external chain of JS, do not write code in two script tags, writing is useless
• Differences between properties and methods: Attributes are not parentheses, methods have parentheses
• The difference between a string and a variable: a string with quotation marks, a variable without quotation marks
  • Strings are generally quoted in single quotation marks, which are distinguished from the attribute values on which the element is followed; The property value is generally ""
  • Variable, which is the alias; var str; Tell the browser to define a variable such as Str
  • If no variables are defined, XXX is not defined
• JS Common output mode of 7 kinds
  • Alert (');
  • Confirm (' OK to delete? ‘); He has two return values: True True, false false
  • Console.log ("); You can print out what we want to print on the console.
  • Console.dir (); Print out properties and methods on objects
  • document.write ()
    If you encounter window.onload, the page will be emptied
  • element. innerhtml=xxxx
  • Console.table (); You can print the array and the object in a tabular form
    ```
    var ary2=[
    {
    Name: ' A ',
    Age:1,
    Sex: ' Gril '
    },
    {
    Name: ' Wang B ',
    Age:2,
    Sex: ' Boy '
    }];
    Console.table (Ary2);
  ```
• Chrome Control Console
  • Elements: Used to debug the HTML+CSS
  • Console: Used to debug JS
  • Sources: can get the resources related to the website: images, HTML, CSS, JS

Experience JS Programming Ideas

• Requirements: Mouse moved into the DIV1, div2 display, mouse out of Div1, Div2 hidden
• Implementation ideas:
  1. Height: The height of the div2 is 0, the height is 100 after moving into the DIV1, and the div2 height is 0 when the div1 is removed;
  2. Display:block show, none, hidden;
  3. Transparency: Rgba (); Opacity ();
  4. Positioning: Left and top;
  5. Margin:margin-left and Margin-top;
  6. Overflow:hidden and visible;
• JS gets the element's way:
  • document.getElementById (' ID name ');
    Because the ID is unique, all you get is an element
  • document.getElementsByTagName (' tag name ');
    The tag name gets a collection of elements, even if there is only one element, which is a collection
    Want to take one of them: Adiv[0] adiv[2]
• The data type in JS
  • Basic data type:
    1. Strings string
    2. Number
    3. Boolean value Boolean
    4. Undefined not now, not in the future.
    5. Null empty object, not now, there will be
  • Reference data type
    1. Object data type
       • Array
       • Regular
       • Object {}
    2. function data type
       Function name () {};
• How data types are detected
  1. typeof can detect basic data types (all typeof are strings), but for object data types, it detects objects and cannot know exactly what kind of object it belongs to.
  2. Object instanceof class, such as ary instanceof Array determining whether the instance belongs to a class
  3. Object. Constructor: For example ary.constructor , you can print out the class to which the object belongs.
  4. Object.prototype.toString.call (ary); Out of the result ' [Object Array] '
• Differences between the base data type and the reference data type:
  • Basic data type: is the operation on the value
  • Reference data type: is an action on an address
• The Action property is "." Odiv.style.display= ' block '
• Other data types are converted to Number data types
  • Forced conversions
  • Number ()
  • parseint ()
  • Parsefloat ()
  • A strict conversion
  • Number ()
  • Two non-strict conversions
  • parseint () can only be converted to integers
  • Parsefloat () can keep decimals
  If the conversion fails, the result returned is Nan:not a number is not a digit, but Nan is the numeric data type
• About Nan:
  • Nan is the Number data type
  • IsNaN () Determines whether it is a non-valid number; Not a valid number: true; Valid digits: false

JavaScript Knowledge Point 01