JavaScript （JS）
目录
- JS概述
- JS数据类型
- 逻辑判断/流程控制
- 循环
- 内置的函数
- 利用Document抓取HTML元素
- 事件 HTML标签互动
- 例题实操
JS概述
JavaScript：编程语言，脚本语言，依赖于某种容器来运行。
JS是运行在浏览器上的，可以帮助我们去控制页面。
Vue.js react.js jquery.js angular.js node.js（前端的服务器语言）
JS解释器：
火狐（spidermonkey）Chrom、node（v8）Safari（JavaScriptcore）cdge（chakra）
JS写在body结束标签的上方（确保在执行js的时候要加载的元素已经加载完了）
外部引入js：
JS数据类型
-
JS的简单数据类型：
数字（number）：整数，正数，负数，小数
布尔型（boolean）：true or false （1 0）
字符串（string）：“aaa”，“some chinese”
空（null）：没有值
undefined：未定义 -
变量（开发中使用变量 而尽可能少使用字面量，在 JavaScript 新版本中，推出了两个新方式代替 var 定义）：
let：变量用let声明，无法重复使用
const：有let的特点，const声明的变量就是一个常量 -
JS的复杂数据类型：
使用数组函数
使用new 关键字
使用字面量的方式
-
函数：
-
弹窗：
alert(); 警告弹窗confirm(); //let result = confirm(xxx) //有返回值的 确认按钮和取消按钮 代表true和false prompt(); 带有文本框的弹窗 //有返回值 值就是文本框内输入的内容 prompt("ENTER YOUR USERNAME","DESCRIPTION") //DESC 可有可无
逻辑判断/流程控制
- 运算符：
（1）算数运算符
（2）赋值运算符
（3）比较运算符
（4）逻辑运算符
（5）三元运算符（三目运算符）
例题实操
（1）求a和b的最大值
（2）求4个数的最大值，用三元运算符
注意！
+号的特殊性：除了可以进行加法计算之外，连接符
如果先入为主的认定 +号 为连接符，那它就一直是连接符
‘- * / %’： 可以进行类型转换，如果不行，结果为 NaN
字符串拼接
2.逻辑判断：
（1）if…else…
（面试题）
语法：
（2）switch…case
语法：
循环
- For循环：
For循环的特殊写法：
（1）For循环中的 i 可以看作是一个局部变量 (可以在for中使用)
（2）循环条件是可以根据实际情况更改的
（3）当修改循环条件时,要确保循环可以向着终点
（4）开发中，要避免死循环
例题实操：
- For in 循环（能做的事情较少，只能做遍历操作）：
- While 循环：
例题实操：
（1）初始化条件
（2）判断条件
（3）执行循环体
（4）自增 - do…while 循环：
注意！
do…while 和 while 的区别：do…while: 先执行一次，再判断，无论条件是否成立，都至少执行一次
while: 如果条件不成立，一次都不执行
死循环：
总结
内置的函数
- Array：
（1）concat() 连接
（2）join() 设置分隔符连接数组为一个字符串
（3）pop() 删除数组的最后一个元素
（4）sort() 排序，从小到大排序 - Global：
（1）isNaN() 判断一个值 是否 “不是数字”
（2）parseFloat() 把一个整数转换成小数
（3）parseInt() 把一个小数转换成整数
（4）number() 把一个值转换成 number 类型
（5）string() 把其他类型转换成字符串
3.String：
（1）charAt() 取出指定位置的字符
（2）indexOf() 判断指定的字符是否存在，如果存在返回下标，如果不存在返回 -1
（3）lastIndexOf() 从后往前找
（4）replace() 替换字符串
（5）split() 拆分字符串，得到一个数组
（6）subString() 字符串的截取
4.Math：
（1）celi()向上取整
（2）floor()向下取整
（3）round()四舍五入
（4）random()生成一个零到一的随机数
（5）tan() sin cos cot
（6）E PI
5.Date：
（1）newDate()获取当前系统时间
（2）getDate()返回当前日期的日
（3）getHours()返回当前时间中的时（0~23）
（4）getMinutes()返回时间中的分
（5）getSeconds()返回时间中的秒
（6）getTime()获取系统当前时间
（7）getYear()获取年
利用Document抓取HTML元素
1.传统方法：
2.新方法：
事件 HTML标签互动
1.事件： 事件就是当我们和HTML标签元素发生交时产生的行为
2.事件使用示例：
（1）
（2）做一个登陆界面：
注：xxx.value 代表的才是“值”
（3）判断 + innerHTML 使用示例：
例题实操
1.输入年月日 判断这一天是这一年的第几天：
（1）if写法：
（2）switch写法：
2.省市区三级联动：
<body>
<select id="sheng" onchange="setshi()">
<option value="">---请选择省----</option>
<option value="jl" >吉林省</option>
<option value="ln" >辽宁省</option>
</select>
<select id="shi" onchange="setshi1()">
<option>--请选择市----</option>
</select>
<select id="qu">
<option>--请选择区----</option>
</select>
<script>
function setshi(){
let sheng=document.querySelector('#sheng').value;
let shi=document.querySelector('#shi');
let qu=document.querySelector('#qu')
shi.innerHTML='<option>---请选择市----</option>'
qu.innerHTML='<option>--请选择区----</option>'
let htm=shi.innerHTML;
if(sheng == 'jl'){
//追加
htm += '<option value="cc">长春市</option><option value="sp">四平市</option>';
shi.innerHTML=htm;
}
if(sheng=='ln'){
htm += '<option value="sy">沈阳市</option><option value="dl">大连市</option>';
shi.innerHTML=htm;
}
}
function setshi1(){
let shi=document.querySelector('#shi').value;
let qu=document.querySelector('#qu');
qu.innerHTML='<option>--请选择区----</option>'
let htm=qu.innerHTML;
if(shi=='cc'){
htm+='<option value="cyq">朝阳区</option><option value="ngq">南关区</option>'
qu.innerHTML=htm;
}if(shi=='sp'){
htm+='<option value="fmq">丰满区</option><option value="gxq">高新区</option>'
qu.innerHTML=htm;
}if(shi=='dl'){
htm+='<option value="jq">郊区</option><option value="zxq">中心区</option>'
qu.innerHTML=htm;
}if(shi=="sy"){
htm+='<option value="shq">三环区</option><option value="ehq">二环区</option>'
qu.innerHTML=htm;
}
}
</script>
</body>
原创文章，作者：wure，如若转载，请注明出处：https://blog.ytso.com/273901.html