1.javascript语法体系
1）EMCA基础语法（统一）
2）BOM编程（不统一）
3）DOM编程（不统一）
1.1 javascript使用
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>javascript基础</title> <script> /* javascript的使用方法： 1）内部javacript: a)在html页面中使用<script>标签，在<script>标签体中写js内容 b)弊端：和html代码混杂在一起，不好维护，不好重用 2）外部javascript（推荐使用） */ /* 常用的函数： alert("提示框"); document.write("向浏览器输出内容"); */ // alert("提示框"); // document.write("输出内容"); </script> <!-- 导入外部js文件 注意： 不能使用<script src="01.j/s"> 空标签方式导入 --> <script src="01.js"></script> </head> <body> </body> </html>
document.write("输出内容");
1.2 变量和数据类型
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>变量和数据类型</title> <script type="text/javascript"> /* 1）定义和赋值变量： var 变量名=值; 注意： 1）使用var关键词定义变量，var可以省略的，但是不建议省略var 2) 在js中可以重复定义变量，后面定义的变量会覆盖前面的变量。 3) js是弱类型语言，使用var来定义任何数据类型 4）js中变量的类型是由变量的值决定的，所以只定义不赋值的变量，就是一个未赋值变量（undefined），未赋值的变量不能使用 typeof(变量)： 查看变量的数据类型 2)js的数据类型分类： a）number： 无论整数还是小数，都是number类型 b) string: 无论字符还是字符串，都是string类型 c) boolean d) object 对象类型 */ a = 10; document.write('a的值为：' + a + ' 类型为: ' + typeof(a) + '<br/>'); b = 3.14; document.write('b的值为:' + b + ' 类型为: ' + typeof(b) + '<br/>'); c = 'hello'; document.write('c的值为：' + c + ' 类型为: ' + typeof(c) + '<br/>'); d = true; document.write('d的值为：' + d + '<br/>'); e = new Object(); document.write('e的值为：' + e+' 类型为: ' + typeof(e) ); </script> </head> <body> </body> </html>
1.3 类型转换函数
string->number(整数) : parserInt(变量)
string->number(小数): parserFloat(变量)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>类型转换函数</title> <script type="text/javascript"> /* string->整数： parseInt(变量) 注意： 1）使用parseInt函数转换时，转换的内容中的第一个是数值类型，就可以继续转换，直到遇到非数组类型为止。 string->小数： parseFloat(变量) */ a = "10"; a = "10a"; document.write("a的类型是(转换前)：" + typeof(a) + "<br/>"); //转换 a = parseInt(a); document.write("a的类型是(转换后)：" + typeof(a) + ",值为：" + a + "<br/>"); b = "3.14"; b = parseFloat(b); document.write("b的类型是(转换后)：" + typeof(b) + ",值为：" + b + "<br/>"); </script> </head> <body> </body> </html>
1.4 运算符
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>运算符</title> <script type="text/javascript"> /* 1)算术运算符： + - * / % 2)比较运算符： > < >= <= == 3)逻辑运算符： && || ! 4)三目运算符: 表达式 ? true的结果 : false的结果 注意： 在js中，布尔值可以用true用1来代表，false用0来代表 */ a = 10; b = false; document.write("结果为：" + (a / b) + "<br/>"); document.write("结果为：" + (a + b) + "<br/>"); a = 10; b = 20; document.write("结果为:" + (a < b) + "<br/>"); a = 1; b = true; document.write("结果为:" + (a = b) + "<br/>"); document.write("结果为:" + (false && true) + "<br/>"); document.write("结果为:" + (false || true) + "<br/>"); document.write("结果为:" + (!true) + "<br/>"); age = 12; document.write(age >= 18 ? "成年人" : "未成年人"); </script> </head> <body> </body> </html>
1.5 流程控制语句
if
swtich
for
扫描二维码关注公众号，回复：
6704592 查看本文章
while
do-while
for-in
with
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>流程控制语句</title> <script type="text/javascript"> /* 1，显示"*"为三角型，5行，第1行有1个"*"，第2行有2个"*"…… 2，显示乘法口诀。 1*1=1 1*2=2 2*2=4 .... 1*9=9 2*9=18 ... */ for (i = 1; i <= 5; i++) { //行数 for (j = 1; j <= i; j++) { // 控制星星数 document.write("* "); } document.write("<br/>"); } document.write("<hr/>"); for (i = 1; i <= 9; i++) { for (j = 1; j <= i; j++) { document.write(i + "*" + j + "=" + (i * j) + " "); } document.write("<br/>"); } /* for-in语句： for(var 遍历 in 数组|对象){ } 作用： 1）遍历数组 2）对象 注意： 遍历对象的时候，变量是属性的名称，如果获取属性值，则 p[i]; */ //定义数组 arr = [10, 20, 30, 40]; //遍历数组 //使用for循环 for (i = 0; i < arr.length; i++) { document.write(arr[i] + ","); } document.write("<hr/>"); //使用for-in遍历 for (i in arr) { document.write(arr[i] + ","); } //定义对象 function Person(name, age) { this.name = name; this.age = age; } //创建对象 p = new Person("eric", 20); //遍历对象 for (i in p) { document.write(p[i] + "<br/>"); } </script> </head> <body> </body> </html>
1.6函数
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>函数</title> <script> /* 函数定义： function 函数名称(形式参数列表){ 语句 } 调用函数: 函数名称(实际参数列表); 注意： 1）js的函数使用function定义，但是形式参数列表不能使用var关键词 2）js的函数可以有返回值，直接使用return关键词返回即可，不需要声明返回值类型 3) js没有方法重载的概念，后面定义的函数会覆盖前面的函数。 4）js中的形式参数和实际参数的数量可以不一致，依然可以调用。 5）js的每个函数中都隐藏了一个叫arguments的数组，这个数组用于接收函数调用时传递过来的实际参数值。 6)arguments数组接收完实际参数后，会逐一的依次从左到右赋值给形式参数,如果实际参数数量大于形式参数，则丢失剩下的实际参数 */ function add(a, b) { result = a + b; // document.write('结果为：'+result); return result; } s = add(10, 20); document.write(s); </script> </head> <body> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>函数练习</title> <script type="text/javascript"> /* 如果大月，显示“该月有31天” 如果小月,显示“该月有30天” 如果2月，显示“该月有28天“ */ function check(){ //alert("调用"); var month = document.getElementById("month").value; //表单输入的内容都是string类型！！ //alert(typeof(month)); //alert(month); //string和number比较，string会自动转换成number类型，再进行比较 /* if(month==1 || month==3 || month==5 || month==7 || month==8 || month==10 || month==12){ alert("该月有31天"); }else if(month==4 || month==6 || month==9 || month==11){ alert("该月有30天"); }else if(month==2){ alert("该月有28天"); }else{ alert("地球上没有这个月份"); } */ //强制转换 month = parseInt(month); switch(month){ case 1: case 3: case 5: case 7: case 8: case 10: case 12: alert("该月有31天"); break; case 4: case 6: case 9: case 11: alert("该月有30天"); break; case 2: alert("该月有28天"); break; default: alert("地球上没有这个月份"); } } </script> </head> <body> 请输入一个月份值：<input type="text" id="month"/><input type="button" value="查询" onclick="check()"/> </body> </html>
