2018.4.6第三篇博客Javascript包含DOM,AJAX,JSON

前言:
    学了三天的JS,补上博客;

第一天:语法,基础,函数,数组
一/名词解释:
Javascript
含义:直译式脚本语言;
脚本语言:需要依赖才能运行,又称为寄生语言
特点:动态型,弱类型,内置支持型;
动态型:需要什么属性,在需要的时候再添加
弱类型:只有一个类型,就是var
内置支持型:可以使用内置对象;

环境:浏览器相当于Java的JVM

二/学习方法:查文档,上W3CSchool
三/语法:基本上都和Java相同,不同点如下
1/JS只有字符串的概念
2/undefined的相当于Java的空指针
3/打印:console.log()
4/特殊字符需要用\转义
5/运算符
1/ + 是做字符串拼接;
2/ == 对比的是值;===对比的类型;
6/逻辑运算符
1/&&操作:从左往右找,优先返回第一个为false的值,没有则返回最后一个值
2/||操作:从左往右找,优先返回第一个为true的值,没有则返回最后一个值

7/函数:function
1/访问变量:就近原则
2/加()和不加()的区别:
加():表示调用里面的函数;
不加():直接指的是里面的函数对象;

8/面向对象:
this关键字:
1/在构造方法中:this指新创建的对象;
2/在函数/方法中:谁调用this所在的函数/方法;this就是谁?

9/内置对象
确切的说,js并不是一门面向对象语言,而是一门基于对象的语言;

10/数组
js中的数组,类似于ArrayList,同时体现了栈和队列结构;
1/创建:var arr = [];
arr[6]="drank01"

2/属性和方法:
arr.push(), 往数组添加元素;


第二天:DOM和DOM事件编程

一/BOM
1/文件加载完毕事件window.onload[重要]
js中的函数代码,会等到HTML文件全部被浏览器读取完毕后,才执行;
2/在js中跳转界面的本质是,修改地址栏的值;
window.location.href = xxx;
3/定时器:


二/DOM
重要技巧:
一些不知道的属性,可以去别人的网站,用浏览器的控制台,找到相关的属性,比如innerHTML,innerTEXT都是通过这个方法的找出来的[非常重要]
名词解释: document object model,文档对象模型;
是一种与浏览器,平台,语言无关的接口,可以访问页面的其他标准组件;
D:文档 html文档或者xml文档
O:对象 document对象的属性和方法
M:模型

1/获取元素的方式:document.getElementById();
分析,这里的document,指的就是对应的html文档;

2/Node对象


3/元素的属性操作:
1/操作元素的原始属性:
1/获取属性值:
元素对象.属性名;
元素对象["属性名"];
2/设置属性值:
元素对象.属性名=值;
元素对象["属性名"]=值;
4/DOM文档操作:
1/把span加入到div中
1/appendChild();

2/操作复选框:
1/parentNode.insertBefore();
replaceChild();
removeChild();



5/DOM事件驱动编程[重要]
核心对象:
事件源:被动承受者;一般是元素
事件响应行数;当事件发生时,会执行什么操作:就是js里面的代码;
例子:
HTML代码:<p id="p1">Hello world!</p>//事件源
JS代码:function shout(e){//响应函数,监听函数
alert(e.clientX);//e事件对象
}
document.getElementById("p1"). onclick=shout;//在事件源上绑定事件响应函数

本质:在事件驱动编程中,就是给事件源,绑定事件的响应函数;

1/事件的监听和绑定:[重要]
第二种:
在js代码中,使用 "元素.onxx = 函数对象"进行事件监听
总结: 在JS中先获取到事件,在指定事件的响应函数,比较简单的,很方便的获取到事件源和事件对象
注意: 只能绑定一个 ,后绑定的把先绑定的给覆盖掉

第三种:
使用方法来完成对元素的监听,可以 对同一事件多次绑定

W3C
[Object].addEventListener(“name_of_event”, fnHandler);
name_of_event>>直接使用事件(操作)名称,没有on
多次添加监听后,触发顺序: 先添加,先执行


第三天:
ajax和json
一/AJAX --一种很火的数据请求方式;本质是:XMLHttpRequest对象
名词解释:Asynchronous JavaScript and Xml
是一种使用现有标准的新方法:基于JavaScript 和 HTTP请求();
关键概念:同步:等待响应的时候,啥都不做;
异步:一边等待,一边做其他,等到的时候,停一下;
作用:局部刷新,减少服务器的压力;
特点:AJAX,不会产生缓存,不能后退;

1/入门知识:
1/ajax五种状态

2/细节;只处理响应正常情况下的数据,HTTP状态要等于200,才处理响应;
3/get请求:小案例,检查账号是否存在:
//文档加载完毕执行函数;
//获取事件源,绑定失去焦点事件,
//获取文本框的值,作为参数
//1:创建象
//2;开启一个请求
//3监听ajax状态的改变
//处理响应
//把响应的数据回显到网页#msg中
//4发送请求
4/post请求
区别与get请求的地方:
//1在发送请求前,设置POST参数的请求头!
//2发送请求要带上参数
注意:请求的本质是拼接字符串!!!
二/JSON(当前很火的数据类型封装模式)
1/ 规则如下:
1)映射用冒号(“:”)表示。名称:值
2)并列的数据之间用逗号(“,”)分隔。名称1:值1,名称2:值2
3) 映射的集合(对象)用大括号(“{}”)表示。{名称1:值1,名称2:值2}
4) 并列数据的集合(数组)用方括号(“[]”)表示。
[
{名称1:值,名称2:值2},
{名称1:值,名称2:值2}
]


2/转换成JSON,SpringMVC集成json插件;
1/使用jackson转换工具,在pom.xml引入jar包即可;

三/二级联动综合案例
方法1:HTML格式
思路:
//1/文档加载完毕后,执行函数
//2获取到省份的下拉列表;
//3发送ajax请求,获取省份数据;
把返回的HTML数据填入省份中
//4/当省份发生变化是,再次发送ajax获取城市数据;
//注意:这里需要恢复最初状态
//如果有选择省份才发送请求;
/发送ajax请求获取城市数据,
//把返回的HTML数据填入城市中
方法2:JSON格式
controller的改变
改变:
1/贴@RespResponse注解;
2/返回值改为Object,
3/不需要传入参数,
4/直接返回省份的数据即可;
5/其他的JSON转换器帮我们全部封装好;List--> JSON;
js的改变:
1/把返回的JSON数据填入省份中;
2/把响应的改装成JSON格式:eval
3/遍历数组,把JSON格式拼接成HTML格式;
4/把HTML代码赋给province元素;

总结:
1/ajax最大的作用,就是局部刷新,减少服务器压力
2/json最大的好处就是简单易用,替代xml数据格式;

异常:
63/
web.xml
在servlet 和servlet-mapping相同的情况下,一个报红色,一个下划线;
报:mapping无法解析;是否所有的servlet都有mapping
[解决:
原因:该项目没有志向web.xml;在这里设置指向即可;
]
66/SSM 路径名,资源名正确;
[表单提交成功,但是controller重定向没有找到资源;]
[解决: 因为用到了Spring 的@controller注解,是需要交给服务器代理的;]
67/为什么,我的代码,和浏览器的代码,不同的?在浏览器上.body放进了head里面
[解决:script要用双标签,绝对不能用单标签!]
68/JS阶段:AJAX请求方式,checkName训练;"/ajax/checkName.do"报404错误;
[解决: 因为用到了Spring 的@controller注解,是需要交给服务器代理的;]

相关推荐
©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页