一、JavaScript语言介绍
1、JavaScript简介
JavaScript是一种专为与网页交互而设计的脚本语言, 具有较强的逻辑性.
JavaScript 是一种具有面向对象能力的、解释型的程序设计语言。更具体一点,它是基于对象和事件驱动并具有相对安全性的客户端脚本语言。因为他不需要在一个语言环境下运行,而只需要支持它的浏览器即可。它的主要目的是,验证发往服务器端的数据、增加 Web互动、加强用户体验度等.
不同于服务器端脚本语言,例如PHP、ASP(.net)和JSP(Java),JavaScript主要被作为客户端脚本语言在用户的浏览器上运行,不需要服务器的支持
2、JavaScript 语言的特点
(1) 脚本语言。JavaScript是一种解释型的脚本语言,C、C++等语言先编译后执行,而JavaScript是在程序的运行过程中逐行进行解释。
(2) 基于对象。JavaScript是一种基于对象的脚本语言,它不仅可以创建对象,也能使用现有的对象。
(3) 简单。JavaScript语言中采用的是弱类型的变量类型,对使用的数据类型未做出严格的要求.
(4) 动态性。JavaScript是一种采用事件驱动的脚本语言,它不需要经过Web服务器就可以对在用户的输入做出响应。访问一个网页时,鼠标在网页中进行鼠标点击或上下移、窗口移动等操作,JavaScript都可直接对这些事件给出相应的响应。
(5) 跨平台性。JavaScript脚本语言不依赖于操作系统,仅需要浏览器的支持。因此一个JavaScript脚本在编写后可以带到任意机器上使用,前提是机器上的浏览器支持JavaScript脚本语言,目前JavaScript已被大多数的浏览器所支持。
3、JavaScript语言的组成
JavaScript由三部分组成:
1. 核心(ECMAScript)
2. 浏览器对象模型(BOM)
3. 文档对象模型(DOM)
ECMAScript:是一种由ECMA国际(前身为欧洲计算机制造商协会,英文名称是European Computer Manufacturers Association)通过ECMA-262标准化的脚本程序设计语言。ECMAScript 定义的只是这门语言的基础,他的组成部分有:语法、类型、语句、关键字、保留字、操作符、对象等
BOM: Browse Object Model, 浏览器对象模型,提供与浏览器交互的方法和接口(API), 开发人员使用BOM可以控制浏览器显示页面以外的部分.
DOM: Document Object Model,文档对象模型,提供访问和操作网页HTML内容的方法和接口
4、编写第一个JS程序
4.1 在Html文件中写
-
导入JavaScript标签:
-
在标签中间写js代码
-
script标签可以出现多次, 且可以出现在html文件的任何地方, 建议写在之间; 另外,同一个文件中Javascript和HTML代码, 它们的执行顺序都是自上而下,谁在前就谁先执行, 谁在后就后执行.
-
JavaScript的注释
单行注释: //, 多行注释 /* */
<script type=“text/javascript”>
alert(“hello world!”) ;
document.write(“亲,我在页面上,跟alert不一样噢!”);
console.log(“我是在控制台打印的, 以后常用我!”);
</script>
4.2 外部JS文件引入
<script type="text/javascript" src="demo1.js" ></script>
注意:
1. 不可以使用单标, 以下是不正确的写法
<script type="text/javascript" src="demo1.js“/ >
2. 在引入了外部文件的标签中写代码会无效, 下面的alert()不会执行
<script src=“demo1.js”>alert(‘xxxx’)</script>
二、JS基础语法
1、JS变量
1.1 JS变量的定义
<script type=“text/javascript”>
// 定义的同时赋值:
var age=20;
// 可以一次定义多个变量:
var name=“zhangsan", age=18,weight=108;
</script>
1.2 JS变量的命名规范
1. 变量名可以是数字,字母,下划线_和美元符$组成;
2. 第一个字符不能为数字
3. 不能使用关键字或保留字
4. 标识符区分大小写,如:age和Age是不同的变量。但强烈不建议用同一个单词的大小写区分两个变量。
5. 变量命名尽量遵守驼峰原则: myStudentScore
2、变量的数据类型
JS数据类型一般可以分为:
Boolean: 布尔类型
Number:数字(整数int,浮点数float)
String:字符串
Array:数组
Object:对象
特殊数据类型 Null、Undefined
使用 typeof 操作符来检测变量数据类型
<script type=“text/javascript”>
var b = "张三";
console.log(typeof b);
console.log(typeof "张三");
</script>
2.1 Undefined类型
Undefined类型:
Undefined 类型只有一个值,即特殊的 undefined。在使用 var 声明变量,但没有对其初始化时,这个变量的值就是 undefined
2.3 Null类型
Null 类型:
Null 类型是一个只有一个值的数据类型,即特殊的值 null。它表示一个
空对象引用(指针),而 typeof 操作符检测 null 会返回 object。
undefined 是派生自 null 的,因此 ECMA-262 规定对它们的相等性
测试返回 true, 表示值相等
2.3 Boolean类型
Boolean类型:
Boolean 类型有两个值:true和false。而true一般等于1,false一般等于0。
JavaScript 是区分大小写的,True和False或者其他都不是Boolean类型的值。
2.4 Number类型和Math对象
Number类型:
Number 类型包含两种数值:整型和浮点型.
由于保存浮点数值需要的内存空间比整型数值大两倍,
因此 ECMAScript 会自动将可以 转换为整型的浮点数值转成为整型。
NaN, 即非数值(Not a Number)是一个特殊的值
这个数值用于表示一个本来要返回数值的操作数未返回数值的情况(这样就不会抛出错误了)。
比如,在其他语言中, 任何数值除 以 0 都会导致错误而终止程序执行。
但在ECMAScript中,会返回出特殊的值,因此不会影响程序执行。
<script type=“text/javascript”>
var b = 8.; //小数点后面没有值,转换为 8
var b = 12.0; //小数点后面是 0,转成为 12
</script>
Math对象
Math对象可以用于执行数学任务
Math对象的常用函数:
Math.round(3.6) //四舍五入
Math.random() //返回0-1之间的随机数
Math.max(num1, num2) //返回较大的数
Math.min(num1, num2) //返回较小的数
Math.abs(num) //绝对值
Math.ceil(19.3) //向上取整
Math.floor(11.8) //向下取整
Math.pow(x,y) //x的y次方
Math.sqrt(num) //开平方
Math.sin(x) //返回数的正弦
2.5 类型转换
字符串转换数字类型:parseInt()、parseFloat()
parseInt() 是把其它类型转换为整型
parseFloat() 是把其它类型转换为浮点型(小数)
Math.round四舍五入 (78.566) -> 79
2.6 数组类型(重要)
本节会另取一级目录来讲解
3、JS运算符
算术运算符 (+,-, *, /, %(取余数))
字符串和变量的拼接(+)
关系运算符
<、>、<=、>=、==、===、!=, !==
逻辑运算符
&& 与(且)、|| 或、! 非
赋值运算符 a+=10;
=、+=、-=、*=、/=、%=
自增、自减
++a, a++, --a, a--
三、数组
1、数组的概念
数组的概念
数组的字面意思就是一组数据,一组(一般情况下相同类型)的数据
(不一定都是数字)
数组的作用是:使用单独的变量名来存储一系列的值。
2、数组的定义
new Array(参数,参数,...): 只有一个数字参数时是数组的长度(new可以省略,但一般尽量写上)
使用数组元素(访问);
arr3[0]:表示数组的第一个元素,0是下标,也叫索引
arr[1]:表示数组的第二个元素,1是下标
给数组赋值,就是给数组的元素赋值,需要给数组的每个元素一一赋值,
如:arr[0] = 20;//让数组的第一个元素的值为20;
arr[1] = 12;//让数组的第二个元素的值为12;
<script type=“text/javascript”>
var arr = new Array(); //定义一个空数组
var arr = new Array(10);
//创建一个包含 10 个元素的数组,没有赋值
var arr2 = new Array(“芙蓉姐姐”,30);
//创建一个数组有两个元素
var arr3 = [1,2,3,4,5]; //字面量定义方式
</script>
3、数组的使用
交换两个数
引入新变量
var temp = a;
a = b;
b = temp;
不引入新变量
a = a + b;
b = a – b;
a = a – b;
位运算交换
a = a ^ b;
b = a ^ b;
a = a ^ b;
4、数组的常用函数
4.1 reverse()
reverse() // 逆向排序, 原数组也被逆向排序了
var box = [1,2,3,4,5];
alert(box.reverse()); //逆向排序方法,返回排序后的数组
alert(box);
4.2 sort()
var box = [4,1,7,3,9,2];
alert(box.sort()); //从小到大排序,返回排序后的数组
alert(box);
sort 方法的默认排序在数字排序上有些问题,因为数字排序和数字字符串
排序的算法是一样的。我们必须修改这一特征,修改的方式,就是给 sort
(参数)方法传递一个函数参数。
//如果一定要使用sort()进行排序, 可以传递一个函数
function compare (value1, value2) {
if (value1 < value2) {
return -1; //返回0和-1, 表示不交换值
}
else if (value1 == value2) {
return 0;
}
else {
return 1; //返回1, 表示会交换值
}
}
var box = [0, 1, 10, 5, 15];
var aseBox = box.sort(compare); //返回升序的数组
4.3 concat()
concat() : 追加数据, 创建一个新数组, 不改变原数组
var box = [2, 3, 4, '绿箭侠', '黑寡妇'];
var box2 = box.concat('美队', '雷神');
alert(box);
alert(box2);
4.4 slice()和splice()
slice(): 不修改原数组, 将原数组中的指定区域数据提取出来
var box = [2, 3, 4, "绿巨人"];
var box2 = box.slice(1, 3); //并没有修改原数组,将原数组中的元素提取出来,生成新数组, 取的是下标在区域: [1,3)
alert(box);
alert(box2);
splice(): 截取原数组中指定的数据, 会改变原数组
插入: 如果有3个或以上参数,且第二个参数(长度)为0,则表示插入
box.splice(1, 0, "绿巨人", "冬兵");
//在下标为1前面的位置插入: "绿巨人","冬兵"
替换: 如果有3个或以上的参数, 且第二个参数(长度)不为0, 则表示替换
box.splice(1, 1, "绿巨人", "冬兵");
//在下标为1的位置替换成: "绿巨人","冬兵"
删除: 如果只有两个参数, 则表示删除指定区域的数据
0 表示开始删除的下标,2是删除的数目
box.splice(0, 2); //删除原数组的部分数据, 并返回截取的数据
四、字符串
1、字符串的长度属性
字符串的属性
length: 表示字符串的长度
例如 : var str = “how are you”;
console.log(str.length);
console.log(str[0]); //获取字符串中对应下标的字符
注意: ECMAScript 中的字符串是不可变的; 也就是说,字符串一旦创建,它们的值就不能改变.
例如: var str = “亲,包邮哦”;
str[0] = “唉”; //不会改变
如果要改变某个变量保存的字符串,首先要销毁原来的字符串,然后再用另一个包含新值的字符串填充该变量.
var str = “Hello”;
str = str+” world!”;
数值改为字符串的一种方法:number+'str’
2、字符串的方法
方法 | 描述 |
---|---|
str.charAt(n) | 获取字符串下标为n的元素 |
str.charCodeAt(n) | 获取字符串下标为n的字符编码 |
String.fromCharCode(94) | 静态方法,将编码为94的字符转换为该字符 |
str.concat() | 字符串的拼接 |
str.indexOf(substr) | 查找substr在str中第一次出现的位置 |
str.lastindexOf(substr) | 查找substr在str中最后一次出现的位置 |
str.search() | 正则匹配 返回第一次出现的位置 |
str.replace() | 替换字符串 |
str.substring(start,end) | 截取子字符串 |
str.split(separator,howmany) | 以指定字符分割成列表,指定列表的最大长度(可省略) |
str.toLowerCase() | 转换小写 |
str.toUpperCase() | 转换大写 |
演示
<script type="text/javascript">
//字符串的拼接
var str1 = 'hello';
var str2 = str1.concat('world');
//替换字符串
var str = "how are Are are you!";
var newStr = str.replace("are", "old are");
console.log(newStr);
//输出结果 how old are Are are you!
</script>
五、流程控制
分支结构
IF语句
if多分支语句的写法:
if(表达式){
执行语句1
}
else if(表达式2){
执行语句2
}
else if(表达式3){
执行语句3
}
else{
执行语句n
}
Switch语句
Switch语句的写法:
switch(表达式) {
case 常量1:语句; break;
case 常量2:语句; break;
…
case 常量n:语句; break;
default:语句; break;
}
循环结构
While循环
while循环语法格式:
while(表达式)
{
执行代码;
}
For循环
for (表达式1; 表达式2; 表达式3) {
执行代码;
}
六、JS对象和日期Date
对象的创建
创建 Object 类型有两种。
一种是使用 new 运算符,另一种是字面量表示法。
<script type="text/javascript">
//1. 使用 new 运算符创建 Object
var box = new Object(); //new方式
box.name =‘张三’; //创建属性字段
box.age = 18; //创建属性字段
//new关键字可以省略
var box = Object(); //省略了new关键字,不建议
//2. 使用字面量方式创建Object
var box = { //字面量方式
name :‘张三', //创建属性字段,最后加逗号
age : 18
};
//3. 属性字段也可以使用字符串形式
var box={
'name' : '张三', //也可以用字符串形式
'age' : 28
};
//4. 使用字面量及传统赋值方式
var box={}; //字面量方式声明空的对象
box.name='张三'; //点符号给属性赋值
box.age= 18;
//5. 两种属性输出方式
alert(box.age); //点表示法输出
alert(box['age']); //中括号表示法输出,注意引号
//6. 给对象创建方法
var box={
//对象中添加方法(函数)run
run : function() {
retrun “正在跑步..”;
}
}
alert(box.run()); //调用对象中的方法
//7. 使用 delete 删除对象属性
delete box.name; //删除属性
</script>
日期Date
日期对象的创建
<script type="text/javascript">
var d = new Date();
// 创建日期对象并指定时间
var d = new Date("2015/08/22");
var d = new Date(2016,04,13,14,34);
</script>
日期对象的方法
方法 | 描述 |
---|---|
box.toDateString() | 以特定的格式显示星期几、月、日和年 |
box.toTimeString() | 特定的格式显示时、分、秒和时区 |
box.toLocaleDateString() | 特定地区格式显示年、月、日 |
(box.toLocaleTimeString() | 以特定地区格式显示时、分、秒 |
box.toLocaleTimeString() | 以特定地区格式显示时、分、秒 |
box.toUTCString() | 以特定的格式显示完整的 UTC 日期: 年,月,日,时,分,秒 |
setDate() / getDate() | 从Date对象中返回一个月中的某一天(1~31) |
getDay() | 从Date对象返回一周中的某一天(0~6) |
set / getMonth() | 从Date对象中返回月份(0~11) |
set / getFullYear() | 从Date对象以四位数返回年份 |
set / getHours() | 返回Date对象的小时(0~23) |
set / getMinutes() | 返回Date对象的分钟(0~59) |
set / getSeconds() | 返回Date对象的秒数(0~59) |
set / getMilliseconds() | 返回Date对象的毫秒 |
set / getTime() | 返回1970年1月1日至今的毫秒数 |
七、DOM
1、DOM的概念
DOM概念详解
D(文档Document): 可以理解为整个Web加载的网页文档;
O(对象Object): 可以理解为类似window对象之类的东西,
可以调用属性和方法,这里我们说的是 document 对象;
M(模型Model): 可以理解为网页文档的树型结构。
通过DOM,我们可以访问所有的HTML元素,连同它们所包含的文本和属性
。可以对其中的内容进行修改和删除,同时也可以创建新的元素
2、元素节点的获取方式
方法 | 描述 |
---|---|
getElementById() | 获取特定ID元素的节点对象(返回一个对象) |
getElementsByTagName() | 获取指定标签名的节点列表(返回一个数组) |
getElementsByName() | 获取相同name属性值的节点列表(返回一个数组) |
getElementsByClassName() | 获取相同class值的节点列表(返回一个数组) |
<script type="text/javascript">
var box = document.getElementById('box');
</script>
注意: 如果id值存在, 但是返回null,则是执行顺序的问题
解决方法:
1. 把<script>标签(JS代码)移到html结构后面;
2. 使用onload事件来处理, onload事件会在html加载完毕后再调用。
//加载 html 后执行
window.onload=function() {
document.getElementById('box'); //id具有唯一性
};
3、元素节点的属性
可设置可获取
属性 | 描述 |
---|---|
tagName | 元素节点对象所指向的标签名称 |
id | 元素节点的id属性值 |
innerHTML | 元素节点中的内容 |
className | 元素节点的class属性值 |
style | css内联样式对象 |
title | 元素节点的title属性值 |
获取全局的css属性
因为在js中如果没有在JS代码里预先设置就直接用dom元素节点的style属性
是获取不了css的相关属性,所以需要用到以下方法
<script type="text/javascript">
var box = document.getElementById('box');
style = window.getComputedStyle(box,null);
console.log(style.left);
</script>
4、获取子元素节点
<script type="text/javascript">
通过oBox元素节点, 获取其三个子元素节点img
var oBox = document.getElementById("box");
var aImg = oBox.getElementsByTagName("img");
</script>
5、元素节点间的关系相关属性
关系属性 | 描述 |
---|---|
parentNode | 返回该节点的父节点 |
previousSibling | 属性返回该节点的前一个同级节点 空白区域也算 |
nextSibling | 属性返回该节点的后一个同级节点 空白区域也算 |
previousElementSibling | 返回该节点的父节点 忽略空白区域 |
nextElementSibling | 属性返回该节点的后一个同级节点 忽略空白区域 |
<script type="text/javascript">
console.log(box.parentNode.nodeName); //获取父节点的标签名
console.log(box.previousSibling);
console.log(box.nextSibling); //获取后一个同级节点
</script>
6、DOM节点操作
操作 | 描述 |
---|---|
createElement() | 创建一个元素节点 |
appendChild() | 添加一个新子节点到节点的末尾 |
createTextNode() | 创建一个文本节点 |
insertBefore() | 将新节点插入到某节点前面 |
replaceChild() | 将新节点替换旧节点 |
cloneNode() | 复制节点 |
removeChild() | 移除节点 |
<script type="text/javascript">
box = document.getElementById('box');
var newEle = document.createElement('p');
box.appendChild(newEle);
var textNode = document.createTextNode('textNode');
box.appendChild(textNode);
var newEle1 = document.createElement('div');
box.insertBefore(newEle1,newEle);
var newEle2 = newEle1.cloneNode();
box.replaceChild(newEle2,textNode);
// box.removeChild(newEle2);
console.log(box)
</script>