学习笔记——JavaEE基础<2>javascript基础

来源：互联网发布：中国产业安全数据编辑：程序博客网时间：2024/06/01 19:56

一，javascript的介绍

-面向对象，事件驱动的网页脚本语言
-属于web语言适用于pc，笔记本电脑，平板电脑，智能手机
-解释性脚本编写语言
-基于对象的脚本编程语言
-简单
-安全
-动态
-跨平台

作用
-交互式操作
-表单验证
-网页特效
-web游戏
-服务器脚本

在html界面中嵌入javascript的代码
-使用JavaScript:前缀来执行javascript代码
-使用script标签来包含javascript代码

导入外部的javascript文件

            <script src="javascript文件" type="text/javascript"></script>

<!DOCTYPE html><html>    <head>        <meta charset="UTF-8">        <title></title>        <script type="text/javascript">            alert('hello');        </script>        <script src="js/hello.js"></script>    </head>    <body>        <a href="javascript:alert('hello');">点击我</a>        <a href="javascript:show()">hello</a>    </body></html>

alert('hello.js');function show(){    alert('hello');}

二，javascript变量和运算符

1，变量和数据类型
隐式定义：直接给变量赋值，必须初始化
显式定义：使用var关键字定义变量

变量的名称需遵循以下规则
–首字母必须是字母（大小写均可），下划线，美元符号
–余下的字母可以使下划线，美元符号，任意字母，数字字符
–变量名不能使用关键字
常用的数据类型
–数值类型：包含整数和浮点数
–布尔型：只有true和false
–字符串类型：字符串必须用双引号或单引号括起来
–未定义类型：专门来确定一个已经创建但是没有初值的变量
–空类型：表明某个变量的值为空
–对象类型：javascript中的对象，数组等

数据类型的转换
–通过“+”或toString()方法将数值转换称字符串
–通过parseInt()将字符串转换成整形
–通过parseFloat()将字符串转换成浮点型

字符串的常用操作方法
这里写图片描述
比较两个字符串是否相等 ==

2，正则表达式
判断是否符合条件
获取符合条件的部分

语法
第一种方法
var reg = /pattern/;
第二种方法
var reg = new RegExp(‘pattern’);

RegExp对象的常用方法
exec(str) 检索指定的值，返回且确定位置
text(str) 判断是否满足指定条件的值，返回boolean

var str="qwer qwer qwer";    var reg = /qw/;    var reg2 = new RegExp('qwer');    alert(reg.exec(str));    alert(reg.test(str));

正则表达式所指出的常用通配符
这里写图片描述

正则表达式量词
这里写图片描述

javascript数组定义
–var arr1=[1,2,3];
–var arr2=[];
–var arr3 = new Array();
–arr3[0] =1;
–arr3[3] =”abc’；
数组长度可变。总长度等于数组的最大索引值+1
同一个数组的元素类可以互不相同
当访问未赋值的数组元素时，该元素值为undefined，不会数组越界

2,常用的运算符
这里写图片描述

三，javascript的流程控制语句

1，流程控制语句
–if，switch，while，do while，for in，for

function show(){    for (var properties in navigator) {        document.write('属性：'+properties+"属性值："+navigator[properties]+"<br/>")    }}

var arr = ["d",1,"dd",3];    for (var a in arr) {        document.write(arr[a]+"<br />");    }

2，常用特殊语句
语句是javascript的基本执行单位，每条语句都是以分号结尾
语句块{}
空语句;
异常抛出语句throw new Error(“报错”);
异常捕获语句try{}catch{}finally{}
with语句 with(document){write(“输出”);write(“输出”);write(“输出”);}

四，javascript函数

1，javascript函数详解

定义方式
–命名函数： function 函数名（参数列表）{执行语句块；}
–匿名函数：var f = function（参数列表）{要执行的语句块；}
–使用function类构造匿名函数 new function（’参数列表’，”函数的执行体;”）；

