Day006 - 感性认识JavaScript （2018-11
知识点梳理：
-
Web应用后端开发 -- web前端
网络数据采集 -- 爬虫
和前端开发人员交互 -
web前端 = HTML标签 + CSS + JavaScript
HTML标签 - 内容(content)
CSS - 显示(display) - 层叠样式表 （1.就近原则 2.具体性原则 3.重要性原则）
先重要性原则，再具体性原则，再就近原则 -
盒子模型 - Box Model
-
外部样式表 style.css
<link href="style.css" rel="stylesheet">
尽量内容和显示分离（运用：换皮肤换板式）
内部样式表
网站首页用内部样式表，加载快
内嵌样式表 / 行内样式表 -
JavaScript - 行为(behavior)
JavaScript = ECMAScript + BOM + DOM
ES - JavaScript的语法规范 - 5.1（目前稳定版本）
BOM - Browser Object Model - 浏览器对象模型
window对象
DOM - Document Object Model - 文档对象模型
document对象 -
样式表前置，js后置（尽快渲染页面，最后执行js代码）
-
Js和python接近，动态弱类型语言
（在定义变量的时候变量时没有类型的）
动态语言：运行的过程中，对象是可以改变的
面向对象+函数式编程 -
python:生态圈强大 - 数据分析 机器学习 爬虫 人工智能
JavaScript：全栈开发语言 windows桌面运用 移动 PC 浏览器 服务器（Node.js，对CPU利用高） -
Android - Java / Kotlin
iOS - Objective-C / Swift
React Native - 跨平台 - JSX（JavaScript的扩展） -
Allman风格 - FreeBSD - Allman
1TBS风格 - Dennis M. Ritchie(C, Unix)发明的风格 -
while循环 / do-while循环 / for循环
while循环 - 不确定循环的次数
for循环 - 循环的次数是确定的
do-while循环 - 至少要执行一次的循环 -
代码包围：（编辑- 包围）
-
五大浏览器内核：Google Firefox Opera ie Safari
-
LiveScript -- JavaScript
异步加载数据，局部刷新页面
写服务器 -
属性选择器 #div1 input[type=button]
-
Date()类的用法（见下代码）
-
(month < 10 ? '0' : '')
三元条件运算,条件成立取冒号前面的值,条件不成立取冒号后面的值
在python中有类似语法: self.hp = hp if hp > 0 else 0 -
function(){}匿名函数
-
setInterval() 方法可按照指定的周期（以毫秒计）来调用函数或计算表达式。
setInterval(function, milliseconds, param1, param2, ...)
code/function 必需。要调用一个代码串，也可以是一个函数。
milliseconds 必须。周期性执行或调用 code/function 之间的时间间隔，以毫秒计。
返回值: 返回一个 ID（数字），可以将这个ID传递给clearInterval()，clearTimeout() 以取消执行。 -
window.open()打开新窗口
-
window.close()关闭浏览器窗口
-
正则表达式对象.test() 方法用于检测一个字符串是否匹配某个模式.如果字符串中有匹配的值返回 true ，否则返回 false。
-
function func1(){
a = 100; //此种情况,函数执行完后a就会变成全局变量,推荐使用var,var声明的是局部变量
}
全局不变的声明常量
const p = document.getElementById('result') -
margin:0 auto 设置对象上下间距为0，左右自动。
可拆分： margin:0 auto 0 auto（上下）
还可拆分为：margin-left:auto;margin-right:auto;margin-top:0;margin-bottom:0;
设置margin:0 auto样式，是为了让DIV在浏览器中水平居中。布局居中、水平居中，均加入margin:0 auto即可。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
h1{font: 72px/72px arial;}
#bar{color:red;}
.foo{color:green;}
h1{color:blue !important;} /*重要性原则*/
#timer{
width: 350px;
height: 50px;
line-height: 50px;
text-align: center;
color: yellow;
background-color: blue;
float: right;
}
</style>
</head>
<body>
<div id="timer"></div>
<h1 id="bar" class="foo">Hello, world!</h1>
<button type="button" onclick="shutDown()">关闭</button>
<button type="button" onclick="openBaidu()">打开百度</button>
<input type="text" name="车牌号" id="carNo" value="" placeholder="请输入您的车牌号："/>
<button type="button" onclick='showResult()'>查询</button>
<p id="result"></p>
<script>
function showTime(){
// 创建一个列表,用getDay()作为下标取值
var weekdays = ['日', '一', '二', '三', '四', '五', '六']
// Date()构造方法,js调用构造方法需要加new
var now = new Date();
// window.alert(now); // Mon Nov 05 2018 14:15:25 GMT+0800 (中国标准时间)
var year = now.getFullYear();
var month = now.getMonth() + 1; //月份返回的是0-11
var date = now.getDate();
var hour = now.getHours();
var minute = now.getMinutes();
var second = now.getSeconds();
var day = now.getDay(); // getDay()返回星期对象,0-6(0是星期天)
// var timeStr = year + '年' + month + '月' + date + '日' + hour + ':'
// + minute + ':' + second;
// 三元条件运算,条件成立取冒号前面的值,条件不成立取冒号后面的值
// 在python中有类似语法: self.hp = hp if hp > 0 else 0
var timeStr = year + '年' +
(month < 10 ? '0' : '') + month + '月' +
(date < 10 ? '0' : '') + date + '日' +
(hour < 10 ? '0' : '') + hour + ':'
+ (minute < 10 ? '0' : '') + minute
+ ':' + (second < 10 ? '0' : '') + second
// + ' 星期' + weekdays[day];
+ '  星期<b>' + weekdays[day] + '</b>';
// 通过id拿到document对象
var div = document.getElementById('timer');
// div.textContent = timeStr;
div.innerHTML = timeStr; // 如果带了标签和实体替换符,需要用innerHTML
}
// function(){}匿名函数
showTime(); // 处理第一秒空白期的问题
/* setInterval() 方法可按照指定的周期（以毫秒计）来调用函数或计算表达式。
setInterval(function, milliseconds, param1, param2, ...)
code/function 必需。要调用一个代码串，也可以是一个函数。
milliseconds 必须。周期性执行或调用 code/function 之间的时间间隔，以毫秒计。
返回值: 返回一个 ID（数字），可以将这个ID传递给clearInterval()，clearTimeout() 以取消执行。*/
window.setInterval(showTime, 1000);
// 打开百度的函数
// window.open()打开新窗口
function openBaidu(){
window.open("https://www.baidu.com")
}
// 关闭浏览器的函数
// window.close()关闭浏览器窗口
function shutDown(){
if (window.confirm('确定要退出吗？')){
window.close();
}
}
</script>
</body>
</html>
机动车车牌号检测：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>成都机动车限行查询</title>
<style>
#search {
width: 640px;
margin: 0 auto;
text-align: center;
margin-top: 150px;
}
#carno {
display: inline-block;
width: 520px;
height: 36px;
font: 36px/36px arial;
text-align: center;
vertical-align: middle;
border: none;
outline: none;
border-bottom: 1px dotted darkgray;
}
#search input[type=button] {
width: 80px;
height: 36px;
font: 28px/36px arial;
border: none;
color: white;
background-color: red;
vertical-align: middle;
}
#result {
width: 640px;
margin: 0 auto;
text-align: center;
font: 32px/36px arial;
}
</style>
</head>
<body>
<div id="search">
<input type="text" id="carno" placeholder="请输入车牌号">
<input type="button" value="查询" onclick="showResult()">
</div>
<hr>
<p id="result"></p>
<script>
function showResult() {
var input = document.getElementById('carno');
var p = document.getElementById('result');
var carNo = input.value;
var regex = /^[川渝云贵京津沪][A-Z]\s*[0-9A-Z]{5}$/;
if (regex.test(carNo)) {
var digitStr = lastDigit(carNo);
if (digitStr) {
var digit = parseInt(digitStr);
var day = new Date().getDay();
if (digit % 5 == day || digit % 5 == day - 5) {
p.innerHTML += carNo + '今日限行<br>';
} else {
p.innerHTML += carNo + '今日不限行<br>';
}
} else {
p.innerHTML += carNo + '不是有效的车牌号<br>';
}
} else {
p.innerHTML += carNo + '不是有效的车牌号<br>';
}
input.value = '';
}
function lastDigit(str) {
for (var index = str.length - 1; index >= 0; index -= 1) {
var digitStr = str[index];
if (digitStr >= '0' && digitStr <= '9') {
return digitStr;
}
}
return null;
}
</script>
</body>
</html>
