www.lvyestudy.com/javascript learning notes

JavaScript introduction

  • Js, which is a programming language embedded in HTML pages and executed by the browser as it is interpreted.

  • HTML controls the structure of a web page, CSS controls the look of a web page, and JavaScript controls the behavior of a web page.

  • Study suggest

    • JavaScript is one of the most popular and complex programming languages. For JavaScript learning, I have two suggestions for beginners.
    • After learning JS, don’t rush to learn js advanced content, should learn JQuery
    • After learning jQuery, we will have a deeper understanding of the basics of JavaScript. After we finish with jQuery, we will go to the advanced content of JavaScript.
    • Ignore the details and learn them over and over again

The development tools

  • HBuilder
  • Create a project using HBuilder

Js introduction mode

  • Three ways: external, internal, and element events.

– (1) document.write() : Outputs a content on the page. – (2) alert() : Pops up a dialog box.

<! DOCTYPEhtml>
<html>
	<head>
		<meta charset="utf-8" />
		<title>Hello World</title>
		<script type="text/javascript">
			function alertInfo() {
				alert('Study hard');
			}
		</script>
	</head>
	<body>
		<h1>I'm a headline</h1>
		
		<! -- 1. JavaScript inside the element -->
		<! <input type="button"value=" onclick="alert(' JavaScript')" />-->
		<input type="button" value="Button" onclick="alertInfo()" />
		<a href="Javascript :alert(' alert ')">A label</a>
		
		<! -- external JavaScript -->
		<script src="js/index.js"></script>
		
		<! -- 3. Internal JavaScript -->
		<script type="text/javascript">
			document.write("I'm internal JavaScript.")
		</script>
		
	</body>
</html>
Copy the code
document.write('External JavaScript, a piece of content that I imported from an external file. ');
Copy the code

A simple JS program

<script type="text/javascript">
// When the page opens, a dialog box will pop up, saying "Welcome to the Cute shop"; When the page closes, a dialog box will pop up with the message "Remember to come again."
	window.onload = function () {
		alert("Welcome to the Cute little Shop!");
	}
	
	widnow.onbeforeunload = function (event) {
		var e = event || window.event;
    e.returnValue = "Remember to come back!";
	}
// The above code works a little differently in different browsers, but the function is the same.
</script>
Copy the code

Grammar foundation

Introduction of grammar

  • Human beings have many languages, such as Chinese, English, French and so on. Computers also have many languages, such as C/C++/ Java and so on. JavaScript is one of many computer languages.

  • Like human languages, computer languages have some commonalities: basic variables, expressions, operators, branches, loops, arrays, functions, and so on.

  • In this chapter, we will focus on the following seven aspects of JavaScript syntax:

    • Variables and Constants
    • The data type
    • The operator
    • Expressions and statements
    • Type conversion
    • Escape character
    • annotation

Variables and Constants

  • variable
    • A variable is a quantity that can change.
    • Naming rules for variables
      • Consists of letters, underscores, or numbers, and the first character must be “letter, underscore, or number,” and the first character must be “letter, underscore,” or number.
      • Variables cannot be keywords or reserved words.
      • Hump naming is recommended. Use names that make sense.
  • Use of variables

    • Declaration of variables

    • Use of variables

    • For example, var a = 10;

    • Declare a variable a with var and assign a value of 10 to it.

  • constant
    • A constant is a quantity that cannot be changed.
    • In general, constant names are capitalized; for example, var PI = 3.14;
// The use of variables
var a = 10;
a = 12;
document.write(a);

// Declare multiple variables simultaneously
var a = 10, b = 20, c = 30;

/ / constant
var DEBUG = 1;
Copy the code

The data type

  • In JavaScript, there are two types of data types: basic data types; The other is reference data types.
  • There are five basic data types: numbers, strings, Boolean values, undefined values, and null values. There are two common reference data types: arrays and objects.

digital

  • Js does not distinguish between int and float.

string

  • A string of characters enclosed in single or double quotation marks.

Boolean value

  • There are only two Boolean values: true and false.
  • The greatest use of Booleans is in selecting structures for conditional judgment.

Undefined values

  • A variable is already declared with var, and no value is assigned. In this case, the value of the variable is undefined.
  • Undefined values are represented by undefined.

A null value

  • A variable equal to null indicates that no space has been allocated to the variable.
/ / digital
var n = 1001;
document.write(n);

/ / string
var str = "All right, all right.";
document.write(str);

/ / a Boolean value
var a = 10;
var b = 20;
if (a < b) {
	document.write("A less than b");
}

// Undefined value
var c;
document.write(c);
Copy the code

The operator

Arithmetic operator

    • add
    • Reduction of
    • take
  • / in addition to
  • % more than take
  • + + since
  • – the decrement
  • For arithmetic operators, we need to focus on these three: addition, increment, and decrement.
Addition operator
  • In JS, the addition operator is not as simple as it seems, and there are three things to note
Number + number = Number string + String = String String + number = stringCopy the code
var a = 10 + 5;
var b = "From zero to one" + "Series of books";
var c = "This year is." + 2021;
console.log(a, typeof a); // 15 "number"
console.log(b, typeof b); // Series of books from 0 to 1 string
console.log(c, typeof c); // This year is 2021 string
Copy the code

