js parsefloat保留两位小数_JS的笔记持续更新/改进中

最新推荐文章于 2024-06-14 07:43:29 发布

weixin_39595085

最新推荐文章于 2024-06-14 07:43:29 发布

阅读量3.9k

点赞数

文章标签： js parsefloat保留两位小数 js string转number js var是什么类型 js 字符串换行 js 字符串转long js 字符串转换数字

JS基本语法（目前不包括ES6）

文中必有不正确or不恰当的地方，目前的水平仅如此，可以喷这篇文章，但请别喷作者谢谢。文中如有错误的地方，愿意的话请告知作者感激不尽！

目录：如何查找呢？ctrl+F 输入第1页

1页 JS基本知识 2页 JS命名规则 3页 JS中如何转换数据类型
3.1 转换字符串 toString
3.2 转换数值 parseInt parseFloat
3.3 转换数值 isNaN
3.4 转换数值类型。Number
3.5 转换布尔类型。Boolean 4页算数运算符
4.1 基本运算符
4.2 自增自减运算符 5页逻辑运算符
5.1 && 并且
5.2 || 或者
5.3 ！非/不是 6页关系运算符
6.1 == 与 === 7页数组 7.1 如何创建数组/遍历数组
7.2 通过一些小案例来巩固遍历数组
7.21 第一个小案例：计算数组中所有数字的总和和平均值
7.22 第二个小案例：求数组中的最大值
7.23 获取数组中的字符串注意事项 7.3 如何添加数组
7.31 第一个小案例添加数字1-10
7.4 筛选数组第一个案例选比他大的。
7.41 筛选数组第二个案例删除数组。 7.5 通过循环来排序，也称冒泡排序
8 JS 中的内置对象
8.1 Array 对象
8.2 Math 对象三个对象 ceil 、 floor、andom JS基本语法：var 关键字的使用 第9页 JS常用的输出、输入语句 第10页数组 第11页 JS函数 第12页 JS DOM 操作 12.1 查找DOM元素 12.2 DOM事件 12.21 HTML事件

第1页

一、JS基本知识：

（1）数据类型

数据类型：包括：
1、整型
2、浮点型
3、字符串
4、Boolean类型（真假） 变量中出现的情况：
undefined// 变量并没有赋值
NaN 无效变量
null/no/ 空值。

第1页

第2页 JS命名规范

二、JS命名规范：

在所有的编程语言中，都遵守这样的命名规范： 开头：字下美符如何理解嘞？字母（a~z or A~Z ）下划线_(英文状态下) 美元符号
（1）严格的区分大小写（2）不能以关键字命名（3）变量名有意义 (4) 遵循驼峰命名法 （5）所有的符号都是英文状态的下的符号 何为驼峰命名法？简单来说：就是首个单词的字母小写其余单词的首字母大写
例如：1)oneAndTwo 2)oneOrTwo
在其他语言中：
可以是字下美人符，字母（a~z or A~Z ）下划线_(英文状态下) 美元人民币符号。

例如：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JS的命名规范</title>
    <script>
        //正确的命名
        var age;
        var GRE;
        var _03;
        var $01;
    </script>
</head>

<body>

</body>

</html>

第2页

第三页start

、JS中如何转换数据类型

如何转换数据类型呢？那又如何确定是否转换成功了呢？使用typeof来验证

当然得看转那种了，这里指一般情况下

3.1 转换字符串toString

1) 转换字符串类型常用方式：toString （这里的S要大写特别注意）

这里呢特别提示下：toString 呢只能转换 Boolean/bu li en/布尔，真实读音是/bu li en/

但是呢，很多人都读布尔。 number 数字类型就包括所有的数（所有的自然数、小数）

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>类型转换：转换成字符串类型</title>
    <script>
        var num = 123;
        // 需要另外一个变量来接收 转换的变量。
        var str = num.toString();
        // 转换的变量为字符串
        console.log(str);
        // 验证方式
        console.log(typeof str);
    </script>
</head>

<body>

</body>

</html>

<------------------------------------------------------------------------------------------->

