JavaScript入门1

JavaScript语句,标识符

语句

JavaScript程序的单位是行(line),也就是一行一行的执行。一般情况下,每一行就是一个语句。语句以分号结尾,一个分号就表示一个语句结束。

var num = 10;

标识符

标识符值得是用来识别各种值的合法名称。最常见的标识符就是变量名。

标识符由字母,美元符号($),下划线(_)和数字组成,其中数字不能开头。中文是合法的标识符,可以用作变量名(不推荐)。

JavaScript保留关键字

JavaScript有一些保留字,不能用作标识符,如:

abstract,arguments,await,boolean,break,byte,case,catch,char,class,const,continue,debugger,default,delete,do,double,else,enum,export,extends,false,final,finally,float,for,function,goto,if,implements,import,in,instanceof,int,interface,let,long,native,new,null,package,private,protected,public,return,short,static,super,switch,synchronized,this,throw,throws,transient,true,try,typeof,var,void,volatile,while,with,yield

变量

变量的重新赋值

var num = 10;
num = 20;

变量提升

JavaScript引擎的工作方式是先解析代码,获取所有被声明的变量,然后再一行一行地运行。这造成的结果就是,所有的变量的声明语句都会被提升到代码的头部,这就叫做变量提升。

console.log()为打印,打印的结果可以在浏览器检查中的console(控制台)中查看。

var num = 10;
console.log(num);

打印结果为10。

console.log(num);
var num = 10;

打印结果为undefined,不会报错。

上述代码在浏览器中运行如下代码运行:

var num;
console.log(num);
num = 10;

这就为变量提升。

JavaScript引入到文件

嵌入到HTML文件中

使用<script>标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        console.log(num);
        var num = 10;
    </script>
</body>
</html>

引入本地独立JS文件

单独创建JS文件,在HTML文件中引用,JS内容在JS文件中书写。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script src="./Lunar.js"></script>
</body>
</html>

引入网络来源文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/3.3.4/vue.cjs.js"></script>
</head>
<body>
   
</body>
</html>

JavaScript的注释与输出方式

注释

源码中注释是不憋引擎所解释的,他的作用是对代码进行解释。JavaScript提供了两种注释的写法:一种单行注释,用//;第二种是多行注释,用/* . . .*/。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        var num = 10;
        console.log(num);//打印num的值

        /*console.log(num);
        var num = 10;*/
    </script>
</body>
</html>

输出方式

1.用弹出框将内容弹出

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        var num = 10;
        alert(num);
    </script>
</body>
</html>

 2.将内容显示在页面上

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        var num = 10;
        document.write(num);
    </script>
</body>
</html>

3.在控制台中显示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        var num = 10;
       console.log(num);
    </script>
</body>
</html>

数据类型

JavaScript语言的每一个值,都属于某一种数据类型。JavaScript的数据类型共六种。(ES6新增了Symbol类型和Biglnt类型)

数据类型分类

原始类型(基础类型):

数值,字符串,布尔值

    <script>
        //数值类型
        var num = 10;
       //字符串类型
       var name = "abc";
       var name = 'abc';
       //布尔类型
       var flag = true;
       var falg = false;
    </script>

合成类型(复合类型):

对象:因为一个对象往往是多个原始类型的值合成,可以看作是一个存放各种值的容器

   <script>
        var user = {
            num : 10,
            name: "abc",
            flag: true
        }
    </script>

underfined和null一般看成两个特殊值,underfined一般代表数值为空,null一般代表对象为空。

运算符

typeof运算符

用于判断数据类型(常用于判断基础数据类型)

数值返回number,字符串返回string,布尔值返回boolean

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        //数值类型
        var num = 10;
       //字符串类型
       var name = "abc";
       //布尔类型
       var flag = true;
       console.log(typeof num);
       console.log(typeof name);
       console.log(typeof flag);
    </script>
</body>
</html>

判断其他数据类型可能都为object,无法准确判断。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        var user = {}
       console.log(typeof user);

       console.log(typeof []);//数组的数据类型
    </script>
</body>
</html>

算数运算符

加减乘除

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
       var num1 = 20;
       var num2 = 10;
       console.log(num1+num2);
       console.log(num1-num2);
       console.log(num1*num2);
       console.log(num1/num2);

    </script>
</body>
</html>

余数运算符

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
       var num1 = 20;
       var num2 = 3;
       console.log(num1%num2);
    </script>
</body>
</html>

自增,自减运算符

自增自减运算符是一元运算符,只需要一个运算子。他们的作用是将运算子首先转换为数值,然后加上1或减去1

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
       var num1 = 2;
       var num2 = 2;
       console.log(++num1);
       console.log(--num2);
    </script>
</body>
</html>

