Getting started learning JavaScript

Thank you for meeting.
Hello,
I'm Ken

On October 24, 2020, a JavaScript column is hereby created to celebrate the 10.24 Programmer's Day
and will continue to be updated.
Looking forward to seeing you again

Focus on school-related textbooks to help CSDN friends get started and review

_

Everyone is an island
, the weak get together, the
strong strengthen themselves

1.1_ What is JavaScript

1.1.1_JavaScript overview

JavaScript is a powerful programming language in the field of Web development, mainly used to develop interactive Web pages. On the web pages browsed on computers, mobile phones and other devices, most of the interaction logic is almost implemented by JavaScript.

Language	Function and description
HTML	Structure_Determine the structure and content of the webpage, which is equivalent to the human body
CSS	Style-_Determines the appearance of the web page to users, which is equivalent to dressing and makeup
JavaScript	Behavior_Realize business logic and page control, equivalent to various human actions

JavaScript is embedded in HTML webpages, and is interpreted and executed by the JavaScript engine built into the browser to transform a page that was originally only used for display into a page program that supports user interaction.

1.1.2_The Birth and Development of JavaScript

In 1995, Brandon Aitch of Netscape (now Mozilla) designed JavaScript for the first time on the Netscape Navigator browser.
_
Netscape originally named this scripting language LiveScript, and later Netscape and Sun (acquired by Oracle in 2009) cooperated and renamed it JavaScript.
_This
is because the Java language introduced by Sun was a lot of attention, and Netscape borrowed the name Java for marketing. In fact, the relationship between JavaScript and Java is like Lei Feng Tower and Lei Feng. They are essentially two different programming languages.

1.1.3_JavaScript features

1. JavaScript is a scripting language.
   Script is simply a set of text commands, which are executed one by one according to the program flow. Common scripting languages ​​include JavaScript, TypeScript, PHP, Python, etc. Non-scripting languages ​​(such as C, C++) generally need to be compiled, linked, and run after generating an independent executable file. However, scripting languages ​​rely on an interpreter and are automatically interpreted or compiled only when they are called. Scripting languages ​​are usually simple, easy to learn, and easy to use. The grammatical rules are relatively loose, so that developers can quickly complete the programming work.
2. JavaScript can be cross-platform.
   JavaScript language does not depend on the operating system and only needs the support of the browser.
3. JavaScript supports object-oriented

1.1.4_JavaScript composition

JavaScript is composed of three parts: ECMAScript, DOM, and BOM.

Next we will briefly introduce the composition of JavaScript.

(1) ECMAScript: is the core of JavaScript. ECMAScript stipulates the programming syntax and basic core content of JavaScript, and is a set of industry standards for JavaScript syntax that all browser manufacturers abide by.

(2) DOM: Document Object Model, which is a standard programming interface for processing extensible markup language recommended by the W3C organization. Through the interface provided by DOM, various elements on the page can be operated (such as size, position, color, etc.).

(3) BOM: Browser Object Model, which provides an object structure that is independent of content and can interact with browser windows. Through BOM, you can operate the browser window (such as pop-up box, control browser navigation jump, etc.).

1.2_ Common development tools

If you want to do well, you must first sharpen your tools. An excellent development tool can greatly improve the efficiency and experience of program development. In Web front-end development, the commonly used development tools include Visual Studio Code, Sublime Text, HBuilder, etc. Next, we will introduce the characteristics of these development tools.

1. Visual Studio Code

Visual Studio Code (VS Code for short) is a very powerful lightweight editor developed by Microsoft. The editor provides a wealth of shortcut keys, integrates syntax highlighting, customizable hot key binding, bracket matching and code snippet collection, and supports the writing of multiple syntax and file formats.

2. Sublime Text

Sublime Text is a lightweight code editor with a friendly user interface that supports spell checking, bookmarks, custom key bindings and other functions. It can also extend the editor's functions through a flexible plug-in mechanism. Its plug-ins can use Python Language development. Sublime Text is a cross-platform editor that supports Windows, Linux, macOS and other operating systems.

3. HBuilder

