Thank you for meeting me. Hi, I’m Ken

This is my first post on ———— “Nuggets”, thanks to Troy from Nuggets:

(Secretly size half ha ha ha)

In the future a considerable period of time in the nuggets will pay a certain amount of energy and time to operate this number, I hope your platform can take me to grow and progress together ha ha ha

All right, all right, let’s get down to business! Let me start my performance

1.1_ What is JavaScript

1.1.1 _JavaScript overview

JavaScript is a powerful programming language in the world of Web development, mainly used to develop interactive Web pages. Most of the interactive logic on web pages viewed on devices such as computers and mobile phones is implemented by JavaScript.

language Function and description
HTML Determines the structure and content of a web page, equivalent to a human body
CSS Deciding what a web page will look like to the user is the equivalent of dressing and making up a person
JavaScript Implementation of business logic and page control, equivalent to a variety of human actions

JavaScript is embedded in HTML web pages and interpreted and executed by the browser’s built-in JavaScript engine, transforming a page that was intended for display only into a page program that supports user interaction.

The birth and development of 1.1.2_JavaScript

In 1995, Brandon Edge of Netscape (now Mozilla) designed JavaScript for the first time in the Netscape Navigator browser.

Netscape originally named the scripting language LiveScript, but later changed the name to JavaScript after Netscape partnered with Sun (acquired by Oracle in 2009).

This was due to Sun’s introduction of the Java language, which Netscape borrowed for marketing purposes. In fact, the relationship between JavaScript and Java is like that between Leifeng Tower and Lei Feng. They are essentially two different programming languages.

1.1.3 _JavaScript characteristics

  1. JavaScript is a scripting language

A Script, “Script,” is simply a string of text commands that are executed one by one according to the process of a program. Common scripting languages are JavaScript, TypeScript, PHP, Python, and so on. Non-scripting languages (such as C and C++) generally need to be compiled, linked, and generated into separate executables before they can be run, whereas scripting languages rely on an interpreter and are automatically interpreted or compiled only when called. Scripting languages are usually simple, easy to learn, and easy to use. The grammar rules are relatively loose, so that developers can quickly complete the program writing work.

  1. JavaScript can be cross-platform

The JavaScript language does not depend on the operating system and requires only browser support.

  1. JavaScript supports object orientation

1.1.4 _JavaScript composition

JavaScript is composed of ECMAScript, DOM, and BOM:

Here is a brief introduction to the composition of JavaScript:

(1) ECMAScript: the core of JavaScript. ECMAScript defines JavaScript’s programming syntax and basic core content, and is an industry standard for JavaScript syntax that all browser vendors follow.

(2) DOM: The document Object model (DOM) is a standard programming interface recommended by the W3C to deal with extensible Markup Language (EXTENSIBLE Markup Language). 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 a content-independent structure of objects that can interact with the browser window. With the BOM, you can perform operations on the browser window, such as pop-up boxes and control the browser navigation.

1.2_ Commonly used development tools

If you want to do a good job, you must first sharpen its tools. A good development tool can greatly improve the efficiency and experience of program development. In Web front-end development, commonly used development tools are Visual Studio Code, Sublime Text, HBuilder, and so on. Next, we will introduce the characteristics of these development tools.

  1. Visual Studio Code

Visual Studio Code (VS Code) is a very powerful lightweight editor developed by Microsoft. The editor provides rich shortcuts, integrates syntax highlighting, customizable hotkey binding, bracket matching, and snippet collection, and supports writing a variety of syntaxes and file formats.

  1. Sublime Text

Sublime Text is a lightweight code editor with a user-friendly interface, support for spell checking, bookmarking, custom key bindings, and more. The editor can be extended through a flexible plug-in mechanism, which can be developed in Python. Sublime Text is a cross-platform editor for Windows, Linux, macOS, and more.

  1. HBuilder

HBuider is an HTML5-supported Web development editor launched by DCloud. It provides rich features and intimate user experience in front end development, mobile development, and mobile App development based on HTML5.

  1. Adobe Dreamweaver