3.2 转换数值 parseInt parseFloat

2)转换数值类型。最常用的方式：parseInt parseFloat 注意第二个单词的首字母要大写。

这2个有什么区别呢？ parseInt/pa zi/ 只能获得整数而且不是四舍五入！是小数都不要！ parseFloat能获得所有的数。

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>类型转换：转换成字符串类型</title>
    <script>
        var num = 123.123;
        var num2 = parseInt(num);
        var num3 = parseFloat(num);
        console.log('num2的值:' + 't' + num2);
        console.log('num3的值:' + 't' + num3);
    </script>
</head>

<body>

</body>

</html>

注意啊！特别注意啊！就是这段字符串，从左到右执行，只要不是数字就停下来了！

例：

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>类型转换：转换成字符串类型</title>
    <script>
        var num = '我123 .123';
        var num2 = parseInt(num);
        var num3 = parseFloat(num);
        console.log('num2的值:' + 't' + num2);
        console.log('num3的值:' + 't' + num3);
    </script>
</head>

<body>

</body>

</html>

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>类型转换：转换成字符串类型</title>
    <script>
        var num = '12我3 .123';
        var num2 = parseInt(num);
        var num3 = parseFloat(num);
        console.log('num2的值:' + 't' + num2);
        console.log('num3的值:' + 't' + num3);
    </script>
</head>

<body>

</body>

</html>

<------------------------------------------------------------------------------------------->

3.3 转换数值isNaN

3)转换数值类型。isNaN 会让字符串是数字的转换，字母或者文字转不了。

isNaN 这个玩意，是判断当前的值是不是一个非数字类型， 如果是非数字呢，返回true 是数字呢，返回false！ 格式：isNaN()

<!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>
        var num = '123'
        console.log('num显示' + isNaN(num));
        console.log('num测试' + typeof(num));
        var num2 = 'abc'
        console.log('num2显示' + isNaN(num2));
        console.log('num2测试' + typeof(num2));
    </script>
</head>

<body>

</body>

</html>

<------------------------------------------------------------------------------------------->

3.4 转换数值类型。Number

4)转换数值类型。Number

格式：

var str = '123';

var num = Number(str);

<!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>
        var str = '123';
        var num = Number(str)
        console.log(num);
        console.log(typeof num);
    </script>
</head>

<body>

</body>

</html>

这个Number 专门来治疗 Boolean 类型的，true 是1 false 是0 空值null 也是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>
    <script>
        // 测试布尔 true
        var blean = true;
        var num2 = Number(blean);
        console.log('测试布尔true:' + 't' + num2)
        console.log('测试类型:' + 't' + typeof num2);
        // 测试布尔 false
        var blean2 = false;
        var num3 = Number(blean2);
        console.log('测试布尔false:' + 't' + num3)
        console.log('测试类型:' + 't' + typeof num3);
        // 测试布尔 空值null
        var nul = null;
        var num4 = Number(nul);
        console.log('测试空值null:' + 't' + num4)
        console.log('测试类型:' + 't' + typeof num4);
    </script>
</head>

<body>

</body>

</html>

3.5 转换成Boolean

5) 转换为Boolean类型：

这哥们呢！有点兔！ 格式：Boolean();

数字转布尔除了 0 和NaN是false,其余都是true。

例：

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>类型转换：转换成字符串类型</title>
    <script>
        var num = 1;
        var num2 = 0;
        var num3 = NaN;
        var num4 = Boolean(num);
        var num5 = Boolean(num2);
        var num6 = Boolean(num3);
        console.log('num4的值:' + 't' + num4);
        console.log('num5的值:' + 't' + num5);
        console.log('num6的值:' + 't' + num6);
    </script>
</head>

<body>

</body>

</html>

字串符转布尔除了空值其余都是true。

例:

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>类型转换：转换成字符串类型</title>
    <script>
        var num = '';
        var num2 = '0';
        var num3 = 'NaN';
        var num4 = Boolean(num);
        var num5 = Boolean(num2);
        var num6 = Boolean(num3);
        console.log('num4的值:' + 't' + num4);
        console.log('num5的值:' + 't' + num5);
        console.log('num6的值:' + 't' + num6);
    </script>
