JavaScript(1)：Base/Tips
目录
- 输出
- 全局变量
- 字符串
- 类型及转换
- 变量提升
- 严格模式
- 表单验证
(1) 输出
1 <!DOCTYPE html> 2 <html> 3 <body> 4 <p>JavaScript输出</p> 5 <script> 6 // 使用window.alert()弹出警告框 7 window.alert(5+6); 8 // 使用document.write()方法将内容写到HTML文档中 9 document.write(Date()); 10 // 注意：如果在文档已完成加载后执行document.write，整个HTML页面将被覆盖 11 function demo2Click() { 12 document.write("Override!"); 13 } 14 // 使用innerHTML写入到HTML元素 15 document.getElementById("demo1").innerHTML = "add demo1 text"; 16 // 使用console.log()写入到浏览器的控制台 17 console.log("warn log"); 18 </script> 19 <div id="demo1"></div> 20 <button id="demo2" onclick="demo2Click();">demo2</button> 21 </body> 22 </html>
(2) 全局变量
1 <!DOCTYPE html> 2 <html> 3 <body> 4 <p>变量</p> 5 <p id="demo1"></p> 6 <script> 7 // 在HTML中,所有全局变量都会成为window变量 8 // 全局变量或函数,可以覆盖window对象的变量或者函数;局部变量,包括window对象可以覆盖全局变量和函数 9 myFunction(); 10 document.getElementById("demo1").innerHTML = 'I can show ' + window.carName; 11 function myFunction() { 12 carName = "Volvo"; 13 } 14 </script> 15 </body> 16 </html>
(3) 字符串
1 <!DOCTYPE html> 2 <html> 3 <body> 4 <p>字符串</p> 5 <p id="demo1"></p> 6 <script> 7 // 转义字符使用[\] 8 // 其他的转义字符有：[\']单引号;[\\]反斜杠;[\n]换行;[\r]回车;[\t]制表符;[\b]退格符;[\f]换页符 9 var demo1 = "He is called \"Tom\"."; 10 // 使用位置（索引）可以访问字符串中任何的字符 11 console.log(demo1[8]); // output: a 12 // 获取字符串长度 13 console.log(demo1.length); // output: 19 14 // 定位字符串中某一个指定的字符首次出现的位置 15 console.log(demo1.indexOf('c')); // output: 6 16 console.log(demo1.indexOf("is")); // output: 3 17 // 查找字符串中特定的字符，并且如果找到的话，则返回这个字符 18 console.log(demo1.match("call")); // output: call 19 // 字符串中用某些字符替换另一些字符 20 console.log(demo1.replace("is", "was")); // output: He was called "Tom". 21 // 字符串大小写转换 22 console.log(demo1.toUpperCase()); // output: HE IS CALLED "TOM". 23 console.log(demo1.toLowerCase()); // output: he is called "tom". 24 // 字符串转为数组 25 console.log(demo1.split(" ").length); // output: 4 26 </script> 27 </body> 28 </html>
(4) 类型及转换
1 <!DOCTYPE html> 2 <html> 3 <body> 4 <p>类型及转换</p> 5 <script> 6 // 使用typeof操作符来检测变量的数据类型 7 console.log(typeof "John"); // output: string 8 console.log(typeof 3.14); // output: number 9 console.log(typeof false); // output: boolean 10 console.log(typeof [1,2,3]); // output: object 11 console.log(typeof {id: 1, name: "john"}); // output: object 12 console.log(typeof null); // output: object 13 console.log(typeof undefined); // output: undefined 14 // 值为null(空), 但仍然是一个对象 15 // 任何变量都可以通过设置值为undefined来清空, 此时类型为undefined 16 var tmp1, tmp2 = null, tmp3 = undefined; 17 console.log(typeof tmp1); // output: undefined 18 console.log(typeof tmp2); // output: object 19 console.log(typeof tmp3); // output: undefined 20 // null和underfined的值相等，但类型不等 21 console.log(null == undefined); // output: true 22 console.log(null === undefined); // output: false 23 24 // constructor 属性返回所有JavaScript变量的构造函数 25 console.log("John".constructor); // output: String() { [native code] } 26 console.log((3.14).constructor); // output: Number() { [native code] } 27 console.log(false.constructor); // output: Boolean() { [native code] } 28 console.log([1,2,3,4].constructor); // output: Array() { [native code] } 29 console.log({name:'John', age:34}.constructor); // output: Object() { [native code] } 30 console.log(new Date().constructor); // output: Date() { [native code] } 31 console.log(function () {}.constructor); // output: Function(){ [native code] } 32 // 可以使用constructor属性来查看是对象是否为某一类型 33 function isTheType(param, type) { 34 return param.constructor.toString().indexOf(type) > -1; 35 } 36 console.log(isTheType("John", "String")); // output: true 37 38 // 转换为字符串 39 console.log(String(true)); // output: true 40 console.log(String(123)); // output: 123 41 console.log(String(NaN)); // output: NaN 42 console.log(String(null)); // output: null 43 console.log(String(undefined)); // output: undefined 44 console.log((false).toString()); // output: false 45 console.log((123).toString()); // output: 123 46 console.log((NaN).toString()); // output: NaN 47 // Illegal! console.log((null).toString()); 48 // Illegal! console.log((undefined).toString()); 49 50 // 转换为数字 51 console.log(Number("3.14")); // output: 3.14 52 console.log(Number(true)); // output: 1 53 console.log(Number(false)); // output: 0 54 console.log(Number("")); // output: 0 55 console.log(Number(" ")); // output: 0 56 console.log(Number("abc")); // output: NaN 57 console.log(Number("123abc")); // output: NaN 58 console.log(Number(new Date())); // output: 毫秒数 59 </script> 60 </body> 61 </html>
(5) 变量提升
变量提升：函数声明和变量声明总是会被解释器悄悄地被"提升"到方法体的最顶部。
JavaScript 只有声明的变量会提升，初始化的不会
(6) 严格模式
严格模式下你不能使用未声明的变量
头部用"use strict"声明
(7) 表单验证
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <script> 6 function validateForm() { 7 // 获取form中某个字段的值 8 var x = document.forms["myForm"]["fname"].value; 9 if (x == null || x == "") { 10 alert("First name is request."); 11 return false; 12 } 13 } 14 </script> 15 </head> 16 <body> 17 <form name="myForm" action="www.baidu.com" onsubmit="return validateForm()" method="post"> 18 First name: <input type="text" name="fname" disabled="disabled"> 19 <input type="submit" value="submit"> 20 </form> 21 </body> 22 </html>