2,函数的返回值
函数中没有声明返回类型，当函数想要返回值的时候直接加上return“值”语句即可
局部变量和局部函数
根据变量的定义范围不同，变量有全局变量和局部变量之分，直接定义的变量是全局变量，在函数中定义的变量称为局部变量，局部变量只能在函数内有效，如果全局变量和局部变量使用相同的变量名，则局部变量将覆盖全局变量
与局部变量对应的是局部函数，局部函数在是函数中定义的，外部函数可以直接调用其内部的函数，在外部函数外直接调用内部函数是不行的，所以只有当外部函数被调用时，内部局部函数才会被执行
定义好函数后，javascript提供了3种调用函数的方式
对象.函数引用//当声明的一个函数没有指明分配给哪个对象使用的时候，默认分配给的时window对象
以call方法调用函数
函数引用.call（调用者，参数1，参数2）
以apply方法调用函数
函数引用.apply（调用者，arguments）//arguments相当于数组，用来存放多个参数，和call调用方式相类似

function show2(n){                alert("hello"+n);            }            window.show2(1);            show2.call(window,2)            show2.apply(window,[3])

五，常用的内置对象

1，常用的内置对象
Date对象
Math对象
2，对象的创建
–new 关键字调用构造器创建对象
–使用Object直接创建对象
–**使用JSON语法创建对象**object = {“属性”:”值”,”属性”:”值”}

function show(){    person.info();}var person ={    "name":"张三",    "age":30,    "son":[    {        "name":"李四",        "age":30,    },    {        "name":"王五",        "age":30,    }    ],    "info":function(){        document.write(this.name+this.age);        for(var ch in this.son){            document.write(this.son[ch].name+this.son[ch].age);        }    }};

JSON
概念：JSON（Javascript Object Notation）是一种轻量级的数据交换格式。易于人阅读和编写
格式：json对象是以一堆大括号括起来，大括号内多个“名值对”组成，多个名值对之间用“逗号”隔开，名所对应的值可以是各种数据类型的值，也是JSON对象。json数组用“[]”括起来

六，浏览器对象模型BOM

1，BOM模型中常用对象的介绍

window对象是整个javascript脚本运行的顶层对象
常用的属性
–document 返回该窗口内装载的HTML文档
–location 返回该窗口装载HTML文档的URL
–navigator 返回浏览当前页面的浏览器，包含一系列的浏览器属性，包括名称，版本号和平台
–screen 返回当前浏览者屏幕对象
–history 返回该浏览窗口的历史
常用的方法
这里写图片描述

history对象常用方法
back() 后退
forward() 前进
go(inValue) 指定前进和后退 inValue正负数表示

location对象常用的属性
hostname 文档所在的主机名
href 文档所在的地址URL
host 文档所在的地址的主机地址
port 文档所在的地址的服务端口
pathname 文档所在的地址的文件地址
protocol 装载该文档所在使用的协议，例如HTTP：等

screen对象的常用属性
availHeight 窗口可以使用的屏幕高度，单位像素
availWidth 窗口可以使用的屏幕宽度，单位像素
colorDepth 用户浏览器表示的颜色位数，通常为32位（每像素的位数）

navigator对象常用属性
appCodeName 浏览器代码名的字符串表示
appName 官方浏览器的字符串表示’
appVersion 浏览器版本信息的字符串表示
platform 浏览器所在计算机的字符串表示
userAgent 用户代理头的字符串表示
cookieEnabled 如果启用cookie返回true，否则返回false

七，DOM文档对象模型

DOM是文档对象模型。当网页加载时，可以将结构化文档在内存中转换成对象的树

HTML DOM树
这里写图片描述

简单的说DOM并不是一种技术，而是一种访问结构化文档的一种思想。借助DOM模型，我们可以对DOM树进行修改，删除，新增操作，让结构化文档动态化

1，DOM对元素访问操作

DOM模型中的节点–文档可以说是由节点
构成的集合。在DOM模型中有以下3种节点
元素节点：各种标签
文本节点：包含在元素节点的内部
属性节点：一般修饰元素节点就称为属性节点

2，DOM对HTML元素的增删改操作