</head>

<body>

</body>

</html>

null 和 undefined 都会变成false

例：

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>类型转换：转换成字符串类型</title>
    <script>
        var num = null;
        var num2 = undefined;
        var num4 = Boolean(num);
        var num5 = Boolean(num2);
        console.log('num4的值:' + 't' + num4);
        console.log('num5的值:' + 't' + num5);
    </script>
</head>

<body>

</body>

</html>

对象也会转为true，这里就不举例对象了。因为只要是和对象都会变成true！

第3页end

第4页start

算数运算符

4.1 基本运算符

顾名思义咯！算数运算符只有 + - * / %（余）
这比较简单篇幅少，和数学几乎一样，+ - 是最后算其余的都是从左到右依次计算然后再是加减的从左到右计算。
例：1+2*3/4%5
什么意思嘞：先算2(乘)3 再算 (除)4 之后(余)5 最后1(+)
括号会有优先级，小括号优先级最高，有括号先算括号。 还有点补充的是：'t' 空格符与 'n' 换行符不是运算符，只出现在输出语句里面！

重点来了！当对非数字类型进行运算的时候，先转换为数字类型再进行计算！！如果计算不出来的话，会显示NaN 只不过这个NaN是number类型。

4.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>
    <script>
        var num = 0;
        // 这里等于0没有什么好说的
        console.log('第一个num是' + 't' + num); //0
        // 之后是不是0+1?
        num++
        // 所以这里是1
        console.log('第二个num是' + 't' + num); //1
        // 之后怎么样1+1
        ++num
        // 所以得到了2
        console.log('第三个num是' + 't' + num); //2
        // 那这里为什么是2呢? 这个地方得注意++的位置, 
        /* ++在前 是先计算 后赋值 ++在后 是先赋值再运算!
           所以先赋值 所以就是显示2 其实本职上是3
        */
        console.log('第四个num是' + 't' + num++); //2
        // 所以这里为什么是4了!
        console.log('第五个num是' + 't' + ++num); //4
    </script>
</head>

<body>

</body>

</html>

第4页end

第5页逻辑运算符(开始)

5.1 && 并且
&&这个玩意是并且的意思！多数只存在条件判断中！
举个例子：
x>1 && x<10 这个的意思就是，x大于1并且小于10的数都可以
所以范围只能是 2~9 （整数为例）
5.2 || 或者
|| 这个玩意是或者的意思！多数只存在条件判断中！
举个例子：
x>1 || x <10 x大于1 或者 x小于10 的都可以！
所以嘞这个范围巨大！任何数都是可以的，
你想一想咯！
比如1？1大于1吗？不大于！但是小于10啊！所以就是对的。
比如说11？大于10不行！但是他大于1啊所以也是对的！
所以结论就是：任何数都行！
5.3 ！非/不是（个人不常用。因为太绕了不如 !=）
！这玩意就是非的意思。
咋说这个非呢？他是一个调皮的孩子喜欢和你反正来。
例如：
！1
意思是只要不是1的统统都不行。反正就是和你反正来呗

第5页逻辑运算符(end)

6页关系运算符 start

6.1 == 和 ===

这里不再说明其他的关系运算符：只说一个最容易错的：
== 与 ===
== 是可以进行类型转换
=== 不可以进行类型转换
例如：

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>== 与 === 的区别</title>
    <script>
        var num = 123;
        var num2 = '123';
        console.log('两个等于出来的结果：' + (num == num2));
        console.log('三个等于出来的结果：' + (num === num2));
    </script>
</head>

<body>

</body>

</html>

6页关系运算符 end

7页数组

7.1 如何创建数组/ 遍历数组
如何创建数组：2种方式：
第一种：var num = new Array();
第二种：最常用的：var num =[1,2,'a',true]; 这括号里面可以装任何的东西。只不过个个数据要有逗号隔开。
访问数组：这个数组是从0开始的！比如有一个数组[1,2,'a'] 数组里面的1对应的是
数组0下标，2是1下标，依次类推。当然了，也不需要你数，但是要知道这点，因为一般都是用，数组名(点).length/len k si/ (本身就是长度的意思) 来遍历数组的

