JavaScript
浏览器解释型语言, 嵌入到 HTML 中交给 浏览器解析和执行
JS 用于实现页面动画, 特效, 与用户的交互 ( 事件处理 ), 游戏等
组成
基础语法 ( ECMAScript ) , 内置对象
BOM 操作浏览器窗口的对象和方法
DOM 提供操作文档的方法
自定义对象
引入方式
元素绑定方式
<h1 onclick="alert('你好啊')">点击</h1>内嵌方式
可书写在任意多次使用
位置不同会影响到代码的执行
<script> // 在这里写你的JS代码 </script>
外链方式
<script src="myscript.js"></script>
注意
外链方式的 script 标签中不能再内嵌 js 代码
只会执行外部 js 文件的代码
JavaScript语言基础
注释语法
// 单行注释
/* 多行注释 */
结束标志
以 ; 作为结束标志, 但是不写也不会影响代码的执行
语法规范
严格区分大小写
常量使用大写
变量使用小写
声明变量
<script>
var a; // 声明
a = 100; // 赋值
var b = 100; // 声明赋值
var c = 100, d = 200; // 多变量声明赋值
// var f, g = 100, 1000; // 不行,不支持这样
</script>变量必须先声明在赋值. 未声明直接赋值会报错
访问未声明的变量会报错
声明未赋值默认值为 undefined
var 省略会影响作用域, 不建议省略 var 关键字
命名规范
- 变量.常量,函数名自定义最好一眼知其意
- 可以由 数字, 字母, 下划线, $ 组成
- 不能数字开头
- 禁止关键字冲突
- 变量采用小写, 小驼峰
- 常量使用全大写
声明常量
<script>
const PIE = 3.14
</script>常量一经定义无法修改,修改会报错
常用输出语句
警告框
alert("") 带输入框的弹窗
propmt("") 控制台输出
console.log("")网页中输出
在文档的相应位置添加内容, 可识别 HTML语法
如果通过绑定事件方式在 body 中插入内容会导致页面(body) 重写
document.write(""")JavaScript数据类型
JavaScript拥有动态类型
var x; // 此时x是undefined var x = 1; // 此时x是数字 var x = "Alex" // 此时x是字符串
数值(Number)
JavaScript不区分整型和浮点型，就只有一种数字类型
var a = 12.34; // 普通小数 var b = 20; var c = 123e5; // 12300000 科学计数法 e 表示 10 为底, 后面的数值为此方式 var d = 123e-5; // 0.00123 e 后取值为 负表示 -次方
var e = 053; // 8进制 以 0 开头做标识 var f = 0x53; // 16进制 以 0x 开头标识
不论是哪一种进制在控制台展示的时候都是 以 10进制形式
还有一种NaN，表示不是一个数字（Not a Number）
常用方法
parseInt("123") // 返回123
parseInt("ABC") // 返回NaN,NaN属性是代表非数字值的特殊值。该属性用于指示某个值不是数字。
parseFloat("123.456") // 返回123.456
len.toFixed("2") // 返回截取 len 小数点后两位字符串(String)
字符串使用引号表示,采用类似数组的存储方式，自动为每位字符分配下标,从0开始
var a = "Hello" // 单双引号都行 var b = "world;
字符串拼接
// 拼接字符串一般使用 " + " // 什么类型都可以和字符串拼接 , 结合需要考虑顺序
// 除了字符串之间的拼接, 其他的拼接都是转换成 number 类型进行拼接
var r1 = 10 + "110" // "10110" var r2 = true + "110" // "true110" var r3 = 15 + 5 + "10" // "2010" var r4 = "10" + 5 + 15 // "10515"
内置方法
字符串切割
截取字符串
substring(startIndex,endIndex)
功能 根据指定的下标范围截取字符串 start ~ end-1
参数
起始下标
结束下标可以省略，表示截至末尾
分割字符串
split(param)
功能 根据指定的分隔符，分隔字符串
返回 数组
参数
选填，省略的话没有分隔效果，并且只能指定字符串中存在的字符作为分隔符
ps 两者的区别:
两者的相同点：
如果start等于end，返回空字符串
如果stop参数省略，则取到字符串末
如果某个参数超过string的长度，这个参数会被替换为string的长度
substirng()的特点：
如果 start > stop ，start和stop将被交换
如果参数是负数或者不是数字，将会被0替换
silce()的特点：
如果 start > stop 不会交换两者
如果start小于0，则切割从字符串末尾往前数的第abs(start)个的字符开始(包括该位置的字符)
如果stop小于0，则切割在从字符串末尾往前数的第abs(stop)个字符结束(不包含该位置字符)
布尔值(Boolean)
区别于Python，true和false都是小写。
var a = true; var b = false;
""(空字符串)、0、null、undefined、NaN都是false。
拼接情况
在于数值拼接的时候会做转换
ture 被视为 1
false / null 会被视为 0
NaN 不变化
underfinded 视为 NaN
null 和 undefined
null表示值是空，一般在需要指定或清空一个变量时才会使用，如 name=null;
undefined表示当声明一个变量但未初始化时，该变量的默认值是undefined。还有就是函数无明确的返回值时，返回的也是undefined。
null表示变量的值是空
undefined则表示只声明了变量，但还没有赋值。
对象(Object)
JavaScript 中的所有事物都是对象：字符串、数值、数组、函数...此外，JavaScript 允许自定义对象。
JavaScript 提供多个内建对象，比如 String、Date、Array 等等。
对象只是带有属性和方法的特殊数据类型。
数组
数组对象的作用是：使用单独的变量名来存储一系列的值。类似于Python中的列表。
var a = [123, "ABC"]; console.log(a[1]); // 输出"ABC"
类型查询
typeof "abc" // "string" typeof null // "object" typeof true // "boolean" typeof 123 // "number"
typeof 是一个一元运算符（就像++，--，！，- 等一元运算符），不是一个函数，也不是一个语句。
返回值 ：
- undefined - 如果变量是 Undefined 类型的
- boolean - 如果变量是 Boolean 类型的
- number - 如果变量是 Number 类型的
- string - 如果变量是 String 类型的
- object - 如果变量是一种引用类型或 Null 类型的
数据类型转换
强制类型转换
转换字符串类型
方法 toString();
返回 转换后的字符串结果
转换number类型
方法 Number(n);
返回 转换后的结果
实例
数值字符串和布尔值，null都可以转换为number类型
- true -> 1
- false ->0
- null -> 0
字符串中一旦出现非数字字符（"hello","a1"）一律转换失败，返回NaN（Not a Number）
undefined无法转换number，返回NaN
转换布尔类型
方法 Boolean(n)
返回 布尔值
注意 除“零值”以外的所有值都为真，“零值”为假
以下情况都为假：
0, 0.0, "", null, undefined, NaN
解析数据中的number部分
方法 parseInt(n) / parseFloat(n)
作用 解析数据中的整数部分/解析包含整数和小数部分
过程 首先对数据自动转换成字符串，逐一对每位字符进行转number的操作，一旦转换失败，则停止向后解析，返回结果
自动类型转换
不同类型的数据在参与运算的过程中会自动转换
任意数据类型 + string
表示字符串的拼接，返回拼接后最终的字符串
number + boolean
将布尔值转换 number 进行数学运算
number + 非字符串类型：将其他类型转number做数学运算
boolean + boolean
转换为 numbe r做数学运算
注意
除了字符串拼接，其他情况下，都涉及将操作数转换为number，一旦某个操作数转换失败，即为NAN参与数学运算，结果永远是NAN
运算符
算数运算符
+ - * / % ++ --
n++ 和 ++n 是有区别的
n++ 表示先加减在赋值, 赋值再语句后执行
n = 5 n++ = 5 n = 6
++n 先赋值再加减, 赋值在语句中执行
n = 5 ++n = 6 n = 6
实例
如果实在不方便弄清楚, 就这样一步一步的拆分开算
比较运算符
> >= < <= != == === !==
注意：
1 == “1” // true 1 === "1" // false
逻辑运算符
&& || !
赋值运算符
= += -= *= /=
流程控制
if ，else
var a = 10;
if (a > 5){
console.log("yes");
}else {
console.log("no");
}if ，else-if ，else
var a = 10;
if (a > 5){
console.log("a > 5");
}else if (a < 5) {
console.log("a < 5");
}else {
console.log("a = 5");
}switch
var day = new Date().getDay();
switch (day) {
case 0:
console.log("Sunday");
break;
case 1:
console.log("Monday");
break;
default:
console.log("...")
}switch中的case子句通常都会加break语句，否则程序会继续执行后续case中的语句。
for
for (var i=0;i<10;i++) {
console.log(i);
}循环控制
1. break，跳出循环，其后的代码都不执行
2. continue，结束此次循环，直接开始下一次循环
嵌套循环
for(var i = 1; i < 10;i ++){
for(var j = 1; j < 10; j ++){
}实例
实现 99 乘法表
<script>
for (var i = 1; i < 10; i++) {
var show = "";
for (var j = 1; j <= i; j++) {
show += i + "*" + j + "=" + i * j +"\t";
}
console.log(show)
}
</script><script>
var year = prompt("请输入年");
var month = prompt("请输入月");
var day = prompt("请输入日");
var sum = 0;
for (var i = 1990; i < year; i++) {
sum += 365;
if (i % 4 == 0 && i % 100 != 0 || i % 400 == 0) {
sum++;
}
}
for (var j = 1; j < month; j++) {
switch (j) {
case 1:
case 3:
case 5:
case 7:
case 8:
case 10:
sum += 31;
break;
case 4:
case 6:
case 9:
case 11:
sum += 30;
break;
case 2:
sum += 28;
if (year % 4 == 0 && year % 100 != 0 || year % 400 == 0) {
sum++;
}
break;
}
}
// 累加当前月天数
sum += day;
// 对7 取余
var week = sum % 7;
var show = "";
switch (week) {
case 0:
show = "星期日";
break;
case 1:
show = "星期一";
break;
case 2:
show = "星期二";
break;
case 3:
show = "星期三";
break;
case 4:
show = "星期四";
break;
case 5:
show = "星期五";
break;
case 6:
show = "星期六";
break;
}
console.log(show)
</script>
实现输入年月日查询星期几