JS基础-数据类型-优快云博客

一.js介绍

1.什么是js ：是JavaScript的简写，通过语法来操作页面（标签）和浏览器。可以利用js 实现浏览器和页面的一些动效。

2.js 的组成： DOM: document object model 文档对象模型，操作标签 BOM： browser object model 浏览器对象模型，操作浏览器的 ECMA: js的标准，js的规范，js的语法规则。 AkTS ---- 是 ts的一个超集 ---- ts是js的一个超集

JavaScript能干什么

1. 常见的网页效果【表单验证，轮播图。。。】
1. 利用js里的配合canvas 实现游戏【https://js13kgames.com/games/everyones-sky/index.html】
1. 实现桌面端应用【Build cross-platform desktop apps with JavaScript, HTML, and CSS | Electron】
1. 实现可视化图表【Examples - Apache ECharts】
1. 地理定位等功能【地图JS API示例 | 百度地图开放平台】
1. 在线学编程【极客战记停服公告】
1. js可以实现人工智能【TensorFlow.js演示 | TensorFlow中文官网】
1. ...

JS 中的注释

单行注释

一般就是用来描述下面一行代码的作用
可以直接写两个 / ，也可以按 ctrl + /

多行注释

一般用来写一大段话，或者注释一段代码
可以直接写 /**/ 然后在两个星号中间写注释，也可以按 shift + alt + a

二.js的引入方式

行内式 JS 代码（不推荐）

写在标签上的 js 代码需要依靠事件（行为）来触发

1.通过a标签

2.通过一个onclick事件执行代码

<!-- 写在 a 标签的 href 属性上 -->
<a href="javascript:alert('我是一个弹出层');">点击一下试试</a>

<!-- 写在其他元素上 -->
<div onclick="alert('我是一个弹出层')">点一下试试看</div>

<!-- 
注：onclick 是一个事件（点击事件），当点击元素的时候执行后面的 js 代码
-->

内嵌式 JS 代码

内嵌式的 js 代码会在页面打开的时候直接触发

需要通过 script 标签把js代码包裹起来

<!-- 在 html 页面书写一个 script 标签，标签内部书写 js 代码 -->
<script type="text/javascript">
	alert('我是一个弹出层')
</script>

<!-- 
	注：script 标签可以放在 head 里面也可以放在 body 里面
-->

外链式 JS 代码（推荐）

外链式 js 代码只要引入了 html 页面，就会在页面打开的时候直接触发
新建一个 .js 后缀的文件，在文件内书写 js 代码，把写好的 js 文件引入 html 页面

<!-- 我是一个 html 文件 -->

<!-- 通过 script 标签的 src 属性，把写好的 js 文件引入页面 -->
<script src="index.js"></script>

<!-- 一个页面可以引入多个 js 文件 -->
<script src="index1.js"></script>
<script src="index2.js"></script>
<script src="index3.js"></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>
    <!-- <link rel="stylesheet" href="./a.css"> -->
    <!-- <style>
        @import url(./a.css);
    </style> -->
    <!-- <script src="" type="text/javascript"></script> -->
    <style>
        .box{
            width: 200px;
            height: 200px;
            background-color: red;
        }
        .box2{
            width: 200px;
            height: 200px;
            background-color: blue;
        }
        /* 注释 */
    </style>
</head>
<body>
     <a href="javascript:alert(11111);console.log(3333);">我是a标签</a>
     <a href="javascript:console.log(22222);console.log(44444);">我是console.log输入的内容</a>
    <hr/>
    <div class="box" onclick="alert(123);"></div>
    <div class="box2" onclick="console.log(12345);"></div>
    <script src="./b.js"></script>
    <!-- <script href="./b,js"></script> -->
    <script>
        // 删除  a 标签
        console.log(123);
        console.log("hello");
        console.log("你好123");
        // alert("hello world");
     </script>
</body>
</html>

小知识：打印。

js里的2种打印，输出内容

1.alert

弹出一个对话框显示输入的内容 alert("要显示的内容") ; 内容如果是数字可以不加引号；引号类型不能一致

js一行代码写完之后以分号结尾；没有点击确定之前会阻止后面的代码执行

2.console.log("需要打印的内容");

鼠标右键点击检查 ---- 点击控制台就可以看到 console.log输出的内容了

3.document.write("")

window:窗口

document：窗口中的内容

documentElement:html

document.write("") 向doucment里写一些内容

如果分多次渲染 write 后一个会覆盖前面的内容

 document.write("hello");
        document.write("<h1>我是标题</h1>");
        document.write("<h3>我是标题</h3>");

        document.onclick = function(){
            document.write("<h3>我是document重新渲染的内容</h3>");
        }

三、变量

变量：通过一个盒子把一些值装起来，那么这个盒子就等于这个值；

// 变量的声明 var 变量名 = "变量值"   ； 
 // 把等号右边的内容 赋值给左边的变量a 
 // a 就和右边的内容一致了；
  var a='234sdfgh'
    console.log(a)

小知识：变量名称的命名规则

1.只能用数字 字母 和下划线_ 及 $ 符号定义
                    数字命名的时候 不能用数字作为开头
                    js 不支持 - 定义变量
        
                2, 命名不支持空格 
                3. 变量区分大小写；
                4.变量名称不能使用关键字 和保留字
            小驼峰 
            userName
            大驼峰 
            UserName 
            尽量语义化

四，数字类型

一、 js前端涉及到的所有类型

一、基本数据类型（简单数据类型）二、复杂数据类型（引用数据类型）
根据数据在内存中存储的位置不同来划分的
基本数据类型会存放在内存的栈里
复杂数据类型会存在内存的堆里，然后通过指针指向这个地址

