javaWeb基础

JavaScript

基本组成

1. ECMAScirpt(规范了基本的语法而已)

2. BOM (浏览器对象模型)

3. DOM  (文档对象模型)

变量声明:

格式:

var 变量名 = 数据;

声明变量要注意的事项:

1. 在javascript中声明变量使用var关键字,javascript中的变量可以存储任意的数据类型数据.

2. javascript中变量数据类型是根据存储的值决定的,可以随时更改存储数据的类型。

3. 定义了多个同名的变量是,后定义的同名变量是覆盖前面定义的同名变量。

4. 声明变量的时候可以省略var关键字,但是不建议省略。

数据类型:

typeof 查看变量的数据类型。

使用格式:typeof 变量名

number 小数与整数

string 字符串 注意: javascript中没有字符的概念,只有字符串,字符串可以写在单引号或双引号中。

boolean 布尔数据类型,

undefined  undefined代表该变量没有定义。

字符串转数字

parseInt()  可以把一个字符串转换成整数。

parseFloat() 可以把一个字符串转换成小数。

注意:

1、上面方法如果接收的字符串含有非数字的字符,那么会从字符串的首个字符开始寻找,一直找到非数字字符为止,然后就使用前面的数字字符转换成数字返回

2、上面方法如果接收的字符串发生无法转化的情况,会返回一个NaN

3、上面方法如果接收的字符串如果是以0开头的,会去掉0后返回

4、上面方法如果接收的字符串如果是以0x开头的,那么会把字符串中的内容当成十六进行的数据处理后返回。

5、parseFloat如果接收的字符串是一个整数时,那么转换后还是一个整数

6、在使用上面的方法转换前,一般会先使用isNaN判断接收的字符串是否是一个数字,isNaN返回true说明此字符串不是一个数字。

运算符特别

基本运算符:

+:加法运算中true代表1,false代表0

/: 除法中两个整数不能相除的话会出现小数点。

比较运算符:

凡是数字与字符串进行比较,会先把字符串转换成数字再进行比较的。

控制语句:

if语句

格式:

if(判断条件){

符合条件执行的代码

}

特殊之处:

1. 在javascript中的if语句条件不是只可以写布尔表达式,而是可以写任意数据。

number  非0为true, 0为false.

string  内容非空是true, 内容空的时候是false。

undefined:false

NaN:    false

switch语句

格式:

switch(变量){

case 值1: 

break;

default:

break;

}

特殊之处:

1. 在javascript中case后面可以跟常量、变量或者表达式。

for循环语句

格式:

for(var 变量名 in 遍历的目标){

}

for-in语句的作用:

1. 可以用于遍历数组的元素。  注意: 使用for-in语句遍历数组元素的时候遍历出来是数组的下标。

2. 可以用于遍历对象的所有属性数据。 注意: 使用for-in语句遍历对象的属性的时候,遍历出来的是对象的属性名。

with语句

有了with语句,在存取对象属性和调用方法时就不用重复指定对象。

格式:

with(对象){

}

函数

定义格式:

function 函数名(形参列表){

函数体 ;

}

要注意的细节:

1. 在js中函数定义形参时是不能使用var关键字声明变量的。

2. 在js中函数中的函数是没有返回值类型的,如果函数需要返回数据给调用者,直接返回即可,如果不需要返回则不返回。

3. 在js中函数中是没有函数重载概念的,后定义的同名函数会直接覆盖前面定义同名函数。

4. 在js中任何的函数内部都隐式的维护了一个arguments(数组)的对象,给函数传递数据的时候,是会先传递到arguments对象中, 然后再由arguments对象分配数据给形参的。

String

创建一个字符串的方式:

方式1:

var str = new String("字符串的内容");

方式2:

var str = "字符串的内容";

字符串常用的方法:

anchor()    生产锚点

charAt()    返回指定索引位置处的字符。

charCodeAt() 回一个整数,代表指定位置上字符的 Unicode 编码。

fontcolor()  把带有 COLOR 属性的一个 HTML <FONT> 标记放置在 String 对象中的文本两端

indexOf()    返回 String 对象内第一次出现子字符串的字符位置

italics()    把 HTML <I> 标记放置在 String 对象中的文本两端。

link()        把一个有 HREF 属性的 HTML 锚点放置在 String 对象中的文本两端。

replace()      返回根据正则表达式进行文字替换后的字符串的复制

split()        切割 

Substr()      截取子串

toUpperCase()  转大写

toLowerCase    转小写

Number对象

创建Number对象的方式:

方式1:

var 变量 =  new Number(数字)

方式2: 

var 变量 = 数字;

常用的方法:

