1.
JavaScript基础分为三个部分：
-
ECMAScript：JavaScript的语法标准。包括变量、表达式、运算符、函数、if语句、for语句等。
-
DOM：操作网页上的元素的API。比如让盒子移动、变色、轮播图等。
-
BOM：操作浏览器部分功能的API。比如让浏览器自动滚动。
PS：JS机械重复性的劳动几乎为0，基本都是创造性的劳动。而不像HTML、CSS中margin、padding都是机械重复劳动。
2.第一个js
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <script type="text/javascript"> 7 var a = 2; 8 var b ; 9 b = 3; 10 var c = "3"; 11 console.log(a); 12 console.log(b); 13 console.log(c); 14 typeof 检查数据类型 15 console.log(typeof a); 16 console.log(typeof c); 17 字符串和数字相加会将数值隐式转换 18 隐式转转>>数字类型转换成字符串 19 console.log(a+c); 20 console.log(a+""); 21 警告又出框 22 alert("账期"); 23 用户输入 24 var a = prompt("今天什么天气"); 25 console.log(a); 26 没有被定义不可以被找到 27 var e ;log() 28 console.log(e); 29 console.log(typeof e); 30 console.log("我"+"哎") 31 parseInt 是将字符串转换成数字 32 console.log(parseInt(c)); 33 字符串-数值=数值 34 console.log(c-a); 35 console.log(parseInt("2015你在哪 ")); 36 var a1 = 5/0; 37 console.log(a1); 38 console.log(typeof a1); 39 当在小数转换成整数的时候只取整数一位 40 var d = parseInt(5.75)+parseInt(8.66); 41 console.log(d) 42 43 44 </script> 45 </head> 46 <body> 47 48 </body> 49 </html>
3.算数运算符 ++ --
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <script type="text/javascript"> 7 8 var a = 5; 9 var x = a++; 10 控制台先将a身的值赋给x输出5,然后运行a++输出6 11 console.log(a); 12 console.log(x); 13 先进行a++,在赋值 14 var x = ++a; 15 console.log(a); 16 console.log(x); 17 18 19 </script> 20 </head> 21 <body> 22 23 </body> 24 </html>
4.比较
1 var a = 2; 2 var b = "2"; 3 //比较的是数值 4 console.log(a==b); 5 //比较的是数值和类型 6 //返回ture或false 7 console.log(a===b); 8 console.log(a!=b);
5.强制类型转换
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <script type="text/javascript"> 7 8 var name = "中国"; 9 var am = "美军"; 10 //拼接用${} ` ` 或 "+name+" 11 var str = `2003年3月20日,${name}战争爆发，以${am}为主的联合部队仅用20多天就击溃了萨达姆的军队。这是继十多年前的海湾战争后，美军又一次取得的大规模压倒性军事胜利。`; 12 console.log(str) 13 14 var a = 123; 15 //强制类型转换为字符串 16 var astr = String(a); 17 console.log(astr); 18 console.log(typeof (astr)); 19 //强制转换成为字符串 如果后面有dada会提示NAN 20 var stringNum = '789.123'; 21 var num2 = Number(stringNum); //NaN 22 console.log(num2); 23 //Boolean 非零即真 24 var b1 = NaN; 25 console.log(Boolean(b1)); 26 27 </script> 28 </head> 29 <body> 30 31 </body> 32 </html>
6.switch语句
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <script type="text/javascript"> 7 var age = 18; 8 //switch 依次匹配 遇到break退出循环 9 switch (age) { 10 case 18: 11 console.log("成年了"); 12 break; 13 case 16: 14 console.log("上学了"); 15 break; 16 case 80: 17 console.log("城A级"); 18 break; 19 default: 20 console.log("和遗憾") 21 22 } 23 24 </script> 25 </head> 26 <body> 27 28 </body> 29 </html>
7.循环 while for
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 7 </head> 8 <body> 9 <script type="text/javascript"> 10 <!--初始化循环变量--> 11 var a = 1; 12 while (a<10){ 13 //判断循环条件 14 console.log(a); 15 //更新循环变量 16 a++; 17 } 18 var b = 3; 19 do{ 20 console.log(b); 21 b++; 22 }while (b<10); 23 for (var i =0;i<5;i++ ){ 24 console.log(i); 25 } 26 27 for(var i = 0; i < 5; i++){ //控制行数 28 for(var j = 0; j < 10; j++){//控制的每行的*数 29 30 document.write('*'); 31 } 32 document.write('<br>'); 33 } 34 35 36 37 38 39 </script> 40 41 </body> 42 </html>
8.关于数组
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 </head> 7 <body> 8 <script type="text/javascript"> 9 var color = ["red","yellow","blue"]; 10 console.log(color); 11 var arr=[]; 12 //数组的赋值 13 arr[0] = 122; 14 arr[1] = "哈啊哈"; 15 arr[2] = "嘿嘿嘿"; 16 console.log(arr); 17 18 19 var north = ['北京','山东','天津']; 20 var south = ['东莞','深圳','上海']; 21 //数组的合并 22 var newCity = north.concat(south); 23 console.log(newCity); 24 25 26 var socre = [77,88,99,10]; 27 //转换成字符串 28 var str = socre.toString(); 29 console.log(str); 30 31 var ar = ['张三','李四','王文','赵六']; 32 //slice 左开右闭 33 var newar = ar.slice(1,3); 34 console.log(newar); 35 36 var Aarr = ['张三','李四','王文','赵六']; 37 //在数组后面添加一个字符串 38 var newArr = Aarr.push('小马哥'); 39 console.log(newArr);//["张三", "李四"，"王文"，"赵六"，"小马哥"] 40 41 //移出数组的第一个元素 42 ar.shift(); 43 console.log(ar); 44 45 //在数组前面添加第一个元素 46 ar.unshift("张庆"); 47 console.log(ar); 48 //利用循环将ar document打印在页面上 49 for (var i= 0;i <ar.length; i++){ 50 console.log(ar[i]); 51 document.write(arr[i]+'1'); 52 } 53 54 55 56 57 58 59 60 61 62 63 </script> 64 65 </body> 66 </html>
9.关于字符串的功能
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 </head> 7 <body> 8 <script type="text/javascript"> 9 var str = 'alex'; 10 //进行索引查找 从0开始 11 console.log(str.charAt(1)) 12 var str1 = new String(); 13 console.log(str1); 14 15 //split分割成字符串 用逗号隔开 16 var str2 = '我的天呢,a是嘛,你在说什么呢?a哈哈哈'; 17 console.log(str2.split('a')); 18 19 //teim去除两边空格 20 var str3 = ' alex '; 21 console.log(str3.trim()); 22 23 </script> 24 25 </body> 26 </html>
10.