访问HTML元素，DOM主要提供了两种方式来访问HTML元素
根据ID访问HTML元素-通过document对象调用getElementById()方法来查找具有唯一id属性的元素
利用节点关系来访问HTML元素。
常见的属性和方法如下
parentNode 返回当前节点的父节点
previousSibling 返回当前节点的前一个兄弟节点
childNodes 返回当前节点的所有子节点
firstChild 返回当前节点的第一个节点
lastChild 返回当前节点的最后一个子节点
getElementsByTagName(tagName) 返回当前节点的具有指定

<!DOCTYPE html><html>    <head>        <meta charset="UTF-8">        <title>使用getElementById</title>        <script type="application/javascript">            function showc(){                var myDiv,txtname,content;                with(document){                    myDiv = getElementById("myDiv");                    content = getElementById("content");                    txtname = getElementById("txtName");                }                alert(myDiv.innerHTML+txtname.value+content.value);            }        </script>    </head>    <body>        <div id="myDiv">我的div块</div>        <textarea id="content" rows="3",ccols="25">好好学习</textarea>        <input type="text" id="txtName" value="1"  /><br />        <input type="button" id="btn" value="访问三个元素内容" onclick="showc()"/>    </body></html>

DOM访问表单空控件的常用属性和方法
action 返回该表单的提交地址
elements 返回表单内全部表单控件组成的数组，通过数组可以访问白表单内的任何表单控件
length 返回表单内表单域的个数
method 返回表单内的method属性，主要有get和post两个值
target 确定提交表单时的结果窗口，主要有_self,_blank,_top等
reset(),submit() 重置表单和表单方法

在elements返回的数组中访问具体的表单控件语法
.elements[index] 返回表单中第index个表单控件
.elements[elemenName] 返回表单内id或name为elements的表单控件
.elementName 返回表单中id或name为
elementName的表单控件

    alert(document.getElementById("表单名称").elements["表单位置或者id或者name"].value)

DOM访问列表框，下拉菜单的常用属性
form 返回列表框，下拉菜单所在的表单对象
length 返回列表框，下拉菜单的选项个数
options 返回列表框，下拉菜单里的所有选项组成的数组
selectedIndex 返回下拉列表中选中选项的索引
type 返回下拉列表的类型，多选的话返回select-multiple，单选返回select-one

使用options[index]返回具体选项所对应的常用属性
defaultSelected 返回选项默认是否被选中
index 返回该选项在列框，下拉菜单中的索引
selected 返回该选项是否被选中
text 返回该选项呈现的文本
value 返回该选项的value属性值

函数(函数得到的下拉列表.options[位置]);

DOM访问表格子元素的常见属性和方法
caption 返回表格的标题对象
rows 返回表格里的所有表格行
tbodies 返回表格里所有《tbody…/》元素组成的数组
tfoot 返回该表格里所有《tfoot…/》元素
thead 返回该表格里所有《thead…/》元素

通过rows[index]返回表格指定的行所对应的属性
cells 返回该表格行内所有的单元格组成的数组
rowIndex 返回该表格行在表格内的索引值
sectionRowIndex 返回该表格行在其所在元素（tbody,thead等元素）的索引值

DOM访问表格子元素的常用属性和方法
caption 返回表格的标题对象
rows 返回该表格里的所有表格行
tbodies 返回该表格里所有的《tbody …./》元素组成的数组
tfoot 返回该表格里所有的《tfoot …./》元素
thead 返回该表格里所有的《thead …./》元素

通过cells[index]返回表格指定的列所对应的属性
cellIndex 返回该单元格在表格行内的索引值