基本数据类型：数字（number）字符串（string）布尔值（boolean） undefined（未定义） null（空） symbol（ECMA2015版本后新增内容） bigint（ECMA2015版本后新增内容）

复杂数据类型：数组（array）对象（object）函数（function）正则表达式（RegExp）。。

二、数字类型

js里可以通过一个函数查看变量的类型 typeof(变量)；

// 相同的名称变量 后一个会覆盖前一个
        // var a = 10;
        // var a = 20;
        // console.log(a);

小知识：进制

二进制： 0b 开头的数字就是二进制

// var a = 0b0;

  // console.log(a);

16进制： 0x开头的就是16进制

 // 0 1 2 3 4 5 6 7 8 9 a b c d e f 

  var a = 0xf;

   var a = 0xb;

    console.log(a);

八进制就是 0o开头

var num= 0o7;

    console.log(num)

五。变量互换

a=b

b=a

不能做到变量互换

 var a = 10;
        var b = 20;
        a = b;   // a? 20  b = 20   , 这一步的时候  a 的值已经不是 10了 ，变成了 20；
        b = a;   // b =  20  
        console.log(a,b);

// 引入一个中间变量

 var a = 20;
        var b = 10;
        var temp=a;
        a = b;    //a=10
        b = temp;   //b=20
        console.log(a);  //10
        console.log(b);   //20

小知识：输入框prompt

  var a = prompt("请输入a的值?");
        var b = prompt("请输入b的值？");

        console.log("a的值是:",a,"b的值是:",b);   // 没有互换之前的a 和b 的值
        // 引入一个中间变量 
        var temp = a;  // 把之前的a通过 temp 保存起来
        a = b;
        b = temp;

六。字符串类型

1.字符串如何定义？

方式一：通过双引号定义
方式二：通过单引号
方式三：通过反引号定义字符串

 var str = "fdsfdsfdsafd";
        console.log(str);
        console.log(typeof str);


        var str1 = '我是字符串';
        console.log(str1);
        console.log(typeof str1);

符号转义字符 \ :把功能性的符号的功能去掉；

 var str = "<h1>我的名字是\"张三\"</h1>";  //""里原本不能有相同的""类型，用\去除""的功能性

纠错：2个\在文字中会显示为1个，4个\在文字中会显示为2个

七。其他数据类型

一、布尔值

true 是真 false 是假不能加引号

数字： 0 代表 false ，其他的代表true；

字符串： "" 代表false 其他非空字符串代表true

undefined 和 null 也是false

var a = true ;  // 真 
        var b  = false // 假
        console.log(a,b);
        console.log(typeof a);
        var c = "false"; // true
        console.log(c);
        console.log(typeof c);

        var str = ""; // 空串
        console.log(typeof str);

二、undefined 未定义

定义了变量，没有赋值，那么这个变量就是undefined ；

var a;
        console.log(a);
        var b = undefined;
        console.log(b);
        var res = typeof b;  // typeof的结果值 都是使用 字符串来描述的。  res  = "undefined"
        console.log(res);

小知识： document.querySelector("");

document.querySelector(".mydiv"); // 要在文档 document里找一个类名为 .mydiv的标签

三、null 空

null 实际上就是null类型，但是typeof的时候会显示object；

当你在获取dom元素的时候没有就会返还null

 var res = document.querySelector(".mydiv"); 
        console.log(res)
        var res = null;
        console.log(res);
        console.log(typeof res);

四、symbol类型 :独一无二的值；

 var s = Symbol("hello");
        var s1 = Symbol("hello");
        console.log(s,s1);
        console.log(s===s1);//值看着相同其实不同
        console.log(typeof s);

五、bigInt ：大整型

问题 js的精度为正的2的53次方----负的正的2的53次方

var a = 2 ** 54;
        console.log(a);
        console.log(a+1);
        console.log(a+2);
        console.log(a+3);

给数字后加上一个n 就可以了

var b = 100n;
        console.log(b);
        console.log(typeof b);

        var a = 2n ** 54n;
        console.log(a);
        console.log(a+1n);
        console.log(a+2n);
        console.log(a+3n);

六其他数据类型

无限的值； Infinity 无限大

var a = 2 ** 1024;//js中输入大于2**1024就会变成 Infinity 

console.log(-a);

2.NaN: not a number 不是一个数字。是数字类型

  var a = NaN;

    console.log(a);

    console.log(typeof a);

var a = 100*"hello";

    console.log(a);   //NaN

小知识：把字符串转成数字 Number();

七。加号拼接

 js里的加运算符  + 
        1.数字的运算 +   , 如果需要做数学运算 加号的左右 都必须是 数字类型
        var a = 10;
        // var b = 20;
        // var b = prompt("请输入b");
        // 把字符串转成数字  Number();
        var b = Number("5");//把字符串转成数字  Number();
        console.log(typeof b);
        console.log(a + b );

 2. 加号可以 做字符串拼接 。 加号左右至少有一个 字符串；
        var a = "hello ";
        var b = "world";
        var c = a + b;
        document.write("<h1>"+c+"</h1>");

        var myhtml = "<h1>hello</h1>" + 
                    "<h2>你好</h2>"  + 
                    '<p>我是p标签<p>';

        document.write(myhtml);

小知识：去掉小数点后的数

去掉小数点可以使用 parseInt(小数)

 //去掉小数点  parseInt(小数)
        var a=prompt("输入多少小时");   //80
       var day=parseInt(a/24);
       var hour=a-day*24;
       document.write(day+"天"+hour+"小时");//3天8小时