JavaScript

发表于 | 分类于 ， ， ， |
字数统计: | 阅读时长 ≈

JavaScript

作用

控制页面特效。象征前端的大脑和灵魂。WEB的脚本语言。

简单描述就是页面的特效展示。

脚本语言：无法独立执行，必须嵌入到其他语言中编译执行。

语言特征及编程注意事项

  • JavaScript 无需编译，直接被浏览器解释并执行
  • JavaScript无法单独运行，必须嵌入到HTML代码中运行
  • JavaScript的执行过程由上到下依次执行
  • JavaScript没有访问系统文件的权限
  • 由于JavaScript无需要编译，是由上到下依次编译执行，在保证可读性的情况下，允许使用链式编程
  • JavaScript和java没有半毛钱关系

JavaScript的组成部分

  • ECMAScript (核心)：规定了JS的语法和基本对象。
  • DOM：文档对象模型：处理网页内容的方法和接口标记型文档。HTML
  • BOM：浏览器对象模型：与浏览器交互的方法和接口

JavaScript的引入方式

内部脚本

1
2
3
<script>
        alert("我无敌！");
</script>

外部引入

text.js

1
alert("我无敌！");

text.html

1
2
3
<script src="text.js">
        
</script>

规范化的放置

放置在body结束之前

为了用户的快速响应的体验效果

JavaScript语法及规则

注释

  • 单行注释 //

    CTRL+ /

  • 多行注释 /* */

    CRTL+SHIFT+ /

变量

变量如果没有声明就不能用

变量的声明

1
2
var bianliang;
// 变量的类型为undefined 并且值为undefined

变量的声明和赋值

1
2
var bianliang = 10;
// 变量赋予对应的值

基本规范

  • 必须以字母或下划线开头，中间可以是数字、字符或下划线
  • 变量名不能包含空格等符号
  • 不能使用JavaScript关键字作为变量名，如：function、this、class
  • 严格区分大小写

基本数据类型

数据类型 含义
string 字符串类型””和’’都是字符串，没有单个字符
boolean 布尔类型，固定值为true和false
number 数字类型，任意数字(正负，整、小数)
null 空，一个占位符
undefined 未定义类型，只有一个固定值undefined

通过 typeof() 来显示变量的数据类型。

null数据类型返回object，其余的数据类型返回值都为原先的数据类型。

引用数据类型

所处理的引用数据类型都是对象

标准创建方式

1
2
var str = newString(); //和java相同
var str = newString;   //js独有的方式

运算符

JavaScript中只有&&和||不存在单个的&和|运算符

正则对象

RegExp对象

1
2
3
4
var reg = new RegExp("表达式"); //开发中基本不用（因为太麻烦）
var reg = /^表达式$/;           //开发中常用 直接量
var reg = /表达式/；            //普通量方式

直接量中存在边界^代表开始；$代表结束

直接量的方式的正则是对象，不是字符串，不能用引号

直接量方式必须全部满足才可以为true 检查严格，适用于表单校验

普通量方式只要存在成立正则的字符就为true，检查不严格，适用于字符串查找

test方法

通过reg.test(“”);可以拿来判断是否符合正则的规则

JS数组对象

特性

JS数组可以看做是Java中的Arraylist集合

  • 数组中的每一个成员没有类型限制，及可以存放任意类型
  • 数组的长度可以自动修改

创建

  1. var arr =[1,2,3,”a”,true]; //常用的JS数组。 长度为5
  2. var arr =newArray();创建一个数组对象。数组长度默认为0
  3. var arr =newArray(4);创建一个长度为4的数组，其中每个元素都是undefined(仅仅在显示数组时进行处理)
  4. var arr = newArray(1,2，”a”); //创建了一个数组，数组元素为1,2

自定义函数/方法

1
2
3
4
5
6
//自定义函数/方法的创建
function addthings(){
    var a = 10;
    var b = 20;
    return a+b;
}

自定义对象

1
2
3
4
5
6
//自定义对象的创建
function Person(){
    this.name = "虞程龙"；
    this.age = 18;
    this.sex = "男";
}

