js basics

HTML and CSS are descriptive languages
js belongs to script, programming language
js code executes JS code through the built-in JavaScript engine (interpret each sentence of source code line by line)

writing position

Inline
embedded
external

hot key

note

Single line: CTRL+/
Multiple lines: Shift+Alt+A
Shortcut keys for modifying multi-line comments: Ctrl+Shift+/

Format: alt+shift+f

grammar basics

input Output

<script>
        //这是一个输入框
        prompt('请输入您的年龄');
        // alert 弹出警示框 输出的 展示给用户的
        alert('计算的结果是');
		// console 控制台输出 给程序员测试用
        console('程序员看')
</script>

variable

<script>
        //1.声明了一个age的变量
        var age;
        //2.赋值 把值存入这个变量中
        age = 18;
        //3.输出结果
        console.log(age);
        //4. 变量的初始化
        var myname = 'ouyang';
        console.log(myname);
    </script>

variable popup username

<script>
        //1.用户输入姓名 存储到一个myname的变量里面
        var myname = prompt('请输入您的名字');
        //2.输出这个用户名
        alert(myname);
    </script>

syntax extension

<script>
        //1.更新变量
        var myname = 'ou';
        console.log(myname);
        myname = 'yang';
        console.log(myname);
        //2.声明多个变量
        /* var age = 18;
        var address = '思维';
        var gz = 2000; */
        var age = 18,
            address = '思维',
            gz = 2000;
        //3.声明变量的特殊情况
        //3.1只声明不赋值 结果？
        var sex;
        console.log(sex);//undefined
        //3.2不声明 不赋值，直接使用会报错
        console.log(tel);
        //3.3 不声明直接赋值使用
        qq = 110;
        console.log(qq);
    </script>

//命名规则：尽量不使用name作为变量名

type of data

Simple data types include Number Boolean String Undefined Null

Numeric Number

Add 0 in front of js octal and 0x in front of hexadecimal

//数值的最大值和最小值
alert(Number.Max_VALUE);
alert(Number.MIN_VALUE);

three special values for numbers

//无穷大
console.log(Number.MAX_VALUE * 2);// Infinity 无穷小
//无穷小
console.log(Number.MIN_VALUE * 2);// -Infinity 无穷大
//非数字
console.log('ou' - 100); //NaN

isNaN()

Used to determine whether a variable is a non-numeric type, return true or false

string type String

nested string quotes

*** Outer single inner double, outer double inner single ***

string escape character

Newline: \n
Indentation: \t

string concatenation

//1.获取字符串长度 length
var str = 'my name is kiki';
console.log(str.length);//15
//2.字符串的拼接 + 
console.log('你是' + '谁');//字符串的 你是谁
//3.字符串拼接加强
var age = 18;
console.log('我'+age+'岁');
//"引引加加"

show age case

var age = prompt('请输入你的年龄');
var str = '您今年已经'+age+'岁了';
alert(str);

Boolean

true participates in the addition operation when it is 1
False participates in the addition operation when it is 0
If a variable declaration is not assigned a value, it is undefined undefined data type

<script>
var str;
console.log(str);//undefined
var variable = undefined;
console.log(variable + 'pink');//undefinedpink
console.log(variable + 1);//NaN 
//null 空值
        var space = null;
        console.log(space + 'pink');//nullpink
        console.log(space + 1);//1
    </script>

typeof detects variable data type

<script>
        var num = 10;
        console.log(typeof num);//number
        var str = 'pink';
        console.log(typeof str);//string
        var flag = true;
        console.log(typeof flag);//boolean
        var vari = undefined;
        console.log(typeof vari);//undefined
        var timer = null;
        console.log(typeof timer);//object
//prompt 取过来的值是字符型的
</script>

data type conversion

convert to char

<script>
        //1.把数字型转换为字符串型 变量.toString()
        var num = 10;
        var str = num.toString();
        console.log(str);
        console.log(typeof str);
        //2.利用 String(变量)
        console.log(String(num));
        //3.利用+拼接字符串的方法实现转换效果 隐式转换
        console.log(num + '');
    </script>

