js：JavaScript
1.ECMAScript5基础语法
es1 2 4 5： 没有类的概念（伪面向对象） 6 7 8
历史背景：node.js
打印控制台输出：console.log();
前端语言：不能操作操作系统和文件
后端语言
引入方式09：
src引入的资源
全局概念window，function关键字
int类型是蓝色，str是黑色
注释，普通函数，函数对象
数值加字符串自动拼接成数字
用户输入：prompt
直接量、字面量
浏览器解释时，会自动变量提升
typeof检查类型
拼接与加
es6语法：模板字符串``${}。。
document.write()输出在屏幕中
parseInt()将字符串转为数字
5/0 Infinity：number类型 。。黑灰。。
a++ ++a弄清！
==比较值 ===比较值和数据类型
强制类型转换
流程控制10
if else if
switch case穿透，遇到break跳出循环 要加break
直角三角形、“锥形”
常用内置对象11
var arr = [1,2,3];
console.log(arr);
split参数，指拿到几个结果
自己演示一下字符串例子即可
date
math.random随机数 min+Math.random()*(max-min)
var ran = Math.random();
console.log(ran);[0,1)
小结：
（1）声明变量 var
（2）String Number boolean undefine
(3) Array Math
toNumber()
toString()
学习网站：w3c，开发者网络https://developer.mozilla.org/zh-CN/
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>js练习</title> 6 </head> 7 <body> 8 <script type="text/javascript"> 9 // 1.控制台输出：console.log("") 10 // console.log('2') 11 //2.弹出警告框：alert("") 12 // alert('welcome') 13 //3.用户输入：prompt()语句 14 // var a=prompt('今天是什么天气？'); 15 // console.log(a); 16 //4.prompt()语句中，用户不管输入什么内容，都是字符串。 17 // alert("从前有座山"); //直接使用，不需要变量 18 // var a = prompt("请输入一个数字"); // 必须用一个变量，来接收用户输入的值 19 //5.变量定义 20 // var a = 100; //定义，并且赋值100 21 // console.log(a); 22 //6.typeof()表示“获取变量的类型” 23 // var a = 100; //定义了一个变量a，并且赋值100 24 // console.log(typeof a); //输出a变量的类型 25 //7.在JavaScript中，只要是数，就是数值型(number)的。无论整浮、浮点数（即小数）、无论大小、无论正负，都是number类型的。 26 //8.字符串型：string 27 // var a = "abcde"; 28 // var b = "路飞"; 29 // var c = "123123"; 30 // var d = "哈哈哈哈哈"; 31 // var e = ""; //空字符串 32 // 33 // console.log(typeof a); 34 // console.log(typeof b); 35 // console.log(typeof c); 36 // console.log(typeof d); 37 // console.log(typeof e); 38 //9.如果加号两边都是数值，此时是加。否则，就是连字符（用来连接字符串）。 39 // console.log("我" + "爱" + "你"); //连字符，把三个独立的汉字，连接在一起了 40 // console.log("我+爱+你"); //原样输出 41 // console.log(1 + 2 + 3); //输出6 42 //10.（注意，字符串 - 数值 = 数值） 43 // var a = "3"; 44 // var b = 2; 45 // console.log(a - b); 46 //11.parseInt()：字符串转数字 47 //（1）带有自动净化的功能；只保留字符串最开头的数字，后面的中文自动消失。 48 // console.log(parseInt("2018你真帅！！")); 49 //（2）自动带有截断小数的功能：取整，不四舍五入。 50 // var a = parseInt(5.8) + parseInt(4.7); 51 // // console.log(a); 9 52 // var a = parseInt(5.8 + 4.7); 53 // console.log(a); 10 54 // var stringNum = '1233.33yudasdiusaudsaugd'; 55 // var num2 = Number(stringNum); 56 // console.log(num2); 57 // console.log(parseInt(stringNum)) 58 // console.log(parseFloat(stringNum)); 59 60 61 // 二、 数据类型 62 // 1）基本数据类型 63 //1.number 64 var a = 123; 65 //typeof 检查当前变量是什么数据类型 66 console.log(typeof a) 67 //特殊情况 68 var a1 = 5 / 0; 69 console.log(typeof a1) //Infinity 无限大. number类型 70 // 2.string 71 var str = '123' 72 console.log(typeof str) 73 // 3.boolean 74 var b1 = false; 75 console.log(typeof b1) 76 // 4.null 77 var c1 = null;//空对象. object 78 console.log(c1) 79 // 5.undefined 80 var d1; 81 //表示变量未定义 82 console.log(typeof d1) 83 // 2.引用数据类型 84 // Function 85 // Object 86 // Arrray 87 // String 88 // Date 89 90 91 // 三、运算符 92 // 1.自增自减 93 var a = 5, b = 2 94 // var x=a++ 95 // console.log(x,a) 96 // //5 6 97 98 // var x=++a 99 // console.log(x,a) 100 // // 6 6 101 102 // var x=a-- 103 // console.log(x,a) 104 // // 5 4 105 // var x=--a 106 // console.log(x,a) 107 // 4 4 108 // 2.比较运算符 109 // ===等同于（值和类型均相等） ==等于 110 // !==不等同于 !=不等于 111 var x = 5 112 // console.log(x===5,x==='5') //true false 113 // console.log(x==5,x=='5') //true true 114 // console.log(x!==5,x!=='5') //false true 115 // 3.特殊：字符串拼接+字符串运算 特殊情况。python中有拼接字符串中更简便的办法，其实在js中也有，大家可以百度引擎搜索es6模板字符串。（扩展） 116 var firstName = '小'; 117 var lastName = '马哥'; 118 var name = '伊拉克'; 119 var am = '美军'; 120 // 字符串拼接 121 var str = "2003年3月20日," + name + "战争爆发，以美军为主的联合部队仅用20多天就击溃了萨达姆的军队。这是继十多年前的海湾战争后，" + am + "又一次取得的大规模压倒性军事胜利。" 122 // var fullStr = str; 123 // console.log(fullStr) 124 // 125 // var fullName = firstName + " " + lastName; 126 // console.log(fullName) 127 // 结果：2003年3月20日,伊拉克战争爆发，以美军为主的联合部队仅用20多天就击溃了萨达姆的军队。这是继十多年前的海湾战争后，美军又一次取得的大规模压倒性军事胜利。 练习.html:124:1 128 // 小 马哥 129 130 131 // 不能对字符串进行+运算 只能拼接 132 // var a1 = '1'; 133 // var a2 = '2'; 134 // console.log(a1 - a2) //-1 135 // 136 // var b1 = 'one'; 137 // var b2 = 'two'; 138 // 139 // // NaN. ==== not a number 是number类型 140 // console.log(b1 * b2) //NaN 141 // console.log(typeof(b1 * b2)) //number 142 143 144 // 四、数据类型转换 145 // 1.将数值类型转换成字符串类型 146 // var n1 = 123; 147 // var n2 = '123'; 148 // var n3 = n1+n2; 149 // // 隐式转换 150 // console.log(typeof n3); 151 // 152 // // 强制类型转换String(),toString() 153 // var str1 = String(n1); 154 // console.log(typeof str1); 155 // 156 // var num = 234; 157 // console.log(num.toString()) 158 // // 2.将字符串类型转换成数值类型 159 // var stringNum = '789.123wadjhkd'; 160 // var num2 = Number(stringNum); 161 // console.log(num2) 162 // 163 // // parseInt()可以解析一个字符串 并且返回一个整数 164 // console.log(parseInt(stringNum)) 165 // console.log(parseFloat(stringNum)); 166 // 3.任何数据类型都可以转换为boolean类型 167 var b1 = '123'; 168 var b2 = 0; //false 169 var b3 = -123 170 171 var b4 = Infinity; 172 var b5 = NaN; 173 174 var b6; //undefined 175 var b7 = null; 176 177 // 非0既真 178 // console.log(Boolean(b4)) //true 179 // console.log(Boolean(b5)) //false 180 // console.log(Boolean(b6)) //false 181 // console.log(Boolean(b7)) //false 182 183 // 五、流程控制 184 // 1.1.if 、if-else、if-else if-else 185 // var ji = 20; 186 // if(ji >= 20){ 187 // console.log('恭喜你，吃鸡成功，大吉大利') 188 // } 189 // alert('alex');//下面的代码还会执行 190 191 // var ji = 20; 192 // if (ji >= 20) { 193 // console.log('恭喜你，吃鸡成功，大吉大利') 194 // } else { 195 // console.log('很遗憾 下次继续努力') //不运行 196 // } 197 // // 注意：浏览器解析代码的顺序 是从上往下执行，从左往右 198 // if (true) { 199 // //执行操作 200 // } else if (true) { 201 // //满足条件执行 202 // } else if (true) { 203 // //满足条件执行 204 // } else { 205 // //满足条件执行 206 // } 207 208 // 2.逻辑与&&、逻辑或|| 209 // //1.模拟 如果总分 >400 并且数学成绩 >89分 被清华大学录入 210 // //逻辑与&& 两个条件都成立的时候 才成立 211 // var sum=404; 212 // var math=9; 213 // if(sum>400 && math>90){ 214 // console.log('清华大学录入成功') 215 // }else{ 216 // alert('高考失利') 217 // } 218 // 219 // //2.模拟 如果总分>400 或者你英语大于85 被复旦大学录入 220 // //逻辑或 只有有一个条件成立的时候 才成立 221 // var english=88; 222 // if(sum>500 || english>85){ 223 // alert('被复旦大学录入') 224 // }else{ 225 // alert('高考又失利了') 226 // } 227 // 3.switch case穿透，遇到break跳出循环 228 var gameScore = 'better'; 229 230 switch (gameScore) { 231 232 //case表示一个条件 满足这个条件就会走进来 遇到break跳出。break终止循环。如果某个条件中不写 break，那么直到该程序遇到下一个break停止 233 234 case 'good': 235 console.log('玩的很好') 236 //break表示退出 237 break; 238 case 'better': 239 console.log('玩的老牛逼了') 240 // break; 241 case 'best': 242 console.log('恭喜你 吃鸡成功') 243 break; 244 245 default: 246 console.log('很遗憾') 247 248 } 249 // 4.while循环 输出1-9 250 // var i = 1; //初始化循环变量 251 // 252 // while(i<=9){ //判断循环条件 253 // console.log(i); 254 // i = i+1; //更新循环条件 255 // } 256 257 // // 5.do_while 输出3-9 258 // //不管有没有满足while中的条件do里面的代码都会走一次 259 // var i = 3;//初始化循环变量 260 // do{ 261 // 262 // console.log(i) 263 // i++;//更新循环条件 264 // 265 // }while (i<10) //判断循环条件 266 267 // 6.for循环 输出1-10 268 // for(var i = 1;i<=10;i++){ 269 // console.log(i) 270 // } 271 272 // // 7.双重for循环 打印3行6个* 273 // for (var i = 1; i <= 3; i++) { 274 // 275 // for (var j = 0; j < 6; j++) { 276 // document.write('*') 277 // } 278 // 279 // document.write('<br>') 280 // } 281 // // 小作业： 282 // 1.在浏览器中输出直角三角形 283 for (var i = 1; i <= 6; i++) { 284 for (var j = 1; j <= i; j++) { 285 document.write("*"); 286 } 287 288 document.write('<br>'); 289 } 290 291 // 2.在浏览器中输出树形 292 for (var i = 1; i <= 6; i++) { //行数 293 294 //控制我们的空格数 295 for (var s = i; s < 6; s++) { 296 document.write(' ') 297 } 298 299 for (var j = 1; j <= 2 * i - 1; j++) { 300 document.write('*') 301 } 302 document.write('<br>') 303 304 } 305 306 // // 六、常用内置对象 307 // //1.数组Array 308 // // 1.数组的创建方式 309 // // 字面量方式创建（推荐大家使用这种方式，简单粗暴） 310 // var colors = ['red', 'color', 'yellow']; 311 // // 使用构造函数（后面会讲）的方式创建 使用new关键词对构造函数进行创建对象 312 // var colors2 = new Array(); 313 // // 2.数组的赋值 314 // var arr = []; 315 // //通过下标进行一一赋值 316 // arr[0] = 123; 317 // arr[1] = '哈哈哈'; 318 // arr[2] = '嘿嘿嘿' 319 // console.log(arr) 320 // // 3.数组的常用方法 321 // // 3.1 数组的合并 concat() 322 // var north = ['北京', '山东', '天津']; 323 // var south = ['东莞', '深圳', '上海']; 324 // 325 // var newCity = north.concat(south); 326 // console.log(newCity) //["北京", "山东", "天津", "东莞", "深圳", "上海"] 327 // 328 // // 3.2 join() 将数组中的元素使用指定的字符串连接起来，它会形成一个新的字符串 329 // var score = [98, 78, 76, 100, 0]; 330 // var str = score.join('|'); 331 // console.log(str);//98|78|76|100|0 332 // 333 // // 3.3 将数组转换成字符串 toString()---常用 334 // var score = [98, 78, 76, 100, 0]; 335 // //toString() 直接转换为字符串 每个元素之间使用逗号隔开 336 // var str = score.toString(); 337 // console.log(str);//98,78,76,100,0 338 // 339 // // 3.4 slice(start,end); 返回数组的一段，左闭右开 340 // var arr = ['张三', '李四', '王文', '赵六']; 341 // var newArr = arr.slice(1, 3); 342 // console.log(newArr);//["李四", "王文"] 343 // 344 // // 3.5 pop 移除数组的最后一个元素 345 // var arr = ['张三', '李四', '王文', '赵六']; 346 // var newArr = arr.pop(); 347 // console.log(newArr);//赵六 348 // console.log(arr);//["张三", "李四"，"王文"] 349 // 350 // // 3.6 push() 向数组最后添加一个元素，并返回新的长度 351 // var arr = ['张三', '李四', '王文', '赵六']; 352 // var newArr = arr.push('小马哥'); 353 // console.log(newArr);//5 354 // console.log(arr);//["张三", "李四"，"王文"，"赵六"，"小马哥"] 355 // 356 // // 3.7 reverse() 反转数组 357 // var names = ['alex', 'xiaoma', 'tanhuang', 'angle']; 358 // names.reverse(); 359 // console.log(names); //["angle", "tanhuang", "xiaoma", "alex"] 360 // 361 // // 3.8 sort对数组排序 362 // var names = ['alex', 'xiaoma', 'tanhuang', 'abngel']; 363 // names.sort(); 364 // console.log(names);// ["abngel", "alex", "tanhuang", "xiaoma"] 365 // 366 // // 3.9 判断是否为数组：isArray() 367 // // 布尔类型值 = Array.isArray(被检测的值) ; 368 // 369 // // 3.10shift() 移除数组的第一个元素 370 // var arr = ['张三', '李四', '王文', '赵六']; 371 // var newArr = arr.shift(); 372 // console.log(newArr);//张三 373 // console.log(arr);//["李四", "王文", "赵六"] 374 375 // // 3.11unshift()往数组的开头添加一个元素，并且返回新的长度 376 // var arr = ['张三', '李四', '王文', '赵六']; 377 // var newArr = arr.unshift('小马哥'); 378 // console.log(newArr);//5 379 // console.log(arr);//["小马哥", "张三", "李四", "王文", "赵六"] 380 // 381 // // 3.12length 它是一个属性，唯一的一个，获取数组的长度，可以结合for循环遍历操作 382 383 384 // // 4.字符串String方法 385 // // 4.1 chartAt() 返回指定索引的位置的字符 386 // var str = 'alex'; 387 // var charset = str.charAt(2); 388 // console.log(charset);//e 389 // 390 // // 4.2 concat 返回字符串值，表示两个或多个字符串的拼接 391 // var str1 = 'al'; 392 // var str2 = 'ex'; 393 // console.log(str1.concat(str2,str2));//alexex 394 // 395 // // 4.3 replace(a,b) 将字符串a替换成字符串b 396 // var a = '1234567755'; 397 // var newStr = a.replace("4567","****"); 398 // console.log(newStr);//123****755 399 // 400 // // 4.4 indexof() 查找字符的下标，如果找到返回字符串的下标，找不到则返回-1 。跟seach()方法用法一样 401 // var str = 'alex'; 402 // console.log(str.indexOf('e'));//2 403 // console.log(str.indexOf('p'));//-1 404 // 405 // // 4.5 slice(start，end) 左闭右开 分割字符串 406 // var str = '小马哥'; 407 // console.log(str.slice(1,2));//马 408 // 409 // // 4.6 split('a',1) 以字符串a分割字符串，并返回新的数组。如果第二个参数没写，表示返回整个数组，如果定义了个数，则返回数组的最大长度 410 // var str = '我的天呢,a是嘛,你在说什么呢?a哈哈哈'; 411 // console.log(str.split('a'));//["我的天呢,", "是嘛,你在说什么呢?", "哈哈哈"] 412 // 413 // // 4.7 substr(statr,end) 字符串截取，左闭右开 414 // var str = '我的天呢,a是嘛,你在说什么呢?a哈哈哈'; 415 // console.log(str.substr(0,4));//我的天呢 416 // 417 // // 4.8 toLowerCase()转小写 418 // var str = 'XIAOMAGE'; 419 // console.log(str.toLowerCase());//xiaomage 420 // 421 // // 4.9 toUpperCase()转大写 422 // var str = 'xiaomage'; 423 // console.log(str.toUpperCase());//XIAOMAGE 424 // 425 // // 特别： 426 // //1.将number类型转换成字符串类型 427 // var num = 132.32522; 428 // var numStr = num.toString() 429 // console.log(typeof numStr) //string 430 // //四舍五入 431 // var newNum = num.toFixed(2) 432 // console.log(newNum) //132.33 433 434 // // 5.Date日期对象 435 // // 创建日期对象只有构造函数一种方式,使用new关键字 436 // //创建了一个date对象 437 // var myDate = new Date(); 438 // 439 // //创建日期对象 440 // var myDate=new Date(); 441 // console.log(myDate) //Thu Jul 12 2018 20:50:01 GMT+0800 (中国标准时间) 442 // //获取一个月中的某一天、月、年、星期、时、分、秒 443 // console.log(myDate.getDate()); //12 444 // console.log(myDate.getMonth()); //6 一般需要+1 445 // console.log(myDate.getFullYear()); //2018 446 // console.log(myDate.getDay()); //4 447 // console.log(myDate.getHours()); //20 448 // console.log(myDate.getMinutes()); //50 449 // console.log(myDate.getSeconds()); //1 450 // 451 // //返回本地时间 452 // console.log(myDate.toLocaleString());//2018/7/12 下午8:51:49 453 454 // // 6.Math 内置对象 455 // // 6.1 Math.ceil() 向上取整，'天花板函数' 456 // var x = 1.234; 457 // //天花板函数 表示大于等于 x，并且与它最接近的整数是2 458 // var a = Math.ceil(x); 459 // console.log(a);//2 460 // 461 // // 6.2 Math.floor 向下取整，'地板函数' 462 // var x = 1.234; 463 // // 小于等于 x，并且与它最接近的整数 1 464 // var b = Math.floor(x); 465 // console.log(b);//1 466 // 467 // // 6.3 求两个数的最大值和最小值 468 // //求 两个数的最大值 最小值 469 // console.log(Math.max(2,5));//5 470 // console.log(Math.min(2,5));//2 471 // 472 // // 6.4 随机数 Math.random() 473 // var ran = Math.random(); 474 // console.log(ran);//[0,1) 475 // 476 // // 如果让你取100-200之间的随机数，怎么做？ 477 // console.log(100+ran*100) 478 // // 背过公式：min - max之间的随机数： min+Math.random()*(max-min) 479 // console.log(Math.floor(100+Math.random()*500));//100-600之间的整数 480 481 482 // 七、函数 483 // console.log("hello world"); 484 // sayHello(); //调用函数 485 // //定义函数： 486 // function sayHello(){ 487 // console.log("hello"); 488 // console.log("hello world"); 489 // } 490 // 491 // 492 // sum(3,4); 493 // sum("3",4); 494 // sum("Hello","World"); 495 // 496 // //函数：求和 497 // function sum(a, b) { 498 // console.log(a + b); 499 // } 500 // 501 // // 结果：7 34 HelloWorld 502 503 // 函数的返回值 504 // console.log(sum(3, 4)); 505 // 506 // //函数：求和 507 // function sum(a, b) { 508 // return a + b; 509 // } //7 510 511 512 // 八、伪数组 arguments 513 // arguments代表的是实参。有个讲究的地方是：arguments只在函数中使用。 514 // （1）返回函数实参的个数：arguments.length 515 // fn(2, 4); 516 // fn(2, 4, 6); 517 // fn(2, 4, 6, 8); 518 519 // function fn(a, b, c) { 520 // console.log(arguments); 521 // console.log(fn.length); //获取形参的个数 522 // console.log(arguments.length); //获取实参的个数 523 // 524 // console.log("----------------"); 525 // } 526 527 // （2）之所以说arguments是伪数组，是因为：arguments可以修改元素，但不能改变数组的长短。举例： 528 // fn(2,4); 529 // fn(2,4,6); 530 // fn(2,4,6,8); 531 532 // function fn(a,b) { 533 // arguments[0] = 99; //将实参的第一个数改为99 534 // arguments.push(8); //此方法不通过，因为无法增加元素 535 // } 536 537 // 清空数组的几种方式： 538 var array = [1, 2, 3, 4, 5, 6]; 539 540 // array.splice(0); //方式1：删除数组中所有项目 541 // array.length = 0; //方式1：length属性可以赋值，在其它语言中length是只读 542 // array = []; //方式3：推荐 543 console.log(array) 544 545 546 console.log(window); //一个全局变量的列表 547 console.log(document); //页面上所有布局 548 console.log(document.documentElement); //html中所有的内容 549 console.log(document.body);//html的body中所有的内容 550 551 // 九、关于DOM的事件操作 552 553 554 </script> 555 556 557 </body> 558 </html>
数组的常用方法
字符串常用方法
date