The assignment operator

  • The assignment operator is used to store the value of an expression on the right to a variable on the left
  • =, +=, -=, *=, /=
  • For example, var a+=b; So it’s just var a = a + b; Simplified form of

Comparison operator

  • The comparison operator is used to compare values or expressions on both sides of the operator, returning true if the comparison is correct. Return false if the comparison result is wrong.

  • , <, >=, <=, ==! =

Logical operator

  • Logical operators used to perform “Boolean operations”

  • , &&, | |,!

  • For and, or, and non-operations, we can summarize the following five points.

(1) True! False, false! To true. (2) a&&b: if a and b are both true, the result will be true; otherwise, the result will be false. (3) a | | b: a, b all is false, the result is false, otherwise the result is true. (4) A && B: The system will judge A first and then B. If a is false, the system will no longer judge B. (5) a | | b: system will first determine a, judge b again. If a is true, the system will no longer judge B.

Conditional operator

  • Also called “ternary operator, ternary operator”
  • Var a = conditional? Expression 1: expression 2;

Expressions and statements

  • An expression consists of operands and operators. Operands can be variables or constants, and operators are the ones we learned earlier. Each expression produces a value.

  • Statement, simply using a semicolon; A separate line of code. In general, a semicolon corresponds to a statement.

  • A statement is “a JavaScript sentence” and an expression is “part of a sentence.”

Type conversion

  • Type conversion refers to the conversion of “one data type” to “another data type”.

  • For example, if you add a number to a string, JavaScript automatically converts the number to a string and then adds it to another string, such as “2018”+1000 resulting in “20181000” instead of 3018. Where “JavaScript automatically converts numbers to strings” refers to type conversions.

  • In JavaScript, there are two types of conversion:

    • Implicit type conversion
    • Display type conversion

  • Implicit type conversions refer to the type conversions that JavaScript automatically performs. Explicit conversions are type conversions that require us to manually force them with code. We can tell the two ways apart by name.

  • Implicit type conversions are not covered. Focus on display type conversions.

Convert “string” to “number”

  • There are two ways to convert a string to a number.

    • Number()
    • The parseInt () and the parseFloat ()

  • The Number() method converts any “numeric string” to a Number. For example, strings with only numbers like “123” and” 3.1415 “are numeric strings, but “hao123” and “100px” are not.

  • ParseInt () and parseFloat extract numbers from “any string that starts with a number,” where parseInt() extracts integer parts, and parseFloat() extracts not only integer parts but also decimal parts.

var a = Number("2018") + 1000;
document.write(a); / / 3018
document.write("The Number (' 123 ') :" + Number("123") + "<br/>"); / / Number (' 123 ') : 123
document.write("The Number (' 3.1415 ') :" + Number("3.1415") + "<br/>"); / / Number (' 3.1415 ') : 3.1415
document.write("The Number (" hao123") :" + Number("hao123") + "<br/>"); / / Number (" hao123 ") : NaN
document.write("The Number (' 100 px) :" + Number("100px")); / / Number (' 100 px) : NaN
Copy the code
  • NaN refers to “Not a Number,” which shows that the Number() method can only convert pure “numeric strings” to numbers, Not other strings (even if they contain numeric characters).
  • In real development, a lot of times we need to extract numbers like “100px”. How do we do that? This is when parseInt() and parseFloat() should be used instead of Number().
<script>
document.write("The parseInt (' 123 ')." + parseInt("123") + "<br/>");
document.write("The parseInt (' 3.1415 ')." + parseInt("3.1415") + "<br/>");
document.write("The parseInt (" hao123") :" + parseInt("hao123") + "<br/>");
document.write("The parseInt (' 100 px) :" + parseInt("100px"));
/* parseInt('123') : 123 parseInt('hao123') : 3 parseInt('hao123') : NaN parseInt('100 ') : 100 */
</script>
Copy the code
  • As you can see from this example, parseInt() evaluates from left to right. If the first character is a number, it continues to evaluate until a non-number (decimal point is also non-number) is present. If the first character is non-numeric, NaN is returned directly.
  • But the first character is a plus (+) or a minus (-), which is not a number, and parseInt() can also be converted.
<script>
document.write("The parseFloat (' 123 ')." + parseFloat("123") + "<br/>");
document.write("The parseFloat (' 3.1415 ')." + parseFloat("3.1415") + "<br/>");
document.write("The parseFloat (" hao123") :" + parseFloat("hao123") + "<br/>");
document.write("The parseFloat (' 100 px) :" + parseFloat("100px"));

/* parseFloat('123') : 123 parseFloat('3.1415') : 3.1415 parseFloat('hao123') : NaN parseFloat('100px') : 100 */
</script>
Copy the code

Convert “number” to “string”

  • There are also two ways to convert numbers to strings in JavaScript.

    • Add to the empty string
    • toString()

  • In practice, if we want to convert numbers to strings, we rarely use the toString() method, and more often use the implicit type conversion method (that is, add to a string directly).

Escape character

  • Escaped characters are characters that cannot be displayed in the browser by default, but can be escaped characters instead.

  • ‘English single quotation marks

  • “English double quotation marks

  • \ n a newline character

  • Js escape a lot of characters, remember the above three can be.

  • Note: There are two cases for string newlines.

    • If document.write() is used, use:
    • If it is in alert(), then: \n should be used

annotation

  • Single-line comment //
  • Multi-line comments /* content */