系统学习前端之JS——day01

一、什么是JavaScript

JavaScript是一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言，内置支持类型。

二、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>
    <script>
        // 当页面中所有的资源都加载完毕之后再加载
          //第三种
        window.onload=function(){
            var box=document.getElementById("box");
            console.log(box);
        } 
        
    </script>
</head>
<body>
    <div id="box">box</div>
    //行内式：通过事件引入（有限制性）
    <div onclick="alert(1111)">11111</div>
</body>

</html>

<script>
    // 第一种
    // var box=document.getElementById("box");
</script>

<!-- 第二种：单独引入js文件 -->
<script src="11.js"></script>

三、JavaScript命名规范

命名要有语义化，可以遵循：

小驼峰命名法（驼峰命名法）：首单词的首字母小写，其余单词的首字母大写，例如：studentMessage
大驼峰命名法(又叫帕斯卡命名法)：跟小驼峰命名法类似，只不过是每个单词的首字母都大写，例如：StudentMessage
下划线命名法：要求单词与单词之间通过下划线连接即可。例如：my_name

四、变量

变量相当于容器，值就是容器中盛放的内容，变量名字就是贴在容器上的标签，通过这个标签可以找到变量，读取使用它。

在计算机中，变量就是给一个内存区域起的一个代号，通过这个代号把相应的数据存放在这里。

在ECMAScript中，变量是松散类型的（弱类型、动态类型），也就是一个变量可以保存任何类型的值

定义一个变量并使用

在js语法中，使用var（目前）加变量名 = 数据；
var name="haha" (把等号后面的值赋给了前面定义的变量)

还可以给多个变量同时赋值，或者是同时定义，使用逗号隔开

var sex="女",age="18"；

可以给同一个变量多次赋值或者多次定义

var age=18;
age=19;
console.log(age);

五、数据类型

1.JS中数据类型划分

原始值类型（基本数据类型） - Number 数值 - 列如：整数、小数、零、负数、NaN(不是一个有效数字，但是属于数字类型)- String 字符串 - 使用 ""、''、``( ES6中的面板字符串，更方便实现字符串拼接)- Boolean 布尔值 true（真）/false（假）- Null 空- Undefined 未定义- Symbol 唯一值- Bigint 大数
引用数据类型（对象类型） - 标准普通对象（纯粹的对象），列如：{x:10,y:20}- 标准特殊对象 - new Array 数组- new RegExp 正则- new Date 日期- new Error 错误- Set/Map---ES6新增的数据结构- 非标准特殊对象 - new Number(10)----原始值对应的对象数据类型值- 函数对象 function

2.原始值类型介绍

number数值类型

① 整型（整数）

② 浮点（小数）

③ JS数值的范围

    JS 中的Number数据类型只能安全地表示-9007199254740991 (-(2^53-1)) 和9007199254740991(2^53-1)之间的整数，任何超出此范围的整数值都可能失去精度。

④ 特殊的数值 NaN

NaN是number类型，是一个数值，表示非有效数字 - 特点1：NaN与任何数进行任何运算结构都是NaN- 特点2：NaN与任何数都不想等，包括自己

⑤ 数值相关的运算符

+（加）、-（减）、*（乘）、/（除）、%（取余数）

⑥ 相关函数

isNaN（）：验证一个值是否为非有效数字，如果是有效数字，则返回false，如果不是有效数字，则返回true

console.log(isNaN(1));
console.log(isNaN(NaN));

console.log(isNaN('AA'));
console.log(isNaN('12.5'));
console.log(isNaN('12.5px'));
console.log(isNaN([]));
console.log(isNaN([10]));
console.log(isNaN([10, 20]));
console.log(isNaN({}));
console.log(isNaN(null));
console.log(isNaN(undefined));
console.log(isNaN(Symbol(1)));

Number()：是JS内置的转换方法，可以把其它数据类型“强制”转换为数字类型 - 把字符串转换为数字：一但字符串中出现非有效数字字符，则结果为NaN，只有都是有效数字字符，才能转换为具体的数字，空字符串会转换为0- 把布尔转换为数字：true转换为1 false转换为0- 把空转换为数字：null转换为0 undefined转换为NaN- 不能把Symbol类型转换为数字，否则会报错

console.log(Number('12'));
console.log(Number('12.5'));
console.log(Number('12px'));
console.log(Number('12.5.0'));
console.log(Number(true));
console.log(Number(false));
console.log(Number(null));
console.log(Number(undefined));
console.log(Number(Symbol(13)));
console.log(Number(function func() { }));

parseInt()/parseFloat()：- 也是把其它数据类型转换为number类型的- 处理原理和Number不一样，他们是把字符串转换为数字类型（如果处理的值不是字符串，需要先转换为字符串然后再去转换为number类型的）- 从字符串最左边开始查找，把找到的有效数字字符转换为数字，一直遇到一个非有效数字字符为止，则结束查找
toFixed()console.log(Number('12px'));console.log(parseInt('12px'));console.log(parseInt('12px24'));console.log(parseInt('width:12px'));console.log(parseInt('12.5px'));console.log(parseFloat('12.5px'));console.log(Number(true));console.log(parseInt(true));console.log(parseInt('true'));console.log(parseInt(NaN));console.log(Number(null));console.log(parseInt(null));console.log(isNaN(Number(parseInt("0.8"))));console.log(Number(''));console.log(parseInt('')); 保留小数点后面N位（最后的结果是一个字符串） Number.MAX_SAFE_INTEGER console.log(Number.MAX_SAFE_INTEGER); //=>9007199254740991 最大安全数（JS能够有效识别的最大整数） console.log(9007199254740992 == 9007199254740993); //=>true 应该是不一样的，但是超过了最大数值，JS无法精准计算

BigInt:管理超过安全数值的数字

ES6中提供了一个新的数据类型 BigInt：管理超过安全数值的数字
console.log(BigInt(9007199254740992), BigInt(9007199254740993));

string 字符串类型

① 定义字符串

在JS中用单引号/双引号/反引号包起来的都是字符串

② 相关函数

String()

boolean 布尔值

布尔值表示真或假开或关是或否。
有 true 和 false 两个值
数字转为布尔值： 0转为false，NaN转为false；其他都是true
字符串转为布尔值：空字符串转为false，其他都是true
null 转为 flase
undefined 转为 false
总结：除了0 “” null undefined NaN为false，其他都是true

null 和 undefined

null****表示没有，即该处不应该有值：
1）在我们不确定一个变量具体数据类型的时候，我们可以先赋值为null，后面可以再给具体的值。。
2）作为对象原型链的终点。
3）获取 DOM 获取不到的时候。
undefined****表示缺少值，即此处应该有值，但没有定义：
1）定义了变量没有给值，显示 undefined。
2）定义了形参，没有传实参，显示 undefined。
3）对象属性名不存在时，显示 undefined。
4）函数没有写返回值，即没有写return，拿到的是 undefined。
5）写了return，但没有赋值，拿到的是 undefined。

标签：前端学习 css

本文转载自: https://blog.csdn.net/weixin_63522291/article/details/135220013
版权归原作者 obsession36 所有，如有侵权，请联系我们删除。