例：

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>创建/遍历数组</title>
    <script>
        // 创建一个数组，在里面随便放点东西！
        var num4 = [1, 2, 3, 11, '无处可藏']
            // 然后通过循环获取数组，使用关键字length
            /* 
            怎么理解这句话呢？首先num4.length是自动识别数组里面有多少个数 这个数是从0开始的。 
            i你想一开始是不是等于0 num4[0]是不是1 然后一直往下，直到num[4]='无处可藏' 
            就没有其他的数据可以取了，然后结束。*/
        for (var i = 0; i < num4.length; i++) {
            console.log(num4[i]);
        }
    </script>
</head>

<body>

</body>

</html>

7.1 如何创建数组/ 遍历数组end

7.2 通过一些小案例来巩固遍历数组

7.21 第一个小案例：计算数组中所有数字的总和和平均值

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>数组的第一个小案例</title>
    <script>
        // 创建一个数组 计算数组中的总和和平均值
        var num4 = [1, 2, 3, 4, 5]
            // 总和变量 sum
        var sum = 0;
        // 平均数变量 average
        var average = 0;
        for (var i = 0; i < num4.length; i++) {
            // 总和是参与循环的，这个地方最好在控制台中查看他们的循环过程
            // 说明一点，num4[i] 这里的i 是0 也就代表了 num[0]，num[0]=1 以此类推 一直到 num[4]=5
            sum = sum + num4[i];
        }
        //由于 平均值 是总和除以 数组长度，数组长度是 总和除以数组长度。
        //数组长度是什么啊？数组名.length
        average = sum / num4.length;
        console.log('他们的总和是：' + sum);
        console.log('他们的平均值是：' + average);
    </script>
</head>

<body>

</body>

</html>

7.22 第二个小案例：求数组中的最大值！

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>计算数组中的最大值</title>
    <script>
        // 创建一个数组 计算数组中的最大值
        var num4 = [1, 2, 3, 4, 5, 10,]
        // 先一个思路，是不是要创建个变量 ，max 把数组中的个个值给max 然后max 
        // 再和数组中的每个数做比较
        // 如果数组中当前的数，大于max里面的数，就重新覆盖，以此类推。
        var max = 0;
        // 遍历数组没有什么好说的
        for (var i = 0; i < num4.length; i++) {
            // 这里如何理解啊，就是如果当num4的数组 其中一个大于max的时候，重新给max赋值，
            /* 
            讲一下流程,现在 max=0 num[i]=num[0]=1 0<1吗？ 
            是不是对的，那么执行第一个if条件，num[i]=1 传递给max
            最好在控制台，观察一下哦！这样是最好理解的！
            */
            if (max < num4[i]) {
                max = num4[i];
            }
        }
        console.log(+max);
    </script>
</head>

<body>

</body>

</html>

7.23 获取数组中的字符串注意事项

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>计算数组中的最大值</title>
    <script>
        // 创建一个数组 里面存储字符串
        var num4 = ['QAQ', 'TAT', '^V^', '*v*', ]
            // 创建字符串的时候要注意！ var str = ''; 和  var str; 区别很大的 多了一个空值
        var str = '';
        var symbol = '+'
        for (var i = 0; i < num4.length; i++) {
            str += num4[i] + symbol;
        }
        console.log(str);
    </script>
</head>

<body>

</body>

</html>

7.2 通过一些小案例来巩固遍历数组end

7.3 如何添加数组

7.31 第一个小案例添加数字1-10

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
    <script>
        // 在数组中添加数组
        // 先创建一个空的数组
        var num = [];
        // 再通过循环来添加数组
        for (var i = 0; i < 10; i++) {
            // 这里为什么是 num[i]=i 呢？ 因为这是一个数组啊
            num[i] = i;
        }
        console.log(num);
    </script>
</head>

<body>


