Front-end development Overview +js Basic detail Knowledge points

Overview of a front-end development

• HTML page: HTML CSS JavaScript
• Get UI Design Drawing: Graph-->html+css Static Layout--with JS write a write dynamic effect-->ajax and the background to interact with the data dynamically bound to the page--with the node. JS Service Platform for source control-- Backstage with node. js

The way and details of the introduction of the second JS to the page

• Knowledge Point consolidation: How CSS is introduced
  • 1. In-line
  • 2. Inline (write CSS styles inside the style tag quickly, and put it inside the head)
  • 3. Outer chain (just put the inline CSS style in a separate style file outside)
  • 4. Import Type:@import"css/index.css";
• There are several ways to introduce JS into a page:
  • 1. Inline (not recommended, very low-security)
  • 2. Inline (writes the JS code in the middle of the script block)
  • 3. Outside the chain (the JS code is written in the outside file, through the SRC to find the introduction)
    • Detail point:
      • Script block in the outer chain, can not write JS code, write and do not execute
      • We usually put JS in the body of the last side, because the HTML page is loaded from top to bottom, JS is usually to get HTML tags and dynamic operation effect, so we need to load the HTML tag before loading our JS.

Four kinds of output methods of three JS

• Alert (' content ') pop-up box in browser to display our content
• document.write (' content ') output in the page to show our content
• Console.log (' content ') is one of the most common ways to output our content in the console
  • Console.error (); Throw an exception to the console
  • Console.dir (); Outputs all properties of an object (details)
  • Console.clear (); emptying the console
    • How to Empty the console:
      • Ctrl+l
      • Right-click Clear
      • Click the small icon directly
• Innerhtml/innertext adding content dynamically to the specified element

Specification for the composition and nomenclature of four JS

• Hierarchical relationships: Documents (document document objects), browser (Window Browser object)->html->head/body-> ....
• Js:javascript, a lightweight script programming language
• JS composition (three parts)
  • ECMAScript: Define JS inside the naming specification, variables, data types, basic grammar, operation statements and other core things
  • Dom:document Object Model Document objects
  • Bom:browers Object Model Explorer
• Naming conventions:
  • Strictly case-sensitive in JS
  • Using the Hump naming method
    • First letter lowercase, the first letter of every meaningful word in the rest
    • Can use numbers, letters, underscores, $, (numbers cannot be used as the initials)
  • Cannot use keywords and reserved words
    • Keywords: words with special meaning in JS
    • Reserved words: The future may be a keyword

Variables and data types in five JS

• JS variable
  • Variable: variable amount
  • The variable in JS is an abstract concept where variables are used to store values and represent values.
  • It is very simple to define a variable in JS:
    • var variable name = variable value;例:var name=‘lucy‘;//定义一个变量,把字符串lucy赋值给这个变量 console.log(name);//把name代表的值输出在控制台
    • = is an assignment operation, the left is the variable name, and the right is the stored value
    • The variables in JS are loosely typed: You can store any data type with a var variable name
• Data type in JS: 1. Basic data type 2. Reference data type
• Basic data type: composed of simple structures
  • Numbers (number)
  • String: double quotes or single quotation marks are wrapped in strings.
  • Boolean (Boolean)
  • Null
  • Undefined

=============================number (number):

• Forcing type conversions
• Number: Positive, negative, 0, decimal, NaN
  • Nan:not A is not a valid number, but he is a numeric data type
  • Nan==nan didn't want to wait.
• Number (): Forces other data types to be converted to type #, requiring that strings must be numbers to be converted if they are strings;
  • The return value of number: either the digit or Nan
  • Mechanism: Property name, search from left to right, only one not a number, will return Nan
• IsNaN (); is a method: detects whether a value is a valid number, is a valid number that returns FALSE, is not a valid number is true;
  • If the detected value is not of type number, the browser will default to convert it to type # and then determine if it is a valid digit
