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>实现输入年月日查询星期几