Java - Part 7

一、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项目的目录。