HBuider is a web development editor that supports HTML5 launched by DCloud (Digital Paradise). It provides rich functions and intimate user experience in front-end development and mobile development. It also provides HTML5-based mobile app development Good support.

4. Adobe Dreamweaver

Adobe Dreamweaver is a WYSIWYG web page editor that integrates web page production and website management. It is used to help web designers improve web page production efficiency, simplify the difficulty of web development and the threshold of learning HTML5 and CSS. But the disadvantage is that the visual editing function will generate a lot of redundant code, and it is not suitable for developing web pages with complex structure and a lot of dynamic interaction.

5. WebStorm

WebStorm is a web front-end development tool launched by JetBrains. JavaScript and HTML5 development are its strengths. It supports many popular front-end technologies, such as jQuery, Prototype, Less, Sass, AngularJS, ESLint, webpack, etc.

1.3_Introduction to JavaScript❗

1.3.1_ Code writing position

1. Inline style
   Inline style refers to writing a single line or a small amount of JavaScript code in the event attribute of the HTML tag (that is, the attribute starting with on, such as onclick)

<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>DOCUMENT</title>
<body>
<input type="button" value="点我" οnclick="alert('行内式')“>
</body>
</head>
</html>

Use inline style to write JavaScript code. Realization: After clicking a button, a warning box will pop up, showing some prompt information

The fourth line declares that the encoding of the web page is UTF-8, which helps the browser to correctly recognize the encoding of the web page. After declaring the encoding, you also need to ensure that the encoding of the file itself is also UTF-8. Currently, most files created by code editors have UTF-8 encoding by default. In addition, the default encoding of Windows Notepad is ANSI, and web pages written in Notepad are prone to garbled characters, so readers should refrain from using Notepad to write code files.

Pay attention to the use of inline style:

• Pay attention to the use of single and double quotes. Double quotation marks are used in HTML, and single quotation marks are recommended for Javascript.
• Inline style is less readable, especially when writing a lot of JavaScript code in HTML. Not easy to read.
• It is very easy to confuse in the case of multiple quotation marks inlaid, resulting in code errors.
• Inline style should only be used for temporary testing or special circumstances, inline style is not recommended in general

2. Inline (embedded)
   Inline is to use only the <script> tag to wrap JavaScript code, and the <script> tag can write the tag in the <head> or <body> tag. Through inline, you can write multiple lines of JavaScript code in the <script> tag. Embedded is the most common way to learn JavaScript.

<head>
......
<script>
alert('内嵌式');
</script>
</head>

The fourth line is a JavaScript statement, and the semicolon at the end indicates the end of the statement, and you can write the next statement later. The <script> tag also has a type attribute. In HTML5, the default value of this attribute is "text / JavaScript", so the type attribute can be omitted when writing.

3. External type (external chain
   type ) External type is to write JavaScript code in a separate file, generally use "js" as the file extension. Use the <script> tag to import in the html page, which is suitable for situations where there is a lot of JavaScript code.
   Externally, JavaScript code cannot be written in the <script> tag

<head>
......
<script src="test.js"></script>
</head>

with

alert('外部式');

Another way to embed JavaScript code in html is to use pseudo-protocol.

<a href="javascript:alert('伪协议')">点我</a>

In the code, the "JavaScript" in the href attribute represents a pseudo-protocol, and the following piece of JavaScript code will pop up an alert box when you click this hyperlink. This method is not recommended in actual development.

When writing JavaScript code, you should pay attention to the basic grammatical rules to avoid program errors, as follows:

1. JavaScript is strictly case sensitive, and you must pay attention to the correctness of case when writing code. For example: if the alert in the case code is changed to uppercase ALERT, the warning box will not pop up.
2. JavaScript code is not sensitive to spaces, line breaks, and indentation, and a sentence can be divided into. Can write in multiple lines. For example, if you change the "( "after alert to the next line, the program will still execute correctly.
3. If a statement is written and the next statement is written on a new line, the semicolon after the previous statement can be omitted.

1.3.2_ Comments

1. Single line comment "//"

<script>
alert('Hello,JavaScript'); //输出Hello,JavaScript
</script>

2. Multi-line comment "/* */"