</body>

</html>

7.3 如何添加数组end

7.4 筛选数组

筛选数组什么意思嘞，就看下面的一个小案例就知道了。案例名把所有大于3的数提取出来。

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
    <script>
        // 筛选数组 把所有大于3的数提取出来。
        var num = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
        // 创建一个新的数组来获取原来数组中的数据。
        var max = [];
        for (var i = 0; i < num.length; i++) {
            // 加入num数组中的 下标几 代表的数 大于3
            if (num[i] > 3) {
                // 那么num数组中  下标几 代表的数  赋值给max数组
                /* 为什么是max.length 不是i 因为i会一直加，当不满足条件的时候也会加就会变成
                empty/an m p ti/空的意思！ 所以就会空值，但是我们不需要这个空值，那么就使用
                .length 
                */
                max[max.length] = num[i];
            }
        }
        console.log(max);
    </script>
</head>

<body>


</body>

</html>

7.41 删除元素删除素组中是 2 的数

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
    <script>
        // 筛选数组 把2 这个数给删掉。
        var num = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
        // 创建一个新的数组来获取原来数组中的数据。
        var max = [];
        for (var i = 0; i < num.length; i++) {
            // 只要num[i] 里面的下标 几代表的数不等于2 我就给max赋值。
            if (num[i] != 2) {
                max[max.length] = num[i];
            }
        }
        console.log(max);
    </script>
</head>

<body>


</body>

</html>

7.41end

7.4 筛选数组end

8 JS 中的内置对象

8.1 Array对象就是用来储存一系列的值。但是是当前变量

例：

<!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>
        // 这种格式和 var num = []; 一样
        var num1 = new Array(11, 12, 13);
        // 这种格式是可以写无数个值
        var num = new Array();
        // 数组下标从0开始  
        num[0] = 1;
        num[1] = 2;
        num[2] = 3;
        num[3] = 4;
        document.write(num1 + '<br/>');
        document.write(num);
    </script>
</head>

<body>

</body>

</html>

使用for in循环取出，Array中的值

<!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>
        var num = new Array();
        // 数组下标从0开始  
        num[0] = 1;
        num[1] = 2;
        num[2] = 3;
        num[3] = 4;
        // for in 循环 其中 var 后面的这个变量 相当于 for 循环中的 var i = 0; 
        //for(var i = 0 ; i > num.length ; i++){ } 
        for (var i in num) {
            document.write(num[i] + '<br/>');
        }
    </script>
</head>

<body>

</body>

</html>

8.1 Array对象就是用来储存一系列的值 end

8.2 Math 对象

Math 简单来说就是来执行数学中四舍五入的操作。
Math 有三个属性:
第一个：Math.ceil() [ 天花板 ] 所以向上取整。
例如 -24.5 那结果是就是 -24 因为 -24 比 -24.5 大正数无所谓
第二个：Math.floor() [ 地板 ] 所以向下取整。
例如 -24.5 那结果是就是 -25 因为 -25 比 -24.5 小
25.5 结果是 25 因为 25比25.5小
Math.random() [本身就是随机数] 获取0.0~1.0之间的随机数

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
    <script>
        var num = 24.5;
        var num1 = -24.5
            // ceil 向上取整
        console.log(Math.ceil(num));
        console.log(Math.ceil(num1));
        // floor 向下取整
        console.log(Math.floor(num));
        console.log(Math.floor(num1));
    </script>
</head>

<body>

</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>
        // 小案例 按下按钮随机获取颜色
        var color = new Array('红', '橙', '蓝', '绿', '青', '靛', '紫');
        // 创建一个随机数，变量名为 num  
        // 在这里注意，我们为什么乘以7？因为你的数组中只有7个数据！所以只能乘7 
        /* 
        那么这个时候就要注意了！我们就要使用向下取整了，
        因为如果使用向上取整 假如出现7.5及以上的数字时！
        那么向上取整会得到8 而我们数组中没有第8个数据！
        */
        var num = Math.floor(Math.random() * 7)
        alert(num);
        // color[num] 是什么意思呢？就是 color数组里面的第几个下标的意思！
        alert('颜色是：' + color[num]);
    </script>
