第七篇学习总结
第七篇学习总结
一、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项目的目录。