convert to numeric

<script>
        var age = prompt('请输入你的年龄');
        //1.parseInt(变量) 可以把字符型的转换为整数的数字型
        console.log(parseInt(age));
        console.log(parseInt('3.14'));//3 取整
        console.log(parseInt('120px'));//120
        console.log(parseInt('rem120px'));//NaN
        //2.parseFloat(变量) 可以把字符型的转换为数字型 得到的是小数 浮点数
        console.log(parseFloat('3.14'));//3.14
        console.log(parseFloat('120px'));//120
        console.log(parseFloat('rem120px'));//NaN
		//3.利用Number(变量)
        var str = '123';
        console.log(Number(str));
        console.log(Number('12'));
        //4.利用了算数运算 - * / 隐式转换
        console.log('12' - 0);;//12
        console.log('123' - '120');//3
        console.log('123' * 1);//123
    </script>

Calculate age case

    <script>
        var year = prompt('请输入你的出生年份');
        var age = 2022 - year;
        alert('您今年已经'+age+'岁了');
    </script>

Simple Adder Example

<script>
	var num1 = prompt('请你输入第一个值：');
    var num2 = prompt('请你输入第二个值：');
    var result = parseFloat(num1) + parseFloat(num2);
    alert('结果为：'+result);
</script>

Convert to Boolean

boolean()

operator

cycle

continue

Exit this cycle and enter the next cycle

//求100以内，除了能被7整除之外的整数和
<script>
    var sum = 0;
    for(var i = 1; i <= 100; i++){
      
      
        if(i % 7 == 0){
      
      
            continue;
        }
        sum += i;
    }
    console.log(sum);
</script>

break

Immediately break out of the entire loop (end of loop)

array

<script>
        var arr = [1, 2, 3, 4];
        console.log(arr[0]);//1
        for(var i = 0;i < 4; i++){
      
      
            console.log(arr[i]);
        }
        console.log(arr.length);
        for(var i = 0;i < arr.length; i++){
      
      
            console.log(arr[i]);
        }
    </script>

filter array

<script>
       //筛选出数组中大于等于10的元素
        //方法1
        var arr = [2, 3, 6,23, 45, 23, 23, 5];
        var newArr = [];
        var j = 0;
        for(var i = 0;i<arr.length;i++){
      
      
            if(arr[i] >=10){
      
      
                //新数组索引号从开始
                newArr[j] = arr[i];
                j++;
            }
        }
        console.log(newArr);
        //方法2
        var arr = [2, 3, 6,23, 45, 23, 23, 5];
        var newArr = [];
        for(var i = 0;i<arr.length;i++){
      
      
            if(arr[i] >=10){
      
      
                //新数组索引号从开始
                newArr[newArr.length] = arr[i];
            }
        }
        console.log(newArr);
    </script>

flip array

<script>
        //翻转数组
        var arr = ['red', 'aaa', 'blue', 'pink'];
        new newArr = [];
        for(var i = arr.length-1;i>=0;i++){
      
      
            newArr[newArr.length] = arr[i];
        }
        console.log(newArr);
    </script>

Bubble Sort

<script>
        //冒泡排序
        var arr = [6, 2, 1, 8, 2, 9, 3];
        for (var i = 0; i <= arr.length - 1; i++) {
      
      
            //外层循环管趟数
            for (var j = 0; j <= arr.length - i - 1; j++) {
      
      
                //内层循环管每次交换的次数
                if (arr[j] > arr[j + 1]) {
      
      
                    var temp = arr[j];
                    arr[j] = arr[j + 1];
                    arr[j + 1] = temp;
                }
            }
        }
        console.log(arr);
    </script>

function

