Web前端（二）:JavaScript入门基础、类型、变量

程序员文章站 2024-01-25 19:44:22

...

JavaScript

完整的Javascript语言由三部分组成：

核心（ECMAScript）
文档对象模型（DOM,Document Object Model）
浏览器对象模型（BOM,Browser Object Model）

为什么学习Javascript

所有主流浏览器都支持Javascript
目前，全世界大部分网页都是用Javascript
它可以让网页呈现各种动态效果
作为Web开发工程师，如果你想提供漂亮的网页，另用户满意的上网体验，Javascript是必不可少的工具

浏览器内核

浏览器内核负责页面内容的渲染，主要由两部分组成：

内容排版引擎——解析HTML/CSS
脚本解释引擎——解析Javascript

第一个JavaScript程序

<!DOCTYPE html>
<html>
	<head>
		<title>我的第一个js程序<title>
		<meta charset="utf-8">
	</head>
	<body>
		<script>
			alert("欢迎来到JavaScript的世界！");
		</script>
	</body>
</html>

如何插入Javascript

网页中直接插入脚本块

使用

JS在页面中的位置

我们可以将JavaScript代码放在html文件中任何位置，但是我们一般放在网页的head或者body部分。
放在部分
最常用的方式是在页面中head部分放置

JS的代码错误

解释性语言，若某行代码错误，则解释器终止此次执行；
但不影响后续块的执行，以及后续HTML元素的解析

<script>
	document.write("a");  //正常执行
	document.writ("b");  //方法名错误
	document.write("c");  //语法正确，但未能正确执行
</script>
<script>
	document.write("d");  //正常执行
</script>

编写JS代码

语句——会被Javascript引擎解释执行的代码
- 由表达式，关键字，运算符组成；
- 大小写敏感
- 使用分号或换行结束；
注释——不会被Javascript引擎解释执行的代码
- 单行注释：//
- 多行注释： /* */

大小写敏感

在Javascript程序中大小写是敏感的
- userName ,UserName是不同的
- getCity(), GetCity是不同

换行与空格

换行，分号

Web前端（二）:JavaScript入门基础、类型、变量

空格, TAB

Web前端（二）:JavaScript入门基础、类型、变量

变量

什么是变量

变量是存储信息的容器
在代数中，使用字母（比如：x）来保存值（比如：2）

x=2; y=3; sum=x+y; 通过三个语句，就能计算出sum的值为5
Javascript中，这些字母就被称为变量

变量的声明

使用关键字var声明变量，如: var username;

虽然声明变量时可以省略var关键字，推荐不要省略
使用“=”为变量赋值 var num = 100;
没有初始化的变量自动取值为undefined

var a;

alert(a);
一条语句中可以声明多个变量，变量名使用“,”分割

var name1,name2,name3;

var num1,num2=20;

变量的命名要求符合语法

不允许使用语言关键字和保留字作为变量名
预保留的关键字
- class, int ,float等

命名规范

可以包含字母，数字，下划线，美元符号（$）
不能以数字开头
常用表示函数，变量等的名称
名称最好有明确的含义
可以采用“小驼峰命名法”，“大驼峰命名法”，“下划线命名法”等，在开发团队内进行协调统一

未经初始化的变量

变量定义之后，在使用前从未赋过值，值为undefined

var num;	//定义变量，但未赋值

alert(num);	//直接使用未被赋值的变量

变量未被定义过，而直接使用，属于语法错误

alert(num);	//直接使用从未定义的变量

初始化变量

在变量声明时初始化

可以在定义变量时立即进行初始化

var age=10;

var gender=“男”；

var email=“aaa@qq.com163.com”;

第一次使用前初始化

变量也可以先声明，再赋值

var name;
var age;
name=“wangming”;
age=“30”;
alert(name);

对变量的值进行存取操作

获取变量的值——get操作

var name=“zhangsan”;

var name2 = name;
重新设置变量的值——set操作

var password= “123”;

password=456”;

newPassword=password;

数据类型

能够表示并操作的值的类型称作数据类型（type）
Javascript数据类型分为两类：原始类型和引用类型（对象类型），原始类型包括特殊类型

Web前端（二）:JavaScript入门基础、类型、变量

String类型

表示一系列的文本字符数据，如性别，姓名，住址等
由Unicode字符，数字，标点符号组成的序列
Javascript不像Java语言那样严格区分字符和字符串类型
首尾由一对单引号或者双引号括起来
特殊字符需要转移符

Number类型