• Non-mandatory type conversions
• Parseint/parsefloat
  • parseint
    • Mechanism: From the left to find, as long as a character is not a number to stop the search, will find the character returned, but its value is an integer, automatically ignore the decimal point
    • Return value: Is an integer, not a number is Nan
    • Function: Can parse string, return an integer
  • Parsefloat
    • Mechanism: Search from left to right, as long as a character is not a number to stop the search, will find the character returned, the value returned is a floating point, with a decimal point
    • Function: Can parse string, return a floating-point number
    • The return value is either a number or Nan
• one = Number: Indicates assignment
• two = number: is to determine whether the left and right sides of the value is equal

==============================boolean (BOOL):

• Boolean:true/false
• !: An exclamation mark is reversed, first converts the value to a Boolean type, and then takes the inverse
• !: two exclamation marks, converting other data types to Boolean, equivalent to Boolean ();-> inverse

==============================

• Reference data type: a relatively complex structure
  • Objects data type (object)
    • Objects class (object), array class [array], regular class |^$|, time class date, String Class (String), Boolean Class (Boolean) ... Examples of corresponding classes: objects, arrays, regular, time ...
  • Functions data type (function)

Object data type in JS data type

• Features: consists of multiple sets of [attribute name and attribute value], multiple sets of key-value pairs, consisting of multiple key:value
• property names and attribute values are used to describe this pair of features.
• How to create
  • How to create a literal:var obj={name:‘lucy‘};
  • How to create an instance:var obj=new Object();
• Add a set of property names and property value methods to an object
  • Obj.name= "Lucy";
  • obj["Name"]= "Lucy"
• Modify the property value of the original property name
  • Rule: Attribute names in an object cannot be duplicated, and if there is a modification, nothing is added
  • Obj.name= "Lucyjie"
  • obj["name"]= "Lucyjie"
• Get property names and property values
  • If the property name does not exist, the result returned by console.log(obj.zz);->undefined default is undefined
  • Console.log (obj["name"]);
  • Console.log (Obj.name);
• Delete property names and property values
  • Fake Delete: Obj.age=null;
  • True Delete: Delete.obj.age; Console.log (obj);

Six data type discrimination and data type detection

• Differences between the base data type and the reference data type
  • Essential differences:
    • The basic data type operation is a value
    • The reference data type operates on a memory address
• Methods of detecting data types in JS
• typeof operator
  • Used to detect the data type: typeof the value to be detected
  • Return value: is a string;
  • Contains the data type character "number", "string", "Boolean", "Undefined", "object", "function"
  • //特殊记忆:typeof null;->"object"
  • Limitations: Cannot specifically detect the type of subdivision under object, detecting that these returns are "object"

• instanceof operator
• Constructor
• Object.prototype.toString.call ()

The grammar of three judgments in seven JS

• Three judgments: if else, ternary operator, switch case
  • If, else if, else is the most commonly used judgment that can solve all the judging requirements in JS
  • Ternary operators are applied to simple if else cases
  • Switch case applies to different operations with different values

Three loops in eight JS

• For loop:
  • Four-part song
    • First step: Set the initial value Var i=0;
    • Step two: Set conditions for loop execution i<5;
    • Step three: Execute the contents of the loop body {[loop body]} wrap up part
    • Fourth step: Perform our i++ cumulative operation after each round of cycle completion
  • Break/continue: (keywords)
  • In the loop body, as soon as the break and continue are encountered, the following code in the loop body is not executed;
    • Break: In the loop problem, break occurs, the entire loop is directly over, i++ the last cumulative operation is no longer executed
    • Continue: In the loop body, appears continue, the current round of the cycle is over, continue the next round of the loop, the subsequent accumulation operation continues to execute

• For In loop:
  • That is used to loop property names and property values in an object.
  • How many sets of key-value pairs are in the object, and how many times we loop
  • Sequential problems: First loop the property names of the numbers (as small to large), and then loop the remaining attribute names in the order we wrote

Front-end development Overview +js Basic detail Knowledge points