<script>
        //函数分为两步：声明函数和调用函数
        //1.声明函数
        //function 函数名(){
      
      
            //函数体
        //}
        function sayHi(){
      
      
            console.log('hi--');
        }
        //(1) function声明函数的关键字，全部小写
        //(2) 函数是做某件事情，函数名一般是动词sayHi
        //(3) 函数不调用自己不执行
        //2. 调用函数
        // 函数名
        sayHi();
    </script>

Formal parameter, actual parameter

<script>
//形参、实参
        // function 函数名（形参1，形参2.。。）{//在声明函数的小括号里面是形参（形式上的参数）

        //}
        // 函数名（实参1，实参2.。。）;//在函数调用的小括号里面是实参（实际的参数）
        //形参和实参的执行过程
        function cook(aru){
      
      //形参是接收实参的 are = '土豆' 形参相当于一个变量
            console.log(aru);
        }
        cook('土豆');
        cook('鸡腿');
    //-------------------------------------
    function getSum(num1, num2){
      
      
        console.log(num1 + num2);
    }
    getSum(1, 2);
    //1.如果实参的个数多于形参的个数，会取到形参的个数
    getSum(1, 2, 4);
    //2.如果实参的个数小于形参的个数
    // 形参可以看作是不用声明的变量 num2 是一个变量但没有接受值 结果就是undefined
    getSum(1);//NaN
    //形参个数和实参个数尽量匹配
</script>

return value

<script>
        //1.函数的返回值格式
        /* function 函数名(){
            return 需要返回的结果;
        }
        函数名(); */
        //(1)我们函数只是为了实现某种功能，最终的结果需要返回给函数的调用者函数（）通过return实现的
        //(2)只要函数遇到return就把后面的结果 返回给函数的调用者 函数名() = return 后面的结果
        function getResult(){
      
      
            return 222;
        }
        getResult();//getResult() = 222
        console.log(getResult());

        /* function cook(aru){
            return aru;
        }
        console.log(cook('鸡腿')); */
        //2.求任意两个数的和
        function getSum(num1, num2){
      
      
            return num1 + num2;
        }
        console.log(getSum(1, 2));
    
    //求两个数的最大值
    function getMax(num1, num2){
      
      
        return num1 > num2 ? num1 : num2;
    }
    console.log(getMax(1,5));
    </script>

<script>
        //利用函数求数组[3,6,2,7,223,62,12]的最大数值
        function getArrMax(arr){
      
      
            var max = arr[0];
            for(var i = 1; i < arr.length;i++){
      
      
                if(arr[i] > max){
      
      
                    max = arr[i];
                }
            }
            return max;
        }
        var re = getArrMax([3,6,2,7,223,62,12]);
        console.log(re);
    </script>

arguments

<script>
        //arguements 的使用 只有函数才有arguments对象 而且是每个函数都内置好了这个arguments
        function fu(){
      
      
            console.log(arguments);//里面存储了所有传递过来的参数
            console.log(arguments.length);
            console.log(arguments[2]);
            //可以按照数组的方式遍历arguments
            for(var i = 0; i < arguments.length; i++){
      
      
                console.log(arguments[i]);
            }

        }
        fu(1,2,3);
        //伪数组
        //1. 具有数组的Length属性
        //2. 按照索引的方式进行存储
        //3. 它没有真正数组的一些方法 pop() push() 等等
    </script>

<script>
        // 利用函数求任意个数的最大值
        function getMax() {
      
      //arguments = [1, 2, 3]
            var max = arguments[0];
            for (var i = 1; i < arguments.length; i++) {
      
      
                if (arguments[i] > max) {
      
      
                    max = arguments[i];
                }
            }
            return max;
        }
        console.log(getMax(1, 2, 3));
        console.log(getMax(21, 32, 3, 12, 63));

        //利用函数翻转任意数组 reverse 翻转
        function reverse(arr) {
      
      
            var newArr = [];
            for (var i = arr.length - 1; i >= 0; i--) {
      
      
                newArr[newArr.length] = arr[i];
            }
            return newArr;
        }
        var arr1 = reverse([2, 4, 25, 1, 65]);
        console.log(arr1);
    
    //利用函数冒泡排序 sort 排序
        function sort(arr) {
      
      
            for (var i = 0; i <= arr.length - 1; i++) {
      
      
                for (var j = 0; j <= arr.length - i - 1; j++) {
      
      
                    if (arr[j] > arr[j + 1]) {
      
      
                        var temp = arr[j];
                        arr[j] = arr[j + 1];
                        arr[j + 1] = temp;
                    }
                }
            }
            return arr;
        }
        var arr1 = sort([2, 4, 1, 9]);
        console.log(arr1);
    </script>

