<!-- 1 js三种存在位置 --> <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>三种存在位置</title> </head> <!-- 1.行间式:js代码块需要出现在事件中 --> <!-- <body id="body" onload="body.style.backgroundColor='red'"> --> <!-- <body id="body" onload="alert('hello wolrd')"> --> <body id="body"> <!-- 2.内联式:js代码块需要出现在script标签中 --> <script type="text/javascript"> body.style.backgroundColor='orange' </script>
<!-- 3.外联式:js代码块出现在外部js文件中,需要通过script标签src属性进行链接 --> <script type="text/javascript" src="./js/01.js"></script>
<!-- 总结 --> <!-- 三种方式不存在优先级,谁在逻辑下方,谁起作用 -->
</body> </html> 2.解释性语言决定js位置 <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>js位置</title> <!-- 位置② --> <!-- 出现在head标签底部：依赖型JS库 --> <!-- <script> bd.style.backgroundColor = '#0ff'; </script> -->
<script> var color = "cyan"; </script> </head> <!-- 内联使用场景:某页面的特有逻辑,可以书写该该页面的script标签内 --> <!-- 外联使用场景:适用于团队开发,js代码具有复用性 -->
<!-- js为解释性语言 --> <body id="bd"> <!-- 位置① --> <!-- <script> bd.style.backgroundColor = '#0ff'; </script> -->
<!-- 需求1:操作div,让其字体颜色变为红色 => 功能(style.color) => 尽可能下移 --> <!-- 方法:在body下面 script里打入div.style.color = 'red'; --> <!-- 需求2:让div背景颜色变为提供的颜色 => 依赖(color变量) => 尽可能上移 --> <!-- 方法1：先在body里onload="div.style.backgroundColor= color" 在打入var color ='yellow'改变颜色; --> <!-- 方法2：先在body里script内打入div.style.backgroundColor = color;然后在在head里的script内打入 var color = '颜色' --> <div id="div">123</div> <!-- 需要使用color变量这个资源 --> <script> div.style.backgroundColor = color; </script>
</body> <!-- 位置③ --> <!-- 出现在body标签底部：功能型JS脚本 --> <!-- <script> bd.style.backgroundColor = '#0ff'; </script> -->
<!-- 完成需求1 --> <script> div.style.color = 'red'; </script>
<!-- 外联出现位置同内联 --> <!-- 拥有src的外联script标签,会自动屏蔽标签内部的代码块 --> <script src="js/02.js"> alert(123) </script>
</html>
3、变量的定义 <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>变量的定义</title> </head> <body> 变量的定义 </body> <script> // script标签内,代表js,采用的是js语法
// 1.简单规范 // 单行注释 /* 多行注释 */
// 语句以分号结尾
// 2.变量的定义: 声明 + 初始化
// ES5变量的定义
// 注:ES5标准下无块级作用域,只有方法可以产生实际的局部作用域 // 无块级作用域的局部变量 var a = 10; // alert(a); // 全局变量 b = 20; // alert(b);
// eg:验证 // 方法的自调用,就会产生一个局部作用域 (function () { var x = 10; y = 20; })()
// alert(x) 报错,x只能在局部作用域中使用 // alert(y); 正常使用 // x已经被修改了，不能用了
// 块级作用域 { var n = 10; // 无视块级作用域 m = 20; // 全局变量,更无视块级作用域 } // alert(n) // 可以 // alert(m) // 可以
// ES6变量的定义
// 有块级作用域的局部变量 let aa = 100; // alert(aa); // 有块级作用域的常量 const bb = 200; // alert(bb);
{ let xx = 100; const yy = 200; } // alert(xx); // 无法访问 // alert(yy); // 无法访问 // 函数产生的局部作用域同该情况
let nn = 100; nn = 200; // alert(nn); // 200
// 命名规范:常量名全大写 const MM = 1000; // MM = 2000; // 常量值不允许更改 // alert(MM);
// 3.变量名的命名规范 // ① 可以由字母,数字,_,$组成,但是不能以数字开头(可以包含中文,采用驼峰命名法) // ② 区分大小写 // ③ 不能与关键字保留字重名
</script> </html>
4、三种弹出框 <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>三种弹出框</title> </head> <body> 三种弹出框 </body> <script> // 弹出框: 一个弹出框只能弹出一条信息 // alert("普通弹出框", "呵呵"); // 呵呵被忽略了
// 确认框 // var res = confirm("你是男的吗?"); // true | false // alert(res);
// 输入框 // var res = prompt("请输入你的小名!"); // 确定为输入值, 取消为null // alert(res);
</script> </html>
5、四种调试方式 <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>四种调试方式</title> </head> <body> 四种调试方式 </body> <script type="text/javascript"> var a = 10; var b = 20;
// 四种查看变量的值的方式
// 弹出框的显示方式 // alert(a); // alert(b);
// 在网页检查中Console的里面显示 // console.log(a); // console.log(b); // 在网页上显示出来 // document.write(a); // document.write(b);
// 断点调试 // 在网页检查中sources中俩个符号调试 </script> </html>
6、数据类型 <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>数据类型</title> </head> <body> 数据类型 </body> <script type="text/javascript"> // 一. 值类型 // 1.number:数字类型 var a = 10; // typeof()查看类型,可以省略() console.log(a, typeof a); // 判断 console.log(typeof a == 'number');
a = 3.14; console.log(a, typeof a);
a = 314e2 console.log(a, typeof a); // 结果会显示31400和类型number
// 2.string:字符串类型 var a = '字符串'; console.log(a, typeof a);
a = "字符串"; console.log(a, typeof a);
// ES6会检测变量的重复定义,报错 // let x = 10; // let x = '10';
// 3.boolean:布尔类型 true|false a = true; console.log(a, typeof a);
// 4.undefined:未定义类型 var b; console.log(b, typeof b); var c = undefined; console.log(c, typeof c);
// 二.引用类型 // 5.function:函数类型 var m = function () {}; console.log(m, typeof m);
// 6.object:对象类型 var obj = {}; console.log(obj, typeof obj);
obj = new Object(); console.log(obj, typeof obj); // 显示{} object
// 判断 // instanceof:对象类型判断 console.log(obj instanceof Object);
// 三.特殊的Object // Number() String() Boolean() Math // 7.null:空对象 var o = null; console.log(o, typeof o); // 判断 console.log(o == null);
// 8.Array:数组对象 o = new Array(1, 2, 3, 4, 5); console.log(o, typeof o); console.log(o instanceof Object); // 判断 console.log(o instanceof Array);
// 9.Date:时间对象 o = new Date(); console.log(o, typeof o);
// 10.RegExp:正则对象 o = new RegExp(); console.log(o, typeof o);
</script> </html>
7、类型转换 <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>类型转换</title> </head> <body> 类型转换 </body> <script> // 类型转换针对 值类型 // number string boolean
// 一.显性转化 // 1. num,bool => str var a = 10; var b = true;
// var c = new String(a); // console.log(c, typeof c); // '10', object
var c = String(a); console.log(c, typeof c); // '10', string c = String(b); console.log(c, typeof c); // 'true', string
c = a.toString(); console.log(c, typeof c); // '10', string c = b.toString(); console.log(c, typeof c); // 'true', string
// 2.bool,str => num var aa = true; var bb = '10';
var cc = Number(aa); console.log(cc, typeof cc); // 1 number cc = Number(bb); console.log(cc, typeof cc); // 10 number
cc = + aa; console.log(cc, typeof cc); // 1 number cc = + bb; console.log(cc, typeof cc); // 10 number
// 针对字符串 cc = parseFloat('3.14.15.16abc'); console.log(cc, typeof cc); // 3.14 cc = parseInt('10.35abc'); // 10 console.log(cc, typeof cc);
// 字符串以非数字开头,结果为NaN // 1.非数字类型 // 2.不与任何数相等,包含自己 // 3.通过isNaN()进行判断 var res = parseInt("abc10def"); console.log(res, isNaN(res)) // 结果 NaN true
// 二.隐性转换(自动转换) // 5 + null // 5 // "5" + null // "5null" // "5" + 1 // "51" // "5" - 1 // 4 console.log("5" - 1); // "" + ? // "?"
</script> </html>
8、运算符 <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>运算符</title> </head> <body> 运算符 </body> <script type="text/javascript"> // 一.算数运算符
var a = 5; var res = a / 2; // 只存在number类型运算 console.log(res); // 2.5
var res = a % 2; console.log(res); // 商为2余1 1
// 自增自减
// 总结: // 1.++/--在前在后,自身值一定改变, a++/++a => a = a + 1 // 2.++/--在前先自运算,再他运算 // 1.++/--在后先他运算,再自运算
// a=5 var res = a++; console.log("res:" + res + ", a:" + a); // 5, 6
// a=6 var res = ++a; console.log("res:" + res + ", a:" + a); // 7, 7
// 二.赋值运算符
// 三.比较运算符 console.log('5' == 5); // true, 值相等即可 console.log('5' === 5); // false, 值与类型均要相等
console.log('5' != 5); // fasle console.log('5' !== 5); // true
// 四.逻辑运算符 // 运算结果为true|false var a = 10; var b = 20; var c = 30; var res = a < b && c == 30; console.log(res); // 真,真 => 真 // 真,假 => 假 // 假,真 => 假 短路 // 假,假 => 假 短路 // &&运算,有假即假,所有前面为假,后面没必要被执行,所以被短路
// 短路 var res = a > b && ++c; console.log(res, c); // c=30
// ||运算,有真即真,所有前面为真,后面没必要被执行,所以被短路 // 真,真 => 真 短路 // 真,假 => 真 短路 // 假,真 => 真 // 假,假 => 假
// !运算,真则假,假则真,负负得正 console.log(!1, !!1);
// 三目运算符(三元运算符) // 结果 = 条件表达式 ? 结果1 : 结果2; // 结果不一样要与表达式有关系,但表达式为真则结果为结果1,反之为结果2, var tq = prompt("天气(晴|雨)") var res = tq == '晴' ? "今天天气挺好" : "请假回家收衣服"; console.log(res);
</script> </html>