typescript 定义一个范围数字

转载

蓝色忧郁花 2024-10-28 17:57:44

文章标签 typescript 定义一个范围数字 javascript html 字符串数据类型 文章分类 TypeScript 前端开发

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的注释

typescript 定义一个范围数字_html

JavaScript的三种输出方式

typescript 定义一个范围数字_数据类型_02

<!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由哪三个部分组成？

ECMAScript
BOM
DOM

script标签有哪两个属性？

src 导入外部js脚本
type 指定脚本的类型，可选

有哪三种输出方式？

console.log()
document.write()
alert()

变量的定义

目标

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

定义语法

ES 6中有三个定义变量的关键字：
var 以前使用比较多的一个关键字，用来定义变量
let 6以后多出来的定义变量的关键字
const 定义常量，类似于java final关键字

定义代码模板

typescript 定义一个范围数字_html_03

设置idea支持ES6

typescript 定义一个范围数字_字符串_04

变量的定义

<!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中定义变量使用哪个关键字？

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代码

设置断点

typescript 定义一个范围数字_字符串_05

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

语法错误

typescript 定义一个范围数字_javascript_06

常用的运算符

目标

学习JS中的各种运算符

算术运算符

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

typescript 定义一个范围数字_html_07

赋值运算符

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

typescript 定义一个范围数字_数据类型_08

比较运算符

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

typescript 定义一个范围数字_字符串_09

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

代码

<!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>

逻辑运算符

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

typescript 定义一个范围数字_javascript_10

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

三元运算符

typescript 定义一个范围数字_html_11

小结

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

学习总结

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

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

能够使用JS中常用的运算符

算术运算符
赋值运算符
比较运算符 === !==
逻辑运算符
三元运算符

本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。

上一篇：如何在不停机的情况下完场mysql的数据迁移

下一篇：java系统概要文档

提问和评论都可以，用心的回复会被更多人看到评论

发布评论

相关文章

官方博客	全部文章	热门标签	班级博客
了解我们	网站地图	意见反馈

鸿蒙开发者社区	51CTO学堂
51CTO	软考资讯