Introduction to JavaScript
JavaScript is a dynamic weakly typed interpreted programming language, which enhances the dynamic effect of the page and realizes the real-time dynamic interaction between the page and the user.
JavaScript is composed of three parts: ECMAScript, DOM, BOM
ECMAScript is defined by ECMA-262 and provides core language features (ECMA is the European Computer Manufacturers Association)
DOM (Document Object Model) document object model, providing methods and interfaces for accessing and manipulating web page content
BOM (Browser Object Model) browser object model, providing methods and interfaces for interacting with the browser
1. Three ways to use JS and annotations
// (1) Directly in the HTML tag, use the time attribute directly to call the JS code <button onclick="alert('Click me')">Click me! </button> // (2) Use the script tag to insert JS code anywhere on the page. <script type="text/javascript"> alert( 123 ) </script> // (3) Import external JS files. Scripts can be saved to external files. External files often contain code used by multiple web pages. The file extension for external JavaScript files is .js. <script src="01.js" type="text/javascript"></script>
Notice:
1. JS code can be used anywhere on the page, but the placement of the code will affect the order of JS execution.
2. The script tag that introduces the external JS file cannot contain any JS code.
JS comments
// Single-line comment Ctrl+/ /* Multi-line comment Ctrl+Shift+/ */
Basics in JS
1. Variables in JS:
(1) Declaration of variables: Use the var keyword to declare. var num = 1;
(2) Variables can be assigned directly without declaring them: num = "hahahaha";
(3) Declare multiple statements with one line of code: var a=1,b=1,c. where b is undefined.
Difference: Variables declared with var are local variables and are only valid in the current scope (equivalent to local variables). Variables declared without var are global variables by default and can be used in the entire JS file.
2. Notes on variable declaration in JS
(1) The only keyword for declaring variables in JS is var, and the type of the variable depends on the type of assignment. If it is declared and not assigned a value, it is of type undefined.
(2) The data type of the same variable in JS can be modified in multiple assignments. var a=1; a="dddd"
(3) Variables can be declared using var or directly assigned. (The scope of a var declaration is a local variable)
(4) In JS, a variable can be declared with var multiple times, and the subsequent declaration is equivalent to direct assignment, without any egg use.
(5) JS variables are case-sensitive, uppercase and lowercase are not the same variable.
3. Data Types in JS
(1) undefined: A variable declared with var but not assigned a value.
(2)null: Indicates an empty reference.
(3) Boolean: true or false
(4) Number: Numerical types in JS include integers and floating-point types.
(5) String: String
(6) Object: object
4. Commonly used numerical functions
(1)isNaN：用于检测一个变量是不是非数值(Not a Number)。在检测时会先调用Number函数，尝试将变量转换成数值类型，如果最终结果能够转为数值，则不是NaN。
(2)Number函数：将各种数据类型转换成数值类型。
>>> Undefined：无法转换，返回NaN。
>>> null：转为0
>>> boolean：true转为1，false转为0
>>> String：如果字符串是纯数值字符串，则可以转换；如果字符串包含非数值字符，则不能转换,返回NaN。如果是空字符串转为0。
(3)parseInt()：将字符串转换成数值类型。
>>> 如果是空字符串，不能转。""-->NaN
>>> 如果是纯数值类型字符串，可以进行转换，且小数点直接舍去不保留。"12.3"-->12
>>> 如果字符串包含非数值字符，则将非数值字符前边的整数进行转换。"123a"-->123 ; "a123"-->NaN
(4)parseFloat：转换机制与parseInt相同。
不同的是，转换数值字符串时，如果字符串为小数则可以保留小数点，整数型没有小数点。"123"-->123 "123.3"-->123.3
(5)typeOf()：检测一个变量的数值类型
字符串-->String 数值-->Number true/false-->Boolean 未定义-->undefind 对象/null-->object 函数-->function
5.JS中常用的输入输出语句
(1)alert():弹窗输出
(2)prompt(a,b)：弹窗输入。接收两个部分：a--提示内容；b--输入框的默认文本。（两部分都可以省略）。输入的内容默认都是字符串。
(3)document.write()：在浏览器页面中打印输出。
(4)console.log()：浏览器控制台打印。
6.JS中的运算符（与Java类似，这里就只讲述不同的地方）
与Java不同的：
(1)除号： 无论符号两边是整数还是小数，除完后都将按照实际结果保留小数。（22%10=2.2）
(2)===：绝对等于（数值和数据类型必须相同），而==至判断两边数据是否相同，并不关心两边的数据类型是否相同。
(3)& 和 | ：只能进行按位运算，如果两边不是数值类型，将转换成数值后在运算。
(4)&& 和 ||：只能进行逻辑运算。
JS中的if
(1)boolean ： true为真，false为假
(2)数值类型：0为假，非0为真
(3)字符串类型：空字符串为假，非空字符串为真
(4)null/undefined/NaN：全为假
(5)Object：对象全为真
JS中的swich：swicht(各种数据类型)，比对时采用 === 进行判断，要求数据类型完全想等。
函数的声明与调用
1.JS中函数声明的格式
function 函数名(参数1,参数2,.....){ //函数体代码 return 返回值； }
2.函数的调用：
(1)直接调用： 函数名(参数1,参数2,.....)
(2)通过事件调用：在HTML标签中，通过事件属性进行调用。
注意事项：
(1)函数中有没有返回值，只取决于函数有没有return，无需可以声明。在JS中，有返回值可以不接收；没有返回值，也可以接收，结果为Undefined。
(2)JS中函数的形参列表与实参列表没有任何关联，也就是说有参数可以不赋值，没有参数也可以赋值。未赋值的参数是undefined。函数的实际参数列表取决于实参列表。
(3)JS中函数是变量的唯一作用域。（除了函数，其他方式都没有作用域，也就是都是全局变量）。函数的形参属于局部变量。
(4)函数的声明与调用语句没有先后之分，即，可以先写调用语句，在声明函数。
3.自执行函数
(1)!function(){}();//开头使用！表明这是自执行函数。 (2)(function(){}())//用()将匿名函数声明与调用包裹。 (3)(function(){})()//用()将匿名函数声明语句进行包
注意：函数的调用语句必须放在声明语句之后。
[JS代码的执行顺序]
JS的代码执行分为两个阶段：检查编译阶段和代码执行阶段。
检查编译阶段：主要检查语法错误， 进行变量的声明、函数的声明等声明操作。
代码执行阶段：变量的赋值、函数的调用等执行语句，属于代码执行阶段。
4.arguments对象
1、作用：用于保存函数的所有实参。
>>>当函数存在实参时，可以使用数组下标访问函数的所有实参。alert（arguments[6]）
2、arguments中的元素的个数取决于实参列表，与形参个数无关。
3、一旦函数调用时，传入了实参，那么对应位数的形参，将于arguments对应的元素进行绑定，修改形参，arguments中对应的元素将被改掉，反之也成立。但是，如果某一位置没有传入形参，则形参和arguments将不进行关联。
arguments.callee()： 指向当前函数的引用，用于在函数中使用递归调用自身。