前端编程语言——JS背景知识、JS基础语法、算数运算符和关系运算符（1）

最新推荐文章于 2024-07-24 23:00:08 发布

疋瓞

最新推荐文章于 2024-07-24 23:00:08 发布

阅读量977

点赞数 7

分类专栏： web前端文章标签：前端 javascript 开发语言

本文链接：https://blog.csdn.net/sz1125218970/article/details/139058050

版权

web前端专栏收录该内容

21 篇文章 0 订阅

订阅专栏

0、前言：

JS全称是JavaScript，是一种脚本语言，诞生于1995年，JS是由ECMAScript（包含js语法）、BOM（Brower Oject Model，和浏览器相关操作）、DOM（Document Object Model，和页面内容相关操作）组成的。JS的版本有ES5、ES6、ES7、ES8
JS可以写在HTML文件当中的，JS也可以写在后缀名为js的文件当中，然后导入到html文件中，还可以写在标签中，作为标签属性。和CSS一样，JS也有三种写入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>

    <style>
        /* 这里写css语法 */
    </style>
    <!-- 第一种JS引入方式 -->
    <script type="text/javascript">
        // 这里写javascript语法
        // alert(100)
        // document.write('hello')
        // document.write('<b>hello</b>')

        // 在控制台打印，相当于python中的print：
        console.log('控制台打印内容！')
    </script>
    <!-- 第二种JS引入方式 -->
    <script src="./demo.js">
        // 如果是外部导入的js，在此处写入的js代码是不会执行的
    </script>
</head>
<body>
    <script>
        console.log('body中执行')
    </script>
    <!-- 第三种JS引入方式 -->
    <button onclick="alert('错误')">点击会弹出内容</button>
</body>
</html>

JS当中每行代码结束最好都加上分号，JS是弱数据类型语言，容错率比较高。
注意html代码写好之后调试会出现网页，如果期间代码有修改，可以通过刷新网页更新页面。

1、JS基本语法：

变量：定义变量要使用var（variable）关键字，可以先定义在赋值，也可以定义加赋值。可以通过逗号隔开，一次定义多个变量。变量类型无需声明，赋值是什么变量类型就是什么。
命名规范：
- 数字、字母、下划线以及美元符（$）组成
- 首字符不能为数字
- 不能使用关键字或者保留字
- 区分大小写
- 小驼峰命名：myStudentScore，大驼峰命名：MyStudentScore
数据类型：Number（int, float）, Boolean（布尔类型）, String（字符串）, Array（数组，类似python中的列表）, Object（对象）, Set（集合）, Null（空，是对象类型的一种值）, Undefined（变量未定义的默认值，是有Null派生而来，两者相等但不全等，但undefined类型就是其本身）
NaN：not a number，是一种非法运算的结果。
布尔类型转换规则：非空字符串为true，空字符串为false。非0数值为true，0或者NaN为false，null为false，undefined为false。
在JS中整数是4个字节保存，浮点数是8个字节保存，一般为了节省内存，就会把12.0这种数值强转为整数。

<!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 a = 10;
        console.log(a);

        var a=1,b=2,c=3;
        console.log(a,b,c); // 1 2 3

        // 数据类型：int和float
        var m=10;
        console.log(typeof m); // number
        var n=3.2;
        console.log(typeof n); // number
        var l=3.14e3; // 相当于3.14*10^3
        console.log(l); // 3140
        console.log(1/0); // Infinity
        console.log(1/0*0); // NaN，不是一种数据类型，是一种特殊值，非法的数值运算产生的值
        console.log(isNaN(NaN)); // true，判断是否是特殊值

        console.log(parseInt(10.8)); // 10
        console.log(parseInt('10')); // 10

        // Math数学函数
        console.log(Math.round(3.243)); // 3, 四舍五入会得到整数部分
        console.log(3.145.toFixed(2)); // 3.15, 四舍五入可以设置保留位数
        console.log(Math.max(3,1,2,-1)); // 3, 取最大值

        // null和undefined
        console.log(null == undefined) // true
        console.log(null === undefined) // false
    </script>  
</body>
</html>

2、算数运算符和关系运算符：

算数运算符：+，-，*，/，%（取余数）
字符串和变量的拼接：+
关系运算符：>，<，<=，>=，两个等于号（值相等就成立），三个等于号（值和类型都相等才成立）， !=，!==
逻辑运算符：&&、//、! （特别注意逻辑运算中的短路运算，且运算遇到false则短路，或运算遇到true则短路）
赋值和复合运算符：=、+=、-=、*=、/=、%=
一元运算符：++a，a++，–a，a–
三目运算符：条件？满足条件执行语句：不满足条件执行语句

<!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(10+4); // 14
        console.log(10%4); // 2
        console.log(10/4); // 2.5
        console.log(10**2); // 100
        console.log('hello'+'haha'); // hellohaha
        console.log('hello'+10+20); // hello1020
        console.log(10+20+'hello'); // 30hello

        console.log(10 == '10'); // true
        console.log(10 === '10'); // false
        console.log(NaN == NaN); // false
        console.log('abc'>4); // false(字符串和数字比较是非法的，字符串不能被解析为有效数字，就会被转换为NaN，返回值就是false)
        console.log('abc'<4); // false(字符串和数字比较是非法的，字符串不能被解析为有效数字，就会被转换为NaN，返回值就是false)

        // 逻辑运算符的短路操作：逻辑运算返回的是逻辑运算两边的某个操作数，且运算遇到0或False就会短路返回，或运算遇到非0或true就会短路返回
        console.log(0 && true); // 0
        console.log(false && 0); // false
        console.log(true || 0); // true
        console.log(0 || 1); // 1

        // 一元运算符
        var n = 10;
        var m = n++;
        console.log(m,n); // 10 11      

        var n = 10;
        var m = ++n;
        console.log(m,n); // 11 11 

        var a = 10;
        console.log(a++); // 10
        console.log(++a); // 12

        var a = 10;
        console.log(a--); // 10
        console.log(--a); // 8

        // 三目运算符
        var a=20,b=30;
        console.log(a>b?a:b); // 30
    </script>
</body>
</html>

疋瓞

关注

7
点赞
踩
17

收藏

觉得还不错? 一键收藏
0
评论
前端编程语言——JS背景知识、JS基础语法、算数运算符和关系运算符（1）

JS全称是JavaScript，是一种脚本语言，诞生于1995年，JS是由ECMAScript（包含js语法）、BOM（Brower Oject Model，和浏览器相关操作）、DOM（Document Object Model，和页面内容相关操作）组成的。JS的版本有ES5、ES6、ES7、ES8JS可以写在HTML文件当中的，JS也可以写在后缀名为js的文件当中，然后导入到html文件中，还可以写在标签中，作为标签属性。和CSS一样，JS也有三种写入html的写法。
复制链接

扫一扫

专栏目录