JavaScript

概述

1、主要完成页面的数据验证,因此运行在客户端,需要运行浏览器来解析执行 JavaScript 代码

2、JS是弱类型:类型可变,Java 是强类型:类型不可变

3、特点

(1)交互性:信息的动态交互

(2)安全性:不允许直接访问本地硬盘

(3)跨平台性:只要是可以解释 JS 的浏览器都可以执行,和平台无关

 

JavaScript 结合 HTML

1、在 head 标签 / body 标签中,使用 script 标签输入 JavaScript 代码

<script type="text/javascript">

</script>

2、在 head 标签中,使用 script 标签,引入单独的 JavaScript 代码文件

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

3、在同一 script 标签中,两种方式只能二选一

 

变量

1、关键字:var

2、数据类型:JavaScript 变量可以接收任意类型的数据

3、标识符:严格区分大小写

4、定义变量格式

var 变量名;
var 变量名 = 值;

5、类型

(1)值类型(基本类型):字符串(string)、数字(number)、布尔(boolean)、对空(null)、未定义(undefined)、Symbol

(2)引用数据类型(对象类型):对象(object)、数组(array)、函数(function)、正则(regExp)、日期(date)

6、NAN:全称:Not a Number,非数字,非数值

 

变量事项

1、所有 JavaScript 变量未赋于初始值的时候,默认值都是 undefined

2、数值型:JavaScript 不区分整数、小数

3、字符串:JavaScript 不区分字符、字符串;单引号、双引号作用相同

4、布尔型:true、false

(1)在 JavaScript 中,其他类型和布尔类型的自动转换

(2)true:非零的数值,非空字符串,非空对象

(3)false:零,空字符串、null,undefined

5、引用类型

(1)所有 new 对象

(2)用 [] 声明的数组

(3)用 {} 声明的对象

6、typeof():JavaScript 的函数,返回变量的数据类型

 

关系 / 比较运算符

1、==:等于,只比较数字

2、===:全等于,比较数字,且比较变量的数据类型

3、!=:不等于

4、!==:不全等于

 

逻辑运算符

1、在 JavaScript 中,所有的变量,都可以做为一个 boolean 类型的变量去使用

2、&&:短路且

(1)当表达式全为真的时,返回最后一个表达式的值

(2)当表达式中,有一个为假的时,返回第一个为假的表达式的值

3、||:短路或

(1)当表达式全为假时,返回最后一个表达式的值

(2)只要有一个表达式为真,返回第一个为真的表达式的值

4、取反:!

 

数组

1、定义空数组

var 数组名 = [];

2、定义数组,同时赋值元素

var 数组名 = [元素1, 元素2];

3、JavaScript 的数组,只要通过数组下标赋值,则最大的下标值,就会自动的给数组做扩容操作

 

函数

1、定义函数

(1)使用 function 关键字

function 函数名(形参列表) {
    函数体;
}

(2)

var 函数名 = function () {
    函数体;
}

2、JavaScript 的函数带返回值,直接在函数体内直接使用 return 语句

3、JavaScript 不允许重载,函数的重载会覆盖上一次的定义

4、arguments 隐形参数

(1)只在 function 函数内

(2)在 function 函数中不需要定义,但可以直接用来获取所有参数的变量

(3)类似 Java 可变长参数,可变长参数本质是一个数组

(4)隐形参数操作类似数组

 

自定义对象

1、Object 形式

(1)定义对象

var 变量名 = new Object();//对象实例(空对象)

变量名.属性名 = 值;//定义一个属性

变量名.函数名 = function () {//定义一个函数
    函数体;
}

(2)访问对象

变量名.属性/函数名();

2、{} 形式

(1)定义对象

var 变量名 = {
    属性名: 值,
    函数名: function () {
        函数体;
    }
}

(2)访问对象

变量名.属性/函数名();

 

事件

1、输入设备与页面进行交互的响应

2、常用事件

(1)加载完成事件(onload):页面加载完成之后,常用于做页面 JavaScript 代码初始化操作

(2)单击事件(onclick):常用于按钮的点击响应操作