There are two ways to declare a function

<script>
    //1.利用函数关键字自定义函数(命名函数)
    function fn(){
      
      
        
    }
    fn();
    //2. 函数表达式(匿名函数)
    // var 变量名 = function() {};
    var fun = function(aru){
      
      
        console.log('我是函数表达式');
        console.log(aru);
    }
    fun('pink');
    //(1) fun是变量名 不是函数名
    //(2) 函数表达式声明方式和声明变量差不多，只不过变量里面存的是值 函数里面存的是函数
    //(3) 函数表达式也可以进行传递参数
</script>

scope

<script>
        //1.JS作用域： 就是代码名字（变量）在某个范围内起作用和效果，目的是为了提高程序的可靠性更重要的是减少命名冲突
        //2.JS的作用域（es6）之前：全局作用域 局部作用域
        //3.全局作用域： 整个script标签 或者是一个单独的js文件
        var num = 10;
        //4.局部作用域
        function fn() {
      
      
            var num = 20;
            console.log(num);
        }
        fn();
    </script>

If inside a function, variables that are not directly assigned are also global variables
Function parameters can also be seen as local variables

<script>
    function fun(){
      
      
        var num1 = 10;//局部
        num2 = 20;//全局
    }
    fun();
</script>

block scope

There is no block-level scope in js
Added block-level scope in es6
Block-level scope {} if{} for{}
java:if(xx){
int number = 10;
}

<script>
    if(3 < 5){
        
        
        var num = 10;
    }
    console.log(num);//也可以调用num
</script>

scope chain

<script>
        //作用域链：内部函数访问外部函数的变量，采取的是链式查找的方式来绝对取哪个值 就近原则
        var num = 10;
        function fn(){
      
      //外部函数
            var num = 20;
            
            function fun(){
      
      //内部函数
                console.log(num);
            }
            fun();
        }
    fn();
    </script>

pre-parsing

The js engine runs js in two steps: pre-parsing code execution

(1) Pre-parsing: the js engine will promote all var and function in js to the front of the current scope

(2) Code execution: execute from top to bottom in the order in which the code is written
Pre-parsing is divided into variable pre-parsing (variable promotion) and function pre-parsing (function promotion)

(1) Variable promotion: it is to promote all variable declarations to the front of the current scope

Assignment operations are not hoisted

(2) Function promotion: it is to promote all function declarations to the front of the current scope

not calling the function

<script>
    console.log(num);//undefined
    var num = 3;
</script>

<script>
    var num = 20;
    function fn(){
      
      
        console.log(num);//undefined
        var num = 10;
        console.log(num);//10
    }
    fn();
    //相当于执行了以下代码
    var num;
    function fn(){
      
      
        var num;
        console.log(num);
        num = 10;
        console.log(num);
    }
    num = 20;
    fun();
</script>

<script>
    fn();
    console.log(a);//报错
    console.log(b);//9
    console.log(c);//9
    function f1(){
      
      
        var a = b = c = 9;
        //相当于 var a = 9; b = 9; c = 9; b和c直接赋值，没有var声明，当全局变量看
        //集体声明 var a = 9, b = 9, c = 9;
        console.log(a);//9
        console.log(b);//9
        console.log(c);//9
    }
    
</script>

object

In js, an object is an unordered collection of related properties and methods, and all things are objects, such as strings, numbers, arrays, functions, etc.

Objects are made up of properties and methods

