Front-end Development Learning notes (a) in layman's JavaScript

has been engaged in development work for more than 10 years, but has not really dabbled in web development, which in today's IT industry sounds a bit weird. From today, we will learn about the knowledge of web development in a comprehensive and deep way. Record the learning experience and key points to make a memo.

There are 12 chapters in the layman's JavaScript, according to chapter Records.

Chapter I.

Front-end development involves three levels: HTML (content) + CSS (appearance) + Javascript (Interaction/action)

JS scripts, whether in <script> blocks or embedded in HTML, should be ";" A semicolon as a terminator. This is a canonical notation.

Chinese Web page should set the character set in

Chapter II Storing data

Data is divided into three basic types by type:

1. Number. numeric type, including integers and floating-point numbers.
2. Text. String
3. Boolean. Boolean type

Data is divided by purpose

1. Variable (Variable)
2. Constants (Constant)

Identifier naming rules

1. At least 1 characters long; the first character is letters, underscores, $; spaces and special characters cannot appear in identifiers; identifiers are descriptive
2. The variable uses the small hump rule (for variables, functions) such as: Numcakedonuts, the object uses the hump rule.
3. Constants in uppercase letters

Constants must be assigned at the time of definition, otherwise the value cannot be assigned later. Uninitialized variable/constant value is "undefined"

A variable/constant allocates space after it is defined, and the type of the variable is created at the same time as the set variable and can be changed with the value type

When you reload a webpage, the value of the variable contained in the page is reset to the initial value (life cycle).

Before applying the addition, make sure that the added data type is what you want. A common mistake is to add characters and the system will incorrectly handle the combination of strings to cause incorrect results. such as 1+2=3; ' 1 ' + ' 2 ' = ' 12 '

Chapter III Client

JavaScript scripts serve the client and the browser works after loading

Interval Timer settimeout () and cycle timer setinterval ()

Window size Document.body.clientHeight window size is not the same as the size of the browser

Variable life cycle & Cookie:

JavaScript destroys all variables when the browser is closed or the page is reloaded;

Using cookies to extend the life cycle of a script variable (persistence), cookies are a convenient and economical data storage scheme that is ideal for storing small amounts of non-critical data on the client side.

The cookie also has an expiration date, and if the lifetime is not set, the life cycle is equal to the variable; the cookie is named only within the Web page and cannot be shared between different browsers, and is limited to storing less text data (less than 4K)

Some browsers do not support cookies, and you can use navigator.cookieenabled to check

Fourth Chapter decision Making

Which is what we generally say, this chapter mainly introduces two commonly used judgment statements: The IF statement and the switch statement.

If statements are generally used for true/false judgments. The conditional test sentence must only be of type Boolean, and it is important to note that the conditional operator "= =" should not be mistakenly written as "=", which can cause unexpected problems.

If statements can be nested, but nested if statements become complex and are not conducive to code maintenance.

Switch statement, multiple options, and the difference between the IF statement is: the detection data is not a formula, it must be a simple data.

Switch statement, in conjunction with case and break use, as far as possible to add default condition, can avoid omission.

Fifth Chapter Cycle

This section describes the looping statements and arrays.

An array is a variable that holds a set of data, equivalent to an object. The variables in the array are preferably of the same type, which facilitates subsequent processing; the array uses "keys" to access "values".

A loop statement has two for loops and a while loop.

The For loop is typically used in cases where the number of loops is known, the loop variable is initialized in the For statement, the loop condition is controlled, and the loop variable is controlled.

While loops are typically used for unknown cycles, the loop variable is initialized before the while statement, while the while statement controls the loop condition, and the control of the loop variable must be within the action of the while.

The For loop and while loop can be substituted for each other.

The break statement is used to interrupt the loop and exit directly; The continue statement is used to break and continue the next loop.

Sixth Chapter function

First JavaScript is a functional scripting language, where the use of functions is critical.

As a beginner's understanding of functions:

1. Use functions to break down complex big problems into small problems.
2. Separate the scripts that can be reused.
3. Reduce duplication of code and encapsulate repetitive code into functions for ease of maintenance
4. Input using arguments (entry parameters) or return data (output using return)

Understanding the coupling relationship between functions and HTML events, after all, the invocation of a function is initiated by events.

1. Use HTML attributes for joins. For example onload= "Init" and so on, you need to write directly in the HTML code
2. Use variables. For example: var myFunc = function (ARG1) {;} onload= "MyFunc". The definition of a function can be defined by the method of the variable name = function name, variable value = functional literal value, and the variable's type is determined by the value type when it is assigned.
3. Use the callback function (the event handler function). With the combination of variable + callback, you can solve the HTML and JavaScript clutter caused by HTML attributes. function references provide a convenient way to join event handlers and events.

Seventh chapter form and verification

Forms are used for normal access to user data;

Data entered in the form must be validated and sent to the backend;

Validating form fields can be obtained in two ways: ID and name, but in general it is recommended to use the ID method, which is getElementById

The time to validate the data is when the input field loses focus, that is, after the onblur event is triggered, you can verify the length, type, format, and so on

Regular expressions should be used in the validation of complex input domains (for example, mailboxes).

Regular Expressions: Designed to match text patterns, starting and ending with slashes. /Expression/

1. Metacharacters The basic items that make up the expression, including the following \w: Any one letter, number
   \d: Any number
   . : Any character (except line breaks)
   \s: Space (blank, TAB, line break, carriage return)
   ^: Mode start
   $: Mode End
   For example:/^\d\d\d\d\d-\d\d\d\d$/matches #####-### in the United States #邮编号码
