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>

posted @ 2017-09-11 22:21 Storm_L 阅读(167) 评论(0) 编辑收藏举报

刷新页面返回顶部

Storm_L

JavaScript(1)：Base/Tips

公告