前端第10天

来地球玩啊

已于 2023-04-13 21:39:21 修改

阅读量156

点赞数

文章标签：前端 javascript vue.js

于 2023-02-18 19:54:14 首次发布

本文链接：https://blog.csdn.net/l_11789/article/details/129103906

版权

ECMAScript-JavaScript基础语法

js的组成：ECMAScript-JavaScript语法 DOM-页面文档对象 BOM-浏览器对象模型

一.JavaScript初识

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 
        2.内嵌式的js 
        <script></script> 在这里写js代码
    -->
    <script>
        alert('内嵌式的js')
    </script>

    <!-- 
        3.外部式的js
        在外新建一个.js文件并且引入 src
        中间不能放东西
        双标签：<script src="my.js"></script>
     -->
    <script src="my.js"></script>
</head>
<body>
    <!-- 
        1.行内式的js 
        通过给onclick属性赋值来进行页面显示
    -->
    <input type="button" value="点击" onclick="alert('行内式的js')">
</body>
</html>

alert('外部式的js')

// 单行注释 ctrl + /

/* 多行注释 shift + alt + a
多行注释 */

二.JavaScript输入输出语句

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JavaScript输入输出语句</title>

    <script>
        // prompt 输入框
        prompt('请输入你的年龄');
        // alert 弹出框
        alert('弹出框')
        // console.log 控制台输出
        console.log('我是f12能看到的')
    </script>
</head>
<body>
    
</body>
</html>

三.变量

1.变量的使用

（variable=变量）用 var 变量名：声明一个变量

同一个变量名被赋值两次，第一次的值会被覆盖掉

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>变量的使用</title>
    <script>
        //变量的定义
        var x;
        //变量的初始化
        var i = 10;
        //声明多个变量 变量之间用逗号隔开 最后结尾用分号。 
        var age = 18,
            adress = '地球',
            sex = 12;
        x = prompt('请输入你的年龄：');
        console.log('我的年龄是：' + x);
        //只声明 不赋值 console.log会显示undefined
        //没声明 没赋值 console.log会报错
        //不声明 直接赋值 console.log正常显示 不会报错
    </script>
</head>

<body>
    
</body>
</html>

2.变量的命名规范

1.不能用关键字（var for while if）保留字

2.严格区分大小写中间不能有空格

3.不能以数字开头

4.变量名必须有意义见名知意

5.遵循驼峰式命名首字母小写后面单词的首字母要大写例：myFirstName

6.可以用_ 和 $符号开头

PS：有红色波浪线不合格命名规范

3.案例-交换变量

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>案例-交换变量</title>
    <script>
        var temp;
        var apple1 = '青苹果';
        var apple2 = '红苹果';
        temp = apple1;
        apple1 = apple2;
        apple2 = temp;
        console.log('apple1=' + apple1, 'apple2=' + apple2);
    </script>
</head>
<body>
    
</body>
</html>

4.变量总结

因为我们要存放数据所以需要变量。变量就是一个容器用来存放数据的方便以后我们访问这个数据。变量是内存中的一块空间。使用变量的时候要声明变量然后赋值声明变量并且赋值叫变量的初始化。变量名尽量做到见名知意。还有驼峰式命名，还要会区分变量名命名是否合法！

四.数据类型

1.数据类型的简介

根据数据占据不同的空间大小分为不同的数据类型

JavaScript是弱类型语言 在运行的时候根据等号右边的值才会明确是什么数据类型

变量的类型是可以变化的！！

var str = 10;//变量属于数值型
str = 'tyx';//变量属于字符串型

分为两大类：

简单数据类型（基本数据类型）

基本数据类型	说明	默认值
Number	数字型包含整型值和浮点型值1和0.1	0
Boolean	布尔值类型 true和false等价于 1 和 0	false
String	字符串类型要带引号！！	“”
Undefined	声明了变量名但是没有赋值此时就是undefined	undefined
Null	var a = null；此时变量a的值为空值	null

isNaN(): 用来判断非数字并且返回一个值如果是数字返回false ，不是数字返回true

字符串转译字符: 要写到引号里面 ① \n:换行 ② \b:空格 ③ \t:缩进

检测获取字符串的长度：变量名.length()

字符串的拼接：‘’ + ‘’ 或者 ‘’ + 15 最后都会转换为字符串

复杂数据类型：Object

2.获取变量数据类型

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>获取变量数据类型</title>
    <script>
        //typeof 检测变量属于那个数据类型
        var num = 0;
        console.log(typeof num); //number
        var str = 'tyx';
        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

        //根据F12的颜色也可以判断 是什么类型
        console.log(num);
        console.log(str);
        console.log(flag);
        console.log(vari);
        console.log(timer);
    </script>
</head>
<body>
    
</body>
</html>

3.数据类型的转换

转换为字符串

方式	说明	案例
toString()	转成字符串	var num = 1; alert(num.toString());
String	转换为字符串	var num = 1; alert(String(num));
加拼接字符串	和字符串拼接	var num = 1; alert(num+‘’);

转换为数字型

方式	说明	案例
parseInt()	字符型转换为数字型得到的是整数小数会向下取整直接会去掉单位	parseInt(‘78’)
parseFloat()	字符型转换为数字型得到的是浮点数直接会去掉单位	parseFloat(‘18.21’)
Number()	字符型转换为数字型	Number(‘12’)
隐式转换	利用算数运算符(- / *)转换为数值型	‘12’ - 0

转换为Boolean型

方式	说明	案例
Boolean()函数	其他类型转换为布尔值	Boolean(‘true’);

ps:代表空的否定的会被转换为false 如’',0,NaN,null,undefined。其余的值都会转换为true