2. Qualifier. The number of times the control sub-pattern is present in the regular expression
   *: The preceding sub-mode must appear 0 times/times (that is, it can not)
   +: The preceding sub-mode must appear 1 times/times
   ? : The preceding sub-mode must appear 0 times/1 times
   {n}: N times must occur
   {Min,max}: must occur between minimum and maximum number of times
   This|that: Selectable mode
   (): Set character/sub-mode
   For example:/^\d{5}-\d{4}$/and the example in 1 also express the U.S. postcode number
   For example:/^\d{2}\/\d{2}\/(\d{2}|\d{4}) $/represents mm/dd/yyyy or Mm/dd/yy
3. Check method
   var regExp = "/^\d{5}-\d{4}$/"; regexp.test (Inputfield.value);
   The literal is a variable of the regular expression, which is the regular expression object; The regular expression can use the test method to validate the input data
4. Character class
   [Characterclass] provides an efficient way to control optional characters such as:/^[\w\.-_\+][email protected][\w-]+ (\.\w{2,4}) +$/indicates mailbox validation
   The Mailbox Name section [\w\.-_\+]+ can enter characters: letters, numbers,. -_ +, and you must enter a
   Domain suffix [\w-]+ can enter characters: letters, numbers, you must enter a
   Suffix for domain name suffix (\.\w{2,4}) +. com class can enter characters: letters, numbers, 2-4 lengths, and at least 1 groups

Eighth chapter driving the Web DOM

The DOM provides a view of the structure and content of a script-friendly web page that can be viewed as a node tree.

mentions the non-standard features supported by Microsoft Internet Explorer InnerHTML, support mixed HTML, can achieve more control functions

The type of node in the node tree:

1. The root node, the document node, has only one
2. Element node, which is the elements node, corresponding to each label in the HTML
3. Text node, text content
4. Attribute nodes, which are attributes of tags in HTML, are not visible in the tree

Steps to change the text of a node (because any label in the text is a separate node in the DOM, a text with HTML attributes is split into multiple element nodes and text nodes)

1. Remove all child nodes (including element nodes and text nodes)
2. Create a new node
3. Attach the newly created node to the node

Nineth to tenth chapter object (to bring life to data)

Data + Behavior = Object

Variable + function

Features + methods

It's consistent with what OOP says.

constructor, the name is capitalized, is equivalent to the object name, and the This keyword is used in the constructor to set the attribute value

The definition of a class in JavaScript is not the same as the OOP language, but rather a direct implementation of the class. The variable that is set with the This attribute in the constructor is the property of the class. It can also be understood that the function is the definition of a class

Some objects have no attributes but methods and constants, which means that some related constants and methods are organized in a class for ease of use (for example: The Math Class), which is called an organization object .

function Class (,) {

This.id = "";

THIS.name = "";

This.talk = function () {;}

}

The above objects define two attributes (ID and name) and a method talk.

But this way of defining the method is called (instance method), which means that the method defined by the This keyword is used in the constructor. There is a big problem with such a definition, which is unreasonable when creating a new instance of (new), which is not justified because the method is for all instances of the object and the property is for a different instance. This will inevitably result in a large memory footprint that can cause performance problems.

WORKAROUND: Use the prototype object. The prototype object is used to set attributes and methods that are subordinate to the class layer, meaning that the properties and methods in the prototype object are at the class level and are common to all instances.

Class.prototype.method=function () {;} defines the method in this way to solve the problem.

That is, in a normal constructor, only attributes (attributes) are created and initialized.

In addition: class layer characteristics, access to methods, must be used through the instance object or within the object using the This keyword, and cannot be accessed through the class, and the class method cannot access the instance attributes, but can access the class attributes (but must use the Class.prototype. Attribute to access, and cannot be accessed directly from the class. Attribute)

var inst = new Class (); Inst.method (legal); Class.method (illegal) class.talk=function () {This.method ();} Legitimate

You can also use prototype objects to extend standard objects.

OOP design is often concerned with carefully architecting objects and the environment code around it

Such as: Sorting can be placed in the class method;

Function arguments are passed in, and the following arguments are optional. If you have two arguments Arg1 and Arg2, you can pass in Arg1, Arg2 or ARG1, or none, but not just the Arg2.

11th Chapter Defects

Common pitfalls include: syntax errors, logic errors, run-time errors, and the three bugs.

Some common mistakes are mentioned in this book:

1. Pair matching of curly braces and quotation marks (belongs to the grammatical category)
2. Typos, such as variable name input errors caused (belong to the grammatical category)
3. The comparison symbol (= =) is wrongly written as an assignment symbol (=), such as if (myvalue = Inputfield.value) {} (belongs to the logical category)
4. Lifetime, scripts that run in the head header (for example, new Object) Access HTML elements on the same Web page. (runtime category) because head is loaded earlier than body
5. Shadow variables, local variables are the same as global variables, resulting in local variables masking global variables (runtime category)

Chapter 12th Dynamic Data (Ajax)

A Web page built with Dynamic data is called a data-driven Web page, which means that the HTML only provides a content framework, and the data is dynamically loaded.

Ajax allows Web pages to dynamically accept data from Web servers, and one of the most important objects is xmlhttprequest.

Using AJAX involves knowledge about XML, the use of XMLHttpRequest objects, callback functions, server-side code, request types, request data, and so on.

The book took 5 days to complete the reading, which is understandable for most of the concepts and considerations mentioned in the book.

This book is suitable for beginners of the 0 basics and can have a rudimentary understanding of JavaScript.

Front-end Development Learning notes (a) in layman's JavaScript