############### JS简介和JS引入 ################
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <!-- js简介 英文:javascript 这是一门编程语言, 要学习什么? 1,js的核心语法: 1,基础语法 2,数据类型 3,函数 4,面向对象(ES6) 2,BOM:这是操作浏览器的,比如浏览器弹窗 3,DOM:这是操作浏览器上面html内容的, 就是这三部分 js是一个解释性语言,是需要一个解释器的,但是解释器比较特殊,只要有浏览器就可以解释js, --> <!-- 如何引入js文件 --> <!--第一种方式,通过script标签--> <!--<script>--> <!--alert(121212)--> <!--</script>--> <!--第二种方式,写一个js文件,--> <script src="1.js"></script> <div id="d1">sss</div> </body> </html>
############### JS的基本语法和数据类型(数字和字符串) ################
/* js基础语法: 1,注释: 单行注释:// 多行注释: #################### 2,语句必须以分号结尾 3,变量生命的关键字:var 变量名 = "值" js是属于动态类型,就是同一个变量可以存储不同类型的值,类似python, 4,变量 变量命名的规则,js中$也可以作为变量名, 1,变量区分大小写 2,推荐使用驼峰命名法 3,保留字不能用作变量名 */ //变量声明 var name = "小明"; var age = 10; var $ = "女"; console.log("name",name); console.log("age",age); console.log("$",$); /* 5,数据类型: 整数,浮点数,科学计数法 还有一种NaN,表示不是一个数字,not a number * */ //数字类型 var n1 = 18; var n2 = 18.1; var n3 = 1.8e5; //字符串类型 var s1 = "123"; var s2 = "234"; var s3 = s1+s2; // 字符串拼接 console.log(s3) /* 字符串常用方法: .length 返回长度 .trim() 移除空白 .trimLeft() 移除左边的空白 .trimRight() 移除右边的空白 .charAt(n) 返回第n个字符 .concat(value, ...) 拼接,eg: concat(1) 在后面拼接1,concat(1,2,3) 在后面拼接1,2,3 .indexOf(substring, start) 子序列位置,返回的是子字符串的起始位置, .toLowerCase() 小写 .toUpperCase() 大写 .split(delimiter, limit) 分割,第一个参数是根据什么分割,第二个参数是限制分割多少个,第二个参数可以不写 ######################### .substring(from, to) 根据索引获取子序列 .slice(start, end) 切片 //substring和slice有什么相同之处: 两者的相同点: 如果start等于end,返回空字符串 如果stop参数省略,则取到字符串末 如果某个参数超过string的长度,这个参数会被替换为string的长度 substirng()的特点: 如果 start > stop ,start和stop将被交换 如果参数是负数或者不是数字,将会被0替换 silce()的特点: 如果 start > stop 不会交换两者 如果start小于0,则切割从字符串末尾往前数的第abs(start)个的字符开始(包括该位置的字符) 如果stop小于0,则切割在从字符串末尾往前数的第abs(stop)个字符结束(不包含该位置字符) * */
############### JS数据类型(布尔和数组类型) ################
/* 布尔类型 区别于Python,true和false都是小写。 ""(空字符串)、0、null、undefined、NaN都是false。 * */ //布尔类型 var a = true; var b = false; //数组类型 // 类似python中的列表 var a1 = [1,2,3] a1[0] //返回1, a1[3] //返回undefined // a1[1:2] //不支持这种冒号的 /* .length 数组的大小 .push(ele) 尾部追加元素 .pop() 获取尾部的元素,和python一样,会从列表取出,并且返回 .unshift(ele) 头部插入元素 .shift() 头部移除元素 .slice(start, end) 切片 .reverse() 反转 .sort() 排序 这个排序比较鸡肋,要转换成字符串,然后排序, ############################# .join(seq) 将数组元素连接成字符串, python中 l1=["1","2","3"] ("+").join(l1) 这是把列表中的元素,使用加号连接,返回是一个字符串 js中 l1=[1,2,3] l1.join("+") //返回1+2+3 ######################### .concat(val, ...) 连接数组, l1=[1,2,3] l1.concat(1,2,3) //结果:[1,2,3,1,2,3] l1.concat([1,2,3]) //结果:[1,2,3,1,2,3] ########################### null表示值是空,一般在需要指定或清空一个变量时才会使用,如 name=null; undefined表示当声明一个变量但未初始化时,该变量的默认值是undefined。还有就是函数无明确的返回值时,返回的也是undefined。 null表示变量的值是空,undefined则表示只声明了变量,但还没有赋值。 ############################ var a1 =[12,2] typeof a1 //这是查看数据的类型,记住数组和null,返回的是object类型 typeof是一个一元运算符(就像++,--,!,- 等一元运算符),不是一个函数,也不是一个语句。 typeof "abc" // "string" typeof null // "object" typeof true // "boolean" typeof 123 // "number" * */
############### JS运算符 ################
/* 算数运算符: + - * / % ++ -- var n =10; n++ //11,就是n=n+1 ################################ 比较运算符 > >= < <= != == === !== 注意: 1 == “1” // true 这是弱等于,只判断值 1 === "1" // false 这是强等于,既判断值也判断类型 ################################ 逻辑运算符 && 与 || 或 ! 非 ################################ 赋值运算符 = += //n+=1 就是 n= n+1 -= *= /= * */
############### JS流程控制语句 ################
// for循环 // a1 = [1,2,3] // for (var i =0;i<a1.length;i++){ // console.log(a1[i]) // } //while 循环 // var i = 0; // while (i < 10) { // console.log(i); // i++; // } // 三元运算 var a = 1; var b = 2; var c = a > b ? a : b; //? 号前面是条件,成立就是第一个a,不成立就是第二个b
############### JS函数 ################
//js中函数和python中的函数非常的相似,只是定义的方式有些不同 //函数的定义 function foo(a,b) { console.log(a); console.log(b); return a+b; //带返回值的函数 } //匿名函数 //需要使用一个变量去接收他, var func = function (a,b) { console.log(a); console.log(b); return a+b; //带返回值的函数 }; //立即执行函数 //先写两个括号,第一个括号内部定义,第二个括号内部传递具体的参数 (function (a,b) { console.log("立即执行函数"); console.log(a+b) })(11,222); //arguments function foo(a,b) { console.log(a); console.log(b); console.log(arguments.length); //这个 arguments 根据传入的参数,是一个列表[a,b] //可以遍历这个arguments对象 return a+b; //带返回值的函数 } //函数的调用 var ret1 = foo(11,22); // 调用的时候,如果传递的超出定义的,超出的不起作用,并不会导致程序报错, //如果传递的参数少于定义的,未定义的就会显示undefined,也不会程序报错, //这是js比较随便的地方, console.log(ret1); var ret2 = func(11,12); console.log(ret2); /* 局部变量: 在JavaScript函数内部声明的变量(使用 var)是局部变量,所以只能在函数内部访问它(该变量的作用域是函数内部)。只要函数运行完毕,本地变量就会被删除。 全局变量: 在函数外声明的变量是全局变量,网页上的所有脚本和函数都能访问它。 变量生存周期: JavaScript变量的生命期从它们被声明的时间开始。 局部变量会在函数运行以后被删除。 全局变量会在页面关闭后被删除 * */
############### JS词法分析 ################
//js的词法分析 var age =18; function foo() { console.log(age); var age =22; console.log(age); } foo(); //结果是 undefined ,22 , //为什么? //因为函数执行的时候,会对函数内部进行词法分析 /* JavaScript中在调用函数的那一瞬间,会先进行词法分析。 词法分析的过程: 当函数调用的前一瞬间,会先形成一个激活对象:Avtive Object(AO),并会分析以下3个方面: 1:函数参数,如果有,则将此参数赋值给AO,且值为undefined。如果没有,则不做任何操作。 2:函数局部变量,如果AO上有同名的值,则不做任何操作。如果没有,则将此变量赋值给AO,并且值为undefined。 3:函数声明,如果AO上有,则会将AO上的对象覆盖。如果没有,则不做任何操作。 函数内部无论是使用参数还是使用局部变量都到AO上找。 * */
############### JS内置对象-自定义对象 ################
/* js中内置的对象和方法: * */ //js中自定义对象 var person = {name:"andy",age:18};//在js对象中,属性名默认不需要加引号,你加了js也会给你去掉的,值可以是单引号和双引号,单引号会转换成双引号 console.log(person); // 单个取属性 console.log(person.name); console.log(person.age); //遍历取属性 for (var i in person){ console.log(i); console.log(person[i]) } //自定义对象的第二种方式: var person2 = new Object(); person2.name="xiaoxiao"; person2.age=22; console.log(person2);
############### JS内置对象-Date对象 ################
//内置的Date对象,就相当于python中的模块 var d1 = new Date(); console.log(d1); //这是默认生成当前时间,这是一个时间对象, console.log(d1.toLocaleString()); //这是一个字符串 var d2 = new Date("2004/3/20 11:12"); console.log(d2.toLocaleString()); /* var d = new Date(); //getDate() 获取日 //getDay () 获取星期 //getMonth () 获取月(0-11) //getFullYear () 获取完整年份 //getHours () 获取小时 //getMinutes () 获取分钟 //getSeconds () 获取秒 //getMilliseconds () 获取毫秒 //getTime () 返回累计毫秒数(从1970/1/1午夜) * */
############### JS内置对象-json对象 ################
//json对象 var s = '{"name":"andy","age":12}'; //这是一个字符串,怎么使用js转换成为json格式的, var ret = JSON.parse(s); console.log(ret); console.log(typeof ret); //类型是一个对象 // 怎么把js中的对象,转换成字符串呢? var s2 = JSON.stringify(ret); console.log(s2); console.log(typeof s2); //类型是一个字符串 // 这两个一定要学会,后面使用ajax传递数据的时候,会使用到
############### JS内置对象-Math对象 ################
//math对象 var n = -5; n2 = Math.abs(n); //绝对值 console.log(n2); Math.floor(5.9); //直接往下去,这就是5, Math.min(1,2); Math.max(1,2); Math.pow(10,2); //返回x的y次幂 Math.random(); //返回一个0-1之间的随机数 Math.round(5.5); //四舍五入
############### JS内置模块-RegExp模块,正则模块 ################
//RegExp对象,正则,类似python中的re模块 //生成RegExp对象, var reg1 = new RegExp("^[a-zA-Z][a-zA-Z0-9_]{5,11}$"); //这是以字母开头,5-11位的字母数字下滑线组成 var reg2 = reg1.test('xiaoming'); console.log(reg2); //true var reg3 = reg1.test('2xiaoming'); console.log(reg3); //false //简单写法 console.log(/^[a-zA-Z][a-zA-Z0-9_]{5,11}$/.test("xiaoming")); console.log(/^[a-zA-Z][a-zA-Z0-9_]{5,11}$/.test("3xiaoming")); //这里面有很多的坑 // 1,re表达式内部不能加空格,否则会产生意想不到的错误, // console.log(/^[a-zA-Z][a-zA-Z0-9_]{5, 11}$/.test("xiaoming")); //2,test里面不写值,默认不是空,是校验的一个undefined,这是大坑啊, console.log(/^[a-zA-Z][a-zA-Z0-9_]{5,11}$/.test());//等同于console.log(/^[a-zA-Z][a-zA-Z0-9_]{5,11}$/.test("undefined")); //3,字符串替换 //两种模式,g,i, var ss = 'Ahahaha'; var sss = ss.replace("a","哈");//这样写只会替换第一个a,这个要记住, var sss = ss.replace(/a/,"哈");//这样写只会替换第一个a,这个要记住,这是正则的写法 var sss = ss.replace(/a/g,"哈");//加一个g,就是说全局有多少就替换多少, var sss = ss.replace(/a/gi,"哈");//加一个i,就是说忽略大小写,都替换 console.log(sss);
############### 结束线 ################
来源:https://www.cnblogs.com/andy0816/p/12119003.html