一、JavaScript入门
1.JavaScript简介
- JavaScript（简称“JS”） 是一种具有函数优先的轻量级，解释型或即时编译型的编程语言。
- JavaScript的标准是ECMAScrip
- JS是弱类型的语言
2.JavaScript组成部分
JavaScript 的内容，包含以下三部分：
- ECMAScript（核心）：
JavaScript 语言基础(规定了 JavaScript 脚本的核心语法，如 数据类型、
关键字、保留字、运算符、对象和语句等，它不属于任何浏览器；- DOM（文档对象模型）：
规定了访问 HTML 和 XML 的接口（提供了访问 HTML 文档（如
body、form、div、textarea 等）的途径以及操作方法）；Node：Document、Element、
Attr、Text- BOM（浏览器对象模型）：
提供了独立于内容而在浏览器窗口之间进行交互的对象和方法(提供了
访问某些功能（如浏览器窗口大小、版本信息、浏览历史记录等）。
2.JavaScript的特点
- 1）. 是一种解释性脚本语言（代码不进行预编译）； html中的所有代码都是顺序执行
- 2）. 主要用来向 HTML（标准通用标记语言下的一个应用）页面添加交互行为；
- 3）. 可以直接嵌入 HTML 页面，但写成单独的 js 文件有利于结构和行为的分离。
3.JS代码编写的位置
- 直接编写在html的script标签中
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>JS可编写的位置</title>
<script type="text/javascript">
alert("Hello JavaScript!");
</script>
</head>
- 编写在JS文件中
注意：script标签不能同时引入js文件和编写其他js代码
index.js: 编写JS代码
window.onload = function(){
//这里只能编写JS代码
alert("Hello JavaScript")
...
}
index.html: 引入JS文件
<script type="text/javascript" src="index.js"></script>
4.基本语法
- 标识符可以由任意顺序的大小写字
母、数字、下划线(_)和美元符号($)组成，标识符不能以数字开头，不能是 JavaScript 中的保留字
或关键字。 - JavaScript 严格区分大小写 username 和 userName 是两个完全不同的符号
- 注释：
//单行注释
/**/文档注释 -
JS中的关键字和保留字
JS中的关键字和保留字
5.变量
- 变量的声明：var 变量名 -----》若变量没有初始化，默认是 undefined
- 打印变量：
方式 1：alert(变量名); 直接在浏览器中弹出对话框
方式 2(推荐)：console.log(变量名); （info、log、debug、warn、error）:在浏览器控制台打印
内容
6.数据类型
- 简单类型: String，Number，Boolean，Null，undefined
对象类型: Object, Array, Function - typeof 方法获取变量的数据类型。
num=18;
console.log(typeof num );//number
7.运算符
- 比较运算符 = 和 == 以及 === 之间的区别:
= 赋值
== 比较两个数据的值是否相等，不会去判断类型
=== 先判断数据类型是否相等，然后在去判断值是否相等
- 比较运算符 = 和 == 以及 === 之间的区别:
- 逻辑运算符
在逻辑运算中 0、""、false、NaN、undefined、null 表示为 false，其他类型数据都表示 true。
比较中先转换为 Boolean 类型，在执行逻辑与或
- 逻辑运算符
&& 和 || 运算符的区别:
&& 操作：从左往右依次判断，如果结果为false, 返回第一个为 false 的值，反之,返回最后一个为true值；
|| 操作：从左往右依次判断，返回第一个为 true 的值，否则返回最后一个值。
console.log("--- && 双与");
console.log(true && true); // true
console.log(1 && true); // true
console.log(1 && 2); // 2
console.log("A" && 2); // 2
console.log("" && 2); // 空字符串
console.log(null && "B"); // null
console.log("A" && "B"); // B
console.log(1 && 2 && 3); // 3
console.log(1 && null && 3); // null
console.log("" && null && 0); // 空字符串
console.log(NaN && null); // NaN
console.log("--- || 双或");
console.log(true || true); // true
console.log(1 || true); // 1
console.log(1 || 2); // 1
console.log("A" || 2); // A
console.log("" || 2); // 2
console.log(null || "B"); // B
console.log("A" || "B"); // A
console.log(1 || 2 || 3); // 1
console.log(1 || null || 3); // 1
console.log("" || null || 0); // 0
console.log(NaN || null); // null
二、 函数的定义与调用
- 普通函数：
JS中不用指定函数的返回值类型(无论怎样都有返回,JS是弱类型语言)
var 函数类型变量 = function 函数名([参数名称1, 参数名称2, ..., 参数名称N]){
//程序代码
[return 值;]
}
默认返回可写为 undefined
调用：
直接使用 函数类型变量(参数名称1, 参数名称2...)
- 定义匿名函数
var add = function(x, y){
return x+y;
}
调用：
add(x,y);
三、 面向对象
- Javascript提供了一个构造函数模式：
其实就是一个普通函数，内部使用了this指向变量和方法,它们都会绑定在实例对象上，这个函数自动返回
这个新创建的对象
//如何使用JS来定义一个类(构造函数)
function Person(name, age){
//添加属性
this.name = name;
this.age = age;
//添加方法
this.sleep = function(){
console.log("困了,睡一觉");
}
}
//使用构造函数来创建对象
var p = new Person("Neld", 10);
console.log(p);
//访问对象中的成员
console.log(p.name);
console.log(p.age);
p.sleep();
//JS中,可以单独为某一个对象添加成员
p.xxx = "ooo";
console.log(p);
var p2 = new Person("xxx",10);
console.log(p2);
构造函数首字母大写，这是规范，官方都遵循这一个规范，如Number() Array()。
四、 内置对象
1.Date
- Date() 返回当前日期和事件
getFullYear() 获取Date对象中四位数字的年份
getMonth() 获取Date对象中的月份(0~11)
getDate() 获取Date对象中的天(1~31)
getHours() 获取Date对象中的小时
getMinutes() 获取Date对象中的分钟
getSeconds() 获取Date对象中的秒
2.String
- 属性:
length 字符个数 - 方法:
charAt(index) 返回指定位置的字符
concat(string1,string2,string3,....) 拼接字符串
fromCharCode(num) 可接受一个指定的 Unicode 值，然后返回一个字符串
subString(start,stop) 提取字符串中两个指定的索引号之间的字符。
console.log("-------3.内置对象(Date, String) ------");
console.log("---3.1 Date()返回当前时间");
var dateTime = new Date();
console.log(dateTime);
console.log("---3.2 getFullYear() 获取年份");
var year = dateTime.getFullYear();
console.log("---3.3 getMonth() 获取月份");
var month = dateTime.getMonth()+1;
console.log("---3.4 getDate() 获取日");
var date = dateTime.getDate();
console.log("---3.5 getHours() 获取小时");
var hour = dateTime.getHours();
console.log("---3.6 getMinutes() 获取分钟");
var minute = dateTime.getMinutes();
console.log("---3.7 getSeconds() 获取秒");
var second = dateTime.getSeconds();
console.log(year + "-" + month + "-" + date + " " + hour + ":" + minute + ":" + second);
console.log("---3.8 length 获取字符长度");
var str3 = "saw the child born：我看见孩童降生";
var str4 = "into the sun：隐入太阳";
console.log(str3);
console.log(str3.length);
console.log("---3.9 charAt(index) 返回指定位置的字符");
console.log(str3.charAt(1));
console.log("---3.10 concat(str1,st2...) 拼接字符串");
console.log(str3.concat(str4));
console.log("---3.11 fromCharCode(n1,n2...)以指定的 Unicode值返回一个字符串 ");
console.log(String.fromCharCode(72,69,76,76,79));
console.log("---3.12 substring(start,stop) 返回指定位置之间的字符串");
console.log(str4.substring(0,5));
五、 数组
1.数组定义
- 创建数组对象 var arr = new Array();
- 类似数组中的静态初始化 var arr2 = new Array("西施","王昭君","貂蝉","杨贵妃"); var arr2 = newArray(1, 2, 3, 4);
- 类似数组的动态初始化 var arr3 = new Array(4);//这里的4是数组的长度,而不是元素
- 简写：
var arr4 = ["西施", "王昭君", "貂蝉", "杨贵妃"];
注意： 对于 js 中的数组不会出现数组越界的异常，也不是定长的
2.数组中的常用属性和方法
- 属性 length 属性，获取数组长度。
- 方法 :
- concat(array1, array2, ......, arrayX)：连接两个或更多的数组，并返回结果。
- join(separator)：把数组的所有元素放入一个字符串。元素通过指定的分隔符进行分隔。
- reverse()：颠倒数组中元素的顺序（该方法会改变原来的数组，而不会创建新的数组）。
- slice(start[, end])：从某个已有的数组返回选定的元素（返回的是一个新数组）。
- pop()：删除并返回数组的最后一个元素。 shift()：删除并返回数组的第一个元素。
- push(newelement1, newelement2, ...., newelementX)：向数组的末尾添加一个或更多元素，并返回新的长度。
- unshift(newelement1, newelement2, ...., newelementX)：向数组的开头添加一个或更多元素，并返回新的长度。
- splice(index, howmany, element1, ....., elementX)：用于插入、删除或替换数组的元素。
console.log("-------2.数组常用的方法------");
console.log("---2.1 concat(str1,st2...) 字符串拼接");
var str1 = "你好呀，你好，你";
var str2 = "你，好呀，你好呀";
console.log(str1.concat(str2));
var arr2 = [ 'a', 'b', 'c' ];
var arr3 = [ 'd', 'e', 'f' ];
console.log("---2.2 concat(arr1,arr2...)数组拼接");
console.log(arr2);
console.log(arr3);
console.log(arr2.concat(arr3));
console.log("---2.3 join(separator)数组分隔");
console.log(arr2.join(","));
console.log("---2.4 reverse()数组倒序");
console.log(arr2.reverse());
console.log("---2.5 slice(start,end)截取返回新数组");
var newArr = arr3.slice(1, 3);
console.log("newArr:"+newArr);
console.log("---2.6 pop()删除数组最后一个元素并返回");
console.log(arr2.pop());
console.log(arr2);
console.log("---2.7 pop()删除数组第一个元素并返回");
console.log(arr2.shift());
console.log(arr2);
console.log("---2.7 push(ele1,ele2..)向数组的末尾添加元素(返回当前长度)");
console.log(arr2);
console.log(arr2.push("aa","bb","cc"));
console.log(arr2);
console.log("---2.8 unshift(ele1,ele2..)向数组的前添加元素(返回当前长度)");
console.log(arr3);
console.log(arr3.unshift("dd","ee","ff"));
console.log(arr3);
console.log("---2.9 splice(index, howmany,ele1,ele2...)插入、删除或替换数组元素 ");
console.log(arr3);
arr3.splice(0, 0, "wow");// 插入
console.log(arr3);
arr3.splice(0, 1, null);// 删除
console.log(arr3);
arr3.splice(0, 3, "repalce");// 替换
console.log(arr3);
3.数组的遍历方式
- for 最简单的一种循环遍历方法，也是使用频率最高的一种
var arr = ["A","B","C","D"];
for(var i = 0; i< arr.length; i++){
console.log(arr[i]);
}
- forEach
性能仍然比普通循环略低
var arr = ["A","B","C","D"];
arr.forEach(function(item,index,array){
console.log(item);
});
- map
遍历数组中的每个元素,将回调函数中的返回值存到一个新的数组中,并返回
var arr = ["A","B","C","D"];
var newArr = arr.map(function(item,index,array){
return item+index;
});
//newArr中的数据:["A1","B2","C3","D4"]
- 4、for-in
可以遍历数组（获取的索引）；也可以遍历对象（获取对象的属性名）。
//如果是遍历数组,i对应的是数组的索引
var arr = ["A","B","C","D"];
for(var i in arr){
console.log(i);//索引
console.log(arr[i]);//元素
}
//如果是遍历对象,name对应的是属性名
var obj = new Object();
for(var name in obj){
console.log(name);//属性名
console.log(obj[name]);
}
网友评论