Web学习日志
web前端
安装node， 不是讲node,只是需要用到node中的一个工具：npm工具(node package manager)
前端开发工具：vs code,可以使用其它工具（不限）,用idea也可以;
测试node是否安装成功
node -v
程序：单机版程序、网络版程序; 网络版程序：C/S架构应用程序，B/S架构的应用程序 B(browse)/S架构应用程序客户端是不需要开发的,只需要开发 Server端，并且将Server端的程序部署在Web服务器
URL: http://www.163.com
Web服务器 ：只需要支持解析静态资源信息即可 ---- Http Server | Live Server | Nginx
web应用技术：大前端技术(HTML,CSS**,JavaScript**,jQuery,BootStrap|Ajax|Vue|…)|后端技术(Servlet/JSP)
B/S应用程序访问：基于请求应答模式 (不要直接运行，而是通过浏览器向web服务器请求某一个资源)
一、安装静态服务器
npm install -g live-server
live-server -> C:\Users\Administrator\AppData\Roaming\npm\node_modules\live-server
- 创建一个Web工程（对静态应用，创建一个文件夹即可）
- 部署工程到服务器
- 测试（http://localhost:8080/index.html | http://127.0.0.1:8080/index.html
live-server : 无法加载文件 C:\Users\Administrator\AppData\Roaming\npm\live-server.ps1，因为在此系统上禁止运行脚本。有关详细信息，请参阅 https:/go.micros
oft.com/fwlink/?LinkID=135170 中的 about_Execution_Policies。
所在位置 行:1 字符: 1
+ live-server
+ ~~~~~~~~~~~
+ CategoryInfo : SecurityError: (:) []，PSSecurityException
+ FullyQualifiedErrorId : UnauthorizedAccess
第1步：搜索框 输入 Windos PowerShell，以管理员运行
第2步：输入 set-ExecutionPolicy RemoteSigned 选择 A
[第3步]：通过 get-ExecutionPolicy 查看当前的状态
二、HTML
HTML：Hyper Text Markup Language 超文本标记语言 ， 对常用标签需要能记住并理解其含义即可；HTML文档类型以html或者 htm结尾
HTML要求：能看懂和认识标签（不要求基于标签来设计页面）
三、CSS
CSS：Cascading Style Sheet 层叠样式表，CSS用来美化页面的；此部分要求了解（与美工能进行基本的交流即可）
如何加载样式 ：样式设置位置
- 加载一个外部样式文件（*.css)
- 通过style标签设置样式(一般也放在head标签中)
- 行内样式
一般在head标签中导入
<link rel="stylesheet" href="css/3.css">
<style>
div{
/*
color: blue;
color:rgb(255, 0, 0)
color:#ff0000;
font-weight: bold;
font-size: 20px;
*/
}
</style>
<div style="color:red"></div>
同一个样式尽量不要在多个位置重复设置，如果冲突，优先级：就近原则 ---- 行内样式优先级最高
在项目中，样式一般存贮为一个独立的外部样式文件，再导入到网页面文档中；
样式设置语法
- 标签选择器
- 类选择器
- id选择器
- 选择的层级设置
- 选择器的集体设置
备注：所有的前端框架样式设置语法基本使用标签选择器、类选择器或者采用层级设置
盒子模型
要布局，需要懂两个最基本的技术：盒子模型、浮动技术；
盒子模型：浏览器将每一个标签都渲染成一个盒子（矩形|正方形），标签所占的空间需要用户懂盒子模型
宽度：width(内容占的空间) + border-left + border-right + padding-left + padding-right + maring-left + margin-right
高度：height(内容占的空间) + border-top + border-bottom + padding-top + padding-bottom + maring-top + margin-bottom
备注：控制标签间距margin最好只设到某一个标签上，不要2个都设置(会产生兼容不一致)
浮动样式
浮动：标签飘到其父标签的左侧或者右侧 —解决在一行放多个块级作用域的标签
**小结：**不要求掌握DIV＋CSS 设计页面（但要懂其中的技术）
四、ECMAScript
1、脚本(script)简介
javascript 1995年由Netscape(网景)最先设计出来的，在网景的浏览器中使用（支持通过程序动态的对页面的标签进行操作） ---- 浏览器提供解析JS的引擎，为了脚本语法的标准，Netscape将JS的语法规范提交给ECMA(European Computer Manufacturers Association),ECMA定制了脚本的规范，由于商标javasript不能再用，也为了体现此脚本语法由ECMA定制，所以脚本名称取名：ECMAScript
脚本语法版本：ECMAScript6.0 ----- ES6
DOM：HTML DOM
BOM：Browse Object Model
2、脚本入门
<script>
//脚本
//document.write("hello,world")
//window.alert('hello,world');
</script>
<!--加载外部脚本文件-->
<script src="js/hello.js"></script>
窗体有一个load事件，当窗体加载完毕后，会自动触发此事件;
window.addEventListener('load',function(){
//编写脚本程序;
//第1步：找到id为div1的标签;
let div1 = document.querySelector('#div1');
//第2步：设置标签包裹的数据;
div1.innerHTML ="hello,world";
// Uncaught TypeError: Cannot set property 'innerHTML' of null ,div1对象不存在
//console.log(div1);
//浏览器对标签的解析是自上而下执行的;
});
window.onload =function(){
//编写脚本程序;
//第1步：找到id为div1的标签;
let div1 = document.querySelector('#div1');
//第2步：设置标签包裹的数据;
div1.innerHTML ="hello,world";
// Uncaught TypeError: Cannot set property 'innerHTML' of null ,div1对象不存在
//console.log(div1);
//浏览器对标签的解析是自上而下执行的;
}
3、基本语法
- 变量
- 数据类型
- 运算符
- 流程控制语句
- 函数
- 类
常量与变量
window.onload=function(){
//定义变量:let var; let与var及const定义变量的区别;
let name1="张一";
var name2="张二";
console.log(name1,name2);
for(let i=0;i<10;i++){ //i :for语句块中定义的一个局部变量
//....
}
//console.log("i -> " + i); xxx Uncaught ReferenceError: i is not defined
//语句块;
{
let i = 10;
let j = 20;
console.log(i,j);
}
// console.log(i,j); xxxxx
//常量;
const PI = 3.14;
console.log(PI);
//PI = 3.15;
}
数据类型
三种主要数据类型 ：字符串 | 数值 | 布尔
两种复合数据类型：对象 | 数组
两种特殊数据类型：null ,undefined (定义未赋值);
window.onload=function(){
//测试数居类型;
let name='张一'; //用双引号或者单引号括起来即可;
console.log(name,typeof name);
name=20;
console.log(name,typeof name);
name=true;
console.log(name,typeof name);
//对象：内置对象，自定义对象
let now = new Date();
let sp = document.querySelector('#sp');
//sp.innerHTML = now.toLocaleDateString();
//sp.innerHTML = now.toLocaleTimeString();
//sp.innerHTML = now.toLocaleString();
let year,month,day,hour,minute,second,week,cnweek;
year = now.getFullYear();//得到年份;
month = now.getMonth() + 1;
day = now.getDate();
week = now.getDay();
switch(week){
case 0:
cnweek="星期天";
break;
case 1:
cnweek="星期一";
break;
case 2:
cnweek="星期二";
break;
}
//sp.innerHTML="今天是：" + year + " 年 " + month +" 月 " + day +" 日 " + cnweek;
sp.innerHTML=`今天是：${year } 年 ${month } 月 ${day } 日 ${cnweek }`;//ESC健下的字符;
//null ,undefined;
let div1 = document.querySelector('div1');
console.log("div1：",div1);
console.log(hour,minute,second); //undefined undefined undefined
}
附加：实现一个走动的时间（年月日，时分秒）；
window.onload =function(){
let a = 10; //number;
let b = "10";//string;
//console.log(a==b,a===b);
//动态生成一个表格9行9列（内容,99口决表）;
let div1 = document.querySelector('#div1');
let tb='<table border="1" width="800px" align="center">';
for(let i=1;i<10;i++){
let tr='<tr>';
for(let j=1;j<10;j++){
tr+="<td>"
tr+= i +" * " + j + "=" + i * j;
tr+="</td>"
}
tr+='</tr>';
tb+=tr;
}
tb+='</table>';
div1.innerHTML = tb;
}
附加：给表格的偶数行添加一个背景色
4、函数(function)
函数(fun)： 封封某一段脚本代码的代码块（有名称）,可以被 调用
- 无参无返回值
- 带参带返回值
- ES6支持可以变数量的参数(rest参数)
- 可以将函数直接赋给某一个变量，变量就带表函数本身
- 箭头函数（类似Java语言中的拉姆达表达式）
- 匿名函数
- 闭包
匿名函数：由于没名称，所以不能显示调用**，匿名函数需要自调用**
备注：所有脚本库或者脚本框架都设计成一个匿名函数;
问题：匿名函数执行完后，内部的某一个对象需要保持存活状态？
(function(){
console.log('匿名函数');
window.i =10; //作用域是函数作用域; 提升作用域;
window.fn6 = function(){
alert("fn6");
}
}) ();
5、JSON对象
**JSON：**JavaScript Object Notation； JSON已成为数据交换的标准格式（不同平台，不同技术） | XML
表示单个对象：{ },集合对象：[ ];
let stu ={ "sid":1,"sname":"张一","sgender":"男",scores:[
{"mname":"语文",score:80},
{"mname":"数学",score:98},
{"mname":"英语",score:79}
]};
console.log(stu.sid,stu.sname,stu.sgender);
let stus = [
{ "sid":1,"sname":"张一","sgender":"男"},
{ "sid":2,"sname":"张二","sgender":"男"},
{ "sid":3,"sname":"张三","sgender":"男"}
];
for(let i=0;i<stus.length;i++){
let tmp = stus[i];
console.log(tmp.sid,tmp.sname,tmp.sgender);
}
**小结：**在JS中，批量的数据或者单个数据对象都会选择 JSON
6、类与对象
为了让脚本能开发大型的复杂项目，脚本的新语言对面向对象做了完善（今天的脚本可以理解为是一门面向对象的语言）
ES6之前，要设计类，需要通过函数去实现,在ES6语法引，引入关键字：class
class Student{
//成员属性;
#sname="张一";
#sgender="男";
#sage=20;
//成员构造方法;
// constructor(){
// console.log("类的无参构造方法");
// }
constructor(name,gender,age){
this.#sname = name;
this.#sgender = gender;
this.#sage = age;
console.log("类的带参构造方法");
}
//成员方法;
//GET|Set
getName(){
return this.#sname;
}
setName(name){
this.#sname = name;
}
}
五、DOM
HTML DOM ：在浏览器中加载某一个网页，会自动生成HTML DOM，也是一个倒立的节点树,有且只有一个根元素； DOM是脚本学习的重点，围绕DOM操作
1、联动菜单
实现技术：静态（少）| 基于脚本实现联动效果，基于AJAX实现联动|
document
--createElement
select标签：
--options集合
--selectedIndex;
--option
--text
--value
2、Tab选项卡
脚本改标签样式：通过修改class属性实现，一种是通过修改sytle属性实现
<style>
.tab{width: 500px;border: 1px solid orange;height: 200px;}
.tab ul,.tab li{list-style: none;margin: 0px;padding: 0px;}
.tab .tab-header ul li {float: left;width: 100px;text-align: center;background-color: #ccc;padding: 6px 0px;}
.tab .tab-header ul li a {color: blue;text-decoration: none;display: block;}
.tab .tab-header ul li.hot{background-color: white;border-top: 2px orange solid;padding-top: 4px;}
</style>
<script>
window.onload =function(){
//找到 tab-header中的 li;
let lis = document.querySelectorAll('.tab .tab-header ul li');
let divs = document.querySelectorAll('.tab .tab-body div');
for(let i=0;i<lis.length;i++){
lis[i].addEventListener('click',function(){
//当前选择项为**项;其它项移出样式;
//console.log(this)
for(let j=0;j<lis.length;j++){
lis[j].className=null;
divs[j].style.display='none';
}
this.className='hot';
//与i下标一样的div显示;
divs[i].style.display='block';
})
}
}
</script>
<div class="tab">
<div class="tab-header">
<ul>
<li class="hot"><a href="#">体育</a></li>
<li ><a href="#">财经</a></li>
<li><a href="#">娱乐</a></li>
<li><a href="#">股票</a></li>
<li><a href="#">天气</a></li>
</ul>
</div>
<div class="tab-body">
<div style="display:block;">体育信息</div>
<div style="display: none;">财经信息</div>
<div style="display: none;">娱乐信息</div>
<div style="display: none;">股票信息</div>
<div style="display: none;">天气信息</div>
</div>
</div>
3、伦播图
<style>
.carousel-container{width: 500px;height: 300px; position: relative;}
.carousel-container .carousel-img img {width: 100%;height: 300px;}
img.hot{display: block;}
.carousel-container .carousel-caption span{cursor: pointer;background-color: orange;border-radius:6px;display:inline-block;width: 6px;height: 6px;}
.carousel-container .carousel-caption span.hot{width:18px;}
.carousel-container .carousel-caption {position: absolute;left: 230px;bottom: 5px;}
</style>
<script>
let i = 0;
let timer;
window.onload =function(){
fn();
let spans=document.querySelectorAll('.carousel-container .carousel-caption span');
spans.forEach(function(object,index){
object.addEventListener('click',function(){
clearTimeout(timer);//清除定时器;
i =index;
fn();
});
});
}
function fn(){
let imgs = document.querySelectorAll('.carousel-container .carousel-img img');
let spans=document.querySelectorAll('.carousel-container .carousel-caption span');
for(let j=0;j<4;j++){
imgs[j].style.display='none';
spans[j].className='';
if(j==i){
imgs[j].style.display='block';
spans[j].className='hot';
}
}
i++;
if(i==4){
i =0;
}
timer =setTimeout(fn, 3000); //递归；
}
</script>
<div class="carousel-container">
<div class="carousel-img">
<img src="./../images/1.png" alt="">
<img src="./../images/2.png" alt="" style="display: none;">
<img src="./../images/3.png" alt="" style="display: none;">
<img src="./../images/4.png" alt="" style="display: none;">
</div>
<div class="carousel-caption">
<span class="hot"></span>
<span ></span>
<span></span>
<span></span>
</div>
</div>
4、表单验证（正则)
-
非空验证
-
长度验证
-
密码一致
-
中文字符验证
-
邮箱验证
-
邮政编码
-
手机号验证
-
身份证号验证
正则表达式：数学表达式的名称，计算机直接拿过来用； 此表达式用元字符编写（表达特定函义的字符），正则表达式是一个验证表达式（表达式定义的是规则），用此表达式定义的规则来验证某一个值 ，如果此值与表达式定义匹配，则验证通过，否则验证失败；
对正则表达式：不需要记所有元字符（常见要知道，要理解，剩下的查手册）
5、表格操作
表格有自己独立的一套API，对表格的操作除表格自身API，也可以使用DOM实现（相对来说不太方便．．．．）
表格对象主要API：rows,cells,insertRow(),deleteRow(index), insertCell ,parentNode,previouSibling,nextSibling
６、DOM操作
对文档标签 添加（创建一个标签对象），删除、修改（修改标签属性或者标签内容），查询
查询：
document
-- getElementById(id) //得到单个对象
-- getElementsByName(name);//得到多个对象;
-- getElementsByTagName(tagName);//根据标签名查;
--- querySelector() ;//查询单个对象； 语法为 CSS的语法;
--- querySelectAll()://查询多个对象； 语法也是CSS语法;
备注：根据标签之间的关系查 nextSibling,previouSibling.....
--createElement(tagName) ;//创建标签;
--removeChild
--appendChild
--insertBefore
标签：innerHTML属性 |innerText属
六、BOM
BOM：Browse Object Model** 浏览器对象模型**
window:脚本中最*的对象
window.altert('msg');
window.confirm('');
window.prompt(msg,default);
window.setInterval(fn,time); //按指定的时间重复调用函数
window.clearInterval(obj);
window.setTimeout(fn,time); //只执行一次
window.clearTimeout(obj);
window.open('url','')
//location.href='2.html';
//location.assign('2.html');
history.back(); //后退
history.forward();//前进
history.go(-1)|history.go(1);
七、样式操作
通过脚本动态改标签样式，主要2种方式,一种是通过标签对象的sytle属性修改，一个是通过标签的className属性改;
let div = document.querySelector('div');
div.style.color='';
div.className='className';
上一篇： PHP菜鸟入门之简单的登录注册
下一篇： Cookie简单读写