前端基础-JavaScript入门
第2章 入门
2.1 如何写一段JS代码并运行
- 写在行内
01.html:
<input type="button" value="按钮" onclick="alert('Hello World')" />
- 写在script标签中 *
02.html:
<head>
<script>
alert('Hello World!');
</script>
</head>
- 写在外部js文件中，在页面引入
03.html:
<script src="main.js"></script>
main.js:
alert('Hello World!');
注意点： 引用外部js文件的 script 标签中不可以再写JavaScript代码，即使写了也不会执行，没有作用
温馨提示：
下面开始进入 JS 基础语法的学习，非常枯燥，别睡着……
音乐很优美很动听，但学五线谱真的是乏味无聊痛苦不堪；
2.3 变量
2.3.1 什么是变量
-
什么是变量
变量是计算机内存中存储数据的标识符，根据变量名称可以获取到内存中存储的数据
-
为什么要使用变量
使用变量可以方便的获取或者修改内存中的数据
变量就是存储数据的容器；
2.3.2 如何使用变量
- var声明变量
var age;
- 变量的赋值
var age;
age = 18;
- 同时声明多个变量
var age, name, sex;
age = 10;
name = 'zs';
- 同时声明多个变量并赋值
var age = 10, name = 'zs';
2.3.3 变量的命名规则和规范
-
规则 - 必须遵守的，不遵守会报错
-
由字母、数字、下划线、$符号组成，且不能以数字开头
-
区分大小写
-
不能是关键字和保留字，例如：for、while。
-
-
规范 - 建议遵守的，不遵守不会报错
- 变量名必须有意义
- 遵守驼峰命名法。(首字母小写，后面单词的首字母需要大写。例如：userName、userPassword)
-
下面哪些变量名不合法
a 1 age18 18age name $ $name _sex &sex theworld theWorld
name变量名，本身不是保留字/关键字， 建议少用。 name在有的浏览器中，是自动声明过的。
2.3.4 案例
- 交换两个变量的值
var a = '1';
var b = '2';
// 借助第三个变量
var c = a;
a=b;
b=c;
console.log(a,b);
- 不使用临时变量，交换两个数值变量的值
//第二种方式
var num1 = 10;
var num2 = 20;
//计算的方式:累加,然后相减
num1 = num1 + num2;//num1的结果是30
num2 = num1 - num2;//num2的结果是10
num1 = num1 - num2;//num1的结果是20
console.log(num1);
console.log(num2);
2.3.5 代码调试（输出变量）
- alert 弹框 :浏览器页面弹框
var num1 = 10;
alert(num1);
- console.log() 浏览器console控制台
var num1 = 10;
var num2 = 20;
console.log(num1);
console.log(num1, num2);
- document.write() 浏览器页面中
var num1 = 10;
document.write(num1);
2.4 数据类型
2.4.1 简单数据类型
Number、String、Boolean、Undefined、Null
获取变量的类型
typeof
var age = 18;
console.log(typeof age); // 'number'
Number类型
-
数值字面量：数值的固定值的表示法（数值直接量）
110 1024 60.5
-
浮点数（小数）
-
浮点数的精度问题
浮点数
var n = 5e-324; // 科学计数法 5乘以10的-324次方
浮点数值的最高精度是 17 位小数，但在进行算术计算时其精确度远远不如整数
var result = 0.1 + 0.2; // 结果不是 0.3，而是：0.30000000000000004
console.log(0.07 * 100);
不要判断两个浮点数是否相等
-
数值范围
最小值：Number.MIN_VALUE，// 这个值为： 5e-324 5乘以10的-324次方 最大值：Number.MAX_VALUE，// 这个值为： 1.7976931348623157e+308 无穷大：Infinity 无穷小：-Infinity
String类型
‘abc’ “abc” 单双引号引起来的一连串字符
-
字符串字面量（直接量）
‘程序猿’，‘程序媛’, “黑马程序猿”
思考：如何打印以下字符串。
我是一个 “正直” 的人
我很喜欢 "黑马 ‘程序猿’ "注： 转义后单双引号 只能 就近和转义后的单双引号进行配对
-
转义符
注： \b 退格符 \f又叫走纸或进纸或 换页符
var s = '我很喜欢 \"黑马 \'程序猿\' \"';
console.log(s);
- 字符串长度
length属性用来获取字符串的长度
var str = '黑马程序猿 Hello World';
console.log(str.length);
- 字符串拼接
字符串拼接使用 + 连接
console.log(11 + 11);
console.log('hello' + ' world');
console.log('100' + '100');
console.log('11' + 11);
console.log('male:' + true);
- 两边只要有一个是字符串，那么+就是字符串拼接功能
- 两边如果都是数字，那么就是算术功能。
Boolean类型
- Boolean字面量： true和false，区分大小写
- 计算机内部存储：true为1，false为0
Undefined和Null
- undefined表示一个声明了没有赋值的变量，变量只声明的时候值默认是undefined
- null表示一个空，变量的值如果想为null，必须手动设置
注: 关于undefined和null是一个面试中很容易被问到的问题
2.4.2 复杂数据类型
Object 对象：保存很多数据的一种数据类型
后面详解；
题外话
如何使用谷歌浏览器，快速的查看数据类型？
字符串的颜色是黑色的，数值类型是蓝色的，布尔类型也是蓝色的，undefined和null是灰色的
console.log('ss',2,null,undefined,true);
2.5 注释
被注释的内容是不执行的，不管什么内容都不会运行；
单行注释
用来描述下面一个或多行代码的作用
// 这是一个变量
var name = 'hm';
多行注释
用来注释多条代码
/*
var age = 18;
var name = 'zs';
console.log(name, age);
*/
总结：
JS代码的书写，变量的声明方式，数据类型，注释；
上一篇： 安全使用公共WiFi小技巧