JavaScript基础 -输出定义代码模块变量var let 数据类型判断变量数据类型typeof

最新推荐文章于 2023-07-11 21:45:00 发布

专注一生i

最新推荐文章于 2023-07-11 21:45:00 发布

阅读量616

点赞数

分类专栏： JavaScript 文章标签： javascript

本文链接：https://blog.csdn.net/qq_26304015/article/details/109462991

版权

JavaScript 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

JavaScript概述和体验

目标

JavaScript的作用
编写第1个JavaScript代码

为什么要用JavaScript

运行在网页上脚本(Script)

网页中各技术的作用

技术	作用
HTML	创建网页的结构
CSS	网页的美化
JavaScript	用于网页的交互，让网页变得更加生动，提高用户的体验

JS体验案例

需求

使用JS在网页上输出5个Hello World

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JavaScript的初体验</title>
</head>
<body>
<!--JavaScript脚本必须放在script标签中，MIME类型：大类型/小类型 -->
<script type="text/javascript">
    for (var i = 0; i < 5; i++) {
        //在文档上写东西，整个网页就是一个文档document
        document.write("<h1>Hello World!</h1>");
    }
</script>
</body>
</html>

小结

什么要JS？让网页更生动，改善用户的体验
说说网页上各种技术的作用：HTML，CSS，JS

JavaScript的两种引入方式

目标

JS语言的三个组成部分
<script>标签的说明

语言组成

组成部分	作用
ECMA Script	所有脚本语言规范，构成了JavaScript语法基础
BOM	Browser Object Model 浏览器对象模型，用来操作浏览器中各种对象
DOM	Document Object Model 文档对象模型，用来操作网页中各种元素

script标签的说明

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JavaScript的初体验</title>
</head>
<body>
<!--JavaScript脚本必须放在script标签中，MIME类型：大类型/小类型 -->
<script type="text/javascript">
    for (var i = 0; i < 5; i++) {
        //在文档上写东西，整个网页就是一个文档document
        document.write("<h1>Hello World!</h1>");
    }
</script>

<!--
1. 标签个数：在同一个网页中可以出现多个script标签
2. 位置：script标签可以放在网页中任意位置，甚至是html之外
3. 语句后分号：如果一行代码一条语句，分号可以省略，不建议省略

4. 以后js脚本通常放在HTML外面，导入来使用，使用script标签来导入。
属性：src 指定要导入的外部js文件
必须是一个有主体的标签
-->
<script src="js/out.js" type="text/javascript"></script>
</body>
</html>

JavaScript的注释

JavaScript的三种输出方式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JS的三种输出方式</title>
</head>
<body>
<script type="text/javascript">
    // 1.输出到浏览器的控制台
    console.log("你好，我是JavaScript");
    //2. 输出到文档网页上
    document.write("输出到网页上");
    //3. 弹出信息框
    alert("这是一个信息框");
</script>
</body>
</html>

小结

JS由哪三个部分组成？
1. ECMAScript
2. BOM
3. DOM
script标签有哪两个属性？
1. src 导入外部js脚本
2. type 指定脚本的类型，可选
有哪三种输出方式？
1. console.log()
2. document.write()
3. alert()

变量的定义

目标

变量的定义的语法
var关键字的使用

定义语法

ES 6中有三个定义变量的关键字：

var 以前使用比较多的一个关键字，用来定义变量

let 6以后多出来的定义变量的关键字

const 定义常量，类似于java final关键字

定义代码模板

设置idea支持ES6

变量的定义

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>变量定义</title>
</head>
<body>
<!--输入sc以后，按ctrl+j-->
<script type="text/javascript">
    var i = 5;  //定义整数
    let m = 6;  //默认idea不支持，要修改EC为6
    const PI = 3.14;  //常量
    document.write(i + "<br/>");
    document.write(m + "<br/>");
    //PI = 5;  不能重新赋值
    document.write(PI + "<br/>");
</script>
</body>
</html>

数据类型	Java中定义变量	JS中定义变量
整数	int i = 5;	var i=5;
浮点数	float f = 3.14f; 或 double d=3.14;	var f=3.14;
布尔	boolean b = true;	var b=true;
字符	char c = 'a';	var c = 'a'; //没有字符类型，只有字符串
字符串	String str = "abc";	var str = "abc";

注意事项

//1. 关于弱类型？
/* 同一个变量可以赋值为不同的数据类型 */
var num = 666;  //整数
num = true;  //布尔
num = "abc";   //字符串类型，注：js中没有字符类型，只有字符串
document.write(num + "<br/>");

//2. 在JS中的字符和字符串引号？
//JS中字符串既可以使用单引号 ' ，也可以使用双引号 " ，还可以使用反引号 ` (Esc下面：波浪线)
let s1 = 'abcd';
let s2 = "xyz";
let s3 = `hello`;
document.write(s1 + s2 + s3 + "<br/>");