toString(num)  把数字转换成指定进制形式的字符串。

toFixed(num)  将数值以指定保留小数位四舍五入进行处理。

Math对象

Math对象常用的方法:

ceil()   向上取整

floor()  向下取整

random()  随机数方法 //  产生的伪随机数介于 0 和 1 之间(含 0,不含 1),

round()  四舍五入

Array对象

创建数组的方式1:

var 变量名 = new Array();  创建一个长度为0的数组。

方式2:

var 变量名= new Array(长度) 创建一个指定长度的数组对象。

方式3:

var 变量名 = new Array("元素1","元素2"...);  给数组指定元素创建数组的对象。

方式4:

var 变量名 = ["元素1","元素2"...];

数组要注意的细节:

1.  在javascript中数组的长度是可以发生变化的。

常用方法:

contact() 将数组拼接上另一个数组组成一个新数组返回。

join() join使用指定的分隔符把数组中的元素拼装成一个字符串返回。

pop() 移除数组中的最后一个元素并返回该元素。

push()  将新元素添加到一个数组中,并返回数组的新长度值。

shift() 删除第一个元素并返回

reverse() 翻转数组的元素

sort(sortNumber) 排序,排序的时候一定要传入排序的方法。

function sortNumber(num1,num2){

return num1-num2;

}

splice(1,1,"张三","李四","王五") 第一个参数是开始删除元素的索引值, 第二参数是删除元素的个数,往后的数据就是插入的元素。

slice(1,2) 指定数组的开始索引值与结束索引值截取数组的元素,并且返回子数组

自定义对象:

在javascript没有类的概念,只要有函数即可创建对象。

自定义对象的

方式1:使用无参的函数创建对象。

function Person(){}

var p = new Person(); //创建了一个Person对象了

p.id = 110;

p.name = "狗娃";

方式2:使用带参的函数创建对象。

function Person(id,name){

this.id = id;

this.name = name;

this.say = function(){

alert(name+"呵呵");

}

}

var p = new Person(110,"狗剩"); //创建对象

方式3:使用Object函数创建对象

var p = new Object();

p.id = 110;

p.name = "铁蛋";

方式4:使用字面量的方式创建

