一、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项目的目录。
- server.xml:配置整个服务器信息。
网友评论