前言: 学了三天的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注解,是需要交给服务器代理的;]
