JavaScript
JavaScript的组成：
- ECMAScript 5.0:定义了js的语法标准：包含变量，表达式，运算符，函数，if语句 for循环，while循环，内置的函数
- DOM: 操作网页上的api，一些皆对象，比如html标签
- BOM: 操作浏览器部分功能的API，比如说刷新页面、前进、后退、让浏览器自动滚动
ECMAScript 5.0
- 所有的变量都挂在到了全局对象window
javascript的引入方式：
- 内接式：
<script type="text/javascript">
</script>
- 外接式：
<!--相当于引入了某个模块-->
<script type="text/javascript" src="./js/index.js"></script>
注释
//这个是注释
变量的使用
在js中使用的是var关键字声明变量，js语言是一个弱类型的语言
<script type="text/javascript">
// 1.变量的声明和定义（赋值）
var a = 10;
alert(a);
// 2.先声明变量 未来定义
var b;
b = '200';
console.log(a);
console.log(b);
var c;
//Uncaught ReferenceError: c is not defined c没有定义
console.log(c);//undefined 未定义
</script>
- 变量的命名规范
// 变量名有命名规范：只能由英语字母、数字、下划线、美元符号$构成，且不能以数字开头，并且不能是JavaScript保留字。
bstract、boolean、byte、char、class、const、debugger、double、enum、export、extends、final、float、goto
implements、import、int、interface、long、native、package、private、protected、public、short、static、super、synchronized、throws、transient、volatile
基础数据类型
js基本的数据类型：
1. number 数字类型
2. string 字符串类型
3. boolean 布尔类型(True False)
4. null 空值
5. undefined 未定义
数字类型
<script type="text/javascript">
// typeof 变量名
var a = 100;
console.log(typeof a); //number
var b = 5/0;
console.log(b);//Infinity 无限大
console.log(typeof b)//number
</script>
字符串类型
- ‘+’ 号可以表示连字符，也可以是数字相加。字符串+数值相当于字符串拼接，数字加数字相当于相加
<script type="text/javascript">
var c = 'abc';//可以使用单引号或者双引号表示字符串
console.log(typeof c);//string
var d = 'abc'+'cbd'+1;
console.log(d);//abccbd1
//将数值类型转换成字符串类型
var e = 10+'';
console.log(typeof e);//string
</script>
其他三种数据类型
<script type="text/javascript">
//布尔类型
var isshow = false;
console.log(isshow);//false
//空对象
var a = null;
console.log(typeof a);//object空对象
// null
var b;
console.log(b);//值是 undefined
console.log(typeof b)//undefined是数据类型
</script>
复杂（引用）的数据类型
- Function 相当于python中的函数，def
- Object 相当于python中的字典，dict
- Arrary 相当于python中的字典，list
- Date 相当于python中的time模块
JavaScript比较运算符的特殊情况
-
JavaScript的运算符与python基本上类似，只是javascript多了一个++&-- 自增自减运算符，还有== === 以及！==（不等同于，值和类型有一个不相等，或者两个都不相等）与！=（不等于）比较运算
-
比较运算符特殊情况代码：
<script type="text/javascript">
// var a = 5;
// var b = a++;//先将a赋值给b 然后a进行自增+1
// console.log(a);//输出6
// console.log(b);//输出5
// var a = 5;
// var b = ++a;//先进行a++ 然后再将a++的值(6)赋值给b
// console.log(a);//6
// console.log(b);//6
var x = 5;
var y = '5';
// console.log(x == y);//true ==比较的是值相同
console.log(x === y);//false === 比较的是值和数据类型（内存地址）
</script>
数据类型转换
数值类型转字符串类型
<script type="text/javascript">
// 数值类型转字符串类型
//1.隐式转换
var n1 = 123;
var n2 = '123';
var numStr = n1+n2;
console.log(typeof numStr);//string
//2.强制转换
//内置函数：toString()
var n3 = 100;
var StrNum = n3.toString();
console.log(typeof StrNum);//string
//内置函数：String()
var n4 = 100;
var strNum = String(n4);
console.log(typeof strNum)//string
</script>
字符串类型转数值类型
<script type="text/javascript">
var stringNum1 = '12345';
var num1 = Number(stringNum1);
console.log(typeof num1);//number
var stringNum2 = '1234dhwjuijdwio';
var num2 = Number(stringNum2);
console.log(typeof num2);//number
console.log(num2);//NaN Not a Number 不是一个数值，但是强制转换成了数值类型
// 解析字符串中的整数 内置方法：parseInt()
var num3 = parseInt(stringNum2);
console.log(num3);//stringNum2 = '1234dhwjuijdwio'; num3 = 1234
// 解析字符串中的浮点型 内置方法：parseFloat()
var stringNum3 = '1.2546dw485dwdhf';
var num4 = parseFloat(stringNum3);
console.log(num4);//1.2546
</script>
流程控制
if
<script type="text/javascript">
// if
var age = 20;
if(age > 18){
//{}相当于一个作用域
console.log('在if里面，条件为真时执行');
}
console.log(1111);
</script>
if - else
<script type="text/javascript">
var age = 18;
if(age==18){
console.log('今年十八岁');
}else{
console.log('管你今年多少岁')
}
</script>
if-else if-else
<script type="text/javascript">
//if - else if -else
var age = 20;
if(age==18){
console.log('今年十八岁');
}else if(age >= 20) {
console.log('今年大于十八');
}else{
console.log('今年小于十八');
}
console.log('执行完啦')
</script>
逻辑与&& 逻辑或||
- 逻辑与相当于python中的and
// 逻辑与：如果a大于5 并且b大于10，只有两个条件同时成立才打印条件成立
var a = 10;
var b = 20;
if(a > 10 || b > 10){
alert('在if里面');
}else{
alert('判断失败')
}
- 逻辑或||相当于python中的or
// 逻辑或：如果a大于10 或者b大于10，只要其中一个条件成立便打印条件成立
var a = 10;
var b = 20;
if(a > 10 || b > 10){
alert('在if里面');
}else{
alert('判断失败')
}
switch
- case穿透：switch语句 case表示一个条件，满足这个条件就会输出，直到遇到break跳出，如果break不屑，那么程序会遇到下一个break停止
var gamescore = 'good';
switch (gamescore) {
case 'good':
console.log('还可以');
break;
case 'better':
console.log('合格');
break;
case 'best':
console.log('优秀');
break;
default:
console.log('回家种田吧');
break;
}
while循环
// 使用while循环将1～100所有是2的倍数在控制台打印
//初始化循环变量
var i = 1;
//判断循环条件
while (i <= 100){
if (i%2==0) {
console.log(i);
}else {
console.log('不是2的倍数');
}
i++;//更新循环变量
}
do-while
- 用途不大
- 不管条件如何，上来先做一次，然后再去循环
// 先执行一次do作用域内部的代码，然后再判断条件是否继续循环
var i = 3;
do {
console.log(i);
i++;
}while(i<2);
for循环
// 计算100之间所有数的和
//i = 1 初始化循环变量
//i<100 判断循环条件
// i++ 更新循环条件
var x = 0;
for (var i = 1;i<=100;i++){
x +=i;
}
console.log(x)
- 双重for循环
// 在页面上显示等边三角形
// document.write('喵喵喵') 往页面上写入内容
for (var i=1;i<=6;i++){
for (var s=i;s<6;s++){
document.write(' ');
}//控制空格数量
for (var j=1;j<=2*i-1;j++){
document.write('*');
}//控制每行的输出*数
document.write('<br>')
}
// 在页面显示直角三角形
for (var i=0;i<=6;i++){
for (var j=1;j<=i;j++){
document.write('*')
}
document.write('<br>')
}
常用内置对象（复杂数据类型）
数组：Array
// 创建列表的两种方式
// 1.字面量方式：
var colors = ['red','yello','blue'];
console.log(colors);
// 2.使用构造函数(js中创造对象使用的是构造函数)
var colors = new Array();
colors[0] = 'red';
colors[1] = 'yellow';
colors[2] = 'bule';
console.log(colors);
数组的常用方法
- 使用for循环遍历列表
var colors = ['yellow','red','green'];
// for循环遍历数组:length函数 返回数组的长度
for(var i=0;i<colors.length;i++) {
console.log(i, colors[i])
}
- 使用forEachd遍历数组
通过forEach遍历数组的每一项内容，毁掉函数中的参数第一个参数为item（每一项的内容）第二个参数是数组的索引
var l = ['a','b','c'];
l.forEach(function (item,index) {
console.log(item,index)
})
- cancat：数组的合并
// 数组的合并
var north = ['北京','山东','天津'];
var south = [['北京','山东','天津']];
var newCity = north.concat(south);
console.log(newCity);//['北京','山东','天津','北京','山东','天津']
- join：将数组中的元素使用指定的字符串拼接起来，返回一个新的字符串
// 字符串拼接
//方式1
var north = ['北京','山东','天津'];
console.log(north.join('|'));//北京|山东|天津
//方式2
var str = north.join('|');
console.log(str);//北京|山东|天津
- slice(start,end) 返回数组的一段记录，相当于切片，于python中的切片一样，顾头不顾尾
//字符串的切片
var list = ['a','b','c','d'];
var newlist = list.slice(1,3);
console.log(newlist);//["b", "c"]
- push：向数组最后添加一个元素，相当于python中的append方法
var list = ['喵','汪','嗷呜'];
list.push('嗷');
console.log(list);//["喵", "汪", "嗷呜", "嗷"]
- reverse 反转数组
var list = ['喵','汪','嗷呜'];
list.reverse();
console.log(list);//["嗷呜", "汪", "喵
- sort：对数组排序
按照字母进行排序，如果第一个字母相同则比较第二个字母
var list = ['y','v','d','c','x'];
list.sort();
console.log(list)//["c", "d", "v", "x", "y"]
- isArray()：判断是否为数组
返回值为true或者false
var l = ['a','b','c'];
var isList = Array.isArray(l);
if(isList){
console.log('是数组')
}else{
console.log('不是数组')
}
字符串的常用方法
- chartAt() 返回指定索引的位置的字符
var str = 'abc';
var charset = str.charAt(1);
console.log(charset);
- concat 返回字符串值，表示两个或多个字符串的拼接
var str1 = 'abc';
var str2 = '123';
var newstr = str1.concat(str2,str1); //可以跟多个参数
console.log(newstr);//abc123abc
- replace(old,new)字符串替换
var str = '123456789';
var newstr = str.replace('123','abc');
console.log(newstr);//abc456789
- indexof() 查找字符的下标，如果找到返回字符串的下标，找不到则返回-1
var str = 'abddwdwdasa';
console.log(str.indexOf('a'));//0
console.log(str.indexOf('w'));//4
console.log(str.indexOf('x'));//-1
- slice(start，end) 左闭右开 分割字符串
var str = 'abcd';
console.log(str.slice(1,3));//bc
- split('a',1) 以字符串a分割字符串，并返回新的数组。如果第二个参数没写，表示返回整个数组，如果定义了个数，则返回数组的最大长度
与python中的split方法一样
var str = 'abcd|aa|dd|ccc';
var strlist = str.split('|');
console.log(strlist);//["abcd", "aa", "dd", "ccc"]
- substr(statr,end) 左闭右开与slice方法一样
//顾头顾尾
var str = 'abcd';
console.log(str.substr(1,3));//bcd
- toLowerCase()转小写
var str = 'ABCDE';
console.log(str.toLowerCase());//abcd
- toUpperCase()转大写
var str = 'abcde';
console.log(str.toUpperCase());//ABCDE
- 去除字符串首尾空格与换行
与python中的strip方法一样
var str = ' a ';
console.log(str.trim());//a
- 特别：
//1.将number类型转换成字符串类型
var num = 132.32522;
var numStr = num.toString()
console.log(typeof numStr)
//四舍五入
var newNum = num.toFixed(2)
console.log(newNum)
Math内置对象
| 方法 | 含义 |
|---|---|
| Math.floor() | 向下取整，称为地板函数 |
| Math.ceil() | 向上取整，称为天花板函数 |
| Math.max(a,b) | 求a和b中的最大值 |
| Math.min(a,b) | 求a和b中的最小值 |
| Math.random() | 随机数，默认0-1之间的随机数 |
- 随机数计算公式：min+Math.random()*(max-min),求min～max之间的数
var num = 100+Math.random()*(300-100);
console.log(num.toFixed());
// toFixed()取整
函数
函数：就是将一些语句进行封装，然后通过调用的形式，执行这些语句，函数的作用：解决大量的重复性语句，简化编程使编程模块化
与python中的函数基本类似，只是声明方式有所不同，JavaScript的函数调用可以在任意地方调用
//声明函数的方式
//方式1
function func(x,y){
return x + y;
}
console.log(func(1,2));
//方式2:匿名函数
var func2 = function (x,y){
return x+y;
}
console.log(func2(3,2))
JavaScript的面向对象
JavaScript创建对象的方法（部分）
- 使用Object或对象字面量创建对象
- 工厂模式创建对象
- 构造函数模式创建对象
- 原型模式创建对象
- 使用Object或对象字面量创建对象
//使用Object字面量创建对象
var person = new Object();
//给对象赋值
person.name = 'wualin';
person.age = 20;
console.log(person);
//字面量方式1：对象中的函数以匿名函数传给对象函数
var person2 = {
name : 'wualin',
age :22,
func:function () {
//this相当于python中的self，指的是对象本身
console.log(this)
}
};
//方式2：先定义好函数然后再将函数传入对象中
var person3 = {
name:'小黑',
age:12,
func:func
};
function func () {
console.log(this)
}
//调用对象中的方法与属性
person3.func();//调用方法
console.log(person3.name);//调用属性
- 工厂模式创建对象
像工厂车间一样不停的生产对象，避免代码冗余，调用几次就生成几个对象
//工厂模式创建对象:避免代码重复
function ceratePerson(name,age){
var obj = new Object();
obj.name = name;
obj.age = age;
return obj;
}
var person1 = ceratePerson('alex',21);
var person2 = ceratePerson('wualin',22);
console.log(person1 instanceof Object);//instanceof判断某某是某某，返回值是true或者false
- 构造函数模式创建对象:使用new关键字来创建对象
// 使用构造函数创建对象
//与python中类似，用来区分对象是属于哪个类型的
//函数名首字母大写
function Person(name,age){
this.name = name;
this.age = age;
}
var p1 = new Person('alex',21);
console.log(p1 instanceof Person);//判断p1是不是Person类
- 原型模式创建对象
//原型模式创建对象 propotype 它是当前类的父类
function Person(name,age) {
this.name = name;
this.age = age;
}
//prototype相当于继承
Person.prototype.alterNanem = function () {
alert(this.name)//this相当于Person
};
var p1 = new Person('alex',18);//对象继承父类的方法
p1.alterNanem();
补充
arguments的使用
arguments伪数组，有数组的索引以及length属性，但是没有数组的方法
function add () {
console.log(arguments);
for (var i=0;i<arguments.length;i++){
console.log(arguments[i]);
}
}
add('wualin','miao')
Date的使用
//使用构造函数创建一个时间对象
var myDate = new Date();
console.log(myDate);
// 获取本地时间 月份中第几天（1~31）
console.log(myDate.getDate());
// getMonth() 获取指定日期对象月份（0~11）
console.log(myDate.getMonth()+1);
// 返回四位数的年份
console.log(myDate.getFullYear());
// 0 代指的是星期天
// getDay() 返回一星期中星期几 0~6
console.log(myDate.getDay());
//getMinutes() getSecond()
console.log(myDate.getMinutes());
console.log(myDate.getSeconds());
// 返回本地时间
console.log(myDate.toLocaleString())
Json的用法
JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式，采用完全独立于语言的文本格式，是理想的数据交换格式。同时，JSON是 JavaScript 原生格式，这意味着在 JavaScript 中处理 JSON数据不须要任何特殊的 API 或工具包。
json的两种结构：对象&数组
- 对象
//对象
var packJSON = {"name":"wualin","age":29};
- 数组
//数组
var packJSON = ["wualin","miao","alex"];
- JSON对象和JSON字符串转换
- 字符串转json对象
//字符串转json
var jsonStr = '{"name":"wualin","age":29}';
var jsonobj = JSON.parse(jsonStr);
console.log(jsonobj.name);
- json对象转字符串
//json对象转字符串
var jsonObj = [{"name":"wualin","age":29},{"name":"alex","age":19}];
var jsonStr = JSON.stringify(jsonObj);
console.log(jsonStr);
console.log(typeof jsonStr);
- 遍历JSON对象和JSON数组
- 遍历JSON对象
//遍历json对象
var jsonobj = {"name":"wualin","age":19};
for (var key in jsonobj){
console.log(key + ' ' + jsonobj[key]);
}
- 遍历json数组
var list = [1,2,3,4,5,6,7,8];
for (var i in list){
console.log(i,list[i])
}