(3)失去焦点事件(onblur):常用于输入框失去焦点后,验证其输入内容是否合法

(4)内容发生改变事件(onchange):常用于下拉列表和输入框内容发生改变后操作

(5)表单提交事件(onsubmit):常用于表单提交前,验证所有表单项是否合法

3、事件注册 / 绑定:通知浏览器,当事件响应后,执行对于操作代码

(1)静态注册事件:通过 HTML 标签的事件属性,直接赋于事件响应后的代码

(2)动态注册事件:先通过 JavaScript 代码得到标签的 dom 对象,再通过 dom 对象.事件名 = function () {} 赋给事件响应后的代码

4、各事件注册

(1)加载完成事件(onload)

function onload() {
    //静态注册onload事件,函数体包括该事件,对应所有操作代码
}

window.onload = function () {
    //动态注册onload事件,固定写法
}

(2)单击事件(onclick)、失去焦点事件(onblur)、内容发生改变事件(onchange)、表单提交事件(onsubmit)

function 事件类型() {
    //静态注册事件,函数体包括该事件,对应所有操作代码
}

window.事件类型 = function () {//动态注册事件
    //1、获取标签对象
    var 标签对象名 = document.getElementById("事件对应标签的id属性值");
    //2、赋给onclick事件响应后的代码
    标签对象名.onclick = function () {
        //函数体
    }
}

 

DOM

1、Document Object Model:文档对象模型

2、把 HTML 文档中的标签,属性,文本,转换成为对象来管理

 

DOM Document 对象

1、概述

(1)管理了所有的 HTML 文档内容

(2)是一种树结构的文档,有层级关系

(3)把所有的标签都对象化

(4)可以通过 document 访问所有的标签对象

2、查找 HTML 元素

(1)document.getElementById(elementId):通过标签的 id 属性查找,并返回第一个相同 id 标签的 dom 对象,elementId 是标签的 id 属性值

(2)document·getElementsByName(elementName):通过标签的 name 属性查找,并返回所有相同 name 标签的 dom 对象集合,elementName 是标签的 name 属性值

(3)document.getElementsByTagName(tagname):通过标签名查找标签 dom 对象,并返回所有相同标签名的 dom 对象集合,tagname 是标签名

(4)使用顺序:id -> name -> tagName;三个方法必须在页面加载后才能查询

3、添加和删除元素

(1)document.createElement(element):创建 HTML 元素

(2)document.removeChild(element):删除 HTML 元素

(3)document.appendChild(element):添加 HTML 元素

(4)document.replaceChild(element):替换 HTML 元素

(5)document.write(text):写入 HTML 输出流

 

DOM 元素对象

1、改变 HTML 元素

(1)element.innerHTML = new html content:改变元素的 innerHTML

(2)element.attribute = new value:改变 HTML 元素的属性值

(3)element.setAttribute(attributevalue):改变 HTML 元素的属性值

(4)element.style.property = new style:改变 HTML 元素的样式

2、获取属性

element.childNodes:获取当前节点的所有子节点

element.firstChild:获取当前节点的第一个子节点

element.lastChild:获取当前节点的最后一个子节点

element.parentNode:获取当前节点的父节点

element.nextSibling:获取当前节点的下一个节点

element.previousSibling:获取当前节点的上一个节点

element.className:获取 / 设置标签的 class 属性值

element.innerHTML:获取 / 设置起始标签和结束标签中的内容

element.innerText:获取 / 设置起始标签和结束标签中的文本

 

正则表达式语法

1、直接量语法

/pattern/attributes

2、创建 RegExp 对象的语法

new RegExp(pattern, attributes);
posted @   半条咸鱼  阅读(42)  评论(0编辑  收藏  举报
(评论功能已被禁用)
相关博文:
阅读排行:
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章
· 没有源码,如何修改代码逻辑?
· PowerShell开发游戏 · 打蜜蜂
· 在鹅厂做java开发是什么体验
· WPF到Web的无缝过渡:英雄联盟客户端的OpenSilver迁移实战
点击右上角即可分享
微信分享提示