Attribute: the characteristics of things, represented by attributes in objects (common nouns)
Method: the behavior of a thing, represented by a method in an object (common verb)

Three ways to create objects

1. Create objects using object literals

 <script>
        //利用对象字面量创建对象{}
        //var obj = {};//创建了一个空白的对象
        var obj = {
      
      
            name: 'sh',
            age : 10,
            sex:'男',
            sayHi: function(){
      
      
                console.log('hi_');
            }
        }
        //(1)里面的属性或者方法我们采取键值对的形式 键 属性名：值 属性值
        //(2)多个属性或者方法中间用逗号隔开
        //(3)方法冒号后面跟的是匿名函数
        //2.使用对象
        //(1).调用对象的属性 我们采取 对象名.属性名   . 理解为 的
        console.log(obj.name);
        //(2).调用属性还有一种方法 对象名['属性名']
        console.log(obj['age']);
        //(3).调用对象的方法sayHi  对象名.方法名()
        obj.sayHi();
    </script>

The difference between variables, properties, functions, and methods

Variables and properties are used to store data
Variables are declared separately and assignments exist alone
Attributes in the object do not need to declare the object. Attributes
Functions and methods are to achieve a certain function to do something
The function is declared separately and the called function name () exists alone
When the method is called in the object object. method ()

2. Create an object with new object

<script>
//利用new Object 创建对象
        var obj = new Object();//创建了一个空的对象
        obj.name = 'zhang';
        obj.age = 23;
        obj.sex = '男';
        obj.sayHi = function(){
      
      
            console.log('hi-');
        }
        //(1)我们是利用 等号赋值的方法 添加对象的属性和方法
        //(2)每个属性和方法之间用分号结束
        console.log(obj.name);
        console.log(obj['sex']);
        obj.sayHi();
</script>

3. Create objects using constructors

<script>
//利用构造函数创建对象
        //前两种创建对象的方式一次只能创建一个对象
        //利用构造函数：里面封装的是对象，不是普通代码
        //就是把我们对象中相同的属性和方法抽象出来封装到函数里面

        //格式
        /* function 构造函数名(){
            this.属性 = 值;
            this.方法 = function(){}
        }
        new 构造方法名(); */
        function Star(uname,age,sex){
      
      
            this.name = uname;
            this.age = age;
            this.sex = sex;
            this.song = function(song){
      
      
                console.log(song);
            }
        }
        var ldh = new Star('刘德华',18,'男');//调用函数返回的是一个对象
        //console.log(typeof ldh);
        console.log(ldh.name);
        console.log(ldh['sex']);
        ldh.song('冰雨');
        //1.构造函数名字首字母大写
        //2.构造函数不需要return 就可以返回结果
        //3.调用构造函数 必须使用new
        //4.只要new Star()调用函数就创建一个对象 ldh{
      
      
        //5.属性和方法前加this
    </script>

The constructor generally refers to a certain class, similar to the class class in java
object refers to a specific thing
The process of creating an object using a constructor is called object instantiation

The execution process of new:

Create a new empty object in memory
Let this point to this new object
Execute the code in the constructor and add properties and methods to the new object
Return this new object - so no return inside the constructor

traverse objects

<script>
        //遍历对象
        var obj = {
      
      
            name: 'pink',
            age: 18,
            sex: '男',
            fn:function(){
      
      }
        }
        //for in 遍历对象
        /* for (遍历 in 对象){

        } */
        for(var k in obj){
      
      
            console.log(k);//k 变量，输出 得到的是属性名
            console.log(obj[k]);//obj[k] 得到的是属性值
        }
        //我们使用的for in 里面的变量 一般用k 或者key
    </script>

built-in object

Objects in js are divided into 3 categories: custom objects, built-in objects, browser objects (unique to js)
Built-in objects refer to some objects that come with js. These objects are used by developers and provide some common or basic and necessary functions.
The biggest advantage of built-in objects is to help us develop quickly
Math Date Array String…

【Basic JavaScript】