var p = {

id:110,

name:"狗娃",

say:function(){

alert(this.name+"呵呵");

}

Prototype

prototype是javascript实现继承的主要手段。粗略来说就是:prototype是javascript中的函数(function)的一个保留属性,并且它的值是一个对象(我们可以称这个对象为"prototype对象")。

注意的细节:

1.prototype是函数(function)的一个必备属性(只要是function,就一定有一个prototype属性)

2.prototype的值是一个对象

3.可以任意修改函数的prototype属性的值。

4.一个对象会自动拥有prototype的所有成员属性和方法

例子:为String对象添加reverse功能

String.prototype.reverse = function(){

var arr = this.toCharArray();

arr.reverse();

return arr.join("");

}

BOM(Browser Object Model) 浏览器对象模型.将浏览器的各个部分都是用了一个对象进行描述,如果我们要操作浏览器的一些属性,我就可以通过浏览器对象模型 的对象进行操作。

window  代表了一个新开的窗口

location 代表了地址栏对象。

screen  代表了整个屏幕的对象

window对象常用的方法:

open()  打开一个新的窗口。

resizeTo() 将窗口的大小更改为指定的宽度和高度值。

moveBy()  相对于原来的窗口移动指定的x、y值。

moveTo() 将窗口左上角的屏幕位置移动到指定的 x 和 y 位置。

setInterval() 每经过指定毫秒值后就会执行指定的代码,它会返回一个任务ID。

clearInterval() 根据一个任务的ID取消的定时任务。

setTimeout() 经过指定毫秒值后执行指定的代码一次。

注意: 使用window对象的任何属性与方法都可以省略window对象不写的。

location对象:

href: 获取以及设置地址栏的对象

reload():刷新当前的页面

screen对象

availHeight 获取系统屏幕的工作区域高度,排除 Microsoft Windows 任务栏。

availWidth 获取系统屏幕的工作区域宽度,排除 Windows 任务栏。

height 获取屏幕的垂直分辨率。

width 获取屏幕的水平分辨率。

事件

注册:

方式一: 直接在html元素上注册

<body onload="ready()">

function ready(){

alert("body的元素被加载完毕了..");

}

方式二:可以js代码向找到对应的对象再注册。 推荐使用。

document.getElementById("body").onload = function(){

alert("body的元素被加载完毕");

}

常用的事件:

鼠标点击相关:

onclick 在用户用鼠标左键单击对象时触发

ondblclick 当用户双击对象时触发

onmousedown 但鼠标位于对象之上按下时触发

onmouseup  当鼠标位于对象之上释放时触发

鼠标移动相关:

onmouseout  当鼠标指针移出对象边界时触发。

onmousemove 当鼠标指针划过对象时触发。

焦点相关的:

onblur 在对象失去输入焦点时触发。

onfocus 当对象获得焦点时触发。

其他:

onchange 当对象或选中区的内容改变时触发。

onload 在浏览器完成对象的装载后立即触发。

onsubmit 当表单将要被提交时触发。

DOM(Document Object Model)文档对象模型

一个html页面被浏览器加载的时候,浏览器就会对整个html页面上的所有标签都会创建一个对应的对象进行描述,我在浏览器上看到的信息只不过就是这些html对象的属性信息而已。我们只要能找到对应的对象操作对象的属性,则可以改变浏览器当前显示的内容.

通过html元素的标签属性找节点。

document.getElementById("html元素的id")

document.getElementsByTagName("标签名")

document.getElementsByName("html元素的name")

通过关系(父子关系、兄弟关系)找标签。

parentNode 获取当前元素的父节点。

childNodes 获取当前元素的所有下一级子元素。

firstChild 获取当前节点的第一个子节点。

lastChild 获取当前节点的最后一个子节点。

nextSibling 获取当前节点的下一个节点。(兄节点)

previousSibling 获取当前节点的上一个节点。(弟节点)

我们可以通过标签的类型进行判断筛选:

文本节点的类型: 3

注释的节点类型: 8

标签节点的类型: 1

XML

XML基础

可扩展标记性语言(标签可以自定义)

一个XML文件分为如下几部分内容:文档声明、标签、属性、注释、转义字符、CDATA区、处理指令。

标签

<student>student</student>或者 <student/> 或 <student></student>

xml标签名称区分大小写

xml标签有开始必须有结束

xml标签名中间不能使用空格或者:

xml标签中的空格是被认为是一种元素的

xml标签名不能以数字开头

在一个xml文档中,有且仅有一个根标签

属性:

<student name=""></student>

属性以键值对的形式存在,值必须以引号包含,不可省略。

一个标签内可以有多个属性,但属性名不能重复。

注释:

<!--  注释体    -->

注释不能嵌套,不能放置到文件的第一行,那时留给文档声明的

文档声明:

<?xml version="1.0" encoding="utf-8"?>

文档声明必须放置在xml文件的第一行顶格写。

version: xml的版本号

encoding:解析xml文件时查询的码表(解码过程时查询的码表)

转义字符:

在xml中内置了一些特殊字符,这些特殊字符不能直接被浏览器原样输出。如果希望把这些特殊字符按照原样输出到浏览器,对这些特殊字符进行转义。转义之后的字符就叫转义字节。

特殊字符  转义字符

<        &lt;

>        &gt;

"        &quot;

'        &apos;

&        &amp;

空格      &nsbp;

CDATA

可以让一些需要进行包含特殊字符的内容统一进行原样输出,相当于整体转义。

<![CDATA[

内容体

]]>

处理指令

告诉xml解析如果解析xml文档。

XML约束:

xml约束技术:dtd、schmea

dtd引入方式:

使用内部的dtd文件:<!DOCTYPE 根元素名称 [  约束体  ]>

引入外部的dtd文件:<!DOCTYPE 根元素名称 SYSTEM "dtd文件名">

引入网络的dtd文件:<!DOCTYPE 根元素名称 PUBLIC "文件名称" "dtd文件的URL">

dtd语法:

定义元素<ELEMENT>

复杂元素<!ELEMENT 元素 (子元素1,子元素2...)>

子元素出现次数的限制:

默认:出现且仅出现一次

+  :出现一次或者多次

?  : 出现零次或者一次

*  :出现零次或者多次

子元素出现顺序的限制:

,  : 表示依次序出现这些元素

|  : 表示只能出现其中一个元素

简单元素<!ELEMENT 元素 约束规则>

约束规则可以是:

(#PCDATA) 字符串

EMPTY    空

ANY      任意

定义属性<ATTTLIST>

<!ATTLIST 元素名称

属性名称  属性类型  属性约束规则

>

属性类型:

CDATA :字符串

枚举 (选项a|选项b|...) :只能出现代选项中的一个

ID    :此项值不可重复,且只能以字母或者_开头

属性约束规则:

#REQUIRED :表示该属性必须出现

#IMPLIED  :表示该属性可有可无

#FIXED    :表示一个固定值,#FIXED  "固定值"

直接值    :表示默认给元素添加一个属性并赋予直接值。

定义实体<!ENTITY>

<!ENTITY 实体名称  "实体值">

相当于变量:引用时使用  &实体名称;

这个一定要定义在内部,如果定义到外部文件中,部分浏览器不兼容。

schema约束特点:

1、这是一个xml格式的xml约束,它符合xml的基本语法格式。

2、在一个xml中可以有多个schema,多个schema通过命名空间来区分。

3、相比于dtd约束,schema可以支持除了(#PCDATA) 字符串之外更多的数据类型。

schema基本语法:

1、schema文件的扩展名是.xsd,根节点就是<schema>,文件内容使用的标签和属性有w3c提供。

2、targetNamespace="" 这表示本文件的一个声明id,被约束文件通过这个id引入此约束。

3、xmlns="" 表示这是一个约束文件。

4、复杂元素写法:

<element name="元素名">

<complexType>

<sequence>

子元素

</sequence>

</complexType>

</element>

复杂元素指示器:

sequence:表示元素出现的顺序

all:表示元素只能出现一次

choice:表示只能出现待选项中的一个

maxOccurs:表示最多出现的次数,值unbounded表示无限制

属性约束定义(必须定义在复杂元素上):

<attribute name="id" type="int" use="required" />

5、简单元素写法

<element name="子元素" type="数据类型" />

schema引入:

<schema xmlns="http://www.w3.org/2001/XMLSchema"

targetNamespace="http://www.example.org/classSchema"

xmlns:tns="http://www.example.org/classSchema"

elementFormDefault="qualified"></schema>

<students xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"

xmlns="http://www.example.org/classSchema"

xsi:schemaLocation="http://www.example.org/classSchema classSchema.xsd"

></students>

XML解析:

XML解析方式(原理不同)

DOM解析:一次性把整个xml文档加载进内存,然后在内存中构建一棵对象树。优点:容易进行增删改的操作;缺点:有可能导致内存溢出。

SAX解析:采用时间驱动,边读边解析。优点:不会造成内存溢出,方便实现查询操作;缺点:无法进行增删改操作。

解析工具:

1)JAXP (oracle-Sun公司官方)

2)JDOM工具(非官方)

3)Dom4J工具(非官方)

