Web学习日志

最新推荐文章于 2022-04-25 23:16:21 发布

愤怒的阿木木

最新推荐文章于 2022-04-25 23:16:21 发布

阅读量330

点赞数 2

分类专栏： web学习日志文章标签： html css javascript

本文链接：https://blog.csdn.net/qq_44364267/article/details/117133517

版权

web学习日志专栏收录该内容

8 篇文章 0 订阅

订阅专栏

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';

八、jQuery

1、jQuery简介

https://jquery.com/

jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers. With a combination of versatility and extensibility, jQuery has changed the way that millions of people write JavaScript.

下载

最新版：3.6
npm view jquery versions  查看jQuery历史版本
npm install jquery  安装最新版 (npm install jquery@版本号)

 第1步：导入jQuery脚本库
 <script src="./node_modules/jquery/dist/jquery.min.js"></script>
 第2步：入门程序
 jQuery库提供了一个核心的工厂函数： jQuery(),工厂函数有一个别名：$()
  $(document).ready(function(){
      console.log('hello:jQuery');
 })
 $(function(){
     console.log('hello:jQuery.........');
 })

2、ready事件与load事件

可以简单将ready事件理解为窗体的load事件，但ready事件相对load做了一些优化处理，有一些细微差异

window的load事件只能注册一个（如果注册多个，最后一个有效）； jQuery的ready事件可以注册多个;
load事件表示窗体加载完毕（文档所有数据加载完），ready事件在DOM行成就开发执行;

写jQuery程序从ready事件开始;写jQuery脚本2步：选择对象 ----- do something

3、jQuery对象与原生脚本对象

jQuery对象与原生脚本对象的API是不能相互使用的，可以将jQuery对象转为原生脚本对象，也可以将原生的脚本对象转为jQuery对象；

window.onload =function(){
   // document.querySelector('div').innerHTML='hello:div';
   //document.querySelector('div').html('hello')
   let div = document.querySelector('div');//原生js对象;
   //原生脚本对象转jQuery；
   let $div1 = $(div); //$div1:jQuery对象;
   $div1.html('this is div');
}
$(function(){
    //$('div').html('hello:this is div');
    //jQuery对象转原生js对象;
    let $div = $('div');//得到一个jQuery对象,本质是一个集合对象;
    console.log($div.length);
    //console.log($div.size())
    //let div = document.querySelector('div');
   //let div = $div.get(0);
    let div = $div[0];
    //console.log(div);
    // div.innerHTML ="hello this is div";
})

4、jQuery选择器

jQuery选择文档中的标签对象使用工厂函数 ---- 选择的语法与document.querySelector完全一样,jQuery选择器语法是很复杂的

id选择器
标签选择器
类选择器
层级选择器
支持多个选择器集合查询

5、jQuery Dom操作

基于jQuery手册查询API，再测试

样式修改
属性值修改
内容修改
DOM 节点的添加、删除
元素的查询

6、注册事件

事件与原生的事件理解是一样的;注册方式不一样

jQuery对象.事件(fn);

jQuery对象.on(事件名,fn);
jQuery对象.bind(事件名,fn);

…

7、Ajax

作为后端程序员，对jQuery框架的使用主要用的就是ajax实现异步调用;

$.ajax(option);

$.get(option);

$.post(option);

$.getJSON(option)

jQuery特效

作业：使用jQuery实现表单验证 [附加：可以使用jQuery第三方表单验证插件实现验证 — formValidator]

http://shouce.jb51.net/phpcms/PHPCMS/formvalidator.html
https://www.cnblogs.com/loyung/p/4689916.html
https://www.jb51.net/article/77632.htm

愤怒的阿木木

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
5
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录