</head>

<body>

</body>

</html>

8.2 Math 对象 end

8 JS 中的内置对象 end

、JS基本语法：var 关键字的使用。

var的基本使用方式。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JS基本语法</title>
    <script>
        /* 在ES6之前的语法中，要使用JS 第一步呢就是使用关键子 var/wa/[读音]
        格式： var 任意的有意义的名字=任何东西或者（什么都没有）
        */
        //例：
        // 这个如何理解呢？反向理解，把这个10给了这个age 所以这个age是10。
        // 这个age 可以是任意的 可以是a 可以是b但是一般不推荐，因为他没有什么具体的意义
        // 因为后面的变量会有很多，写的没有意义自己都会忘记，自己写的是什么玩楞。
        var age = 10; 
        // 后面只有一个分号的时候，代表没有值，也就是说可以获得任意值。
        var age;
        // 在JS中后面有单引号或者双引号的时候，代表获得的这个值一定是一个字符串类型。
        var age ='';
    </script>
</head>

<body>

</body>

</html>

、JS常用的输出、输入语句：

1、alert/e le t/ 本身就是警示的意思。所以alert就是弹出用户输入框

格式：alert('');

例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JS基本语法</title>
    <script>
        alert('Hellow Word');
    </script>
</head>

<body>

</body>

</html>

2、prompt/pu ruang m p t/ 本身也是提示的意思。提示用户输入内容

特别注意：prompt它输入的任何东西都是字符串。

格式：prompt('');

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JS基本语法</title>
    <script>
        prompt('随便写点什么吧');
    </script>
</head>

<body>

</body>

</html>

3、console.log/keng shou 点 luo g/ 本身就是控制台的意思。控制台查看数据。

网页控制台进入网页右键点检查或者按F12 都可以

例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JS基本语法</title>
    <script>
        var num = 0;
        console.log(num);
    </script>
</head>

<body>

</body>

</html>

数组：

11页、JS中函数

基本function

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>函数的基本使用</title>
    <script>
        function add() {
            alert('我是执行语句');
        }
        /*基本的函数类型: 
        function 变量名(){
            执行语句。
        }
        [其中变量名 是可以 随意更改的，function是不变的]
        */
        // 函数申明之后，要调用，如何调用呢很简单，就是 写一遍 变量名();
        add();
    </script>
</head>

<body>

</body>

</html>

带有参数的function

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>函数的基本调用</title>
    <script>
        function add(num1, num2) {
            var sum = num1 + num2;
            alert(num1 + '和' + num2 + '的和是' + sum);
            var jianfa = num1 - num2
            alert(num1 + '和' + num2 + '的差是' + jianfa);
        }
        // 函数写带参数的，要用逗号隔开
        add(2, 1);
        // 然后一样的，在add里面写上参数，里面有几个,就写几个,同样用逗号隔开。
    </script>
</head>

<body>

</body>

</html>

function 和return 最简单的案例：

直接写这个就好了，因为这是一体的。

<!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>
        // 最简单的return函数，会这个就行了。其余的不用管了。
        function getNum(num1, num2) {
            return num1 + num2;
            // 这个num1+num2 和 getNum 的num1和num2是一样的。
        }
        // 这个要给getNum num1 和num2 赋值  
        // 格式：函数名(赋值);
        console.log(getNum(1, 2));
    </script>
</head>
<body>
</body>
</html>

return 的注意事项：

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>retrun的两种使用方式</title>
    <script>
        function panduan(num) {
            if (isNan(num)) return;
            // isNan 是判断是不是非数字的方法
            // 这里的return 是结束函数
            return;
            // 这个return是函数的返回值。
        }
        // 第一种是 return 是带返回值的 第二种是不带的

        /*
         panduan 这个函数变量名()里面一定要至少有一个变量名来接收。
        */

        panduan();
        // 调用函数 并且在里面写值
    </script>
</head>

<body>

</body>

</html>

