day43 JS初识
今日内容:
HTML: 文档结构
CSS: 修改文档的外观样式
JS:实现页面上的动态
JS文件的引入方式:
1.script标签内写代码
<script> //在这里写你的代码 </script>
2.引入额外的JS文件
<script src="myscript.js"></script>
3.注释(注释是代码之母)
// 这里是单行注释 /* 这里是多行注释 */
4.结束符号
JavaScript中的语句要以分号( ; ) 为结束符.
1.JS的历史及ECMAScript
JS ----> JavaScript(雷峰塔) Java(雷锋)
ECMAScript 一个标准 ES5/ES6
node.js --------> 跑在服务端的JS
2.JS要学习的内容
JS三大部分:
1.基础语法
2.操作浏览器对象 BOM
3.操作文档上的标签 DOM
3.JS导入方式
1.直接写在页面的Script标签内部
2.将JS代码写在单独的一个JS文件,然后通过页面上的Script标签的SRC属性导入
4.JS基本语法
1.数据类型
JavaScript拥有动态的类型------弱类型,一个参数可以赋值不同类型的变量
var x; // x是undined
var x=1; //此时x是数字
var x="alex" //此时x是字符串
1.数字 (number)
parseInt()
parseFloat
NaN ----->Not a Number
JavaScript不区分整型和浮点型,就只有一种数字类型
var a = 12.34; var b = 20; var c = 123e5 //123* 10^5 12300000 var d = 123e-5 //123*10^-5 0.00123
还有一种NaN,表示不是一个数字 (Not a Number).
parseInt("123") // 返回123
parseInt("ABC") //返回NaN,NaN属性是代表非数字的特殊值,用来指定某个值不是数字
parseFloat("123.456") // 返回123.456
2.字符串
var a="Hello"; var b="World"; var c = a + b; console.log(c); // 得到HelloWorld
常用方法:
| 方法 | 说明 |
| .length | 返回长度 |
| .trim() | 移除两端的空白 |
| .trimLeff() |
移除左边的空白 |
| .trimRight | 移除右边的空白 |
| .charAt(n) | 返回第n个字符 |
| .concat() | 拼接 |
| .indexOf(substring,start) | 子序列位置 |
| .substring(from,to) | 根据索引获取子序列 |
| .slice(start,end) | 切片 |
| .toLowerCase() | 小写 |
| .toUpperCase() | 大写 |
| .split(delimiter,limit) | 分隔 |
3.布尔值
true 和 false 都是小写
var a = true; var b = false;
"(空字符串),0,null,undefined,NaN"都是false
4.null
null 表示值是空的,一般在需要指定或清空一个变量时才变量时才会使用,例如 name=null
null 表示变量的值是空
5.undefined
undefined 表示当声明一个变量但未初始化时,该变量的默认值是undefined.还有就是函数无明确的返回值时,返回的也是undefind
null 和 undefined 对比:
null表示变量的值是空,undefined则表示只声明乐变量,但还没有赋值
6.对象
JavaScript中的所有事物都是对象:字符串,数值,数组,函数.....除此之外,JavaScript允许自定义对象
1.数组(列表)--------类似于Python中的列表
var a= [123,"ABC"]; console.log(a[1]); //输出"ABC"
常用方法:
| 方法 | 说明 |
| .length | 数组的大小 |
| .push(ele) | 尾部追加的元素 |
| .pop() | 获取尾部的元素 |
| .unshift(ele) | 头部插入的元素 |
| .shift() | 头部移除的元素 |
| .slice(start,end) | 切片 |
| .reverse() | 反转 |
| .join(seq) | 将数组元素连接成字符串 |
| .concat(val,,,) | 连接数组 |
| .sort() | 排序 |
| .forEach() | 将数组的每个元素传递给回调函数 |
| .splice() | 删除元素,并将向数组添加新元素 |
| .map() | 返回一个数组元素调用函数处理后的值新数组 |
2.自定义对象(字典)
2.运算符
注意 强等于 和 弱等于的区别
1.算术运算符
+ - * / % ++ --
2.比较运算符
> >= < <= !=(不等于) ==(弱等于) ===(强等于) !==( ) 1 == "1" // true 弱等于,会先把类型转换成相同的,只比较数值 1 === "1" //false 强等于,会比较数据类型,也会比较数值
3.赋值运算符
= += -= *= /=
4.逻辑运算符
与: && 或: || 非: !
3.流程控制
1.if else
var a=10; if (a>5){ console.log("yes") } else { console.log("no") }
2.for 循环
for (var i=0; i<10;i++){ console.log(i); }
3.switch
var day = new Date().getDay(); switch (day) { case 0; console.log("Sunday"); break; case 1; console.log("Monday"); break; default; console.log("...") }
4.while
var i = 0; while (i<10) { console.log(i); i++; }
5.三元运算
var a = 1; var b = 2; var c=a > b ? a : b