XML解析实现:

JAXP解析器在jdk的javax.xml.parsers包里面,存在四个类分别针对DOM和SAX的解析

针对DOM:

DocumentBuilderFactory:解析器工厂类

这是一个抽象类,可以通过DocumentBuilderFactory.newInstance()得到

DocumentBuilder:解析器类

这是一个抽象类,可以通过DocumentBuilderFactory.newDocumentBuilder()得到

Document parse(File f) 通过一个文件的路径构建一个document

在Node中,

NodeList getElementsByTagName(String name) 获取指定名字的所有标签

createElement(String tagName) 创建标签

createTextNode(String data) 创建文本

appendChild(Node newChild) 将文本添加到标签下面

getTextContent() 获取节点的文本内容

setTextContent(String textContent) 修改节点文本的内容

removeChild(Node oldChild) 删除节点,只能是用父节点来删除自己

getParentNode() 获取父节点

使用jaxp实现查询操作的步骤:

//创建解析器

DocumentBuilder documentBuilder = DocumentBuilderFactory.newInstance().newDocumentBuilder();

//利用解析器加载xml文档

Document doc = documentBuilder.parse(new File("./src/class.xml"));

//查询所有的指定标签,返回节点集合

NodeList nodeList = doc.getElementsByTagName("name");

//将NodeList的集合遍历出来

for(int i=0;i<nodeList.getLength();i++){

//可以利用item(i)获取具体某一个节点的信息

Node node = nodeList.item(i);

//获取节点的文本信息

String textContent = node.getTextContent();

System.out.println(textContent);

}

使用jaxp实现增加操作的步骤

DocumentBuilder documentBuilder = DocumentBuilderFactory.newInstance().newDocumentBuilder();

Document document = documentBuilder.parse(new File("./src/class.xml"));

//增加操作,先创建出各个节点,然后通过appendChild()挂到相应父节点

Node node = document.getElementsByTagName("student").item(1);

Element sexEle = document.createElement("sex");

Text manText = document.createTextNode("man");

sexEle.appendChild(manText);

node.appendChild(sexEle);

//回写操作

Transformer transformer = TransformerFactory.newInstance().newTransformer();

transformer.transform(new DOMSource(document), new StreamResult("./src/class.xml"));

针对SAX:

SAXParserFactory:解析器工厂类

这是一个抽象类,可以通过SAXParserFactory.newInstance()得到

SAXParser:解析器类

这是一个抽象类,可以通过SAXParserFactory.newSAXParser()得到

