WEB第五天
一、JavaScript的认知
JavaScript（JS）是前端网页的脚本语言， 与Python相似，不同的是js只能由浏览器解析， Python脚本由Python交互环境（interpreter）来解析并执行的。
js目前浏览器支持 5.x 和6.x两个版本， 即js5和js6语法( ECMAScript 5或6 )。
js包含三大内容（部分）：
-
ECMAScript 基本语法（数据类型、变量与常量、函数定义、分支、循环、对象、内置函数等）
-
BOM 针对浏览器（Browser Object Model）的操作提供相关对象和函数。
-
DOM（Document Object Model） 针对当前网页中的元素（标签）提供相关的对象和函数来改变现有或新增网页的内容。
二、JavaScript基础
2.1 第一个js程序脚本
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>第一个JavaScript脚本</title>
<style>
.danger{
color: red;
}
</style>
</head>
<body>
<script type="text/javascript">
document.write('Hello, JavaScript!');
console.log('第一个javascript');
</script>
<script>
document.write('<h3 class="danger">当前页面中输出的第二个内容</h3>')
</script>
</body>
</html>
第一行内容作用： 标识当前文件类型是html文件类型，且是HTML5的标准。
window.document 和document两种写法都是一个对象，指的是document（当前网页文档对象）。
console 对象控制器输出的对象，使用log()函数来输出调试的内容。
以下是html4标准网页文件的第一行的写法。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
2.2 带有事件的输出
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>第一个JavaScript脚本</title>
<style>
.danger {
color: red;
}
img{
width: 50%;
height: 50%;
}
img:active{
width: 60%;
height: 60%;
}
</style>
</head>
<body>
<h1>Haha</h1>
<button onclick="showMV()">显示美女</button>
<script>
function showMV() {
// 显示一张图片或显示一段文字
// 此处的document写（输出）内容时，会重新生成新的页面
document.write('<img src="images/mm5.jpg" width="200" height="200">')
document.write('<img src="images/mm6.jpg" width="200" height="200">')
}
</script>
</body>
</html>
声明函数是： function关键字， 函数也有参数，也有返回值，基本和python的函数定义相同。
【注意】（事件）函数中的document.write()函数会重新生成网页， 即重写网页中的内容。
2.3 基本数据类型
-
String字符串类型
<script> var name = "李晨西" document.write("姓名： <b>"+name+" </b>") //字符串可以拼接 document.write("10" * 2.0) // 20.0 document.write("10" + 20) // 1020 document.write(parseInt("10") + 20) // 30 document.write(name.length) // 3 document.write("<br>"+name.substr(0, 2)) // 李晨， 2表示length长度 document.write("<br>"+name.indexOf('西')) // 2 , 索引从0开始 document.write("<br>"+"hi1888899000disen".split(/\d+/)) // hi,disen </script> -
Boolean类型
真： true
假： false
=== 全比较
== 内容比较
<script> document.write("10" == 10) // true 只比较内容，自动转成相同的类型再比较 document.write("10" === 10 ) // false, 类型不同、内存地址不同 </script> -
数值类型
- parseInt(“11.2”) 将从字符串中查找11这个整数
- parseFloat(“12.56”) 将从字符串查找带小数点的浮点数
- Number(“12.167”) 从字符串查找整数或浮点数，表示两个数值类型，但如果字符串包含非字母时，则返回NaN (Not a number)
<script> document.write(Number("129abc")) // NaN document.write(parseInt("129abc")) // 129 </script> -
对象类型
Object对象， 类似于Python中字典类型, 但属性名不用引号，如：
var person = { name: "disen", age: 20, sex: "男", actions: ["看书", "写Python程序", "监视考试"] }对象的属性访问可以直接使用 “对象名.属性名” 格式，如：
document.write(person.name+"--"+person.actions) -
数组 Array
- 数组类似Python的列表list
- 以 [ ] 方式创建
price_vols = [199, 299, 1, 0.5, 1000]- 以 Array() 类对象方式创建
price_vols = new Array(199, 299, 1, 0.5, 1000)- 数组Array和对象Object可以组合使用
payed_orders = { user_id: "10998" , data: [ { order_id: "990019191", title: "5.18折扣活动购iPhone 10", price: 9999.9, pay_time: '2019-07-31 17:25:21' }, { order_id: "8890019191", title: "6.18折扣活动购iPhone 9s", price: 19999.9, pay_time: '2019-06-31 18:25:21' } ] }数组的访问与Python的列表的访问相同，采用索引下标方式，索引下标是0开始，如访问用户已支持订单的第2单，如：
payed_orders.data[1].price
2.4【扩展】DOM操作
- 查找页面中的标签元素
var dom = document.getElementById(dom_id)
可以声明或定义一个查询元素的函数$, 如：
function $(dom_id) {
// 根据DOM 标签id属性查找标签元素
return document.getElementById(dom_id)
}
- 读取表单的字段域标签的值
$('name').value //查找表单字段标签的id为name的标签，并获取输入的value值
- 设置标签元素的点击事件
如给一个按钮设置一个点击事件， 需要设置标签的onclick属性，如：
<button onclick="show()">=</button>
<script>
function show() {
alert('haha')
}
</script>
- 在指定的标签上显示文本或HTML内容
在指定的标签上显示内容有两个方式，一是使用标签的innerText属性， 另一个是标签的innerHTML属性。
$('result').innerHTML = '<i>Good</i>'
案例分析：模拟计算器的公式和计算结果
<h3>模拟计算器的公式和计算结果</h3>
<script>
// 模拟计算器的公式和计算结果
// 74+32 = 106
com_str = "74+32"
document.write(com_str+"="+eval(com_str))
age = 10
age += 10
document.write("<br>age--: "+ age-- ) // age -= 1, 当前行的age是原值，下一行自减的结果才会生效
document.write("<br> --age: "+ --age) // age -=1 , 当前行的age自减的表达式生效
document.write("<br> age: "+ age)
</script>
<hr>
<input type="text" id="a">
<select id="opt">
<option>+</option>
<option>-</option>
<option>*</option>
<option>/</option>
</select>
<input type="text" id="b">
<button onclick="equals_result()">=</button>
<span id="result"></span>
<script>
function $(dom_id) {
// 根据DOM 标签id属性查找标签元素
return document.getElementById(dom_id)
}
function equals_result() {
opt_str =""+ $('a').value + $('opt').value + $('b').value
// result.innerText = eval(opt_str)
$('result').innerHTML = eval(opt_str)
}
</script>
2.4 分支语句
2.4.1 switch分支
语法：
switch(表达式){
case 值1：
语句
[break]
case 值2：
语句
[break]
case 值n：
语句
[break]
default:
语句
}
表达式一般是数值，javascript也支持字符串。case 后的值与表达式是等值条件比较，如果为true则执行case分支下的语句，如果为false则继续向下匹配。
【注意】在case语句中，如果出现break关键字，则退出switch语句，表示分支判断结束。
案例分析： 阶段等级判断
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>分支语句</title>
</head>
<body>
<h3>swich-case分支</h3>
<input id="level"> <button onclick="show()">显示</button>
<br>
<span id="result"></span>
<script>
function show() {
// 根据标签的id属性查找标签元素
let level_element = document.getElementById('level')
// 获取输入文本框的内容，并尝试转成int类型
level_val = parseInt(level_element.value)
// alert(level_element.value)
/*
* level 的值范围： [1, 10]
* 1-4 第一阶段
* 5-6 第二阶段
* 7-9 第三阶段
* 10- 最高阶段
* */
let result_e = document.getElementById('result')
result_e.innerHTML = "" // 清空上次的结果提示
// 判断输入的level值是否小于等于0，如果等于0时，
// 则显示红色警告信息
if(level_val <= 0){
result_e.innerHTML = "<i style='color:red'> 输入的level值必须大于0 </i>"
return
}
switch(level_val){
case 1:
case 2:
case 3:
case 4:
result_e.innerHTML = "第一阶段"
break;
case 5:
case 6:
result_e.innerHTML = "第二阶段"
break;
case 7:
case 8:
case 9:
result_e.innerHTML = "第三阶段"
break;
default:
result_e.innerHTML = "最高阶段"
}
}
</script>
</body>
</html>
2.4.2 if语句
语法1-单分支：
if(条件表达式){
为真true时的语句
}
语法2-双分支：
if(条件表达式){
为真true时的语句
}else{
为假false时的语句
}
语法3- 多分支：
if(条件表达式){
为真true时的语句
}else if(条件表达式2){
条件表达式2为真true时的语句
}else if(条件表达式3){
条件表达式3为真true时的语句
}else{
条件表达式3为假false时的语句
}
案例分析： 猜一猜
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>猜一猜送美女</title>
<style>
.danger {
color: darkred;
}
.warn {
color: orange;
}
.info {
color: green;
}
</style>
</head>
<body>
<h3>使用Math.random()函数与if判断</h3>
<input id="num" placeholder="请输入1到100之间整数">
<button onclick="guest()">猜猜看</button>
<br>
<div id="result"></div>
<script>
var rand_num = parseInt(Math.random()*100+1)
console.log(rand_num)
function guest() {
// 查询程序中使用的标签元素
let num_e = document.getElementById('num')
let result_e = document.getElementById('result')
// 判断数值是否超出范围[1, 100]
num_v = parseInt(num_e.value)
// && 与 ， || 或 ， ! 非
if(num_v <=0 || num_v >100){
result_e.innerHTML = "<b class='.danger'>输入的值超出了范围</b>"
}else if(num_v == rand_num){
img_index = Math.random()>0.5 ? 5: 6
img_html = "<br><img src='images/mm"+img_index+".jpg' with='200' height='200'>"
result_e.innerHTML = "<b class='.info'>猜中了</b>" + img_html
}else if(Math.abs(num_v-rand_num) < 10){
result_e.innerHTML = "<b class='.warn'>小伙子加油，还差一点点</b>"
}else if(Math.abs(num_v-rand_num) < 50){
result_e.innerHTML = "<b class='.warn'>奋斗的人有盼着，差的有点大</b>"
}else if(Math.abs(num_v-rand_num) < 80){
result_e.innerHTML = "<b class='.warn'>你是一个不靠谱的人，离我远点</b>"
}else{
result_e.innerHTML = "<b class='.warn'>再试试吧</b>"
}
}
</script>
</body>
</html>
说明：
- Math.random()函数是生成[0, 1)之间的小数， 对于输入的整数的比较时，需要转成int类型
- Math.random()>0.5 ? 5: 6 是一个三元运算，即Math.random()>0.5为true时，选择5， 否则选择6，格式：
条件表达式 ？为true时的值 : 为false时的值
三、作业
- 编写一个计算器的页面并实现相关的功能, 要求css和加减乘除等功能必须实现。
- 复习正则表达式，正则中贪婪与贪婪模式的切换及 ()、[]、{ } 三种括号的区别。
- 写出dj.com京东首页的布局
- 将dj.com京东首页中分类数据编写成javascript数组与对象组合的数据结构，将数据写入到.json格式的文件中。如:
[
{
"lable": "家用电器",
"top": ['家电馆','家电专卖店', '家电服务']，
"child": [
{
"label": "电视",
"child": ["超薄电视", "全面屏电视"]
}
]
}
]
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
