Web-JavaScript

文章目录

JavaScript
- JS基本语法
- - 变量
  - 数据类型
  - 运算符
  - 流程控制（与java一致）
  - 数组
- JS中的函数
- - 函数的定义
  - 调用函数
  - 函数调用注意事项（函数名与函数名()区别）
  - JS中不存在函数的重载和重写问题
- JS中的对象
- - 数组是对象
  - 函数也是对象
  - 一般对象
  - JS中自带对象
- JS事件
- - 事件分类
  - 常见事件
  - JS的嵌入方式
  - window.onload事件作用
- DOM
- - DOM查询API
  - - 元素节点

JavaScript

JS是一门客户端脚本语言，主要运行在浏览器中，浏览器中负责运行JavaScript脚本代码的程序叫JavaScript引擎。
时至今日JavaScript已经不仅仅局限于表单验证，网页上很多绚丽动感的特效都有他的功劳。

特性

解释性语言：在程序中的运行过程中逐行进行解释，不需要被编译成机器码在执行
面向对象：不仅可以创建对象，也可使用现有对象
类C和java的语法：语法与c和java很像，像for、if、while等语句基本一模一样
简单：采用弱类型的变量类型，对使用数据类型未做出严格要求，是基于java基本语句和控制的脚本语言
动态性：可暂时理解为语言中的一切内容都是不确定的，比如一个变量这一刻是个整数，下一刻可能变成字符串
跨平台性：不依赖操作系统（java依赖jvm），仅需浏览器的支持
安全性：不允许直接访问本地磁盘

JS构成
一个完整的JS实现应该由一下三部分构成

ECMAScript：是一个标准，而这需要由各厂商去实现
DOM：js中通过DOM（文档对象模型）来对HTML文档进行操作，只要理解了DOM就可以随心所欲的操作web页面
BOM：要想在浏览器中使用js，必须使用BOM（浏览器对象模型），BOM提供了很多对象，通过修改这些对象的属性，调用他们的方法，用于控制浏览器的各种行为

JS基本语法变量

使用var声明变量
使用typeof()验证变量的数据类型

数据类型

基本数据类型
1. number
2. string
3. boolean
4. null
5. undefined（未定义：只声明未赋值）
对象类型
1. 数组
2. 函数
3. 一般对象

运算符

算数运算符：+、-、*、/、%、++、–……
逻辑运算符：&&、||、！
三元运算符：？：
赋值运算符：=
关系（比较）运算符：>、<、>=、<=、!=、= =、【=== 、!==】
1. ==与===（全等）区别
  ==：比较两个变量的数值是否相等
  ===：比较两个变量是否全等（数值且数据类型相等）
2. !==（不全等）主要有以下两种情况
  数值不等
  数据类型不等

流程控制（与java一致）数组

定义数组
1. var arr = [“js”,1,true];
2. var arr2 = new Array(“js”,1,true);
使用数组
arr[index]
注意：
1. js的数组中可以存储任意数据（数据类型）
2. js的数组是自动扩容

JS中的函数函数的定义

定义普通函数：function 函数名(形参列表){}
定义匿名函数：function(形参列表){}

调用函数

js中调用函数时，不检查形参与实参匹配情况
实参>形参
自动忽略多余参数

实参<形参
1. 实参数据类型：number。结果：NaN（not a number）
2. 实参数据类型：string。结果：实参值+undefined

JS中存在一个隐式对象：arguments，类似java中可变形参

function add(i,j){
      alert(arguments[2])
      return i+j;
    }
    alert(add(1,2,4));

匿名函数调用

var fun=function(){
      alert("匿名函数")
    }
    fun();

函数调用注意事项（函数名与函数名()区别）

函数名：使用函数名的引用
函数名()：触发（执行）当前函数

JS中不存在函数的重载和重写问题

在JS中后面的同名函数会覆盖前面的同名函数

JS中的对象数组是对象函数也是对象一般对象

对象创建&使用
1. 方式一：var obj = new Object()
2. 方式二：var obj2 = {“key”:value,“key2”:value2,……}//json对象
3. json对象的key建议使用string类型，json对象的value是js中支持的数据类型即可

var stu = new Object();
    stu.name = "张三";
    stu.age = 18;
    stu.study = function (){
      alert(this.name+"正在学习");
    }
    alert(stu.age);
    stu.study();

var stu = {
      "stuName" :"张三","stuAge":18,
      "study":function (){
        alert(this.stuName+"在学习");
      }
    };
    alert(stu.stuAge);
    stu.study();

this关键字指向的是调用当前函数的对象

JS中自带对象

JS内置对象
Array、Date、Math、……
浏览器对象
1. window：浏览器对象模型中的核心对象
2. location：控制URL（地址栏）的对象（取值赋值）
dom对象
document、body、button……

JS事件事件分类

系统事件：由系统触发的事件，例如文档加载完成
用户事件：用户操作，例如单击、鼠标移入、鼠标移除等

常见事件

函数名	说明
onload	加载完成事件，常用于页面加载完成之后做的一些功能
onclick	单击事件，常用于用户点击视图的时候触发功能
onblur	失去焦点事件，常用于失去焦点的时候触发功能
onchange	内容发生改变事件，常用于下拉列表和文本输入框内容发生改变时
onsubmit	表单提交事件，常用于表单提交事件的时候做一些表单验证的工作

JS的嵌入方式

行内JS：结构与行为相耦合，不建议使用

内部JS

外部JS

定义外部js：demo.js
引用外部js

注意：当 window.onload事件作用

当前文档完全加载后执行
完全加载：当前文档中所有关联内容全部加载

DOM

Document Object Model(文档对象模型)，我们浏览器把整个网页当成一个大的对象，网页中的标签、文本、属性等也都转换为对象来管理，利用面向对象的方式操作网页内容。便于js操作DOM
定义了访问和处理HTML文档的标准方法
DOM中的节点类型
1. 文档节点(Document): DOM标准将整个HTML文档的相关信息封装后得到的对象。
2. 元素节点(Element): DOM标准将HTML标签的相关信息封装后得到的对象。
3. 属性节点(Attribute): DOM标准将HTML标签属性的相关信息封装后得到的对象。
4. 文本节点(Text): DOM标准将HTML文本的相关信息封装后得到的对象。

DOM查询API 元素节点

在整个文档范围内查询元素节点

功能	API	返回值
根据id值查询	document.getElementById(“id值”)	一个具体的元素节点
根据标签名查询	document.getElementByTagName(“标签名”)	元素节点数组
根据name属性值查询	document.getElementByName(“name值”)	元素节点数组

建议使用顺序:先使用id查找。如果没有id的情况下，考虑使用name进行查找。
如果id，和name属性都没有，最后使用标签名tag查找。

在具体元素节点范围内查找节点

功能	API	返回值
查找全部子节点	element.childNodes	字节数组
查找第一个子节点	element.firstChild	节点对象
查找最后一个子节点	element.lastChild	节点对象
查找指定标签名的子节点	element.getElementsByTagName(“标签名”)	元素节点数组

查找指定元素的父节点

功能	API	返回值
查找指定元素节点的父节点	element.parentNode	节点对象

查找指定元素节点的兄弟元素

功能	API	返回值
查找前一个兄弟节点	node.previousSibling	节点对象
查找后一个兄弟节点	node.nextSibling	节点对象

Web-JavaScript

Java相关栏目本月热门文章