Javascript
一、简介
JavaScript一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言，支持内置类型。它的解释器被称为JavaScript引擎，为浏览器的一部分，广泛用于客户端的脚本语言，最早是在HTML网页上使用，用来给HTML网页增加动态功能。
JavaScript 被数百万计的网页用来改进设计、验证表单、检测浏览器、创建cookies，以及更多的应用。
JavaScript 是因特网上最流行的脚本语言。
JavaScript是一种轻量级、解释性、脚本编程语言，可以执行在所有现代浏览器中。
学习目标：JavaScript语法，将JavaScript运用在HTML中定制交互行为，定制前端逻辑
二、第一个程序
1、初识Javascript
<html>
<head>
<title>学习HTML基本语法</title>
<script type="text/javascript">
//警告弹窗
alert('Hello World');
//向开发者工具的console中输出日志
console.log('日志内容')
</script>
</head>
<body>
...
</body>
</html>
- HTML 的
<script>标签用于把 JavaScript代码 插入 HTML 中； - script标签可以出现在html的head或body位置，一般常放在head中；
- 也可以引入外部的js文件
<script src="myScript.js"></script>
2、注释
- 单行注释 //
- 多行注释 /* … */
两个目的：
（1）解释说明 对代码进行解释说明
（2）屏蔽代码
三、变量和数据类型
1、变量
js是弱类型语言，所以在定义变量时不需要指定类型，直接用var关键字定义即可。
var x=5;
var y=6;
var z=x+y;
console.log(z);
2、数据类型
字符串（String）、数字(Number)、布尔(Boolean)、数组(Array)、对象(Object)、空（Null）、未定义（Undefined）。
2.1 字符串
声明字符串
var carname = "Volvo XC60";
console.log(carname)
大小写转换
var lower = carname.toLowerCase()
console.log(lower)
var upper = carname.toUpperCase()
console.log(upper)
分隔字符串
var r = carname.split(' ')
console.log(r)
console.log(r[1])
2.2 数字
JavaScript不区分整数类型和浮点类型 。
var age = 18;
var price = 10.99;
var a = 3;
console.log(typeof age)
console.log(typeof price) //=> number
2.3 布尔
var y = true;
console.log(y);
2.4 数组
var arr = [2,4,6,8,22];
for (var i = 0;i<arr.length;i++) {
console.log(arr[i]);
}
arr[5] = 40; //在下标为5的位置添加40
console.log(arr.length); // => 6
arr.push(30)
console.log(arr)
2.5 Object对象
如下两种创建方式，方式一不建议使用，方式二的创建方式更轻便，建议使用
//方式一：
var obj = new Object();
obj.name="Mr_lee";
obj.age=18;
obj.sayHi=function(){ //为对象添加方法
console.log("hi~")
}
//方式二：
var obj2={name:'Mr_lee',age:18,sayHi:function(){console.log("hi~");}}
//使用
console.log(obj.name)
console.log(obj2.name)
obj.sayHi()
obj2.sayHi()
2.6 日期类型
var a = new Date() //当前系统时间
var b = new Date(2018,5,28,10,9,10) // year month day hour minute second ,月份从0开始
var b = new Date(2018,5,28)
a.getFullYear();
a.getMonth(); //月份，一月是0
a.getDate();
a.getDay(); //一周的第几天 周日是0
a.getHours();
a.getMinutes();
a.getSeconds();
a.getTime();
2.7 特殊类型
- undefined：未赋值的变量的默认值 var a;alert(a)
- NaN:not a number, 比如 b = “sf”/2; b的值就是NaN
- null:用于置空变量，不是默认值，需要手动赋值 var a=“sdf”; a=null;alert(a)
四、Math对象
Math 对象用于执行数学任务。
Math 对象并不像 Date 和 String 那样是对象的类，因此没有构造函数 Math()。
var x = Math.PI; // 返回PI
var y = Math.sqrt(16); // 返回16的平方根
1、Math对象属性
| 属性 | 描述 |
|---|---|
| E | 返回算术常量 e，即自然对数的底数（约等于2.718）。 |
| LN2 | 返回 2 的自然对数（约等于0.693）。 |
| LN10 | 返回 10 的自然对数（约等于2.302）。 |
| LOG2E | 返回以 2 为底的 e 的对数（约等于 1.414）。 |
| LOG10E | 返回以 10 为底的 e 的对数（约等于0.434）。 |
| PI | 返回圆周率（约等于3.14159）。 |
| SQRT1_2 | 返回 2 的平方根的倒数（约等于 0.707）。 |
| SQRT2 | 返回 2 的平方根（约等于 1.414）。 |
2、Math对象方法
| 方法 | 描述 |
|---|---|
| abs(x) | 返回 x 的绝对值。 |
| acos(x) | 返回 x 的反余弦值。 |
| asin(x) | 返回 x 的反正弦值。 |
| atan(x) | 以介于 -PI/2 与 PI/2 弧度之间的数值来返回 x 的反正切值。 |
| atan2(y,x) | 返回从 x 轴到点 (x,y) 的角度（介于 -PI/2 与 PI/2 弧度之间）。 |
| ceil(x) | 对数进行上舍入。 |
| cos(x) | 返回数的余弦。 |
| exp(x) | 返回 Ex 的指数。 |
| floor(x) | 对 x 进行下舍入。 |
| log(x) | 返回数的自然对数（底为e）。 |
| max(x,y,z,…,n) | 返回 x,y,z,…,n 中的最高值。 |
| min(x,y,z,…,n) | 返回 x,y,z,…,n中的最低值。 |
| pow(x,y) | 返回 x 的 y 次幂。 |
| random() | 返回 0 ~ 1 之间的随机数。 |
| round(x) | 把数四舍五入为最接近的整数。 |
| sin(x) | 返回数的正弦。 |
| sqrt(x) | 返回数的平方根。 |
| tan(x) | 返回角的正切。 |
五、运算符
- 算数运算符（+ - * / % ++ --）
- 比较运算符（> >= < <= == != === !==）
- 逻辑运算符（&& || !）
- 赋值运算符（= += -= *= /= %= ）
- 字符串连接运算符（+）
- 三元运算符（? :）
1、算数运算符
自增运算符 :
var x = 3;
console.log( x++ );// 输出 3
console.log( x );// 输出 4
var y = 3;
console.log( ++y );// 输出 4
console.log( y );// 输出 4
自减运算符
var x = 3;
console.log( x-- );// 输出 3
console.log( x );// 输出 2
var y = 3;
console.log( --y );// 输出 2
console.log( y );// 输出 2
2、比较运算符
- === 两个运算数的值相等并且类型相同时，结果为true。
- !== 两个运算数的值不等或者类型不同时，结果为true。
3、逻辑运算符
4、赋值运算符
5、字符串连接运算符
var str1 = "Hello";
var str2 = "Word";
var str3 = str1 + str2;
console.log(str3);
6、三元运算符
表达式一?表达式二 :表达式三 判断表达式一是否为真，为真取表达式一的值，否则取表达式二的值
var a = 10;
var b = 5;
var c = a > b ? a : b;
console.log(c);
六、流程控制
1、条件语句
条件语句就是指通过判断指定的计算结果，来决定是执行还是跳过指定的语句块。
JavaScript提供了两种条件语句：if else语句和switch case语句。
1.1 if语句
var num = 5;
if( num < 10 ){
console.log( num );
}
1.2 if else语句
var score = 68;
if( score < 60 ){
console.log("不及格");
}else{
console.log("及格");
}
1.3 else if语句
var score = 68;
if( score > 90 ){
console.log("优秀");
}else if( score >= 80 ){
console.log("良好");
}else{
console.log("一般");
}
1.4 switch case语句（python中没有）
var num = 2;
switch( num ){
case 1:
console.log("查询余额");
break;
case 2:
console.log("在线充值");
break;
default:
console.log("转人工服务");
}
2、循环语句
循环语句是一系列反复执行到复合特定条件的语句。
2.1 for语句
for( var i = 1; i < 10; i++ ){
for( var j = 1; j <= i; j++ ){
console.log(i + "*" + j + "=" + (i*j));
}
}
2.2 while语句
var num = 0;
while( num < 10 ){
console.log( num );
num = num + 1;
}
2.3 do…while语句
var num = 0;
do{
console.log( num );
num = num + 1;
}while( num < 10 );
3、break和continue
- break语句是中断语句，用于终止循环语句或开关语句。
for( var i = 0; i < 10; i++ ){
if( i == 5 ){
break;
}
console.log( i );
}
- continue语句是连续语句，用于重新开始while、do while和for语句。
for( var i = 0; i < 10; i++ ){
if( i == 5 ){
continue;
}
console.log( i );
}
七、函数
1、基本语法
function 方法名(参数1,参数2){
...
return ...
}
function fn(){
console.log("this is function");
}
fn();
2、匿名函数
var fn = function(a,b){ //定义匿名函数，并赋值给一个变量
alert(a+" -- "+b)
}
fn(18,"Mr_lee") //调用
八、事件
HTML 4.0 的新特性之一是有能力使 HTML 事件触发浏览器中的动作（action），比如当用户点击某个 HTML 元素时启动一段 JavaScript。
1、事件注册
事件注册：定义函数myClick , 并在标签的事件中调用方法：οnclick=“myClick()”
function myClick(){
alert("我被点击了！")
}
<input type="button" onclick="myClick();" value="click_me"/>
2、可用事件
| 事件名 | 事件描述 |
|---|---|
| onclick | 鼠标点击时触发 |
| ondblclick | 鼠标双击时触发 |
| onfocus | 元素获得焦点时触发 |
| onblur | 元素失去焦点时触发 |
| onchange | 用户改变域的内容 |
| onmouseover | 鼠标被移动到某个元素上（触发一次） |
| onmousemove | 鼠标在元素内部移动时，不断触发 |
| onmouseout | 鼠标从元素移开 |
| onkeydown | 键盘某个键被按下 |
| onkeypress | 键盘的键被按下或按住 |
| onkeyup | 键盘的键被松开 |
| onload | 用于body标签，页面加载完毕时触发一次 |
3、event对象
在触发的事件的函数里面我们会接收到一个event对象,通过该对象我们需要的一些参数,比如说我们需要知道此事件作用到谁身上了,就可以通过event的属性target来获取到 。
<script>
function myClick(a){ //a = 接收事件对象 ，从οnclick="myClick(event);"中传来
alert("button clicked~")
console.log(a)
console.log(a.type) //事件类型
console.log(a.clientX) //事件触发x坐标
console.log(a.clientY) //事件触发x坐标
console.log(a.target) //事件源-触发事件的标签
console.log(a.target.value) //获取事件源的属性值
}
</script>
<input type="button" onclick="myClick(event);" value="click_me"/>
4、事件冒泡
一个标签触发事件后，事件会向上传递给自己的父标签，然后父标签的父标签…
function div_click()
{
console.log('div_click')
}
function btn_click(e)
{
console.log('btn_click')
e.stopPropagation() //阻断事件向上传递
}
<div onclick="div_click()" style="width: 300px;height: 200px; background-color: blue;">
<input type="button" value="点击" onclick="btn_click(event)">
</div>
事件的冒泡，不会因为事件源没有该事件，而不冒泡；也不会因为某个中间的父标签没有该事件而停止冒泡。
注意：当父元素和子元素都有某一个事件，且需要独立执行时，冒泡会使得事件同时执行，所以需要防止。
5、常用技巧
5.1 超链接
为超链接注册单击事件，需要阻止其href （javascript:void(0)）
function myClick()
{
console.log('go go go')
}
<a href="javascript:void(0)" onclick="myClick()">go</a>
5.2 form表单
form表单提交前，如果需要处理其他逻辑
先将提交按钮改为普通按钮，然后在按钮事件中手动提交表单。即可实现灵活的表单控制！
function myClick()
{
....逻辑处理...
document.forms[0].submit();//手动获取from，并提交
}
<form action="http:www.baidu.com" method="get">
<input type="button" name="" value="提交" onclick="myClick()">
</form>
5.3 this 当前元素
function myClick(a) // a=this，当前触发事件的元素
{
console.log(a)
}
<input type="button" name="" value="提交" onclick="myClick(this)">
6、另外的事件注册方式（Dom）
基于编程的事件注册，语法如下：
<head>
<title>学习Javascript</title>
<script type="text/javascript">
var button = document.getElementById('btn') //获得标签
button.onclick = function() //注册事件
{
console.log('注册成功')
}
</script>
</head>
<body>
<form action="http:www.baidu.com" method="get">
<input type="button" id="btn" value="提交">
</form>
</body>
如上语法，则使得html逻辑和js逻辑的耦合降到最低！
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-uoTrAPJB-1578042940894)(Javascript .assets/1566386566663.png)]
**原因：**标签还未出现，就去为标签注册事件！！
解决方案： onload或者 script后置
//解决方案1：onload事件
function onload9(){//load事件的handler，整个的页面加载完毕后执行
//1.获取按钮
var btn9 = document.getElementById("btn");
//2.注册事件
btn9.onclick=function(){
alert("clicked~~~");
}
}
...
<body onload="onload9();"> <!--注册onload事件-->
....
<input type="button" id="btn" value="提交"></input>
//解决方案2：script后置
<form action="http://www.baidu.com" method="get">
<input type="text" name="usermae"/><br/>
<input type="text" name="password"/><br/>
<input type="button" value="提交" id="btn"/>
</form>
<script type="text/javascript">
//1.获取按钮
var btn115 = document.getElementById("btn");
//2.注册事件
btn115.onclick=function(){
console.log('form submit');
document.forms[0].submit();
}
</script>
九、DOM
DOM是文档对象模型，BOM是浏览器对象模型，前者是浏览器（可看成容器）内的内容进行操作,而后者是对浏览器本身进行操作
1、DOM简介
HTML DOM （文档对象模型）：当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）。
通过 HTML DOM，可访问 JavaScript HTML 文档的所有元素。
HTML DOM 树
通过可编程的对象模型，JavaScript 获得了足够的能力来创建动态的 HTML。
- JavaScript 能够改变页面中的所有 HTML 元素
- JavaScript 能够改变页面中的所有 HTML 属性
- JavaScript 能够改变页面中的所有 CSS 样式
- JavaScript 能够对页面中的所有事件做出反应
牛刀小试： 改变div的背景色
<div style="background-color: red; margin:0 auto; width: 500px;height: 300px;" id="div_1"></div>
<script type="text/javascript">
var element = document.getElementById("div_1");
element.onmouseover = function ()
{
element.style.backgroundColor = "blue"
}
element.onmouseout = function ()
{
element.style.backgroundColor = "red"
}
</script>
2、查找HTML元素
通常，通过 JavaScript，需要操作 HTML 元素。 因此必须首先找到该元素。有四种方法来：
- 通过 id 找到 HTML 元素 document.getElementById()
- 通过标签名找到 HTML 元素 document.getElementsByTagName()
- 通过类名找到 HTML 元素 document.getElementsByClassName()
- 通过name属性值找到 HTML 元素 document.getElementsByName()
<div style="background-color: red; margin:0 auto; width: 500px;height: 300px;" id="div_1" class="div_class" name="div_name"></div>
<script type="text/javascript">
var element = document.getElementById("div_1"); //通过id获取
console.log(element)
element = document.getElementsByTagName("div")[0]; //通过标签名获取（复数）
console.log(element)
element = document.getElementsByClassName("div_class")[0]; //通过标类名获取（复数）
console.log(element)
element = document.getElementsByName("div_name")[0]; //通过name属性值获取（复数）
console.log(element)
</script>
标签层级属性：
- children 获得所有子标签
- parentNode 获得父标签
- previousElementSibling 获得上一个兄弟标签
- nextElementSibling 获得下一个兄弟标签
<div style="background-color: red; margin:0 auto; width: 500px;height: 300px;" id="div_1">
<p id="p1">谁谓伤心画不成，画人心逐世人情。 </p>
<p id="p2">君看六幅南朝事，老木寒云满故城。 </p>
</div>
<input type="button" value="点我" onclick="myClick()">
<script type="text/javascript">
function myClick()
{
var element = document.getElementById("div_1"); //通过id获取
console.log(element)
var list = element.children;
for(var i = 0;i<list.length;i++){
var pe = list[i];
pe.style.color = 'white'; //将文字颜色改为白色
}
}
</script>
3、修改HTML
3.1 修改标签内容
element.innerHTML = xxx
<div id="div_1">为中华之崛起而读书。</div>
<input type="button" value="点我" onclick="myClick()">
<script type="text/javascript">
function myClick()
{
var element = document.getElementById("div_1");
element.innerHTML = "读一本好书，就如同和一个高尚的人在交谈。"
}
</script>
3.2 修改标签基本属性
<input type="button" value="点我" onclick="myClick()" id="btn_1">
<script type="text/javascript">
var yes = true;
function myClick()
{
var element = document.getElementById("btn_1");
if (yes) {
element.value = "别点了"
yes = false;
}else {
element.value = "点我"
yes = true;
}
}
</script>
ele.value="new_value"; //多用于设置文本框的显示内容
ele.name="new_name"; //修改name属性值
ele.href="new_href"; //可用于修改a标签的链接地址
ele.src="new_src"; //可用于修改img标签的图片
...
...
ele.checked=true/false;//适用于radio-button 和 checkbox标签
ele.selected=true/false;//适用于select内的option标签、
ele.disabled=true/false;//禁用标签，多用于按钮
3.3 修改样式属性
ele.style.height="50px"; //单独修改标签的某一项css属性.
ele.style.backgroundColor="#abcdef";//单独修改标签的某一项css属性. 修改的属性为‘background-color’
4、删除和新增标签
4.1 删除标签
- removeChild(child) 删除指定的子标签
- remove() 删除自身
<div id="div_1">
<p>谁谓伤心画不成，画人心逐世人情。</p>
<p>君看六幅南朝事，老木寒云满故城。</p>
</div>
<input type="button" value="点我" onclick="myClick()">
<script type="text/javascript">
function myClick()
{
var element = document.getElementById("div_1");
var p1 = element.children[0];
element.removeChild(p1)
}
4.2 新增标签
- document.createElement(标签名) 创建新标签
- document.createTextNode(内容) 创建标签内容
- ele.appendChild(标签) 追加子标签
- ele.insertBefore(标签) 插入指定标签到ele标签中
<input type="button" value="点我" onclick="myClick()">
<script type="text/javascript">
function myClick()
{
var para = document.createElement("p")
var text = document.createTextNode("鸟三顾而后飞，人三思而后行。")
para.appendChild(text)
document.getElementsByTagName("body")[0].appendChild(para)
}
</script>
十、BOM
1、简介
1.1 概念
BOM 是 Browser Object Model，浏览器对象模型。
BOM提供了独立于内容 而与浏览器窗口进行交互的对象；
由于BOM主要用于管理窗口与窗口之间的通讯，因此其核心对象是window；
BOM由一系列相关的对象构成，并且每个对象都提供了很多方法与属性；
1.2 学什么
我们将学到与浏览器窗口交互的一些对象，例如可以移动、调整浏览器大小的window对象，可以用于导航的location对象与history对象，可以获取浏览器、操作系统与用户屏幕信息的navigator与screen对象，可以使用document作为访问HTML文档的入口，管理框架的frames对象等。
2、Window对象
Window 对象是 JavaScript 层级中的顶层对象。
Window 对象代表一个浏览器窗口或一个框架
- window.alert(“警告”) 警告框
- window.confirm(“xxx”) 确认框，根据用户的选择，返回bool值
var y = window.confirm("提示消息：是否删除xxx")
if (y) {
console.log('...')
}
- window.prompt(“xxx”) 提示框，收集用户的输入
var txt = window.prompt("请输入")
console.log(txt);
- window.onload = function(){ …} 注册onload事件
3、History对象（了解）
- window.history.forward() 在浏览历史里前进一步
- window.history.back() 在浏览历史里后退一步
4、Screen对象
- window.screen.width 屏幕宽度
- window.screen.height 屏幕高度
5、Navigator对象
- window.navigator.appVersion 浏览器版本
6、Location对象
- window.location.href 载入页面–当前载入页面的完整UR
window.location.href = "http://www.baidu.com"
7、Document对象
- document.getElement…(…) 选择标签
- document.forms[0] 选择文档中的form
- document.write(“hello”) == 向文档中写入内容，会覆盖所有之前的 (了解)
补充：
-
计时器
-
var id1 = setInterval(function(){...},1000) ;每1000毫秒执行一次function，返回事件的id -
var id2 = setTimeout(function(){...},1000);1000毫秒后仅执行一次function，返回事件的id -
clearTimeout(id2);移除事件 -
clearInterval(id1);移除事件如何在网页上显示当前时间？
-
-
引入外部的js文件
<script src="xx.js"></script>
n(){ …} 注册onload事件
3、History对象（了解）
- window.history.forward() 在浏览历史里前进一步
- window.history.back() 在浏览历史里后退一步
4、Screen对象
- window.screen.width 屏幕宽度
- window.screen.height 屏幕高度
5、Navigator对象
- window.navigator.appVersion 浏览器版本
6、Location对象
- window.location.href 载入页面–当前载入页面的完整UR
window.location.href = "http://www.baidu.com"
7、Document对象
- document.getElement…(…) 选择标签
- document.forms[0] 选择文档中的form
- document.write(“hello”) == 向文档中写入内容，会覆盖所有之前的 (了解)
补充：
-
计时器
-
var id1 = setInterval(function(){...},1000) ;每1000毫秒执行一次function，返回事件的id -
var id2 = setTimeout(function(){...},1000);1000毫秒后仅执行一次function，返回事件的id -
clearTimeout(id2);移除事件 -
clearInterval(id1);移除事件如何在网页上显示当前时间？
-
-
引入外部的js文件
<script src="xx.js"></script>
201
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
