前端- JavaScript - 总结
1、JavaScript的介绍
javaScript是一种web前端的描述语言，也是一种基于对象（object）和事件驱动（Event Driven）的、安全性好的脚本语言。 它运行在客户端从而减轻服务器的负担。
1.javaScript的特点： javaScript主要用来向html页面中添加交互行为 javaScript是一种脚本语言，语法和c语言系列语言的语法类似，属弱语言类型。 javaScript一般用来编写客户端脚本，如node.js例外。 javaScript是一种解释型语言，边执行边解释无需另外编译。 2.javaScript的用途: 解决页面交互和数据交互，最终目的是丰富客户端效果以及数据的有效传递。 1.实现页面交互，提升用户体验实现页面特效。即js操作html的dom节构或操作样式。 2.客户端表单验证即在数据送达服务端之前进行用户提交信息即时有效地验证，减轻服务器压力。即数据交互。 3.javaScript和ECMAScript的关系： ECMAScript是欧洲计算机制造商协会，基于美国网景通讯公司的Netscape发明的javaScript和 Microsoft公司随后模仿javaScript推出JScript脚本语言制定了ECMAScript标准。 4.javaScript的组成： ECMAScript、DOM、BOM
2、三种引入方式
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <!-- 外链式 --> <script src="./1.js"></script> </head> <body> <!-- 行内式引入--> <p id='p1' onclick="clickhandler()">123</p> </body> <!-- 内部式 --> 建议 引入的时候要在body之后，我们要等待所有的dom元素加载完成之后再去执行相应的js操作 <script type="text/javascript"> document.write('<span class="span1">233</span>') console.log('星儿今天很漂亮！') </script> </html>
3、js的输出方式
3、变量
1.变量与常量
变量：即在程序运行过程中它的值是允许改变的量。
常量：即在程序运行过程中它的值是不允许改变的量
2.变量的声明和定义
#1.先声明后定义 var dog; // alert(dog) //undefined 未定义 // 定义 dog = '小黄'; #2.声明立刻定义 var dog_2 = '小红'; console.log(dog_2); //小红
3.变量名规范
1.严格区分大小写 2.命名时名称可以出现字母、数字、下划线、$ ,但是不能数字开头，也不能纯数字 ，不能包含关键字和保留字。 关键字：var number 除了关键字 top name 也尽量不使用。 3.推荐驼峰命名法：有多个有意义的单词组成名称的时候，第一个单词的首字母小写，其余的单词首字母写 4.匈牙利命名：就是根据数据类型单词的的首字符作为前缀
4、javascript中的数据类型
数据类型包括：基本数据类型和引用数据类型
# 5种基本数据类型
基本数据类型指的是简单的数据段
1.number var a = 123; 2.string var str = '123' 3.boolean var b1 = false; 4.null var c1 = null;//空对象. object 5.undefined var d1; //表示变量未定义
#5种引用数据类型 引用数据类型指的是有多个值构成的对象 Function Object Arrray String Date
查看数据类型： console.log(typeof b1);
5、数据类型的转换
<script type="text/javascript">
// 1.将数字类型 转换成字符串类型
var n1 = 123;
var n2 = '123';
var n3 = n1+n2;
// 隐式转换
console.log(typeof n3);
// 强制类型转换 String() toString()
var str1 = String(n1);
console.log(typeof str1);
var num = 234;
console.log(num.toString())
// 2.将字符串类型 转换成数字类型
var stringNum = '789.123wadjhkd';
var num2 = Number(stringNum);
console.log(num2)
// parseInt()可以解析一个字符串 并且返回一个整数
console.log(parseInt(stringNum))
console.log(parseFloat(stringNum));
// 3.在我们js中所有的数据类型 都被转化为boolean类型
var b1 = '123';
var b2 = 0;
var b3 = -123
var b4 = Infinity; //
var b5 = NaN;
var b6; //undefined
var b7 = null;
// 非0真1
console.log(Boolean(b7))
</script>
6、js的运算符
1，算术运算符(+ - * / % ++ -- ) 2，比较运算符(> >= < <= != == === !==) 3，逻辑运算符(&& || ！) 4，赋值运算符(= += -= *= /=) 5，字符串运算符(+ 连接，两边操作数有一个或两个是字符串就做连接运算)
<script type="text/javascript">
// 1.赋值运算符
var money = prompt('请输入金额....');
var saveMoney = money * (1+0.02);
console.log(saveMoney)
// 2.算数运算 + - * / %
var a = 10;
var b = 9;
var sum = a + b;
var min = a - b;
var div = a /b;
var lef = a % b;
// 3.复合运算符 a++ ++a
var c = 7,d = 8;
// d = c + d;
d+=c;
console.log(d);
d++; //d = d+1
console.log(d);
// 自增 自减
// d++ :先赋值后++ 先将d的值赋值给c1 然后再让d加上1 对d赋值
var c1 = d++;
console.log(c1); //8
console.log(d); //9
// ++d:先相加后赋值
var c2 = ++d;
console.log(c2); //10
// 3.比较运算符
// > ,<, >=, <=,== ,===
console.log(5>6);
// 隐式转换== 比较的是值的大小。=== 是类型和值都进行比较
console.log("5" === 5);
// 4.逻辑运算符 && and || or
console.log(false && false); // && 都真为真 只要有一个是假就为假
console.log(false || false); // || 有真就真。或者的意思
</script>
特殊：字符串拼接
// 不能对字符串进行+运算 只能拼接 var a1 = '1'; var a2 = '2'; console.log(a1+a2); //12 console.log(typeof(a1*a2));
6、流程控制
1.if语句： if (true) { //执行操作 }else if(true){ //满足条件执行 }else if(true){ //满足条件执行 }else{ //满足条件执行 } 注意：浏览器解析代码的顺序 是从上往下执行，从左往右 2.switch: var gameScore = 'good'; switch(gameScore){ case 'best': console.log('best'); break; case 'good': console.log('good'); break; case 'better': console.log('better'); break; default: console.log('default') } 3.while: 循环三步走： 1.初始化循环变量 2.判断循环条件 3.更新循环变量 var j=1; while(j<=100){ if(j%3===0){ console.log(j) } j++; } 4.do_while: 1.初始化循环变量 2.判断循环条件 3.更新循环变量 //不管有没有满足while中的条件do里面的代码都会走一次 var i = 3; do{ console.log(i); i++; }while(i<=5); 5.for: 1.初始化 2.循环条件 3.更新循环变量 for(var i = 0; i < 100; i++){ if(i%2 === 0){ console.log(i) } } for(var i=1;i<=3;i++){ for(var j=1;j<=6;j++){ document.write('*') } document.write('<br>') }
# 打印三角形 1 * * * * * * * * * * * * * * * * * * * * * for(var i=1;i<=6;i++){ for(var j=1;j<=i;j++){ document.write('*') } document.write('<br>') } # 打印三角形 2 * 2*1-1 *** 2*2-1 ***** 2*3-1 ******* 2*4-1 ********* 2*5-1 *********** 2*6-1 for(var m=1;m<=6;m++){ for(var n1=m;n1<6;n1++){ document.write(' ') } for(var n2=1;n2<=2*m-1;n2++){ document.write('*') } document.write('<br>') } # 打印三角形 3 * 2*1-1 *** 2*2-1 ***** 2*3-1 ******* 2*4-1 ********* 2*5-1 *********** 2*6-1 ********* ******* ***** *** * for(var a=1;a<=11;a++){ if(a<=6) { for (var a1 = a; a1 < 6; a1++) { document.write(' ') } }else{ for(var a2=7;a2<=a; a2++){ document.write(' ') } } if(a<=6){ for(var a3=1;a3<=2*a-1;a3++){ document.write('*') } }else{ for(var a4=a*2-1;a4<22;a4++){ document.write('*') } } document.write('<br>') }
7.内置对象
数组Array，字符串String，日期Date，Math内置对象
内置对象就是ECMAScript提供出来的一些对象，我们知道对象都是有相应的属性和方法
http://www.cnblogs.com/venicid/p/9128094.html
8.函数和Object
在javascript中,函数是一等公民,函数在javascript是一个数据类型,而非像C#或其他描述性语言那样仅仅作为一个模块来使用.
<script type="text/javascript"> //函数： // 1.函数的声明 //js中的函数的声明 记得：有函数的声明 就一定有调用 function add(){ alert("函数被调用了")； alert(this); } add(); 或者： var add = function(){ alert('函数被调用了')； } add(); // 2.带参数 形参 实参 function add2(x,y) { alert(x+y) } add2(3,4); // 3.函数有返回值 function add3(x,y) { return x+y; } alert(add3(5,6)); </script>
<script type="text/javascript"> //对象： // 对象的创建： // 1.字面量方式创建 推荐使用这种方式 简单 直观 var stu = { name:'alex', age:22, fav:'鸡汤' }; 点语法 包括get方法 set方法 console.log(stu.name); stu.age = 34; // set console.log(stu.age); // 2.Object() 构造函数 1.首字母大写 碰见构造函数 要想创建对象new var obj = new Object(); obj.name = 'xiaoma'; console.log(obj); // 3.构造函数 使用构造函数得方式创建对象 推荐使用的构造函数的方式： 1.函数名首字母要大写 2.构造函数不需要return 3.为对象添加成员变量 this.name = 'alex' var Stu = function () { this.name = 'alex'; this.age = 18; this.fav = function () { console.log('吃饭饭') } }; </script>
对象补充：json转换
<script type="text/javascript">
var json1 = {
name : '张三',
age : '李四',
fav : '唱歌'
};
var str1 = '{"name": "Alex", "age": 18}';
//将JSON转化为JSON字符串
var jsonStr1 = JSON.stringify(json1)
console.log(jsonStr1)
//将json字符串转化为JSON
var json2 = JSON.parse(str1);
console.log(json2)
</script>
对象 详解：
创建对象的几种常用方式：
1.使用Object或对象字面量创建对象
2.工厂模式创建对象
3.构造函数模式创建对象
4.原型模式创建对象
http://www.cnblogs.com/venicid/p/9128149.html#_label1
9、定时器
setInterval() 在指定时间为周期循环执行 setTimeout() 只在指定时间后执行一次
1.setTimeout（） //定时器 异步运行 function hello(){ alert("hello"); } //使用方法名字执行方法 var t1 = window.setTimeout(hello,1000); var t2 = window.setTimeout("hello()",3000);//使用字符串执行方法 window.clearTimeout(t1);//去掉定时器 2.setInterval（） //实时刷新时间单位为毫秒 setInterval('refreshQuery()',8000); /* 刷新查询 */ function refreshQuery(){ console.log('每8秒调一次') }
10、正则表达式
https://www.processon.com/view/link/5add4ef9e4b04691064d5e37
（1）创建方式
//RegExp对象 //1.构造函数创建 //参数1 正则表达式（不能有空格） //参数2 匹配模式：常用g（全局匹配；找到所有匹配，而不是第一个匹配后停止）和i（忽略大小写吧） var str = 'hello World'; var reg1 = new RegExp('e','ig'); console.log(reg1) //2.字面量方式创建 var reg2 = /o/gi;//检测字符e，不区分大小写，全局匹配
（2）方法：
var str = 'hello world'; var reg2 = /d/gi; //1.test() 检测字符串中是否包含定义字符模式，返回布尔值 console.log(reg2.test(str)); //true false //2.exec() 检索字符串中指定的值。匹配成功返回一个数组，匹配失败返回null console.log(reg2.exec(str)); //["d", index: 10, input: "hello world", groups: undefined] //3.match() 在字符串内检索指定的值,匹配成功返回存放匹配结果的数组，否则返回null var reg2 = /o/gi; console.log(str.match(reg2)); //(2) ["o", "o"] //4.search() 在字符串内检索指定的值,匹配成功返回第一个匹配成功的字符串片段开始的位置，否则返回-1。 console.log(str.search(reg2)); //10 //5.replace() 替换与正则表达式匹配的子串，并返回替换后的字符串。在不设置全局匹配g的时候，只替换第一个匹配成功的字符串片段。 console.log(str.replace(reg2,"*")) //hello worl* //6.split() 把一个字符串分割成字符串数组 var reg2 = /o/gi; console.log(str.split(reg2)); // (3)["hell", " w", "rld"]
（3）元字符:单个字符和数字
//元字符 //1 . 匹配除换行符以为的任意字符 var str = "oweb"; var reg = /./g; console.log(reg.exec(str)); var str = "www/baidu/com"; var reg = /www\......\.com/g; //如果想不让字符有其他意义 转义\ console.log(reg.exec(str)); //2. [] 匹配[]里面的任意一个字符 var str1 = "4awebadsads"; var reg1 = /[a-zA-Z0-9]/g; // 匹配字母还是数字 console.log(reg1.exec(str1)); var str2 = "1s34"; var reg2 = /[0-9][0-9][0-9]/g; console.log(reg2.exec(str2)); //3. [^] 所有不在这个范围内的字符 var str3 = "abd"; var reg3 = /[^a-z]/g; //匹配除小写字母以外的任意字符 console.log(reg3.exec(str3)); //4. \ var str4 = "web"; var reg4 = /\d/g; //匹配数字 var reg5 = /\D/g; //非数字 console.log(reg4.exec(str4)); //null console.log(reg5.exec(str4)); //w var reg6 = /\w/g; //匹配数字 字母 下划线_ var reg7 = /\W/g; //匹配除数字 字母 下划线以外的任意字符 console.log(reg6.exec(str4)); //w console.log(reg7.exec(str4)); //null var reg8 = /\s/g; //空格 var reg9 = /\S/g; //非空白字符 console.log(reg8.exec(str4)); //null console.log(reg9.exec(str4)); //w //5 锚字符 ^以什么开头 $以什么结尾 var str = "www."; var reg10 = /^www/g; // ^字符 console.log(reg10.exec(str)); var reg11 = /www\.$/g; //字符$ console.log(reg11.exec(str));
（4）重复字符
//重复的字符 //1. ? 匹配前面的字符0个或一个 ， var strs = "webr44546ere"; var reg12 = /[0-9]?/g; console.log(reg12.exec(strs)); //2. * 匹配0个或任意多个字符 尽可能多的匹配 var reg13 = /[a-z]*/g; //匹配小写字母，0个或多个 console.log(reg13.exec(strs)); //3. + 至少匹配一次 var reg14 = /\d+/g; console.log(reg14.exec(strs)); //4. {4} var stra = "11274567800"; var rega = /^1\d{10}$/g; //匹配连续的四个数字 console.log(rega.exec(stra)); //{1,4} 最少一个最多4个 var strb = "edg"; var regb = /^[a-zA-z]{2,3}$/g; console.log(regb.exec(strb)); //5. || 竖线 或者 var strc = "www.google"; //baidu google ujiuye var regc = /www.baidu|google|ujiuye/g; console.log(regc.exec(strc)); //6. () 分组 var strc = "www.google"; //baidu google ujiuye var regc = /www.(baidu)|(google)|(ujiuye)/g; console.log(regc.exec(strc)); console.log(RegExp.$1); console.log(RegExp.$2); console.log(RegExp.$3); var str = "helloworld"; var reg = /(hello)(world)/g; /* console.log(reg.exec(str)); console.log(RegExp.$1);*/ console.log(str.replace(reg,"$2 $1"));
（5）正则表达式练习
<script type="text/javascript">
//正则表达式练习 http://www.w3school.com.cn/jsref/jsref_obj_regexp.asp
window.onload = function () {
//1.检索字符串中是否不包含字母
var str = '12';
var reg1 = /[^a-zA-Z]/g;
console.log(reg1.test(str));
if(reg1.test(str)){
console.log('不包含');
}else{
console.log('包含');
}
//2.去除字符串首尾空格
var str2 = ' hello world! ';
//开头的空格
var reg =/^\s+/ig; // + 1到多次！
var str3 = str2.replace(reg,"");
var reg2 = /\s+$/ig;
var str4 = str3.replace(reg2,"");
console.log("|"+str4+"|");
//3.检查用户账号
function checkUser(str) {
var re = /^[a-zA-Z]\w{3,15}$/ig;
if(re.test(str)){
console.log('正确')
}else{
console.log('错误')
}
}
checkUser('alex_haha');
//4.手机号码 11位数字以1开头
function checkMobile(str) {
var re = /^1\d{10}$/ig;
if(re.test(str)){
console.log('正确')
}else{
console.log('错误')
}
}
checkMobile('13788881239');
checkMobile('137893813323');
//5.电话号码 区号+号码 区号以0开头 3位或4位
// 号码由7位或8位数字组成
// 区号与号码之间可以无连接符，也可以"-"连接
function checkPhone(str) {
var re = /^0\d{2,3}-?\d{7,8}$/ig;
if(re.test(str)){
console.log('正确')
}else{
console.log('错误')
}
}
checkPhone("095-12345678");
//6.邮箱
//规则：第一部分@第二部分
//第一部分：由字母 数字 下划线 短线 - 点号 . 组成
//第二部分：为一个域名 域名由 字母 数字 短线 短线 - 域名后缀组成
// 域名后缀一般为 .xxx 或者 .xxx.xx 一区的域名后缀一般为 2-4 位，如cn,
function checkEmail(str) {
var re = /^(\w-*\.*)+@(\w-?)+(\.\w{2,})+$/ig;
if(re.test(str)){
console.log('正确')
}else{
console.log('错误')
}
}
checkEmail('alex@cnbolgs.cn');
}
</script>
11、DOM
19-[JavaScript]-DOM
12、BOM
20-[JavaScript]-BOM
浙公网安备 33010602011771号