JavaScript学习笔记

太过爱你忘了你带给我的痛 2022-06-07 03:19 229阅读 0赞

1.  JavaScript是基于客户端浏览器、面向对象、事件驱动式的网页脚本语言，属于web语言。
2.  特点：

一种解释性脚本编写语言、基于对象的脚本编程语言、简单性、安全性、动态性、跨平台性

1.  作用：

交互式操作，表单验证、网页特效、web游戏、服务器脚本开发

1.  在HTML页面嵌入Javascript代码：
    
    方法1：使用Javascript：前缀构建执行Javascript代码
    
    方法2：使用<script…/>标签包含Javascript代码
2.  导入外部Javascript文件，使HTML和Javascript分离，Javascript脚本保存为\*.js.在HTML中导入Javascript脚本文件语法如下：

</script>

1.  变量和数据类型

声明变量：隐式定义：直接给变量赋值（使用时要先赋值）；显式定义：使用var关键字定义变量（根据赋值数据类型确定变量类型）

变量命名规则跟Java一样

数据类型：数值类型、布尔类型、字符串类型（可以用’’括起来）、未定义类型（undefined）、空类型、对象类型

数据类型转换：

1.  通过”+”或toString()方法转换成字符串
    
    （”+”做字符串连接，”-””\*””/”先将字符串转换再运算）
2.  通过parseInt()将字符串转换成整型
3.  通过parseFloat()将字符串转换成浮点型

1.  JavaScript字符串常用操作方法
2.  正则表达式：
    
    是对字符串操作的一种逻辑公式，就是用事先定义好的一些特定字符、以及这些特定字符的组合，组成一个“规则字符串”，这个“规则字符串”用来表达对字符串一种过滤逻辑。
    
    语法1：var reg = /pattern/;  /\*pattern是规则，不要用””,是//\*/
    
    语法2：var reg = new RegExp(pattern); /\*pattern是规则，是字符串要用””或’’\*/
    
    /\*常用的方法 exec(str),test(str)     例：reg.exec(str) 在str中找符合reg规则的字符串，有返回该字符串；reg.test(str)——str中是否有符合reg规则的字符串，有返回true，没返回false\*/

1.  正则表达式支持常用通配符：
    
    . 可以匹配任何字符
    
    \\d 匹配0—数字
    
    \\D 匹配非数字
    
    \\s 匹配所有空白字符，包括空格、制表符、换行符、回车等
    
    \\S 匹配所有非空白字符
    
    \\w 匹配所有单词字符，包括0—926个英文字母和下划线
    
    \\W 匹配所有非单词字符
    
    \\b 匹配单词边界
    
    \\B 匹配非单词边界
    
    \[abc\] 查找方括号内任意字符
    
    \[^abc\] 查找任意不在方括号内字符
    
    \[0-9\] 查找任意从0至9的数字
    
    \[a-z\] 查找任意从a至z的字符
    
    \[A-Z\] 查找任意从A至Z的字符
    
    \[A-z\] 查找任意从A至z的字符
    
    (red|blue|green)查找任何指定选项，匹配括号内的任意一组
2.  正则表达式量词：

n+ 匹配任意包含至少一个n的字符串

n\* 匹配任意包含零个或多个n的字符串

n? 匹配任意包含零个或一个n的字符串

n\{x\} 匹配包含x个n的序列的字符串

n\{x,y\} 匹配包含x或y个n的序列的字符串

n\{x,\} 匹配包含至少x个n的序列的字符串

n$ 匹配任意结尾为n的字符串

^n 匹配任何开头为n的字符串

1.  正则表达式修饰符

var reg = /pattern/i 执行对大小写不敏感的匹配

var reg = /pattern/g 执行全局匹配（查找所有匹配而非在找到第一个匹配后停止）

var reg = /pattern/m 执行多行匹配

1.  JavaScript数组

1.  定义
    
    语法1：var arr = \[0,1,2\];//定义时直接给数组元素赋值
    
    语法2：var arr = \[\];//定义一个空数组
    
    语法3：var arr = new Array();arr\[0\]=1;//定义一个空数组并通过索引来赋值
2.  特点
    
    数组长度可变。总长度为数组最大索引值\+1
    
    同一数组中元素类型可以互不相同
    
    当访问未赋值的数组元素时，该元素为undefined，不会数组越界