<!DOCTYPE html><html>    <head>        <meta charset="UTF-8">        <title>表格控件</title>        <script>            function update(){                var row =document.getElementById("row").value;                var cell =document.getElementById("cell").value;                var t =document.getElementById("mytable");                t.rows[row-1].cells[cell-1].innerHTML= document.getElementById("course").value;            }        </script>    </head>    <body>        <table border="1" id="mytable">            <caption>课程</caption>            <tr>                <td>c</td>                <td>c++</td>            </tr>            <tr>                <td>ruby</td>                <td>python</td>            </tr>            <tr>                <td>java</td>                <td>android</td>            </tr>        </table>        <input type="button" value="表格标题"             onclick="alert(document.getElementById('mytable').caption.innerHTML);"/>        <input type="button" value="1.1"             onclick="alert(document.getElementById('mytable').rows[0].cells[0].innerHTML);"/>        <input type="button" value="2.2"             onclick="alert(document.getElementById('mytable').rows[1].cells[1].innerHTML);"/>        <input type="button" value="3.2"             onclick="alert(document.getElementById('mytable').rows[2].cells[1].innerHTML)"/><br />        设置指定单元格的值：第<input type="text" id="row" size="2" />行，        第<input type="text" id="cell" size="2" />列，值为        <input type="text" id="course" size="10" />        <input type="button" id="btn" value="修改" onclick="update()"/>    </body></html>

DOM创建节点的方法
domcument.createElement(Tag) Tag必须是合法的HTML元素
DOM复制节点的方法
节点.cloneNode(boolean deep),当deep为true时，表示复制当前节点以及当前节点的全部后代节点。当为false时，只复制当前节点
DOM添加删除节点的方法
这里写图片描述

DOM为列表框，下拉菜单添加选项的方式
创建选项除了使用前面所示的createElement方法外，还可以使用专门的构造器来构造一个选项出来

new Option(text,value,defaultSelected,selected)

参数：text 该选项的文本，内容 value 选中该选项的值 defaultSelected 设置默认是否显示该选项 selected 设置该选项当前是否被选中
删除列表框，下拉菜单的选项的方法
直接使用列表框对象.remove(index)方法删除指定的选项

DOM对表格动态添加删除内容常用方法
insertRow（index）在指定索引位置插入一行
createCaption 为该表格创建标题
createTFoot 为该表格创建《tfoot…/》元素，假如已经存在返回现有的
createTHead 为该表格创建《thead…/》元素，假如已经存在返回现有的
deleteRow（index）删除表格中index索引处的行
deleteCaption（）删除表格标题
deleteTFoot 从表格删除tFoot元素及其内容
deleteTHead 从表格删除tHead元素及其内容

八，javascript事件

1，事件概念和事件监听
事件流：事件触发的流程冒泡和捕获事件

使用返回值改变HTML元素的默认行为
HTML元素大都包含了自己的默认行为，例如超链接，提交按钮，我们可以在绑定事件加上return false来阻止它的默认行为

通过性的事件监听方法

//绑定HTML元素属性<input type="button" value ="clickMe" onclick="check(this)"/>//绑定DOM对象属性document.getElementById("btn").onclick = test;

访问事件对象
事件对象封装了事件发生的详细信息，尤其是鼠标，键盘事件。入鼠标事件发生的位置，键盘事件的键盘等。
标准DOM中的事件对象
在标准DOM浏览器检测到发生了某个事件时，见自动创建一个Event对象，并隐式地将该对象作为事件处理函数地第一个参数传入

2，常见的事件类型
常用地鼠标事件
onclick 单击鼠标左键
ondbclick 双击鼠标左键触发
onmousedown 单击任意一个鼠标按键时触发
onmousemove 鼠标在某个元素上移动持续触发
onmouseup 松开鼠标任意一个按键时触发
onmouseover 鼠标指针移到一个元素上时触发

常用地键盘事件
onkeydown 按下键盘上地某个按键时触发一直按会持续触发
onkeyup 释放某个按键时触发
onkeypress 按下某个按键并产生字符时触发，忽略shift功能键

HTML 事件
1、onload 页面完全加载后在window对象上触发
2、onunload 页面完全卸载后在window对象上触发
3、onchange 文本框失去焦点时，并且在它获取焦点后内容发生过改变时触发
4、onsubmit 单击“提交”按钮时在表单form上触发
5、onfocus 任何元素或窗口获得焦点时触发
6、onblur 任何元素或窗口失去焦点时触发
7、onselect 选择了文本框的一个或多个字符时触发

阅读全文

0 0