文章目录
JavaScript简介
前端三部分功能定位：
HTML:页面的结构
CSS:描述样式
JavaScript：描述行为，用户响应。
JavaScript的组成：
ECMAScript :定义了js的语法标准。变量，函数等基础语法。
DOM :操作网页上元素。比如检测到用户点击某个区域时，往html文档里添加div标签，显示某些元素。
BOM:操作浏览器部分功能，刷新页面，后退页面等操作。
ECMAScript
JavaScript的引入方式
三种，一种直接在html里body之后写，一种 src 外接式引入，一种直接在行内写。
<!--建议在body之后书写脚本js代码
等待所有dom元素标签加载完成后再去执行 -->
<!-- 1.内接式 直接在此写代码 -->
<script type="text/javascript">
// ;分号 作为js代码一句话的结束符
//两种注释方式
// 注释内容
/*注释内容*/
</script>
<!-- 2.外接式-->
<head>
<meta charset="UTF-8">
<title></title>
<!--外链式-->
<script type="text/javascript" src="./js/index.js"></script>
</head>
<!-- 3.行内式-->
<body>
<p class="" id="" onclick="c()">123</p>
</body>
<script type="text/javascript">
function c(){
alert(1)
}
</script>
javascript得输出方式：
1.document.write('有一首歌叫123')
document.write('<span class="span1">233</span>');
window.document.write()
2.console.log('我很好');
console.error('错误');
console.clear();
windows.console.log()
3.alert(1);
window.alert(1);
4.var a = prompt('输入姓名');
console.log(a);
变量
变量名有命名规范：
- 只能由英语字母、数字、下划线、美元符号$ 构成，
- 且不能以数字开头，并且不能是JavaScript保留字。
- 严格区分大小写
- 推荐驼峰命名：有多个有意义的单词组成名称的时候，第一个单词的首字母小写，其余的单词首字母大写
<script type="text/javascript">
// 在js中使用的var关键字来声明 js语言它是一个弱类型的语言。
//变量的声明两种方式
// 1.变量的声明和定义（赋值） 大部分前端工程师 都是使用的这种方式
var a = 100;
alert(a);
// 2.先声明变量 未来定义
var b;
b = '200';
console.log(a);
console.log(b);
//数值类型是蓝色，字符串是黑色，在控制台里查看
var c;
// 没有var会出错，Uncaught ReferenceError: c is not defined c 没有定义
//有var没赋值undifined
console.log(c);//控制台不报错但是显示：undefined 未定义
</script>
五种基本数据类型
1.number
2.string
3.boolean
4.null
5.undefined
// 1.number 浮点数，整数，正负 大小都是number
// typeof 变量名 查看数据类型的变量名
var a = 100;
console.log(typeof a); //控制台查看输出：number
var b = 5/0;
console.log(b); //Infinity 无限大
console.log(typeof b); //number类型
// 2.string
/*
var a = 'alex'; // 单引号 和双引号 都可以表示字符串
console.log(typeof a);//string类型
var b = '';
console.log(b); 输出空值不报错
console.log(typeof b); 输出string
特殊情况:
+ 可能是连字符 也可以是数字的加号
// 字符串 + 数值 相当于字符串的拼接 输出：我哎1
console.log('我'+'哎'+1);
// 数字和数字相加 是加号 表示运算
console.log(1+2+3);
区别：
console.log(‘1+2+3’)
// 小技巧 将数值类型转换成字符串类型
var c = 10+'';
console.log(typeof c) 输出：string;
*/
// 对字符串 + 是拼接 其他得运算可以 - * /
var a1='1';
var a2='2';
console.log(a1+a2); // 12 拼接 不是数值
console.log(typeof(a1+a2)); // string
console.log(parseInt(a1)+parseInt(a2)); // 3
console.log(a1*a2); // 2
console.log(typeof (a1*a2)); //number
var b1 = 'one';
var b2 = 'two';
console.log(b1*b2); // NaN == not a number
console.log(typeof (b1*b2)) // number
// 3.boolean
var Show=True;
console.log(Show); // 输出：boolean
var isShow = 1>1;
console.log(typeof isShow);
// 4.null 空对象
var d = null; //空对象 输出：object
console.log(typeof d);
// 5.undefined 未定义的
var d1;
console.log(d1); //结果是undefined，灰字体
console.log(typeof d1); //undefined 数据类型 黑色字体
运算符
赋值运算符
算数运算符
复合运算符
比较运算符
逻辑运算符 &&（and） || (or)
var a = 5;
// 先将a的值赋值给b输出，然后再对a++ a此时是6
var b = a++;
// console.log(a); //6
// console.log(b); //5
var b = ++a;
// 先a++ 将a输出 在将输出的值赋值给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 type="text/javascript">
/*
// 1.将number类型转换成string类型
//1>隐式转换(内部自动转换） 小技巧
var n1 = 123;
var n2 = '123';
console.log(n1+n2);
//2> 强制转换
// String() toString()
var str1 = String(n1);
console.log(typeof str1); string
var num = 2334;
var numStr = num.toString();
console.log(typeof numStr);
*/
//2.将字符串类型转换成number类型
var stringNum = '131313';
var num = Number(stringNum);
console.log(num); // 131313
console.log(typeof num); //number
var stringNum2 = '13.1313fjkafbh13233dkjf';
var num2 = Number(stringNum2);
console.log(num2);// NaN (Not a Number)
console.log(typeof num2);//number
// parseInt() parseFloat() 解析字符串，并且返回整数和浮点型
console.log(parseInt(stringNum2));//13
console.log(parseFloat(stringNum2));//13.1313
</script>
// 在js中所有得数据类型 都会被转换为boolean类型
// 0 NaN null undefined 为false 其他得为true
var b1 = '123';
var b2 = -123;
var b3 = Infinity; //无穷大
var b4 = 0;
var b5 = NaN;
var b6; //undefined
var b7 = null;
console.log(':',Boolean(b1)) //true
console.log(Boolean(b2)) // true
console.log(Boolean(b3)) // true
console.log(Boolean(b4)) // false
console.log(Boolean(b5)) // false
console.log(Boolean(b6)) // false
console.log(Boolean(b7)) // false
if语句
if （条件）{条件为真执行此区域代码}
else if（条件）{执行}
else{不为真则执行}
var age = 20;
if(age > 18){
console.log('可以考驾照');
}
console.log(22222); //代码照样执行
switch语句
一定注意要写break
var gameScore = 'good';
/*
if (gameScore == 'better') {
}else if(gameScore == 'good'){
}else if(gameScore == 'best'){
}else{
}
switch (gameScore) {
case 'good':
console.log('玩的很好');
// switch语句 case表示一个条件，满足这个条件就会输出，直到遇到break跳出，
// 如果break不写，那么程序一直运行，会遇到下一个break停止。这个就是‘case穿透’
break;
case 'better':
console.log('玩的老牛逼');
break;
case 'best':
console.log('恭喜你，吃鸡成功');
break;
default:
console.log('很遗憾，被淘汰了');
break;
}
while循环
// 1. 初始化循环变量
// 2. 判断循环条件
// 3. 更新循环变量
// 例子： 打印1~10之间的数
// 初始化循环变量
var i = 1;
// 判断循环条件
while (i <= 10) {
console.log(i);
// 更新循环变量
// i = i+1;
i+=1;
}
do while循环
// 用途 不大，就是不管条件如何 上来先做一次， 然后再去循环
var i = 3;
do{
console.log(i);
i+=1;
}while(i < 10);
for循环
for循环遍历列表 是最常用的对数据的操作
1.初始化 2.循环条件 3.更新循环变量
// 输出1~100之间的数
for(var i = 1; i <= 100; i ++){
console.log(i);
}
// 1.输出1~100之间所有数之和
var sum = 0;
for(var i = 1; i <= 100; i ++){
sum = sum + i;
}
console.log(sum);
//2. 将1~100所有是2的倍数在控制台打印
for(var i = 1;i <= 100; i++){
if (i % 2 == 0) {
console.log(i);
}
}
双重for循环
for(var i = 0; i < 3;i++){ //控制着你的行数
for(var j = 1;j <=6;j++){ //控制的星星数
document.write("*");
}
document.write('<br>');
}
for(var i=1; i<=6;i++){
for(var j=0;j<i;j++){
document.write('*');
}
document.write('<br>');
}
for(var i=1;i<=6;i++){
for(var s=i;s<=6;s++){
document.write(' ');
}
for(var j=0;j<i;j++){
document.write('*');
}
document.write('<br>')
}
复杂数据类型
Function 函数
Object
Arrary
Date 时间模块
Array
两种创建方式
// Array
/*
// 1.字面量方式 推荐大家使用这种方式 简单粗暴
var colors = ['red','green','blue'];
console.log(colors); //第一次打开输出Arry(3),再次刷新输出['red','green','blue'],
//console.log(colors);相当于在console里直接输入window.colors回车。
// 所有的变量 都挂载到了全局对象window，相当于console.log(window.colors);
//console页面浏览器里相当于解释器。
*/
// 2.使用构造函数（js中创建对象）的方式来创建
var colors = new Array();//创建了空数组
console.log(colors);
colors[0] = 'red';
colors[1] = 'green';
colors[2] = 'blue';
console.log(colors);
// for循环 遍历列表
for(var i = 0; i < colors.length; i++){
console.log(i,colors[i]);
}
常用（7个方法3个补充）
// 1.数组的合并 concat
var north = ['北京', '山东', '天津'];
var south = ['东莞', '深圳', '上海'];
var newCity = north.concat(south);
console.log(newCity);//["北京", "山东", "天津", "东莞", "深圳", "上海"]
// 2.join 将数组中的元素使用指定得字符串连接起来，它会返回一个新的字符串
var score = [92, 342, 42, 52];
var str = score.join('|');
console.log(str);//92|342|42|52
// 3.slice (start,end) 返回数组的一段记录，相当于切片，顾腚不顾尾
var arr = ['张三', '李四', '王文', '赵六'];
var newArr = arr.slice(1, 3);
console.log(newArr); //["李四", "王文"]
// 4.push 向数组最后添加一个元素
arr.push('小马哥');
console.log(arr); //["张三", "李四"，"王文"，"赵六"，"小马哥"]
// 5.移除数组元素
arr.pop();
// 6.reverse 翻转数组
var names = ['alex', 'xiaoma', 'tanhuang', 'angle'];
//.反转数组
names.reverse();
console.log(names);// ["angle", "tanhuang", "xiaoma", "alex"]
// 7 sort 对数组排序 按照26个字母排序
var names2 = ['alex', 'xiaoma', 'tanhuang', 'abngel'];
names2.sort();
console.log(names2); // ["abngel", "alex", "tanhuang", "xiaoma"]
// isArray() 判断是否为数组 返回为ture|false
var a = 2;
var iArray = Array.isArray(a);
if (iArray) {
console.log('是数组');
}else{
console.log('不是数组')
}
// 补充：
// forEach（fn）==回调函数 匿名函数 通过forEach遍历数组的每一项内容 回调函数中的参数 第一个参数为item (每一项内容) 第二个参数 是数组的索引
names2.forEach(
function(item,index){
console.log(item);
console.log(index);
}
);
var sc = [98,97,66,100];
//toString() 直接转换为字符串 每个元素使用逗号隔开
var st = sc.toString();
console.log(st);//98,97,66,100
// 对“hello world”进行翻转处理 要求变为："dlorw olleh"
// 先把字符串转化成数组，再借助数组的reverse方法翻转数组顺序，最后把数组转化成字符串。
var words='hello world';
var newwords = words.split("").reverse().join("");
console.log(newwords);//dlrow olleh
清空数组的方式：
var array = [1,2,3,4,5,6];
array.splice(0); //方式1：删除数组中所有项目
array.length = 0; //方式2：length属性可以赋值，在其它语言中length是只读
array = []; //方式3：推荐
补充 字符串方法
// 字符串创建
// var str = '';
/*
var str = newString();
str[0] = 'a';
console.log(str);
*/
// 1.charAt() 返回指定索引位置的字符
var str = 'alex';
var charset = str.charAt(1);
console.log(charset); //l
// 2.concat() 返回字符串值，表示两个或者多个字符串拼接
var str1 = 'al';
var str2 = 'ex';
console.log(str1.concat(str2, '|', str1, str2)); //alex|alex
// 3.replace(a,b) 将字符串b替换成了字符串a
var a = '1234567755';
var newStr = a.replace("4567", "****");
console.log(newStr); //123****755
// 4.indexof() 查找字符的下标，如果找到返回字符串的下标，找不到则返回-1
var str = 'alex';
console.log(str.indexOf('e')); //2
console.log(str.indexOf('p')); //-1
// 5.slice(start，end) 左闭右开 分割字符串 切分
var str2 = '小马哥';
console.log(str2.slice(1, 2)); //马
var str4 = '我的天呢,a是嘛,你在说什么呢?a哈哈哈';
console.log(str4.substr(0, 4)); //我的天呢
// 6.split('a',1) 以字符串a分割字符串，并返回新的数组。如果第二个参数没写，表示返回整个数组
var str3 = '我的天呢,a是嘛,你在说什么呢?a哈哈哈';
console.log(str3.split('a', 3)); //["我的天呢,", "是嘛,你在说什么呢?", "哈哈哈"]
//特殊：
var num = 132.32572;
//四舍五入
var newNum = num.toFixed(3);
console.log(newNum);//132.326
// trim() 清除 字符串的前后空格
var str10 = ' alex ';
console.log(str10.trim());
Math用法
// 1.向上取整 Math.ceil()
var x = 1.2334;
var a = Math.ceil(x);
console.log(a);//2
// 2.向下取整 Math.floor()
console.log(Math.floor(x));//1
// 3.求两个数的最大值和最小值
console.log(Math.max(2,5));
console.log(Math.min(2,5));
// 4.求随机数 Math.random() 在[0,1) 之间
console.log(Math.random());
// 200~ 500 求min~max之间的随机数 min + Math.random()*(max-min);
console.log(200+Math.random()*(500-200));
函数
两种写法
// 1.普通函数（常用）
function add(x,y){
return x + y;
}
alert(add(1,2));//可以在任意地方调用
// 2.函数对象 将匿名函数赋值给add
var add = function(x,y){
return x + y;
};
console.log(typeof add);//function
console.log(add(1,2));
伪数组argument
// arguments 伪数组，获取实参，只在函数中使用，
// 它有数组的索引 ,length 属性 但是它没有数组的方法
add('xiaoming','xiaohong');
//没有形参
function add() {
console.log(arguments);// ["xiaoming", "xiaohong", callee: ƒ, Symbol(Symbol.iterator): ƒ]
//遍历实参
for(var i =0; i < arguments.length; i ++){
console.log(arguments[i]);
}
}
Object对象
四种创建方式的演化
// 1.使用Object或对象字面量创建对象，
//最基本创建对象的方式，
//常用，缺点是需要一个一个创建
var person = new Object();
// 给对象赋值
person.name = 'xiaoming';
person.age = 20;
person.func=function(){
alert(this.name);
};
var person2 = {
name:'xiaoming',
age:26,
fav:function(){
// this 指的是当前的对象 跟python中的self类似
console.log(this.name);
}
};
console.log(person2);//{name: "xiaoming", age: 26, fav: ƒ}
person2.fav();//xiaoming
// 2.工厂模式创建对象,
//将字面量对象创建过程封装起来以便于重复调用。
//只不过创建的都是Object类型，无法区分人还是水果
function createPerson(name, age) {
var o = new Object();
o.name = name;
o.age = age;
return o;
}
var person1 = createPerson('xiaoming', 20);
// instanceof 检测类型
console.log(person1 instanceof Object);//True
function createFruit(name,color) {
var o = new Object();
o.color = color;
o.name=name;
return o;
}
var f = createFruit('苹果','red');
console.log(f instanceof Object);//True
//3、构造函数模式创建对象，可以区分类型
//对于任意函数，使用new操作符调用，那么它就是构造函数；
//不使用new操作符调用，那么它就是普通函数。
//约定构造函数名以大写字母开头，普通函数以小写字母开头
function Student(name, age) {
this.name = name;
this.age = age;
this.alertName = function(){
alert(this.name)
};
}
function Fruit(name, color) {
this.name = name;
this.color = color;
this.alertName = function(){
alert(this.name)
};
}
//再分别创建Student和Fruit的对象：
var v1 = new Student("easy", 20);
var v2 = new Fruit("apple", "green");
//用instanceof操作符来检测以上对象类型
alert(v1 instanceof Student); //true
alert(v2 instanceof Student); //false
alert(v1 instanceof Fruit); //false
alert(v2 instanceof Fruit); //true
alert(v1 instanceof Object); //true 任何对象均继承自Object
alert(v2 instanceof Object); //true
4.原型的模式创建对象
//把构造函数的对象的方法提取出来添加到父类，常用。
function Student() {
this.name = 'easy';
this.age = 20;
}
Student.prototype.alertName = function(){
alert(this.name);//this 指的是Student
};
var stu1 = new Student();
var stu2 = new Student();
stu1.alertName(); //easy
stu2.alertName(); //easy
alert(stu1.alertName == stu2.alertName); //true 二者共享同一函数
Date
var myDate = new Date();
console.log(myDate);
//Wed Feb 13 2019 15:57:11 GMT+0800 (中国标准时间)
// 获取本地时间 月份中第几天（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())
//2019/2/13 下午3:57:11
补充 JSON
// 在数据传输过程中，JSON通常是以字符串的形式传递，
//但是js更喜欢操作JSON对象，所以Jjson对象和json字符串转换非常重要
JSON字符串:
var jsonStr ='{"name":"alex", "password":"123"}' ;
JSON对象：
var jsonObj = {"name":"alex", "password":"123"};
JSON字符串转换JSON对象
var jsonObject= jQuery.parseJSON(jsonstr);
JSON对象转化JSON字符串
var jsonstr =JSON.stringify(jsonObject );
// 3.遍历JSON对象和JSON数组
// （1）遍历JSON对象
var packJSON = {"name":"alex","pwd":123};
// for in
for(var k in packJSON){
// k指的是键值的索引
console.log(k+' '+packJSON[k])
}
// (2) 遍历JSON数组
var packJSON = [{"name":"alex","pwd":123},{"name":"wusir","pwd":123}];
for(var i in packJSON){
console.log(i+' ' + packJSON[i].name + ' ' + packJSON[i].pwd );
}