第七篇学习总结

一、JavaScript基本使用

1、JavaScript概述

JavaScript是一种解释性脚本语言，用于给HTML增加动态功能。JavaScript包含三个部分：ECMAScript、文档对象模型、浏览器对象模型。HTML是骨架，CSS是美化，JavaScript让页面动起来。

2、JavaScript基本语法

2.1 JavaScript使用

JavaScript使用方式有三种：一种是直接在HTML文件中写，用script标签包裹起来，另一种方式是将JavaScript代码放在单独的js文件中，然后导入。最后一种是直接写在标签中的事件属性中。

2.2 基本类型

JavaScript中所有的变量都用var声明，变量的基本类型有五种：number、string、boolean、undefined、null。不同于Java，JavaScript中一个便令没有初始化的时候默认值是undefined。

2.3 引用类型

JavaScript中定义一个对象使用function关键字；定义数组使用Array。

2.4 运算符、分支结构、循环结构

大部分与Java中是一样的，增强for循环稍微有些区别，for(var i in arr)，i不是arr中的元素，而是下标。

3、函数和事件

JavaScript中的函数有点类似C语言中的函数，独立于对象而存在，使用的较为普遍，使用function关键字来声明，然后是函数名与形参，形参不需要声明变量类型，在JavaScript中同样存在作用域的问题，在函数内部定义的变量仅在函数内部有效，在函数外部定义的变量全局有效。

3.1 系统函数

• 提示框：alert("...")
• 确认框：confirm("...")。用户点击之后会返回一个boolean。点击确定返回true，点击取消返回false。
• 输入框：prompt("","")。第一个参数是提示文本，第二个参数是用户输入的默认值。
• parseInt()。字符串转换为整数
• parseFloat()。字符串转换为小数
• isNaN()。判断是不是一个数字。

3.2 事件

• onchange: HTML元素内容改变，常用于判断input标签内部的值是否发生了改变
• onclick:用户点击元素
• onmouseover:光标移动到元素上
• onmouseout:光标离开元素
• onkeydown:用户按下键盘
• onload:浏览器已完成加载

3.3 字符串、正则表达式

• 和Java中一样，js创建字符串对象有两种方式，第一种方式直接指向一个字符串常量，第二种方式是通过创建一个引用类型，这个引用指向字符串常量。
• RegExp对象。这是一个正则表达式对象，正则表达式是描述字符模式的对象，用于对字符模式匹配及检索替换。正则表达式对象的创建有两种：new RegExp()与/pattern/modifiers。修饰符用于执行区分大小写和全局匹配。RegExp对象方法主要有test和exec，前者用于检测字符串是否匹配，后者检索字符串中指定的值。

二、JavaScript的DOM

当网页被加载时，浏览器会创建页面的文档对象模型，HTML DOM模型被构造为对象的树。浏览器先解析HTML、CSS，形成一个文档对象，再把这个文档对象展示给用户，这个文档对象是可以修改的，通过JavaScript修改。

1、获取HTML元素

• 通过id找到HTML元素：document.getElementById("id")
• 通过标签名找到HTML元素：document.getElementsByTagName("p")
• 通过class找到HTML元素：document.getElementsByClassName("className")

通过id找到的是单个元素，通过标签名和class找到的是数组，因为HTML中规定id必须是唯一的，但是标签名与class不是唯一的，可以有多个。只有先获取到HTML元素才能进行修改

2、修改HTML内容

innerHTML属性用于修改HTML代码，innerText用于修改内部的文本。

3、修改HTML属性

document.getElementById(id).attribute = 新属性值

4、修改CSS样式

document.getElementById(id).style.property = 新属性值

5、创建新元素

• document.careateElement("p"):创建新元素
• document.createTextNode("aaaa"):创建文本节点
• appendChild(node):添加孩子节点

6、DOM事件

• 点击事件：onclick
• 页面加载事件：onload
• 表单改变事件：onchange

7、EventListener

• 添加事件：addEventListener("click",myfunction)
• 移除事件：removeEventListener()
• 事件触发默认的是冒泡：内部元素的事件先触发，然后再触发外部元素，如果是捕获，外部元素的事件会先被触发，然后才会触发内部元素的事件。

三、JavaScript的DOM

BOM是浏览器对象模型，让JavaScript有能力与浏览器交互。

1、window尺寸

• window.innerHeight,浏览器的内部高度
• window.innerWidth，浏览器的内部宽度

2、window方法

• window.open():打开新窗口
• window.close():关闭当前窗口

3、location

• window.location用于获取当前页面的地址
• location.href属性返回当前页面的URL，可以设置让浏览器请求指定的URL
• location.hostname返回web主机的域名
• location.pathname返回URL的路径名

4、history

• history.back()后退
• history.forward()前进

5、Date对象

var d = new Date();
d.getYear();
d.getFullYear();
d.getMonth();
d..getDate();

6、计时函数

• setInterval(function,millis);第一个参数是要执行的函数，第二个参数是间隔的事件，单位是毫秒
• clearInterval();用于停止setInterval()方法执行的函数代码
• setTimeout(function,millis)延迟执行函数，只执行一次

四、Tomcat配置与创建Web项目

1、Web应用模式

• C/S模式，客户端/服务器模式，能充分发挥客户端PC的处理能力，缺点是对用户的电脑配置要求较高，更新升级比较麻烦
• B/S模式：浏览器/服务器模式，有点事用户使用简单，但是服务器压力比较大。

2、Web服务器

Web服务器是运行及发布Web应用的容器，常用的web服务器软件有Tomcat服务器与JBoss服务器。从官网下载之后解压缩会出现一个Tomcat文件夹，该文件夹下比较重要的目录有：

• conf(配置目录)：server.xml:配置整个服务器信息。web.xml:配置描述符文件。
• lib:Tomcat运行所需要的jar包
• webapps:存放web项目的目录。