自增和自减运算符有一个需要注意的地方,就是放在变量之后,会先返回变量操作前的值,在进行自增或者自减操作;放在便量之前会先进行自增或者自减操作,在返回操作后的值。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
       var num1 = 2;
       console.log(++num1);//3
       console.log(num1++);//3
       console.log(num1)//4
    </script>
</body>
</html>

赋值运算符

赋值运算符用于给变量赋值,最常见的就是等号(=)

运算符表达式
=赋值运算符
+=x+=y等同于x=x+y
-=x-=y等同于x=x-y
*=x*=y等同于x=x*y
/=x/=y等同于x=x/y
%=x%=y等同于x=x%y

比较运算符

比较运算符用于比较两个值的大小,然后返回一个布尔值。

比较运算符描述
<小于运算符
>大于运算符
<=小于等于运算符
>=大于等于运算符
==等于运算符
===严格等于运算符
!=不相等运算符
!==严格不相等运算符

严格比较:数值本身是否相等,类型本身是否相等

布尔运算符

取反运算符

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
       var flag = true;
       console.log(!flag);
    </script>
</body>
</html>

非布尔值取反

以下六个值取反后为true,其他为false

underfined,null,false,0,NaN,空字符串(")

且运算符(&&)

多个条件都要满足

console.log(10 < 20 && 10 > 5);//true

或运算符(||)

满足一个条件即可

console.log(10 < 20 || 10 < 5);//true

条件语句

if语句

if结构先判断一个表达式的布尔值,然后根据布尔值的真伪执行不同的语句。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
       var num = 3;
       if(num==3){
        console.log(++num);
       }
    </script>
</body>
</html>

if...else语句

if代码块后面,还可以跟一个else代码块,表示不满足条件时,所要执行的语句。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
       var num = 3;
       if(num==2){
        console.log(++num);
       }
       else{
        console.log(--num);
       }
    </script>
</body>
</html>

switch语句

多个if...else连在一起使用时,可以转换为更加方便的switch语句。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        var num = 3;
        switch (num) {
            case 1:
                console.log("苹果");
                break;
            case 2:
                console.log("香蕉");
                break;
            case 3:
                console.log("梨");
                break;
            default:
                console.log("草莓");
        }
    </script>
</body>

</html>

三元运算符(三目运算符)

三元运算符可以视为简写的if...else语句

(条件) ? 表达式1 : 表达式2

如果条件为真,则执行表达式1,反之执行表达式2.

循环语句

for循环语句

for(初始化表达式; 条件; 迭代因子){
        语句
}
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        var sum = 0;
        for(var num = 0;num < 3; num++){
            sum++
        }
        console.log(sum);
    </script>
</body>

</html>

while循环

while语句包括一个循环条件和一段代码块,只要条件为真,就会不断循环执行代码块。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        var sum = 0;
       while(sum<5){
        sum++;
       }
        console.log(sum);
    </script>
</body>

</html>

break语句和continue语句

两者都有跳转的作用。

break

break语句用于跳出代码块或循环

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        var sum = 0;
        for(var num = 0;num < 5; num++){
            sum++;
            if(sum==3){
                break;
            }
        }
        console.log(sum);
    </script>
</body>

</html>

 

continue

用于立即停止本轮循环,返回循环结构的头部,开始下一轮循环。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        var sum = 0;
        for(var num = 0;num < 5; num++){
            sum++;
            if(sum==3){
               continue;
            }
        }
        console.log(sum);
    </script>
</body>

</html>

字符串

字符串就是零个或多个排在一起的字符,放在单引号或双引号之中,单引号和双引号是可以互相嵌套的。

如果在单引号字符串内部使用单引号,就必须在内部的单引号前面加上反斜杠用来转移,双引号也是如此。

如果长字符串必须分成多行,可以在每一行的尾部使用反斜杠。

length属性

length属性返回字符串长度,该属性是无法改变的。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        var sum = "asdfghhj";
        console.log(sum.length);
    </script>
</body>

</html>

字符串方法

charAt()方法

用于返回指定位置的字符,参数从0开始编号

var s = new string ('asdfghjkl')
s.charAt(1)//"s"

如果参数为负数或者大于等于字符串的常度,返回空字符串 ""

concat()方法

用于连接两个字符串,返回一个新字符串,不改变原字符串。该方法可以接受多个参数,如果参数不是字符串该方法会将其先转换成字符串再连接。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        var s1 = 'abc';
        var s2 = 'def';
        console.log(s1.concat(s2));//abcdef
    </script>
</body>

</html>

substring()方法

用于从原字符串取出字符串并返回,不改变原字符串,第一个参数表示子字符串的开始位置,第二个位置表示结束位置(返回结果不含该位置)。

如果第二个参数省略,则表示子字符串一直到原字符串的结束。

如果第一个参数大于第二个参数,该方法会自动更换位置。

如果参数为负数,会自动将负数转为零。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        var s1 = 'abcdef';
        console.log(s1.substring(1,4));//bcd
    </script>
</body>

</html>

substr()方法

用法与substring相同,该方法的第一个参数是字符串的开始位置(从零开始计算),第二个参数是子字符串的长度。其他与substring相同。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        var s1 = 'abcdef';
        console.log(s1.substr(1,4));//bcde
    </script>
</body>

</html>

indexOf()方法

用于确定一个字符串在另一个字符串中第一次出现的位置(从零开始计数),返回结果是最开始的位置。如果返回-1,则表示不必配。

该方法还可以接受第二个参数,表示从该位置开始向后匹配。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        var s1 = 'abcdefc';
        console.log(s1.indexOf('c'));//2
        console.log(s1.indexOf('c',3));//6
    </script>
</body>

</html>

trim()方法

用于去除字符串两端的空格,制表符(\t,\v),换行符(\n)和回车符(\r),返回一个新字符串,不改变原字符串.

ES6扩展方法,trimstart()方法单独去除头部空格,trimend()单独去除尾部空格。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        var s1 = '    abcdefc   ';
        console.log(s1.trim());
    </script>
</body>

</html>

split()方法

用于按照给定规则分割字符串,返回一个由分割出来的子字符串组成的数组。

还可以接受第二个参数,限定返回数组的最大成员数。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        var s1 = 'ab|cd|ef';
        console.log(s1.split('|'));//"ab","cd","ef"
        console.log(s1.split('|',2));//"ab","cd"
    </script>
</body>

</html>

数组

数组是按次序排列的一组值。每个值的位置都有编号(从零开始),整个数组用方括号表示

数组的定义:

var arr = [];

数组中可以放任何数据类型的数据

var arr = [1, 'a', true, [1,2,3,] ];

数组的遍历

可以使用for循环或while循环实现遍历。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

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

       var num = 0;
        while (num < 5) {
            console.log(arr[num]);
            num++;
        }
    </script>
</body>

</html>

数组方法

Array.isArray()方法

用于判断参数是否为数组,是则返回true,不是返回false。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        var arr = [1, 2, 3, 4, 5];
        console.log(Array.isArray(arr));//true
    </script>
</body>

</html>

push()方法

用于在数组的末端添加一个或多个元素,并返回添加新元素后的数组长度。该方法会改变原数组。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

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

</html>

pop()方法

用于删除数组的最后一个元素,并返回该元素,会改变原数组。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

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

</html>

shift()方法

用于删除数组的第一个元素,并返回该元素,会改变原数组。

可以通过遍历清空一个数组。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

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

</html>

unshift()方法

用于在数组的第一个位置添加元素,并返回添加新元素后的数组长度。该方法会改变原数组。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

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

</html>

join方法

用于以指定的参数作为分隔符,将所有成员连接为一个字符串返回。如果不提供参数,默认用逗号隔开。如果数组成员是underfined或null或空位,会被转成空字符串。数组的join配合字符串的split可以实现数组与字符串的互换。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        var arr = ["hello","world"];
        var result = arr.join(" ");
        console.log(result);
        console.log(result.split(" "));
    </script>
</body>

</html>

concat()方法

用于多个数组的合并,它将新数组成员,添加到原数组成员的后部,然后返回一个新数组,原数组不变。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        var arr = [1,2,3];
        var arr1 = [4,5];
        var arr2 = [6,7];
        console.log(arr.concat(arr1,arr2));
    </script>
</body>

</html>

reverse()方法

用于颠倒排列数组元素,返回改变后的数组,该方法改变原数组。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        var arr = [1,2,3];
        console.log(arr.reverse());
    </script>
</body>

</html>

indexof()方法

用于返回给定元素在数组中第一次出现的位置,没有出现返回-1;也可以接受第二个参数,表示搜索的开始位置。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        var arr = [1,2,3];
        console.log(arr.indexOf(2));
    </script>
</body>

</html>

函数

函数的声明

function命令:function命令声明的代码块,就是一个函数。function命令后面是函数名,函数名后面是一对圆括号,里面是传入的参数。函数体放在大括号里。

function print(s){
            console.log(s);
        }

函数的提升

JavaScript引擎将函数名视为同变量名,所以采用function命令声明函数时,整个函数会像变量声明一样,被提升到代码头部。(先调用后创建,也没有问题)

print(10);

function print(s){
            console.log(s);
        }

函数的参数

函数运行时有的需要提供外部数据,不同的外部数据会得到不同的结果,这种外部数据叫做参数。

function print(s){
            console.log(s);
        }

print(10);
print(20);
print(30);

函数的返回值

JavaScript函数提供两个接口实现与外界的交互,其中参数作为入口,接受外界信息;返回值作为出口,把运算结果反馈给外界。

function getname(name){
    return name;
}

var myname = getname("abc");
console.log(myname);

  • 23
    点赞
  • 21
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值