argments的基本使用

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>arguments</title>
    <script>
        function num() {
            console.log('arguments.length' + '值个数是' + arguments.length)
            // arguments.length 是查询有几个值。
            console.log('赋值给' + 'arguments[0]' + '的是' + arguments[0]);
            // arguments[] 是赋值 赋值和数组一样。
        }
        // 不带值的函数 使用arguments
        num(1, 2);
    </script>
</head>

<body>

</body>

</html>

第12页 JS DOM 操作

12.1 查找DOM元素

如何找到DOM 元素呢？

目前所知命令：

document.getElementById("")

这个哥们呢！就比较轻松容易，但是呢缺陷也很大。就是他只能识别id属性，id缺陷很大的！而且只能识别一个！一个！一个！他直接返回的就是DOM对象！

<!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>
    <div id="box">变大变粗变红色！</div>
    <script>
        // 创建一个类名来接收这个DOM对象。所以2个类名是不一样的！
        var box = document.getElementById("box")
            // 类名.style.效果  如果说是font-size!他没有 - 所以只能写成fontSize第二个字母大写
            // .style 只能改变DOM对象！这句话非常的关键。
            // 他是DOM对象的样式设置
            // 变颜色 
        box.style.color = '#f00';
        // 变字体大小
        box.style.fontSize = '25px';
        // 变字体粗细
        box.style.fontWeight = '900';
    </script>
</body>

</html>

document.getElementTagName("")

这个哥们呢！有点复杂但是比较舒服！就是通过标签名来获取。只不过啊，

他的缺陷是：不是直接返回DOM对象，而是数组对象！

<!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>
    <div id="one">
        <span>变红</span>
        <span>变大</span>
        <span>变粗</span>
    </div>
    <script>
       // 这一步啊，是获取div这个元素，这个元素里面的Span标签，TagName 是获取标签，TagName呢获取的元素呢，又是一个数组对象！
        // 所以呢不能直接修改样式！因为修改样式，一定得是一个DOM对象
        // 那如何修改呢?使用遍历数组的方式来修改。
        var box = document.getElementById('one').getElementsByTagName('span');
        // 通过循环遍历数组，首先var i = 0 这句话是从下标0开始 var 新的类名 = TagName的类名.length; i < TagName的类名.length ; i++
        // TagName.length,就是数组的个数，所以就明白为什么要 i < TagName的类名
        for (var i = 0, len = box.length; i < len; i++) {
            console.log(box[i]);
            // 使用if else 判断 或者 switch 判断都行！;
            switch (i) {
                case 0:
                    box[i].style.color = '#f00';
                    break;
                case 1:
                    box[i].style.fontSize = '30px';
                    break;
                case 2:
                    box[i].style.fontWeight = '900';
                    break;
                default:
                    box[i].style.color = '#000'
                    break;
            }
        }
    </script>

</body>

</html>

document.getElementClassName("")

12.2 DOM事件以及各种事件命令

鼠标事件命令：

- onload :页面加载时触发
- onclick :鼠标点击时触发
- onmouseover :鼠标滑过时触发
- onmouseout :鼠标离开时触发
- onfoucs :获得焦点时触发
- onblur :失去焦点时触发
- onchange :域的内容改变时发生

12.21 HTML事件什么是HTML事件？直接在HTML元素标签内添加事件，执行脚本。

语法：

功能：

在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>
    <input type="button" value="弹出" onclick="alert('我是按钮')">
</body>

</html>

知乎视频www.zhihu.com

weixin_39595085

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
js parsefloat保留两位小数_JS的笔记持续更新/改进中

JS基本语法（目前不包括ES6）文中必有不正确or不恰当的地方，目前的水平仅如此，可以喷这篇文章，但请别喷作者谢谢。文中如有错误的地方，愿意的话请告知作者感激不尽！目录：如何查找呢？ctrl+F 输入第1页1页 JS基本知识2页 JS命名规则3页 JS中如何转换数据类型3.1 转换字符串 toString3.2 转换数值 parseInt parseFloat3.3 转换数值 isNaN3....
复制链接

扫一扫