实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>数据类型的转换</title>
    <script>
        //转换为字符串类型
        var num = 10;
        //方式1
        var str = num.toString();        
        console.log(typeof str);
        // 方式2
        var str1 = String(num);       
        console.log(typeof str1);
        //方式3
        str2 = num + '';
        console.log(typeof str2);
        //转换为数值型
        var age = prompt('请输入你的年龄：');
        //方式一 parseInt() 可以把字符型的转换为数字型 得到的是整数 小数会向下取整 直接会去掉单位
        var nl = parseInt(age);
        console.log(typeof nl);
        //方式二 parseFloat() 可以把字符型的转换为数字型 得到的是浮点数 直接会去掉单位
        var nl1 = parseFloat(age);
        console.log(typeof nl1);
        console.log(nl1);
        //方式三 Number()
        console.log(Number(age));
        console.log(Number('12'));
        //方式四
        console.log('12' - 0);
        console.log('12' / 1);
        console.log('12' * 1);
        //转换为boolean型
        //方式一 Boolean() 除了这几个其他的都是true
        console.log(Boolean('')); //false
        console.log(Boolean(0)); //false
        console.log(Boolean(NaN)); //false
        console.log(Boolean(null)); //false
        console.log(Boolean(undefined)); //false
        console.log('-------------');
        console.log(Boolean('小白'));
        console.log(Boolean(12));
    </script>
</head>
<body>
    
</body>
</html>

五.拓展阅读

1.解释型语言和编译型语言

解释型语言（javascript）：.html文件通过javascript引擎（解释器）生成机器语言执行

编译型语言（java）：.java文件通过java编译器编译成 .class文件运行时编译到机器语言最后执行

编译语言：先做好菜一起吃

解释语言：火锅边刷边吃

2.标识符、关键字、保留字

标识符：就是开发人员给变量、属性、函数、参数取的名字不能是关键字或者保留字

关键字：Js本身已经使用的字 break case typeof …

保留字：预留的关键字未来可能成为关键字 let int char…

六.JavaScript运算符

1.运算符（操作符）

定义：用于实现赋值比较，执行算术运算符等功能

常用的运算符：

算术运算符

运算符	描述	实例
+	加	10 + 20 = 30
-	减	10 - 20 = -10
*	乘	10 * 20 = 200
/	除	10 / 20 = 0.5
%	取余	9 % 2 = 1

浮点数算数会有误差（ 0.1+0.2 = 0.300000000000004）所以不要直接比较浮点数

%：取余运算符主要用途就是，得数等于0说明这个数可以被整除

**先乘除后加减有小括号先算小括号里面的 **

递增和递减运算符

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>递增和递减运算符</title>
    <script>
        var num = 1;
        /* 递增：++递减：--
        必须和变量配合
        可以放在变量的前面（前置递增运算符） 或者变量的后面（后置递增运算符） 
        前置递增运算符：先加一 后返回值 ++1 + 1 = 3
        后置递增运算符：先返回值 后加一 1++ + 1 = 2
        num++ + ++num = 4
        */
        num++;
        console.log(num); //2
    </script>
</head>

<body>

</body>

</html>

比较运算符

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>比较运算符</title>

    <script>
        /* > 大于
                < 小于
                >= 大于等于
                <= 小于等于
                == 等于判断 两侧的值相等就行
                != 不等于
                === 全等于 两侧的值和数据类型完全一样才返回true */
        console.log(18 == '18'); //true ==号默认转换数据类型 会把字符串类型的转换为数字型的
        console.log(18 != '18'); //false
        console.log(18 === '18'); //false
    </script>
</head>

<body>

</body>

</html>

逻辑运算符

逻辑运算符	说明	案例
&&	逻辑与与 and	true && false
\|\|	逻辑或或 or	true \|\| false
!	逻辑非非 not	!true

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>逻辑运算符</title>
    <script>
        console.log(6 > 5 && 3 > 2); //两个条件都满足才为true 
        console.log(3 > 5 || 3 > 2); //两侧满足一个为true 就为true
        console.log(!true); //取反运算符 false
        //逻辑与短路运算 表达式1是true返回表达式2 表达式1是false返回表达式1
        console.log(124 && 0); //0
        console.log(0 && 1); //0
        //逻辑或短路运算 表达式1是true返回表达式1 表达式1是false返回表达式2
        console.log(124 || 0); //124
        console.log(0 || 1); //1
        //案例
        var num = 0;
        console.log(123 || num++); //123
        console.log(num); //0
    </script>
</head>

<body>

</body>

</html>

赋值运算符

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>赋值运算符</title>
    <script>
        //=等于 +=加等 -=减等 *=乘等 /=除等 %=取模
        var num = 1;
        num += 2; //num = mun + 2
        console.log(num); //3
    </script>
</head>

<body>

</body>

</html>

2.运算符的优先级

优先级	运算符	顺序
1	小括号	（）
2	一元运算符	++ – ！
3	算术运算符	先乘除后加减
4	关系运算符	> >= < <=
5	相等运算符	== != === !==
6	逻辑运算符	先&& 后\|\|
7	赋值运算符	=
8	逗号运算符	，

七.JavaScript流程控制

流程控制：就是来控制我们代码按照什么结构顺序来执行

1.流程控制分类：

顺序流程控制

程序中最简单的最基本的流程控制没有特殊的语法结构程序会按照代码的先后顺序依次执行由上到下

分支流程控制

可以根据不同的条件执行不同的代码得到不同的结果！（执行代码多选一的过程）

分支流程控制if语句

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>分支流程控制if语句</title>
    <script>
        var year = prompt('请输入年份：');
        //if 如果 
        if