JavaWeb学习笔记--day02+day03+day04--JavaScript WEB学习

JavaScript简介

*基于对象和事件驱动的脚本语言，应用于客户端 -基于对象： **提供好了可以直接拿过来使用的很多对象 -事件驱动： **html做网站静态效果；JavaScript动态效果 -客户端：转职浏览器*js的特点（1）交互性——信息的动态交互（2）安全性——js不能访问本地的磁盘文件（3）跨平台性——java的跨平台靠虚拟机；JavaScript靠浏览器*JavaScript与Java的区别（1）Java是sun公司，现在是Oracle；js是网景公司（2）JavaScript是基于对象的，Java是面向对象的（3）java是强类型的语言，js是弱类型的语言（4）java需要先编译成字节码文件*JavaScript的三部分（1）ECMAScript——ECMA：欧洲计算机协会，指定js语法语句（2）BOM——browser object model:浏览器对象模型（3）DOM——document object model:文档对象模型

js和html的两种结合方式

第一种——使用标签第二种——使用script标签引入一个外部js文件这里写代码没

用不执行
js的原始类型和声明变量

定义变量：都是用关键字var **js的原始类型（五种） -string：字符串 var str="abc"; -number：数字类型 var num=123; -boolean：true或false var flag=true; -null：表示对象引用为空，所有对象的引用也是object -undefined：定义一个变量，没有复制**typeof(); 查看当前变量类型

js的语句

*if判断语句：与java相同, *swith语句：java从jdk1.7开始支持string；JavaScript都支持 *循环语句（for while do-while）for(var mm=0; mm<5; mm++); *自增自减：与java一样 *运算符： **js里面不区分整数和小数 123/1000*1000 是123，而不是java里的0 **var str="456"; str+1 是"4561" str-1 shi"455" ***相加做的是字符串相加；详见做的是减法 **Boolean参与加减法运算：true是1，false是0 *==与===区别：===带数据类型比较 *输出语句：document.wirte(); *js的数组： ***var arr=[1,"2",true]; ***使用内置对象Array对象：var arr1 = new Array(5); arr1[0]="1"; ***var arr2=new Array(3,4,5);

js的函数

定义方法（三种）： **第一种function 方法名(参数列表){ 方法体; 返回值（可有可无）； } **第二种匿名函数 function(){ 方法体和返回值 } var add3=function(m,n){alter(m+n); } add3(5,6); **第三种动态函数使用js内置function对象 var add=new Function("参数列表","方法体跟返回值"); var add4=new Function("x,y","var sum; sum=x+y; return sum; "); alter(add4);

js的全局变量与局部变量

**全局变量：在script标签里面定义一个变量，这个变量在页面中js部分都可以使用 -在方法外部使用，在内部使用，在另一个script标签内使用 **局部变量：在方法内部定义，在方法内部有效

script的位置

建议放在body后面

js的重载问题没有重载
小练习代码

JavaWeb学习笔记--day02+day03+day04--JavaScript

文章图片

js的String对象

**创建String对象 ***var str="abc"; **方法和属性 ***属性length，字符串长度 ***方法（1）与html相关的方法 -bold()，加粗 -fontcolor(color)，设置颜色 -fontsize(x)，设置字体大小。x为1-7 -link(url)，将字符串显示成超链接 -sub()，下标 -sup()，上标（2）与java相似的方法 -concat(str)，连接字符串，str为第二个字符串 -charAt(x)，返回指定位置的字符，x从0开始，越界返回空 -indexOf(str)，返回字符位置，不存在返回-1 -split(char)，分割字符串成数组,char为原字符串中的分隔符，返回值为数组 -replace(str1,str2)，替换字符串，将str1替换为str2 -substr(a,b)，从a开始向后截取b位 -substring(a,b)，截取[a,b)从a到b截取

js的Array对象

**创建数组的三种方法 -var arr1=[1,2,3]; -var arr2=new Array(3); //长度为3 -var arr3=new Array(1,2,3); **属性 -length 长度 **方法

文章图片

js的Date对象

**var date =new Date(); 方法 toLocaleString() 转换成本地时间格式（跟java一样） getFulYear() 得到四位年份 getMonth() 得到0-11 getDay()得到一周中的哪天返回值0-6 周日是0 getDate()得到当前的天 1-31 getHours()得到当前的小时 getMinutes()分钟 getSeconds()秒 getTime()返回19700101至今的毫秒数应用场景:使用毫秒数处理缓存的效果

js的Math对象

*数学里的运算 **里面全是静态方法通过Math.方法()直接使用

文章图片

