【Day1】ES5 (js引入，输出，变量和变量类型)

最新推荐文章于 2023-05-17 16:28:55 发布

草原的菜

最新推荐文章于 2023-05-17 16:28:55 发布

阅读量1.2k

点赞数

分类专栏： javascript学习文章标签： javascript html 前端

本文链接：https://blog.csdn.net/ccc__hhh/article/details/122756848

版权

javascript学习专栏收录该内容

20 篇文章 0 订阅

订阅专栏

日期：1月30日夜

前言：这是第一天的学习内容，往后的内容标红是我认为重要的内容，标橙色的则为需要记忆。

1.JS的引入方式

js 并非像样式那样必须引入在html中才能执行

js 本身是一个独立的脚本语言可以脱离 html 单独运行比如 node 去执行js

js 也可以引入到html中执行

js 如何引入到html

三种：行内引入只作用域引入的这一行

1. 必须要借助于事件函数 onclick事件函数表示点击的时候触发

2、讲想执行的js代码写入到js事件函数中

<button  onclick="alert(123)">点击</button>   //行内引入

页面中引入js 作用域是当前页面

1。一个页面可以写入多个script标签并且该标签可以写在页面中的任意位置

2. 多个script 标签执行顺序是从上到下

3. 同一个cript可以写多行代码执行顺序也是从上到下

4. 每一行代码的结束可以写; 也可以不写;

<script> alert(2)</script>  //页面引入

外链引入js

1. 写一个js文件

2. 通过script标签中的 src 属性引入外部js

<script src="./js/b.js"></script>  //外链引入

2.JS 代码的注释

1、单行注释 // 我是一个单行注释

2、多行注释 /* 我是一个多行注视 */

3.JS的三种输出

1、弹出

1.1 普通弹出 alert

1.2 弹出输入 prompt

1.3 确认弹出 confirm

2、控制台打印 [通过调试工具查看里面的console]

2.1 普通打印 console.info(打印的内容) 【经常使用】

console.log(打印的内容) 推荐使用log 简单有快捷生成

快捷生成的方式 log+enter

info 和log 一模一样没有任何区别

2.2 警告打印

console.warn();

特点：可以通过调试工具直接跳转到指定的警告行

2.3 错误打印

console.error();

特点：可以通过调试工具直接跳转到指定的错误行

通常情况 error 打印都不是我们自己写的而且当我们写错了代码系统生成的

作用：辅助我们找到错误的代码并将其改正

结论：当系统抛出了错误如果该错误并没有及时进行处理那么错误后面的代码不会执行

3、页面输出

document.write(输出的内容) 写入文档中

4. 调试

f12 进入调试页面

选入 console控制台

console 控制台中我们可以直接写js代码

4.JS的变量

变量：存储数据的一个容器，存在于内存中

内存中的数据：

1. 可以运行的

2、时效是在程序运行时有效程序一旦停止内存中的数据就会清空

硬盘中的数据：

1. 存储在操作系统中

2. 不删除一直存储

变量的三要素：

1. 存储变量的类型

2、变量的名字

3、变量的值

变量的类型：

弱语言类型： js是语言类型

先定义好这个容器类型取决于存储的内容到底是什么极为类型根据值来推到

强语言类型、后端语言 java c#

先定义好这个容器该容器有具体的存储类型一旦存储的数据不是该类型那么就会报错

js变量的定义：

变量的类型变量名 = 变量值表示将变量值存储到变量名中

定义变量的注意事项：

1. 变量名字不能重复如果我们写重复也不会报错后面的覆盖前面的但是会影响内存空间

// 定义一个变量并且赋值 
var a = 10;  //  将10赋值给了变量a 
// 修改这个变量值 
a = 20;  // 将原来的变量a重新赋值成20

var b = 20; // 定义一个变量并且赋值 ,将20赋值给了变量b

var b = 30; 
// 再次定义一个变量并且赋值 ,将30赋值给了变量b,此时内存中有两个b容器，重复定义不会报错但会影响内存空间

5.变量的类型

两种：

1. 简单数据类型

共为5种

number 数字类型正数/负数/小数.....

string 字符串类型 "" ''

boolean 布尔类型只包含 true/false

undefined 未定义类型值就是undefined或者是变量定义了但是未赋值

null 空类型 null

检测方式（1）typeof 只能检测出简单数据类型

（2） Object.prototype.toString.call(变量名) 简单数据类型和复杂数据类型都可以检测出来

2. 复杂数据类型：

数组/对象/函数.....

3. 检测数据类型：

typeof 变量名检测简单数据类型

Object.prototype.toString.call(变量名) 简单数据类型和复杂数据类型都可以检测出来

案例：检测数据类型

        var a1 = -10.1;
        var a1Type01 = typeof a1;  // 方式一检测
        var a1Type02 = Object.prototype.toString.call(a1) // 方式二检测 
        console.log(a1,a1Type01,a1Type02);  // 10 'number' '[object Number]'
        var a5;  // 定义了但是没有赋值
        console.log(a5,typeof a5,Object.prototype.toString.call(a5)); //     undefined                 'undefined' '[object Undefined]'
       
        var a6 = null;  // null类型 用typeof 无法检测出
        console.log(a6,typeof a6,Object.prototype.toString.call(a6));  // null '[object Null]'

需要注意的是，在页面中拿到的数值变量都是字符串类型

输入弹出 prompt

是否确认 confim

如果确定返回 true

如果取消返回 false

        var a7 =  prompt("请输入一个值:")  // 在页面中输入的数值赋值给变量a7
        console.log(a7,typeof a7);  // 输入的是10  赋值给变量的就是 a = "10"

        var flag = confirm("是否要删除一个数值") 
        console.log(flag,typeof flag);

总结:这是第一天的课程的一部分，较为简单，理解就可以