<script>
alert('Hello,JavaScript'); 
/* 输出
Hello,JavaScript
*/
</script>

1.3.3_ input and output statements

Statement	Description
alert（’msg‘）	Browser pops up warning box
console.log（’msg‘）	Browser console output information
prompt (‘msg’)	The browser pops up an output box, and the user can input content

<script>
alert("这是一个警告框"); 
console.log ('在控制台输出信息');
prompt ('这是一个输入框');
document.write("输出语句");
</script>

1.3.4_ Use of the console

You can directly enter JavaScript code to execute it in the browser console.

1.4_JavaScript variables❗

1.4.1_ What is a variable

A variable is a piece of space that the program applies for in memory to store data

1.4.2_ Use of variables

1. Declare variable

var age;   // 声明变量

2. Variable assignment

age = 10;   // 为变量赋值

alert(age);        // 使用alert()警告框输出age的值
console.log(age);  // 将age的值输出到控制台中

3. Variable initialization

var age = 10;   //声明变量同时赋值

1.4.3_ Application case of variables

1. Use variables to save personal information

<script>
var myName = '小明';  //名称
var address = 'xx市xx区';  //地址
var age = 18;  //年龄
var email = 'xiaoming@localhost';  //电子邮箱
console.log(myName);
console.log(address);
console.log(age);
console.log(email);  //输出相应的值
</script>

2. Use variables to save the value entered by the user

<script>
var myName = prompt('请输入您的名字');
alert(myName);
</script>

1.4.4_ Syntax details of variables

1. Update the value of the variable

var myName = '小明';   //变量赋初值
console.log (myName);  //输出结果：小明
var myName = '李华';  //更新变量的值
console.log (myName)  //输出结果：小红

2. Declare multiple variables at the same time

var myName,age,email;  //同时声明多个变量，不赋值
var myName = '小明'，
    age = 18,
    email = 'xiaoming@localhost';

3. The special case of declaring variables
   (1) Declaring only variables but not assigning values, when outputting variables, the result is undefined

var age;
console.log (age);  //输出结果：undefined

(2) If the variable is not declared, and the value of the variable is directly output, the program will go wrong

console.log (age);  

If an error occurs in the previous line of code, the following code will not be executed. Therefore, during development, if the code does not execute as expected, you can open the console to see if there is an error message, and find out which line is wrong.

(3) Do not declare variables, only assign values

age1 = 10;       //变量age1没有使用var进行声明
console.log (age1);  //输出结果：10

It can be seen from the output result that directly assigning an undeclared variable can also output the value of the variable correctly. This situation is a characteristic of the JavaScript language, and you will understand it when you learn about the global scope and the window object.

1.4.5_ Variable naming convention

When naming the variable, you need to follow the variable naming convention to avoid code errors and improve the readability of the code

① Consists of letters, numbers, underscores and dollar signs ($), such as age and num.

②Strictly case-sensitive, such as app and App are two variables.

③Cannot start with a number, such as 18age is the wrong variable name.

④It cannot be keywords or reserved words, such as var, for, while, etc. are wrong variable names.

⑤ Try to "see its name and know its meaning", such as age means age and num means number.

⑥It is recommended to follow the camel case nomenclature, the first letter is lowercase, and the first letter of the following words is uppercase, such as myFirsName.

In JavaScript, keywords are divided into "reserved keywords" and "future reserved keywords". Reserved keywords refer to words that are defined in advance and given special meaning in the JavaScript language, and cannot be used as variable names.

Future reserved keywords refer to keywords reserved in the ECMAScript specification. Currently they have no special functions, but they may be added at some time in the future.
It is recommended not to use reserved keywords as variable names in the future to avoid errors when converting them into keywords in the future.

Identifiers
There is also a concept of identifiers in JavaScript. Identifiers refer to the names given by developers for variables and functions. For example, the variable name age is an identifier. Syntactically speaking, keywords cannot be used as identifiers, otherwise grammatical errors will occur.

• Turn your face towards the light place.
  Over time,
  you will naturally learn the trick to get along with yourself

• This was willing to come
  still harbor dreams
  do not lose faith
  _
  Hello, I'm Ken Ah
  thank visitors