1.JavaScript基础
1.什么是JavaScript?
概念
js是一种基于对象和事件驱动的、并具有安全性能的脚本语言
特点
向HTML页面中添加交互行为
脚本语言,语法类似于java(脚本语言又被称为扩建的语言,或者动态语言,是一种编程语言,用来控制软件应用程序,脚本通常以文本(如ASCII)保存,只在被调用时进行解释或编译。)
解释性语言,边执行边解释
组成
ECMAScript
ECMAScript是一种可以在宿主环境中执行计算并能操作可计算对象的基于对象的程序设计语言,最新版本es6,2016发布
DOM
DOM(DOM—Document Object Model)是W3C国际组织的一套Web标准。它定义了访问HTML文档对象的一套属性、方法和事件。
BOM
BOM(Browser Object Model) 是指浏览器对象模型,是用于描述这种对象与对象之间层次关系的模型,浏览器对象模型提供了独立于内容的、可以与浏览器窗口进行互动的对象结构
2.基本结构
<script type="text/javascript">
<!—
JavaScript 语句;
—>
</script >
使用位置
可以包含在文档中的任何地方,只要保证这些代码在被使用前已读取并加载到内存即可
使用j
<script src="export.js" type="text/javascript"></script>
<input name="btn" type="button" value="弹出消息框 onclick="javascript:alert('欢迎你');"/>
3.核心语法
(1)变量
var width;
width = 5;
//以上是先声明在赋值
var catName= "皮皮";
var x, y, z = 10;
//以上是声明赋值同时进行
(2)数据类型
undefined
var width;
//变量width没有初始值,将被赋予值undefined
null
//表示一个空值,与undefined值相等
number
var iNum=23; //整数
var iNum=23.0; //浮点数
boolean
//true或者false
string
//一组被引号(单引号或双引号)括起来的文本
var string1="This is a string";
(3)typeof运算符
var i=1;
console.log(typeof(i));
//返回undefined:变量被声明后,但未被赋值
//返回string:用单引号或双引号来声明的字符串
//返回boolean:true或false
//返回number:整数或浮点数
//返回object:javascript中的对象、数组和null
(4)String 对象
属性length
var str="this is JavaScript"; var strLength=str.length; //长度是18方法
var str="this is JavaScript"; var strLength=str.length; strLength.charAt(0);//调用方法 //charAt(index) 返回在指定位置的字符 //indexOf(str,index) 查找某个指定的字符串在字符串中首次出现的位置 //substring(index1,index2) 返回位于指定索引index1和index2之间的字符串,并且包括索引index1对应的字符,不包括索引index2对应的字符 //split(str) 将字符串分割为字符串数组
(5)数组Array
创建
var fruit= new Array(4); var fruit1= new Array("apple", "orange", " peach","banana");赋值
var fruit = new Array(4); fruit[0] = " apple "; fruit[1] = " orange "; fruit[2] = " peach "; fruit[3] = " banana ";访问
var a=fruit[0];属性(length)
var fruit = new Array(4); fruit.length方法
var fruit1= new Array("apple", "orange", " peach","banana"); fruit.join("-"); //join( ) 把数组的所有元素放入一个字符串,通过一个的分隔符进行分隔 //sort() 对数组排序 //push() 向数组末尾添加一个或更多 元素,并返回新的长度
(6)运算符
算术运算符 | + - * / % ++ — |
---|---|
赋值运算符 | = += -= |
比较运算符 | > < >= <= == != === !== |
逻辑运算符 | && || ! |
(7)逻辑控制语句
if语句
if(条件) { //JavaScript代码; } else { //JavaScript代码; } for、while循环语句
for(初始化; 条件; 增量) { JavaScript代码;• } while(条件) { JavaScript代码; } for in
var fruit=[ "apple", "orange", "peach","banana"]; for(var i in fruit){ document.write(fruit[i]+"<br/>"); } switch
switch (表达式) { case 常量1 : JavaScript语句1; break; case 常量2 : JavaScript语句2; break; ... default : JavaScript语句3; } 语法中断
break
<script type="text/javascript"> var i=0; for(i=0;i<=5;i++){ if(i==3){ break; } document.write("这个数字是:"+i+"<br/>"); } //跳出整个循环 </script> continue
<script type="text/javascript"> var i=0; for(i=0;i<=5;i++){ if(i==3){ continue; } document.write("这个数字是:"+i+"<br/>"); //跳过当前循环,进行下次循环 } </script>
(8)注释
单行注释以 // 开始,以行末结束
多行注释以 /* 开始,以 / 结束,符号 /…… */ 指示中间的语句是该程序中的注释
(9)常用输入输出
alert()
alert("你好");
prompt()
prompt("你好");
语法约定
代码区分大小写 变量、对象和函数的名称尽量不要重复 每段代码后要有分号
(10)常用系统函数
什么是函数
类似于Java中的方法,是完成特定任务的代码语句块
parseInt ("字符串")
var i = "86"; console.log(parseInt (i));//将字符串转换为整型数字parseFloat("字符串")
var i = "86.5"; console.log(parseFloat (i));//将字符串转换为浮点型数字isNaN()
var i = "a"; console.log(isNaN(i));//用于检查其参数值是否是非数字
定义函数
function 函数名(参数.... ){ //JavaScript语句 [return 返回值] }调用函数
<script type="text/javascript"> function study( ){ for(var i=0;i<5;i++){ document.write("<h4>欢迎学习JavaScript</h4>"); } } </script> <input name="btn" type="button" value="显示5次欢迎学习JavaScript" οnclick="study( )" />
(11)作用域
全局变量
局部变量
<script type="text/javascript"> var i=20; function first( ){ var i=5; for(var j=0;j<i;j++){ document.write(" "+j); } } function second( ){ var t=prompt("输入一个数","") if(t>i) document.write(t); else document.write(i); first( ); } </script>
(12)事件
名称 | 说明 |
---|---|
onload | 一个页面或一幅图像完成加载 |
onlick | 鼠标单击某个对象 |
onmouseover | 鼠标指导移到某元素上 |
onkeydown | 某个键盘按键被按下 |
onchange | 域的内容被改变 |
(13)JS例题
1.9×9乘法口诀输出
for(var a=1;a<=9;a++){ for (var b=1;b<=a;b++) { document.write(a+"*"+b+"="+a*b+" "); } document.write("<br />") }
2.找出1~1000之中,所有能被5整除,或者被6整除的数字。在控制台输出。
for (var a=1;a<=1000;a++) { if(a%5==0||a%6==0){ console.log(a); } }
3.在控制台输出从2000年到2021年所有的闰年;(如果年份能被4整除并且不能被100整除或者年份能被400整除)
for (var year=2000;year<2022;year++) { if (year%4==0&&year%100!=0||year%400==0) { console.log(year+"是闰年"); } }
4.输出1~100偶数和
var sum=0; for (var a=1;a<=100;a++) { if (a%2==0) { sum+=a; } } document.write(sum);
5.变量a=“woaibeijing”输出所有的i的索引用
var a="woaibeijing"; for (var b=0;b<a.length;b++) { if(a[b]=="i"){ console.log(b); } }
6.公园里有一只猴子和一堆桃子,猴子每天吃掉桃子总数的一半,把剩下一半中扔掉一个坏的。到第七天的时候,猴子睁开眼发现只剩下一个桃子。问公园里刚开始有多少个桃子?
var tao=1; var sum=1; for (var a=1;a<8;a++) { sum=(sum+1)*2; } document.write("开始共有"+sum+"个桃");
7.一个小球从100米空中落下,每次反弹一半高度,小球总共经过多少米,请问第10次反弹的高度是多少?
var ball=100; var b=100; for(var a=1;a<10;a++){ ball=ball/2; b+=2*ball; } console.log(ball/2); console.log(b);
8.打印图形
*****
****
***
**
*
*
**
***
****
*****for (var a=1;a<6;a++) { for (var c=1;c<a;c++) { document.write(" "); } for (var b=1;b<=6-a;b++) { document.write("*"); } document.write("<br />"); } for (var a=1;a<6;a++) { for (var c=0;c<5-a;c++) { document.write(" "); } for (var b=0;b<a;b++) { document.write("*"); } document.write("<br />"); }
9.杨辉三角
var ar=new Array(10); for (var i=0;i<ar.length;i++) { ar[i]=new Array(i+1); ar[i][0]=ar[i][i]=1; for (var k=1;k<ar[i].length-1;k++) { ar[i][k]=ar[i-1][k]+ar[i-1][k-1]; } } for (var i=0;i<ar.length;i++) { for (var k=0;k<ar[i].length;k++) { document.write(ar[i][k]+" ") } document.write("<br />") }
10.创建一个长度为 6 的 int 型数组,要求取值为 1-30,同时元素值各不相同
var ary=new Array(6); for (var a=0;a<ary.length;a++) { ary[a]=parseInt(Math.random()*30+1); for (var b=0;b<a;b++) { if (ary[b]==ary[a]) { a--; break; } } } for (var a=0;a<ary.length;a++) { console.log(ary[a]); }
11.编写函数,实现使用prompt输入两个数和运算符号,并计算两个数的操作结果
function jisuan(){ var num1=prompt("请输入数字1"); var num2=prompt("请输入数字2"); var str=prompt("请输入运算符号"); var result; switch (str){ case "+": result=parseInt(num1)+parseInt(2); break; case "-": result=num1-num2; break; case "*": result=num1*num2; break; case "/": result=num1/num2; break; case "%": result=num1%num2; break; default: document.write("请输入正确运算符"); return; } document.write(result); }
12.使用prompt()方法输入考试科目的数量,要求数量必须是非零、非负数的数值类型,否则给出相应提示并退出程序 根据考试科目的数量,使用prompt()方法输入各科的考试成绩并累加,要求成绩必须是非负数的数值类型,否则给出相应提示并退出程序 如果各项输入正确,则弹出总成绩
var num=prompt("请输入考试科目数量"); if (num<=0||isNaN(num)) { alert("输入科目数量错误"); return; } else{ var score=new Array(num); var total=0; for (var a=0;a<num;a++) { score[a]=parseInt(prompt("请输入考试科目成绩"+"科目号为"+parseInt(a+1))); total+=score[a]; } alert("总成绩为"+total); }
2.JavaScript-bom
1.简介
可实现功能
1.弹出新的浏览器窗口
2.移动,关闭浏览器窗口以及调整窗口大小
3.页面的前进后退
2.window对象
常用属性
history
Window.history是一个只读属性,不存在赋值
有关客户访问过得URL的信息
location
有关当前URL的信息
window.location="http://www.baidu.com";
3.常用方法
方法名称 | 说 明 |
---|---|
prompt( ) | 显示可提示用户输入的对话框 |
alert( ) | 显示带有一个提示信息和一个确定按钮的警示框 |
confirm( ) | 显示一个带有提示信息、确定和取消按钮的对话框 |
close( ) | 关闭浏览器窗口 |
open( ) | 打开一个新的浏览器窗口,加载给定 URL 所指定的文档 |
setTimeout( ) | 在指定的毫秒数后调用函数或计算表达式 |
setInterval( ) | 按照指定的周期(以毫秒计)来调用函数或表达式 |
4.history对象(无需掌握)
需要用window.history来获取
常用的方法
名称 | 说 明 |
---|---|
back() | 加载 history 对象列表中的前一个URL |
forward() | 加载 history 对象列表中的下一个URL |
go() | 加载 history 对象列表中的某个具体URL |
5.location对象(无需掌握)
需要用window.location来获取
常用属性
名称 | 说 明 |
---|---|
host | 设置或返回主机名和当前URL的端口号 |
hostname | 设置或返回当前URL的主机名 |
href | 设置或返回完整的URL |
常用方法
名称 | 说 明 |
---|---|
reload() | 重新加载当前文档 |
replace() | 用新的文档替换当前文档 |
window.location.replace("https://www.baidu.com");
6.js内置对象
Array
String
Math
方法 | 说 明 | 示例 |
---|---|---|
ceil() | 对数进行上舍入 | Math.ceil(25.5);返回26Math.ceil(-25.5);返回-25 |
floor() | 对数进行下舍入 | Math.floor(25.5);返回25Math.floor(-25.5);返回-26 |
round() | 把数四舍五入为最接近的数 | Math.round(25.5);返回26Math.round(-25.5);返回-26 |
random() | 返回0~1之间的随机数 | Math.random();例如:0.6273608814137365 |
var iNum=Math.floor(Math.random()*98+2)
Date
var today=new Date(); //返回当前日期和时间 var tdate=new Date("september 1,2013,14:58:12")
常用方法
方法 | 说 明 |
---|---|
getDate() | 返回 Date 对象的一个月中的每一天,其值介于1~31之间 |
getDay() | 返回 Date 对象的星期中的每一天,其值介于0~6之间 |
getHours() | 返回 Date 对象的小时数,其值介于0~23之间 |
getMinutes() | 返回 Date 对象的分钟数,其值介于0~59之间 |
getSeconds() | 返回 Date 对象的秒数,其值介于0~59之间 |
getMonth() | 返回 Date 对象的月份,其值介于0~11之间 |
getFullYear() | 返回 Date 对象的年份,其值为4位数 |
getTime() | 返回自某一时刻(1970年1月1日)以来的毫秒数 |
定时函数
setTimeout()
function timer(){ var t=setTimeout("alert('3 seconds')",3000); } //3秒执行一次
setinterval()
var myTime=setInterval("disptime() ", 1000 );
清除函数
clearTimeout()
var t=setTimeout("alert('3 seconds')",3000); clearTimeout(t);
clearInterval ()
var myTime=setInterval("disptime() ", 1000 ); clearInterval(myTime);
7.JS例题
1.定时刷新时间
function te(){ var date1=new Date(); document.getElementById("ac").innerHTML=date1.getHours()+"小时"+date1.getMinutes()+"分钟"+date1.getSeconds()+"秒" t=setTimeout("te()",1000); }
2.随机选择颜色
function selColor(){ var color=Array("红色","黄色","蓝色","绿色","橙色","青色","紫色"); var num=Math.ceil(Math.random()*7)-1; document.getElementById("color").innerHTML=color[num]; }
3.回车,空格实现点击的功能
<button onclick="pp()">点击</button> function pp(event){ switch (event.keyCode){ case 13: alert("回车"); break; case 32: alert("空格"); break; } }
4.按照红黄绿的顺序实现变色
<div id="c1" onclick="col()" style="">变色</div> //次数控制颜色 /*var click=1; function col(){ var a=document.getElementById("c1"); ++click; if(click%3==2){ a.setAttribute("style","width: 100px;height: 100px;background-color: red;"); }else if (click%3==0) { a.setAttribute("style","width: 100px;height: 100px;background-color: yellow;"); }else if (click%3==1) { a.setAttribute("style","width: 100px;height: 100px;background-color: green;"); } }
3.JavaScript-dom
1.简介
DOM:Document Object Model
节点
HTML 文档中的所有内容都是节点
-
整个文档是一个文档节点
-
每个 HTML 元素是元素节点
-
HTML 元素内的文本是文本节点
-
每个 HTML 属性是属性节点
-
注释是注释节点
2.document对象
(1)常用属性
名称 | 说 明 |
---|---|
referrer | 返回载入当前文档的**URL** |
URL | 返回当前文档的**URL** |
document.referrer document.URL
(2)document常用方法
名称 | 说 明 |
---|---|
getElementById() | 返回对拥有指定id的第一个对象的引用 |
getElementsByName() | 返回带有指定名称的对象的集合 |
getElementsByTagName() | 返回带有指定标签名的对象的集合 |
write() | 向文档写文本、HTML表达式或JavaScript代码 |
3.节点的属性
属性名称 | 描述 |
---|---|
parentNode | 返回节点的父节点 |
childNodes | 返回子节点集合,childNodes[i] |
firstChild | 返回节点的第一个子节点,最普遍的用法是访问该元素的文本节点 |
lastChild | 返回节点的最后一个子节点 |
nextSibling | 下一个节点 |
previousSibling | 上一个节点 |
var obj=document.getElementById("news"); var str=obj.lastChild.firstChild.nextSibling.nextSibling.innerHTML; var str=obj.lastChild.lastChild.previousSibling.previousSibling.innerHTML; var str=obj.lastElementChild.firstElementChild.innerHTML||obj.lastChild.firstChild.innerHTML; alert(str);
4.element属性
属性名称 | 描述 |
---|---|
firstElementChild | 返回节点的第一个子节点,最普遍的用法是访问该元素的文本节点 |
lastElementChild | 返回节点的最后一个子节点 |
nextElementSibling | 下一个节点 |
previousElementSibling | 上一个节点 |
节点的信息
var nodes=document.getElementById("nodeList"); var type1=nodes.firstChild.nodeType; var type2=nodes.firstChild.firstChild.nodeType; var name1=nodes.firstChild.firstChild.nodeName; var str=nodes.firstChild.firstChild.nodeValue; var con="type1:"+type1+"<br/>type2:"+type2+"<br/>name1:"+name1+"<br/>str:"+str; document.getElementById("nodeList").nextSibling.innerHTML=con;
5.操作节点
操作节点的属性
名称 | 描述 |
---|---|
getAttribute("属性名") | 获取属性值 |
setAttribute("属性名","属性值") | 设置属性值 |
var ele=document.getElementsByName("book"); var img=document.getElementById("image"); if(ele[0].checked){ img.setAttribute("src","images/dog.jpg"); img.setAttribute("alt","我和狗狗一起活下来"); img.nextSibling.innerHTML="我和狗狗一起活下来"; } else if(ele[1].checked){ img.setAttribute("src","images/mai.jpg"); img.setAttribute("alt","灰霾来了怎么办"); img.nextSibling.innerHTML="灰霾来了怎么办"; }
6.创建和插入节点
名称 | 描述 |
---|---|
createElement( tagName) | 创建一个标签名为tagName的新元素节点 |
A.appendChild( B) | 把B节点追加至A节点的末尾 |
insertBefore( A,B ) | 把A节点插入到B节点之前 |
cloneNode(deep) | 复制某个指定的节点 |
var ele=document.getElementsByName("book"); var bName=document.getElementsByTagName("div")[0]; if(ele[0].checked){ var img=document.createElement("img"); img.setAttribute("src","images/dog.jpg"); img.setAttribute("alt","我和狗狗一起活下来"); bName.appendChild(img); } else if(ele[1].checked){ var img=document.createElement("img"); img.setAttribute("src","images/mai.jpg"); img.setAttribute("alt","灰霾来了怎么办"); img.setAttribute("onclick","copyNode()") bName.appendChild(img);
删除和替换节点
名称 描述 removeChild( node) 删除指定的节点 replaceChild( newNode, oldNode)属性attr 用其他的节点替换指定的节点 var delNode=document.getElementById("first"); delNode.parentNode.removeChild(delNode); var oldNode=document.getElementById("second"); var newNode=document.createElement("img"); newNode.setAttribute("src","images/f03.jpg"); oldNode.parentNode.replaceChild(newNode,oldNode); 操作节点样式
改变style属性
document.getElementById("titles").style.color="#ff0000"; document.getElementById("titles").style.fontSize="25px ";改变className属性
document.getElementById("cart").className="cartOver"; document.getElementById("cartList").className="cartListOver"; 获取元素的样式
document.getElementById("cartList").display document.getElementById("cartList").currentStyle.display