It was sunny on August 17, 2020


Today is my first day of self-learning programming, and I choose JavaScript as the introductory programming language.


Because I can’t wait to learn JavaScript directly, HTML is a little simpler than JavaScript with CSS, so I learned the basics, common tags and styles of H5C3. We’ll come back to H5C3 when we learn more about JavaScript


Today you learned about JavaScript components, where to write, comments and output, and variables


Here’s a quick summary of what we learned today:


JavaScript components:

ECMAScript (JavaScript) ———— DOM ———— BOM


ECMAScript is JavaScript/DOM is document object model/BOM is browser object model


If I understand you correctly:
DOM mainly operates on elements, such as changing element colors, backgrounds, and so on


while


BOM operations are performed by the browser, such as forward, backward, refresh, and so on


— — — — — — — —


Where JavaScript is written:
Inline forms, like CSS inline lines, are written directly inside elements. Generally used as an understanding, except in special circumstances


Code demo:


— — — —


** Inline ** similar to CSS style, JS code is written in the tag


Code demo: 
<script>
    alert('hello world');
</script>
Copy the code


— — — —


** External ** is also similar to CSS introduction, the JS code is independent of the HTML page, both beautiful and easy to reuse


Code demo: 
<script src="liuyuyang.js"></script>
Copy the code

Note that there should be no code between external tags


It does not work to write code between script tags: 
<script SRC ="liuyuyang.js"> alert('hello world') </script>Copy the code

— — — — — — — —


JavaScript comments:


There’s nothing to say in the notes. How about a word count
**// line comment ** Shortcut key: Ctrl + /
Code demo: 
// alert(' line comment ')Copy the code

— — —
**/* Block comments */** shortcuts: Shift + Alt + A
Code demo: 
/* alert(' block comment ') alert(' block comment ') */Copy the code

— — — — — — — —


JavaScript output:
  1. Alert () prints in the pop-up box
  2. Console.log () outputs on the console
  3. Document.write () prints in the page


— — — — — — — —


JavaScript variables:


A variable is simply understood as a box that holds data


Next comes the use of variables, which is divided into two steps


First declare the variable (var) then define the variable name (name) and then assign the value (liuyuyang)


Var is the JS keyword used to declare variables


Code demo: 
var name = "liuyuyang";
Copy the code

— — — —


My understanding of the process of obtaining data for variables is as follows:


— — —


  1. First declare variables
  2. The computer then automatically allocates a memory space, that is, a box
  3. And then you give the variable a name, so you give the box a name
  4. The next step is to assign a value to the variable, which is to add data to the box
  5. Finally, if you want to output data, find the specified box based on the specified variable name and get the corresponding data from the box


Code demo: 
var name = "liuyuyang"; Console. log(name) // Outputs the name variableCopy the code

— — —


Note that if there are two variables with the same name, the last variable overwrites the previous variable data. In simple terms, the last value assigned to it


Code demo: 
var age = 17; var age = 18; console.log(age); // Overwrite the previous value of 17 to 18Copy the code

— — —


To declare multiple variables at the same time, you only need to write a var. Multiple variable names are separated by commas.


For example: I want to create these three variables A =1, b=2 and c=3


The original writing 
var a = 1;
var b = 2;
var c = 3;
Copy the code


More than writing 
var a = 1,b = 2,c = 3;
Copy the code
— — —


We also learned about the special case of declaring variables
situation
instructions
The results of
var age ; console.log (age);
Declaration only, no assignment
undefined
console.log(age)
No declaration, no assignment
An error
age = 10; console.log (age);
No declaration, only assignment
10


— — —


Next, you learned the naming conventions for variables


  1. Variable names consist of letters, numbers, underscores, and dollar signs. For example, usrAge, num01, _name, $num
  2. Variable names cannot start with a number
  3. Name variables meaningfully. For example age — > age
  4. Variable names cannot be system keywords or reserved words. For example: var, for, while
  5. Variable names are strictly case sensitive. For example: var app; And var App; Is two variables


— — —


At the end, I wrote a case of swapping variables, which is not too difficult. Let me analyze my approach for you:


Var a = 1, b = 2; Let’s swap the values of A with the values of B


Implementation process:


  1. It is preferred to declare a temporary variable (c) to hold data temporarily
  2. Let the value of variable A be assigned to temporary variable C
  3. The value of c is 1 and the value of b is assigned to the value of A
  4. The value of variable A is 2 and then the value of variable A stored in the temporary variable is assigned to variable B
  5. And you’re done. So a is equal to 2, and b is equal to 1


var a = 1, b = 2; var c = a, a = b , b = c; console.log(a,b)


Simple understanding:


Let’s say you have two cups with different drinks in them. Sprite in cup A/Coke in cup B


If you want to put Sprite in A B Coke cup, and then coke in A Sprite cup. You need to take out the third cup (empty CUP C for temporary storage of drinks), first pour the Sprite water from cup A into empty cup C, and then pour the Coke from cup B into Sprite cup A (currently the Sprite from cup A has been poured into empty cup C). So cup A is empty) then pour the Sprite in cup C into cup B, the drink in cup B is Sprite and the drink in cup A is Coke.


— — — — — — — —


Come on, target architect