var和let的区别

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>var和let的区别</title>
</head>
<body>
<script type="text/javascript">
    //1.作用域不同：var定义的变量在代码块中不受{}限制，let定义的变量是受限制
    {
        var x = 5;
    }
    document.write(x + "<br/>");  //可以输出，不受{}限制

    {
        let y = 6;
    }
    //document.write(y + "<br/>");  //找不到y的值，出错

    //2.重新定义变量区别：var可以修改变量的值
    var a = 10;
    {
        var a = 2;
    }
    document.write(a + "<br/>");  //2

    let b = 5;
    {
        let b = 3;  //不可见
    }
    document.write(b + "<br/>");  //5

    //3.const关键字，如果是对象，它的属性可以修改
    const person = {"name": "NewBoy", "age": 18};
    document.write(person.name + "<br/>");
    document.write(person.age + "<br/>");
    //person = {};  //不行的
    person.age = 19;
    document.write(person.age + "<br/>");
</script>
</body>
</html>

小结

在JS中定义变量使用哪个关键字？
1. var
2. let
JS是弱类型还是强类型？

弱类型
有没有字符和字符串的区别？

没有字符类型，只有字符串，字符串使用：" ' `

五种数据类型

目标

JS中有哪五种数据类型

五种数据类型

关键字	说明
number	数值型，包括整数和浮点数
boolean	布尔类型，true或false
string	字符串类型，可以使用单引号，双引号，反引号
object	对象类型
undefined	未定义的类型

typeof操作符

作用：判断一个变量的数据类型

写法：

typeof 变量名
typeof(变量名)

案例：数据类型的演示

需求

分别输出整数、浮点数、字符串(单引号和双引号)、布尔、未定义、对象、null的数据类型

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>五种数据类型</title>
</head>
<body>
<script type="text/javascript">
    //分别输出整数、浮点数、字符串(单引号和双引号)、布尔、未定义、对象、null的数据类型
    let i = 5;
    document.write(typeof(i)+ "<br/>");  //number

    let f = 3.4;
    document.write(typeof(f) + "<br/>");  //number

    let c = 'a';
    document.write(typeof(c) + "<br/>");  //string

    let s = "abc";
    document.write(typeof(s) + "<br/>");  //string

    let b = true;
    document.write(typeof(b) + "<br/>");  //boolean

    let u;
    document.write(typeof(u) + "<br/>");  //undefined

    let n = {name: "jack", age: 18};
    document.write(typeof(n) + "<br/>");  //object

    /**
     * 注：null和undefined的区别
     * 1. null本质上是一个对象类型，只是这个对象没有值
     * 2. undefined 未知的类型
     */
    let x = null;
    document.write(typeof(x) + "<br/>");   //object
</script>
</body>
</html>

小结

null与undefined的区别	说明
null	null本质上是一个对象类型，只是这个对象没有值
undefined	未知的类型，没有初始化

在浏览器中调试代码

目标

如何在浏览器中调试JS代码

设置断点

注：设置断点以后要重新刷新页面才会在断点停下来

语法错误

常用的运算符

目标

学习JS中的各种运算符

算术运算符

算术运算符用于执行两个变量或值的算术运算

赋值运算符

赋值运算符用于给JavaScript 变量赋值

比较运算符

比较运算符用于逻辑语句的判断，从而确定给定的两个值或变量是否相等。

数字可以与字符串进行比较，字符串可以与字符串进行比较。字符串与数字进行比较的时候会先把字符串转换成数字然后再进行比较

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>运算符</title>
</head>
<body>
<script type="text/javascript">
    let s1 = 5;
    let s2 = "5";
    document.write((s1 == s2) + "<br/>");  //true 比较值是否相等
    document.write((s1 === s2) + "<br/>");  //恒等于，既比较值，又比较类型

    document.write((s1!=s2) + "<br/>");  //false
    document.write((s1!==s2) + "<br/>");  //恒不等于 true
</script>
</body>
</html>

逻辑运算符

逻辑运算符用来确定变量或值之间的逻辑关系，支持短路运算

逻辑运算符不存在单与&、单或|

三元运算符

小结

运算符 === 有什么作用？
```
既比较值，又比较类型
```

学习总结

能够说出JS中五种数据类型

关键字	说明
number	数值
boolean	布尔
string	字符串
object	对象
undefined	未定义

能够使用JS中常用的运算符
1. 算术运算符
2. 赋值运算符
3. 比较运算符 === !==
4. 逻辑运算符
5. 三元运算符

专注一生i

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript基础 -输出定义代码模块变量var let 数据类型判断变量数据类型typeof

JavaScript概述和体验目标 JavaScript的作用编写第1个JavaScript代码为什么要用JavaScript运行在网页上脚本(Script)网页中各技术的作用技术作用 HTML 创建网页的结构 CSS 网页的美化 JavaScript 用于网页的交互，让网页变得更加生动，提高用户的体验 JS体验案例需求使用JS在网页上输出5个Hello World代码<!DOCTYPE h..
复制链接

扫一扫