Js的组成部分

  • EMAScript：JavaScript语法
  • DOM：页面文档对象模型，通过dom提供的接口可以对页面的各种元素进行操作（大小、位置、颜色等）
  • BOM：浏览器对象模型，提供了独立于内容的、可以与浏览器窗口进行互动的对象结构，通过bom可以操作浏览器窗口，比如弹窗、控制浏览器跳转、获取分辨率等。

js的引用方式

行内式js

1
<input type="button" value="点我试试" onclick="alert('hell word')" />
  • 可以将单行或少量js代码写在html标签事件属性中（以 on开头的属性），如：onclick
  • 注意单双引号的使用：在html中推荐用双引号，js中推荐用单引号。
  • 可读性差，在html中编写大量js代码时，不方便阅读。
  • 引号容易出错，引号多层嵌套时容易混乱。
  • 特殊情况下使用。

内嵌式js

1
2
3
<script>
  alert('hello')
</script>

外部js文件

1
<script src="test.js"></script>
  • 有利于html页面代码结构化，把大段js独立到html页面外，美观也方便文件级别的复用。
  • 引用外部js文件的script标签中间不可以写代码。
  • 适合js代码量比较大的情况。

js输入输出内容

1
2
3
4
5
6
7
8
<script>
  // 弹出一个输入框
  prompt('输入你的年龄：');
  // 弹出一个警示框
  alert('计算的结果是：');
  // 打印控制台日志
  console.log('这是控制台日志');
</script>

js的变量

变量命名规范

  • 由字母(A-Za-z)、数字(0-9)、下划线（_）、美元符号（$）组成，如：userName,num01
  • 严格区分大小写。varapp;和varApp;是两个变量。
  • 不能以数字开头。18age是错误的。
  • 不能是关键字、保留字。例如：var、for、while
  • 变量名必须有意义。MMD BBD nl –> age
  • 遵守驼峰命名法。首字母小写，后面单词的首字母需要大写。

变量的使用

先声明再赋值

1
2
3
4
5
6
7
<script>
  // 声明一个年龄变量为age
  var age;
  // 给age变量赋值为10
  age = 10;
  console.log('年龄：' + age);
</script>

声明变量并初始化

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<script>
  // 声明变量并初始化变量
  var age = 18;
  console.log('年龄：' + age);
  
  // 一次性声明多个变量并赋值
  var name1 = 'zhangsan',
      name2 = 'lisi',
      name3 = 'wangwu';
  console.log(name1,name2,name3)
  
  // 只声明不赋值，默认值为undefined
  var sex;
  console.log(sex);
  
  // 不声明不赋值直接使用会报错
  console.log(test);
</script>

小案例

1
2
3
4
5
<script>
  // 用户输入的内容赋值给age变量
  age = prompt('输入你的年龄：');
  alert('你的年龄为：'+age)
</script>

js数据类型

js数据类型可以分为两类：

  • 简单数据类型（Number，String，Boolean，Undefined，null）
  • 复杂数据类型（object）

JavaScript是一种弱类型或者说动态语言，这意味着不用提前声明变量的类型，在程序运行中，变量的数据类型是由js引擎根据 = 右边变量值的数据类型来判断的，运行完毕之后变量就确定了数据类型。

1
2
3
var num = 10							 // 这是数字型，默认值为 0
var str = 'zhangsan'	 		// 这是字符型，默认值为 ""
var bo = true							// 这是布尔型，默认值为 false

数字型

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<script>
  // 声明数字型
  var num = 10;       // 数字型
  var pi = 3.1415;    // 浮点数字型
  var num1 = 010;     // 二进制表示，打印后自动转十进制
  var num2 = 012;     // 八进制表示，打印后自动转十进制
  var num3 = 0x9;     // 十六进制表示，打印后自动转十进制
  
  // 输出
  console.log(num)    // 输出10
  console.log(pi)     // 输出 3.1415
  console.log(num1)   // 输出8
  console.log(num2)   // 输出10
  console.log(num3)   // 输出9
</script>

判断是否非数字

1
2
3
4
5
<script>
  // isNaN（） 这个方法用来判断非数字，如果是数字返回false，如果非数字返回true
  console.log(isNaN('1sd'));  // true
  console.log(isNaN(1));    // false
</script>

字符串型

字符串嵌套

1
2
3
4
5
6
7
8
<script>
  // 字符串嵌套时遵循外单内双，外双内单的引号嵌套原则。
  var str1 = "我是一个'很菜'的程序员"
  var str2 = '我是一个"很菜"的程序员'

  console.log(str1);
  console.log(str2);
</script>

字符串转义符

常见的转义符有\n换行符，\\斜杠\，\'单引号’，\"双引号，\ttab缩进，\b空格

1
2
3
4
5
<script>
  // 字符串嵌套时遵循外单内双，外双内单的引号嵌套原则。
  var str1 = "我是一个'很菜'的\n程序员"
  console.log(str1);
</script>

获取字符串长度

1
2
3
4
5
<script>
  // 字符串嵌套时遵循外单内双，外双内单的引号嵌套原则。
  var str1 = "My name is xiaopu"
  console.log(str1.length);		// 17
</script>

字符串拼接

1
2
3
4
5
6
7
8
<script>
  // 多个字符串之间可以用 + 进行拼接，拼接方式为 字符串 + 任何类型 = 拼接后的新字符串
  // 拼接前会把字符串相加的任何类型转换成字符串，再拼接成一个新的字符串
  var Name = 'xiaopu'
  console.log('姓名：'+Name);   // 姓名：xiaopu
  console.log('年龄：'+18);     // 年龄：18
  console.log('地区：'+'上海');   // 地区：上海
</script>

undefined型

如果一个变量声明了未赋值，那么就是一个undefined 未定义的数据类型（如果进行相连或相加时，注意结果）

1
2
3
4
5
6
7
8
<script>
  // 定义未赋值
  var str;
  console.log(str);           // undefined
  console.log('你好'+str);    // 你好undefined
  console.log(11+str);        // NaN
  console.log(true+str);      // NaN
</script>

获取数据类型

1
2
3
4
5
6
7
8
9
10
11
<script>
  // 定义未赋值
  var str = 'xiaopu';
  var num = 18;
  var flag = true;
  var vari = undefined;
  console.log(typeof(str));           // string
  console.log(typeof(num));         // number
  console.log(typeof(flag));        // boolean
  console.log(typeof(vari));      // undefined
</script>

数据类型转换

转换为字符串型

1
2
3
4
5
6
7
8
9
10
11
<script>
  // 方法1：把数字转换成字符串型，变量.toString()
  var num = 18;
  console.log(num.toString());
  
  // 方法2：String(变量)
  console.log(String(num));

  // 方法3：隐式转换，使用+号进行字符串推荐这种方式更tui'j
  console.log(num+'');
</script>

转换为数字型

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<script>
  // 方法1：把字符串转换成数字型，注意这里是取整数。
  var age = '18';
  console.log(parseInt(age));
  
  // 方法2：把字符串转换成数字型，注意这里是转换成浮点。
  console.log(parseFloat('18.12'));

  // 方法3：强制转换为数字型
  console.log(Number('12'));

  // 方法4：隐私转换为数字型,利用 - * /进行隐式转换。
  console.log('2' - 2);
</script>