数字类型，既可表示32位整数，也可表示64位的浮点数
整数
- 十进制，逢十进一的整数，如：13242
- 十六进制：逢十六进一的整数：如：0x123
浮点数
- 使用小数点近路数据：如：93.2 ，3.1415
- 使用指数记录数据：如：4.3e23, 4.3E-23

boolean类型

布尔类型

有两个值，true和false
- 也代表 1和0
- 实际运算中true = 1, false = 0
多用于控制结构语句

隐式转换

Javascript属于松散类型的程序语言
- 变量类型在声明时不需要指定数据类型
- 变量由赋值操作确定数据类型
不同类型数据在计算过程中会自动进行转换

数字+字符串：数字转换为字符串

数字+布尔值：true转换为1，false转换为0

字符串+布尔值：布尔值转换为字符串true或false

布尔值+布尔值：布尔值转换为数值1或0

typeof()函数可用于检测当前数据的类型

// 隐式转换
            // 数据与字符串
            var a=2,b="xyz"
            var c=a+b;
            console.log(c+"---"+typeof(c));

            // 数据和布尔类型
            var a=2;
            var b=a+true
            console.log(b+"---"+typeof(b));

            // 字符串和布尔类型
            var a="xyz";
            var b=a+true
            console.log(b+"---"+typeof(b));

            // 布尔类型和布尔类型
            var a=true+false
            console.log(a+"---"+typeof(a));

Web前端（二）:JavaScript入门基础、类型、变量

数据类型转换函数

使用数据类型转换函数进行显式类型转换

toString()

转换成字符串，所有数据类型均可转换为string类型

// 显式转换
            // 转换为字符串类型
            var a=123;
            var str=a.toString();
            console.log(str+"----"+typeof(str));

parseInt()

解析出一个string或number的整数部分

如果没有可转换的部分，则返回NaN（Not a Number）

// 显式转换

            // 转换为Int类型
            var a=123.456,c="123xyz789.456";
            var b=parseInt(a);
            var d=parseInt(c);
            console.log(b+"---"+typeof(b));
            console.log(d+"---"+typeof(d));

parseFloat()

解析出一个string的浮点数部分

如果没有可以转换的部分，则返回NaN

// 显式转换

            // 转换为Float类型
            var a=123.456;c="1234xyz.9";
            var b=parseFloat(a);
            var e=parseFloat(c);
            console.log(b+"---"+typeof(b));
            console.log(e+"---"+typeof(e));

Number()

把一个string解析为number

如果包含非法字符，则返回NaN

// 显式转换

            // 转换为number类型
            var a="123.4a";
            var b=Number(a);
            console.log(b+"---"+typeof(b));

Web前端（二）:JavaScript入门基础、类型、变量

isNaN函数

isNaN()

用于判断其参数是否为一个“非数字（NaN）”值
如果把NaN与任何值（包括其自身）相比得到的结果均是false,所以要判断某个值是否是NaN

通常用于检测类型转换函数的运算结果，以判断它们表示的是否是合法的数字。

 alert(isNaN("123.4a")); 结果为true

 alert(isNaN(parseInt("123.4a")));结果为false

 alert(isNaN(parseFloat("123.4a")));结果为false

 alert(isNaN(Number("123.4a")));结果为true

null

存在该数据，但当前还不存在确定的值
Null在程序中代表“无值”或者“无对象”
可以通过给一个对象赋值null来清除变量的内容

undefined

不存在该数据
声明了变量但从未赋值或者对象属性不存在

上一篇： ES5和ES6中的继承

下一篇：我的长久图库

Web前端（二）:JavaScript入门基础、类型、变量

JavaScript

为什么学习Javascript

浏览器内核

第一个JavaScript程序

如何插入Javascript

JS在页面中的位置

JS的代码错误

编写JS代码

大小写敏感

换行与空格

变量

什么是变量

变量的声明

变量的命名要求符合语法

命名规范

未经初始化的变量

初始化变量

在变量声明时初始化

第一次使用前初始化

对变量的值进行存取操作

数据类型

String类型

Number类型

boolean类型

隐式转换

数据类型转换函数

isNaN函数

null

undefined

Web前端（二）:JavaScript入门基础、类型、变量

Javascript入门学习第二篇 js类型_基础知识

Web前端基础(8):JavaScript(二)

TypeScript基础入门之Javascript文件类型检查(二)

前端入门8-JavaScript语法之数据类型和变量

Web前端基础(8):JavaScript(二)

[Java入门笔记]Java语言基础（二）：常量、变量与数据类型

HTML-JavaScript(二)变量及基础数据类型

JavaScript 基础（二）【变量、数据类型】

前端入门8-JavaScript语法之数据类型和变量