Math.floor((Math.random()*10) -0~9的随机数
js的全局函数

*由于不属于任何一个对象，直接写名称使用 **eval(); 执行内容为js代码的字符串 **isNaN(); 是数字返回false

文章图片

js的函数重载

**重载：方法名相同参数不同 **js不存在重载，会调用最后一个方法，可以通过其他方式模拟重载 **js会把传递的参数保存到arguments里

function add1(){ if(arguements.length == 2){ return arguements[0]+arguements[1]; }else if(arguements.length == 3){ return arguements[0]+arguements[1]+arguements[2]; }else if(arguements.length == 4){ return arguements[0]+arguements[1]+arguements[2]+arguements[3]; } }

js的bom对象

**bom:broswer object model浏览器对象模型 **有哪些对象？ ***navigator:获取客户机的信息（浏览器信息） ***screen:获取屏幕的信息 ***locatoion:请求url地址 -href属性 location.href -设置url地址 -- function href1(){ location.href="https://www.it610.com/article/hello.html"; } ***history:请求url的历史记录（） -到访问的上一个页面 history.back(); history.go(-1); -到访问的下一个页面 history.forword(); history.go(1); ***window（重点） *窗口对象 *顶层对象（所有的bom对象都是再window里面操作的 --window.location.href） **方法 -window.alter(); 提示框 -window.confirm("内容"); 确认框,确定返回true -prompt(text,default); 输入对话框 -open(URL,name,窗口特征,replace); 打开一个新的窗口 -close(); 关闭窗口 -做定时器 *setInterval("js代码",毫秒数); 每设置时间执行一次案例：显示当前时间 *setTimeout("js代码",毫秒数); 在毫秒数之后执行一次 **clearInterval(); 清楚setInterval设置的定时器 var id1=setInterval("alter("123"); ",3000); function clear2(){ clearInterval(id1); } **clearTimeout(); 清除setTimeout设置的定时器

js的dom对象

*dom：document object model：文档对象模型 **文档：标记型文档（html xml） **对象：提供属性和方法 **模型：使用属性和方法操作超文本标记型文档 ***可以使用js里面的dom提供的对象，使用这些对象的属性和方法对标记型文档进行操作 ***想要对标记行文档进行操作，首先需要对标记行文档里面的所有内容封装成对象 ---需要把html里面的标签，属性，文档内容都封装成对象 ***如何使用dom分析html 根据html的层级结构，在内存中分配一个属性结构，需要把html中的每部分封装成对象 -document对象:整个文档 -element对象：标签对象 -属性对象 -文本对象 --node节点对象：这个对象是这些对象的父对象 ***如果在对象里面找不到想要的方法，这个时候就到Node对象里面去找

文章图片

文章图片

*DHTML：是很多技术的简称
**html：封装数据
**css：使用属性和属性值设置样式
**dom：操作html文档（标记型文档）
**javascript：专门指的是js的语法语句（ECMAScript）
document对象

*表示整个的文档 **常用方法 ***write()方法：向页面输出变量，html代码 ***getElementById(id); 通过id得到元素（标签）的到id值的对象，返回一个object。 ***getElementsByname(name); 通过name得到对象集合（数组） ***getElementsByTagName(TagName); 通过标签名字得到对象集合注意只有一个元素返回的时候?????

【JavaWeb学习笔记--day02+day03+day04--JavaScript】

文章图片

文章图片

元素对象(Element对象)

**要操作元素对象，首先必须要获取到element -使用document方法获取 **方法 ***获取属性里面的值(getElementById) getAttribute("属性名称"); ***设置属性里面的值 setAttribute("class","123456"); ***删除属性 removerAttribute("class"); //不能删除value ***想要获取标签下面的子标签属性childNodes的兼容性很差（回车空格之类的）获得标签下面子标签的唯一有效方法，使用getElementsByTagName(); 方法

Node对象

*nodeName *nodeType *nodeValue *使用dom解析html时候，需要html的标签属性文本封装成对象 *标签节点对应的值 nodeType:1 nodeName:大写标签名称 nodeValue:null *属性节点对应的值 nodeType:2 nodeName:属性名称 nodeValue:null属性的值 *文本节点对应的值 nodeType:3 nodeName:#text nodeValue:文本内容 *父节点 parentNode *子节点 childNodes:得到所有子节点 firstChild,lastChild *同辈节点 nextSibling 下一个 previousSibling 上一个 ****dom树操作*** **appendChild方法 -添加子节点到末尾 -类似与剪切黏贴的效果 **insertBefore(newNode,oldNode)方法 -在某个节点之前插入一个新的节点 -参数（要插入节点，在谁之前插入） -创建节点(创建标签，创建文本，添加)

文章图片

**removeChild(要删除的对象)删除节点
**replaceChild(newNode,oldNode)替换节点

文章图片

**cloneNode(boolean)复制节点，参数表示是否复制子节点

文章图片

**innerHTML属性
-它不是dom的组成部分，但是大多数浏览器都支持
*第一个作用：获取文本内容
document.getElementById(“sid”).innerHTML;
*第一个作用：向标签里设置内容
document.getElementById(“sid”).innerHTML=“123456789”;