1.  JavaScript运算符
    
    算术运算符 \+ - \* / % ++ --
    
    赋值运算符 =
    
    比较运算符 > < >= <= == != === !==
    
    逻辑运算符 && || ！
    
    位运算符 & | ~ ^ << >>
    
    其他运算符三目运算符（?:）逗号运算符 void运算符 typeof instanceof
2.  流程控制语句

1.  分支语句：if语句、switch语句
2.  循环语句：while循环、do while循环、for循环、for in循环
3.  break、continue改变循环的控制流

1.  常用的特殊语句
    
    语句块（没有只作用于语句块的变量）、空语句、异常抛出语句（只有Error异常对象）、异常捕捉语句（只能有一处catch语句块，接收异常不能用var）、with语句（减少重复写的对象）
2.  JavaScript函数
    
    /\*函数没有声明返回类型\*/
    
    /\*函数形参不需要做类型声明\*/
    
    /\*函数是Function类的对象\*/

/\*命名函数可以调用在声明之前，匿名函数要先定义后调用\*/

1.  定义函数

定义函数1：命名函数

function函数名(参数列表)\{

执行的语句块;

定义函数2：匿名函数

/\*可以通过f调用，f(参数列表)\*/

var f =function (参数列表)\{

执行的语句块;

定义函数3：使用function类构造匿名函数

/\*可以通过f调用，f(参数列表)\*/

var f=  new fuction(参数列表，函数执行体)

1.  函数返回值
    
    函数没有声名返回类型，需要返回时使用return语句，若没则不反回
2.  局部变量和局部函数
3.  函数调用
    
    直接调用：对象. 函数名//默认是window对象
    
    以call方法调用：函数名.call(调用者,参数1,参数2,……)/\*调用者默认是window\*/
    
    以apply方法调用：函数名.apply(调用者，arguments)/\*arguments是数组，用于存放参数\*/

1.  常用的内置对象

1.  Date
2.  Math

1.  JavaScript创建对象

1.  使用new关键字调用构造器创建对象 var f = new 函数名()/\*可以不传入参数，参数为undefined\*/
2.  使用Object直接创建对象 var myObj = new Object();/\*为空对象，可以对象名.属性名或函数名 = 属性值或function(); 添加。\*/
3.  使用JSON语法创建对象
    
    JSON对象以一对大括号括起来，大括号内有多个键值对，键值之间用:隔开，多个键值对用逗号隔开，JSON数组用\[\]括起来
    
    object = \{ 属性名1：属性值1, 属性名2：属性值2,……\};/\*属性值可以是各种数据类型或函数function（）\{\}\*/

1.  BOM浏览器对象模型
    
    BOM-JavaScript是运行在浏览器中的，所以提供一系列对象用于和浏览器窗口进行交互，这些对象主要包括window、document、location、navigator和screen。通常统称为浏览器对象模型
    
    window对象是整个JavaScript脚本运行的顶层对象，它的常用属性如下：document、location、navigator、screen和history
    
    window对象常用方法：alert() confirm() prompt() close() moveBy()moveTo() resizeBy() resizeTo() open() setInterval() clearInteral()
    
    history对象常用方法back() forward() go(intValue)
    
    location对象常用方法 hostname href host port pathname protocol
    
    screen对象常用属性 availHeight availWidth colorDepth
    
    navigator对象常用属性 appCodeName appName appVersion platformuserAgent cookieEnabled
2.  DOM对HTML元素访问
    
    DOM是文档对象模型当网页加载时，可以将结构化文档在内存中转换成对象树。
    
    DOM模型有3种节点：元素节点（各种标签）、文本节点（在元素节点内部）、属性节点（修饰元素节点）

1.  DOM动态修改HTML，先访问HTML元素，两种方式来访问：
    
    一是通过ID访问HTML元素，通过document对象调用getElementById方法来查找具有唯一id属性的元素
    
    二是利用节点关系访问HTML元素，通过当前节点调用方法parentNode()、previousSibling()、nextSibling()、childNodes()、firstChild()、lastChild()、getElementsByTagName(tagName)
2.  DOM访问表单控件常用属性和方法
    
    action返回表单的提交地址
    
    elements返回表单内全部表单控件所组成的数组，通过数组可以访问表单内任何表单控件
    
    length 返回表单内表单域个数
    
    method 返回表单内method属性，主要有get和post两个值
    
    target确定提交表单时的结果窗口，主要有\_self、\_blank、\_top等
    
    reset()、submit()重置表单和确定表单方法
3.  DOM访问列表框、下拉菜单常用的属性
    
    form 返回列表框、下拉菜单所在的表单对象
    
    length返回列表框、下拉菜单的选项个数
    
    options返回列表框、下拉菜单所有选项组成的数组
    
    selectedIndex返回下拉列表中选中选项的索引
    
    type返回下拉列表的类型，多选返回select-multiple，单选返回select-one
4.  DOM访问表格子元素的常用属性和方法
    
    caption返回表格的标题对象
    
    rows 返回该表格所有的表格行
    
    tbodies返回该表格所有<tbody…/>元素组成的数组
    
    tfoot 返回该表格所有<tfoot…/>元素
    
    thead返回该表格所有<thead…/>元素
5.  DOM创建节点方法 document.createElement(Tag)
6.  DOM复制节点的方法 cloneNode(Boolean deep) 当deep为true时，表示复制当前节点以及当前节点全部后代节点，为false时只复制当前节点
7.  DOM添加、删除子节点的方法
    
    appendChild(newNode)将newNode添加到当前节点的最后一个子节点
    
    insertBrfort(newNode,refNode)在refNode节点前插入newNode节点
    
    replaceChild(newNode,oldNode)将oldNode节点替换成newNode节点
    
    removeChile(oldNode)将oldNode子节点删除
8.  DOM为列表框、下拉菜单添加选项的方式
    
    new Option(text,value,defaultSelected,selectes)
9.  添加创建好的选项至列表框或下拉菜单的方式
    
    列表框或下拉菜单对象.options\[i\] = 创建好的option对象
10. 添加创建好的选项至列表框或下拉菜单的方式
    
    列表框或下拉菜单对象.remove(index)方法删除指定选项
11. DOM动态添加删除表格内容常用的方法
    
    insertRpw(index)在指定索引位置插入一行
    
    createCaption()为该表格创建标题
    
    createTFoot()为该表格创建<tfoot…/>元素，加入已存在返回现有的
    
    createTHead()为该表格创建<thead…/>元素，加入已存在返回现有的
    
    deleteRow(index) 在指定索引位置删除一行
    
    deleteCaption()删除该表格标题
    
    deleteTFoot()从表格删除tFoot元素及内容
    
    deleteTHead()从表格删除tHead元素及内容

1.  JavaScript事件概念和事件监听

1.  JavaScript使我们有能力创建动态页面，网页中的每个元素都哦可以产生某些可以触发JavaScript函数的事件。我们认为事件是可以被JavaScript侦测到的一种行为。
2.  事件流主要分冒泡型事件（标准事件流，一层层往上查找父标签事件）和捕获型事件（由最顶层一层层往下查找父标签事件）。
3.  通过在绑定事件中加上return false来阻止HTML元素的默认行为。
4.  通用性事件监听
    
    绑定HTML元素属性<HTML标签属性事件名=”函数”/>
    
    绑定DOM对象属性document.getElementById(“id名”).事件名=函数名;
5.  IE中的事件监听方法
    
    \[object\].attachEvent(“事件类型”,”函数名”);//添加监听
    
    \[object\].detachEvent(“事件类型”,”函数名”);//取消监听
    
    /\*事件类型写法以on开头，如onclick\*/
6.  标准DOM中的事件监听方法
    
    \[object\].addEventListener(“事件类型”,”函数名”，”冒泡事件或捕获事件”);
    
     \[object\].removeEventListener(“事件类型”,”函数名”，”冒泡事件或捕获事件”);//true为捕获型事件，false为冒泡型事件
    
    /\*事件类型写法不以on开头，如click\*/
7.  访问事件对象：事件对象封装了事件发生的详细信息
    
    IE中的事件对象：是一个隐式可用的全局对象：event，它是window对象一个属性。Op.onclick = function()\{var oEvent  = window.event;\}
    
    标准DOM中事件对象：在标准DOM浏览器检测到发生某个事件时，将自动创建一个Event对象，并隐式地将该对象作为事件处理函数的第一个参数传入op.onclick = function(oEvent)\{//作为参数传入\}
    
    为兼容不同浏览器op.onclick = function(oEvent)\{if(window.event)\{oEvent= window.event;\}\}
    
    Event事件对象常用属性
8.  常见的事件类型
    
    鼠标事件：onclick ondbclick onmousedown onmouseout onmousemoveonmouseup onmouseover
    
    常用键盘事件：onkeydown onkeyup onkeypress
    
    HTML事件：onload onunload onselect onchange onsubmit onfocus onblur