void parse(File f,DefaultHandler dh)

当解析到开始标签的时候,会自动执行startElement方法,通过qName返回标签名称。

当解析到文本内容的时候,会自动执行characters方法,通过string的构造方法返回内容

当解析到结束标签的时候,会自动执行endElement方法,通过qName返回便签名称

使用jaxp实现查询操作的步骤:

//创建SAXParser解析器

SAXParser saxParser = SAXParserFactory.newInstance().newSAXParser();

//解析xml文件,需要两个参数,第一个为源文件,第二个为一个时间驱动器

saxParser.parse(new File("./src/class.xml"), new MyHandler());

//自定义事件驱动继承defaultHandler,重写startElement、characters、endElement方法

class MyHandler extends DefaultHandler{

public void startElement(String uri, String localName, String qName,

Attributes attributes) throws SAXException {

//这里通过qName获取开始标签

//这里通过attributes获取属性

}

public void characters(char[] ch, int start, int length)

throws SAXException {

//这里通过new String(char[] ch, int start, int length)获取文本内容

}

public void endElement(String uri, String localName, String qName)

throws SAXException {

//这里通过qName获取结束标签

}

}

DOM4J解析实现:

DOM4J并不是javase的一部分,使用前需导入DOM4J的jar包。

节点(Node)类型:

标签节点(Element):

属性节点(Attribute):

文本节点(Text):

使用Dom4j解析步骤:

//创建SAXReader对象

SAXReader sr = new SaxReader();

//读取到Document对象

Document document = sr.read(new File());

//使用遍历器得到对象子对象

Iterator it = document.nodeIterator();

while(it.hasNext()){

Node node = it.next();

}

//将文档写出

XMLWriter writer = new XMLWriter(OutputStream, OutputForamt)

wirter.write(Document);

write.close();

使用Dom4j实现添加操作:

SAXReader sr = new SAXReader();

Document document = sr.read(new File("./class.xml"));

Element rootElement = document.getRootElement();

Element studentEle = rootElement.element("student");

//增加元素

Element sexEle = studentEle.addElement("sex");

sexEle.setText("nan");

//写回文档

XMLWriter xmlWriter = new XMLWriter(new FileOutputStream(new File("./class.xml")),OutputFormat.createPrettyPrint());

xmlWriter.write(document);

xmlWriter.close();

常用方法:

节点:

Iterator nodeIterator()  获取当前标签节点下的所有子节点

标签:

Element getRootElement()  获取xml文档的根标签

Element element("标签名") 获取指定名称的子标签中的第一个

List<Element> elements("标签名") 获取所有指定名称的子标签

List<Element> elements()  获取所有子标签

Iterator<Element> elementIterator("标签名")  获取指定名称的所有子标签

属性:

String attributeValue("属性名")  获取指定名称的属性值

Attribute attribute("属性名")  获取指定名称的属性对象

String getName()  获取属性名称

String getValue() 获取属性值

List<Attribute> attributes() 获取所有属性对象

Iterator<Attribute> attibuteIterator() 获取所有属性对象

文本:

getText()  获取当前标签的文本

elementText("标签名") 获取当前标签的指定名称的子标签的文本内容

修改xml文档的API方法

增加:

DocumentHelper.createDocument()  增加文档

addElement("名称")  增加标签

addAttribute("名称",“值”)  增加属性

修改:

Attribute.setValue("值")  修改属性值

Element.addAtribute("同名的属性名","值")  修改同名的属性值

Element.setText("内容")  修改文本内容

删除

Element.detach();  删除标签 

Attribute.detach();  删除属性

Element.getParent.remove(element);//利用父节点去删除子节点

使用Dom4J支持XPATH的操作

XPath 是一门在 XML 文档中查找信息的语言。XPath 可用来在 XML 文档中对元素和属性进行遍历。

XPath 使用路径表达式在 XML 文档中选取节点。节点是通过沿着路径或者 step 来选取的。

下面列出了最有用的路径表达式:

表达式 描述

nodename 选取此节点的所有子节点。

/ 从根节点选取。

// 从匹配选择的当前节点选择文档中的节点,而不考虑它们的位置。

. 选取当前节点。

.. 选取当前节点的父节点。

@ 选取属性。

* 匹配任何元素节点。

@* 匹配任何属性节点。

node() 匹配任何类型的节点。

Dom4J本身不支持XPATH,需要引入jaxen包。,这里面提供了两个方法来支持XPath

selectSingleNode(String nodeName)

selectNodes(String nodeName)

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。
禁止转载,如需转载请通过简信或评论联系作者。

推荐阅读更多精彩内容