Adobe Dreamweaver is a set of web page production and website management in one of the wysewyG web editor, used to help web designers improve the efficiency of web page production, simplify the difficulty of web development and learning HTML5, CSS threshold. But the disadvantage is that visual editing can produce a lot of redundant code and is not suitable for developing complex web pages that require a lot of dynamic interaction.

  1. WebStorm

WebStorm is a Web front end development tool from JetBrains, with JavaScript, HTML5 development as its strength and support for many popular front-end technologies. Such as jQuery, Prototype, Less, Sass, AngularJS, ESLint, Webpack and so on.

1.3 introduction to _JavaScript

1.3.1_ Code writing position

1. The inline type

Inline is when a single line or small amount of JavaScript code is written in an HTML tag’s event attribute (that is, an attribute that begins with on, such as onclick)

<! DOCTYPEHTML>
<html>
<head>
<meta charset="UTF-8">
<title>DOCUMENT</title>
<body>
<input type="button" value="点我" onclick=">   
       Copy the code

Write JavaScript code inline. Implementation: After clicking a button, a warning box pops up, showing some information

The fourth line states that the encoding of the web page is UTF-8, helping the browser to correctly identify the encoding of the web page. After the encoding is declared, you also need to ensure that the encoding of the file itself is also UTF-8. Most code editors currently create files with utF-8 encoding by default. In addition, the default code of Windows Notepad is ANSI, and web pages written in Notepad are prone to garbled code, so readers should avoid using Notepad to write code files.

Note the following when using inline expressions:

  • Note the use of single and double quotation marks. Use double quotes in HTML, while Javascript recommends single quotes.
  • Inline readability is poor, especially when writing a lot of JavaScript code in HTML. It’s not easy to read.
  • It can be very confusing when you encounter multiple levels of quotation markup, resulting in code errors.
  • Use inline style only for temporary tests or special circumstances. In general, it is not recommended to use inline style

2. Embedded (embedded)

Embedding is wrapping JavaScript code only with < script > tags, which can be written inside a < head > or < body > tag. With embedding, you can write multiple lines of JavaScript code in a < script > tag. Embedding is the most common way to learn JavaScript.

<head>.<script>
alert('Inline');
</script>
</head>
Copy the code

The fourth line is a JavaScript statement with a semicolon at the end indicating the end of the statement, after which the next statement can be written. The < script > tag also has a type attribute. In HTML5, the default value of this attribute is “text/JavaScript”, so you can omit the type attribute when writing.

3. External (external chain)

External is to write JavaScript code in a separate file, usually using “js” as the file extension. The < script > tag is used to introduce the HTML page, which is suitable for the case of more JavaScript code. The external is that no JavaScript code can be written inside the < script > tag

<head>.<script src="test.js"></script>
</head>
Copy the code

and

alert('External form');
Copy the code

Another way to embed JavaScript code in HTML is to use pseudo protocols.

<a href="Javascript :alert(' fake protocol ')">Am I</a>
Copy the code