自定义对象直接量

格式：

var 对象名 ={属性名1：”属性值1”，属性名2：”属性值2”……};

1
2
3
var Person = {name:"虞程龙"，age:18,sex:"男"};
//或者直接操作
Person.height = 173;

BOM对象

BOM指的是浏览器对象模型或者称为windows对象。

消息框

警告框alert(“”);

确认框confirm(“”);

确认框存在返回值，点击确定返回值为true，点击取消返回值为false。

定时器

循环定时器

启动循环计时器-setInterval()

格式：

setInterval(“调用方法”，毫秒值);

毫秒值：循环周期

1
2
3
4
function run1(){
    alert("run1");
}
setInterval("run1()",2000);
取消循环计时器-clearInterval()

需要返回计时器的ID

1
2
3
4
5
function run1(){
    alert("run1");
}
var iid = setInterval("run1()",2000);
clearIntercal(iid);

一次性定时器

启动一次性定时器-setTimeout()

格式：

setTimeout(调用方法，毫秒值);

1
2
3
4
function run1(){
    alert("我是run1");
}
setTimeout("run1()",1000);
取消一次性定时器-clearTimeout()

方法和取消循环计时器一样，()里需要id才能取消。

location 对象

href : 设置或者返回当前的URL

1
2
3
4
//设置URL地址（即跳转到设置的网页上）
location.href = "http://www.baidu.com";
//获取URL
var c = location.href;

DOM对象

DOM 文档对象模型

文档：标记型文档（HTML等）

DOM 是将标记型文档中所有内容（标签、文本、属性）都封装成对象，通过操作对象的属性或者方法，来达到操作或者改变HTML展示的效果的目的。

获取元素对象的四种方式

在JavaScript中，我们可以通过DOM对象的4种方式获取的对应的元素对象：

  • getElementByld(); 通过元素ID获取对应元素对象，找不到返回null
  • getElementByName(); 通过元素的name属性获取符合要求的所有元素
  • getElementByTagName(); 通过元素的元素名属性获取符合要求的所有元素
  • getElementByClassName(); 通过元素的class属性获取符合要求的所有元素

注意事项

获取的元素节点对象，必须保证元素节点对象已经被加载到内存中。

元素对象常见属性

value

元素对象.value，获取元素对象的value属性值。

元素对象.value=属性值 设置元素对象的value属性值

1
2
3
4
5
6
7
8
9
<input type="text" id="t1" value ="你好" />
<script>
    //取用value属性值
    var t1 = document.getElementById("t1");
    alert(t1.value);
    
    //修改value属性值
    t1.value="你好么"；
</script>

className

元素对象.className，获取元素对象的class属性值。

元素对象.className = 属性值 设置元素对象的class属性值

checked

元素对象.checked，获取元素对象的checked属性值。

元素对象.checked = 属性值 设置元素对象的checked属性值(html中用true和false表示是否选中)

innerHTML

元素对象.innerHTML 获取元素对象

元素对象.innerHTML = 属性值 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<span id = "s1">
    今天天气好晴朗
</span>
<script>
    //获取span标签内的内容体
    var s1 = document.getElementById("s1");
    alert(s1.innerHTML);
    
    //设置span标签的内容体 今天好像要下雪
    s1.innerHTML = "今天好像要下雪";
    
    //向span标签内追加信息 ，今天0度
    s1.innerHTML += "，今天0度";
</script>

JS事件

常见JS事件

事件代码 事件
onclick 点击事件
onfocus 元素组件获取焦点
onblur 失去焦点事件
onchange 域内容改变事件值发生改变
onload 元素组件加载完毕
onsubmit 表单的提交按钮被点击时触发
onkeyup 键位弹起事件(键盘)
onmouseover 鼠标移入事件
onmouseout 鼠标移除事件

JS事件的绑定

onclick = “run1(),run2()”;

  • 开发方便
  • 传参方便
  • 可以绑定多个函数

DOM方式绑定

window.onload=run1;

window.onload=function(){

​ run1();

​ run2();

};