In the code, the “JavaScript” in the href property represents the pseudo-protocol, and the following snippet of JavaScript code will pop up the alert box when the hyperlink is clicked. This approach is not recommended for real development.

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

  1. JavaScript is case sensitive, and you must write code to ensure that case is correct. For example, if you change the alert in the case code to uppercase alert, the warning box will not pop up.
  2. JavaScript code is insensitive to whitespace, newlines, and indentation. A statement can be divided into. Can write in multiple lines. For example, change the “(” after alert to the next line and the program still executes correctly.
  3. If a statement is written and the next statement is written on a newline, the semicolon after the previous statement can be omitted.

1.3.2 _ annotation

1. Single-line comment “//”

<script>
alert('Hello,JavaScript'); / / output Hello, JavaScript
</script>
Copy the code

2. Multi-line comment “/* */”

<script>
alert('Hello,JavaScript'); 
/* Output Hello,JavaScript */
</script>
Copy the code

1.3.3_ Input and output statements

statements instructions
Alert (” MSG “) A warning dialog box is displayed
The console. The log (” MSG “) The browser console outputs information
prompt (‘msg’) The browser displays an output box, allowing users to enter content 
<script>
alert("This is a warning box."); 
console.log ('Output information on the console');
prompt ('This is an input box.');
document.write("Output statement");
</script>
Copy the code

1.3.4_ Use of the console

JavaScript code can be entered directly in the browser’s console to execute.

1.4 _JavaScript variable

1.4.1_ What are variables

A variable is a piece of memory that a program requests to store data

1.4.2 use of variables

1. Declare a variable

var age;   // Declare variables
Copy the code

2. Variable assignment

age = 10;   // Assign a value to the variable
Copy the code
alert(age);        // Use the alert() warning box to print the value of age
console.log(age);  // Output the value of age to the console
Copy the code
  1. Variable initialization
var age = 10;   // Declare variables and assign values
Copy the code

1.4.3 application cases of variables

  1. Use variables to store personal information
<script>
var myName = 'Ken o'; / / name
var address = 'Xx District, XX City'; / / address
var age = 19; / / age
var email = 'aken@localhost'; // The email address
console.log(myName);
console.log(address);
console.log(age);
console.log(email);  // Output the corresponding value
</script>
Copy the code
  1. Use variables to hold values entered by the user
<script>
var myName = prompt('Please enter your name');
alert(myName);
</script>
Copy the code

Enter “Ken” :

And then:

1.4.4_ Syntax details for variables

1. Update the value of the variable

var myName = 'Ming';   // Assign an initial value to the variable
console.log (myName);  // Output result: Xiao Ming
var myName = 'hua';  // Update the value of the variable
console.log (myName)  // Output: xiao Red
Copy the code

2. Declare multiple variables simultaneously

var myName,age,email;  // Declare multiple variables simultaneously without assigning values
var myName = 'Ming', the age =18,
email = 'xiaoming@localhost';
Copy the code

3. Declare special cases of variables

(1) Only declare variables, but no value is assigned, then the output variable, the result is undefined

var age;
console.log (age);  // The output is undefined
Copy the code

(2) Do not declare the variable, directly output the value of the variable, then the program will make mistakes

console.log (age);  
Copy the code

If the previous line of code fails, the following code does not execute. So, in development, if your code doesn’t perform as expected, you can open the console to see if there is an error and find out exactly what line is wrong

(3) Do not declare variables, only to assign values

age1 = 10;       // The variable age1 is not declared with var
console.log (age1);  // Output: 10
Copy the code

As you can see from the output, directly assigning an undeclared variable can also correctly print the value of the variable. This situation is a feature of the JavaScript language and will be understood when you learn about global scope and Window objects

1.4.5_ Naming conventions for variables

When naming variables, you need to follow the naming conventions of variables to avoid code errors and improve the readability of your code

The value consists of letters, digits, underscores (_), and dollar signs ($), for example, age, num.

(2) Case sensitive, such as app and app are two variables.

(3) Cannot start with a number. For example, 18age is an incorrect variable name.

④ It cannot be a keyword or a reserved word. For example, var, for, while, etc., is an incorrect variable name.

(5) What is the meaning of the name? (5) What is the meaning of the name?

⑥ It is recommended that you follow the hump naming method, lowercase first letter, and capitalize first letter of the following words, for example, myFirsName.

In JavaScript, keywords are classified as “reserved keywords” and “future reserved keywords.” Reserved keywords are words defined in the JavaScript language that are given a special meaning and cannot be used as variable names.

Future reserved keywords are keywords reserved in the ECMAScript specification that currently have no special functionality, but may be added at some point in the future. Future reserved keywords are recommended not to be used as variable names to avoid future errors when they are converted to keywords.

identifier

There is also the concept of an identifier in JavaScript. Identifiers are the names that developers give to variables and functions. For example, the variable name age is an identifier. Syntactically, you cannot use a keyword as an identifier, otherwise a syntax error will occur.

  • Keep your face toward the light

Over time you learn the tricks of being with yourself

  • May this encounter pass by

Still dreaming and believing

Hi, I’m Ken. Thanks for stopping by

Oh huo passing boa please light up thumbling, Little star and comments section