【JavaWeb】前端学习

HTML：
HTML（HyperText Markup Language)：超文本标记语言。
·超文本：超越了文本的限制，比普通文本更强大。除了文字信息，还可以定义图片、音频、视频等内容。
·标记语言：由标签构成的语言
HTML标签都是预定义好的。例如：使用<a>展示超链接，使用<img>展示图片，<video>展示视频。
HTML代码直接在浏览器中运行，HTML标签由浏览器解析。

CSS：
CSS(Cascading Style Sheet)：层叠样式表，用于控制页面的样式（表现）。

HTML、CSS

标题排版

图片标签：<img>
        ·src：指定图像的url（绝对路径/相对路径）
        ·width：图像的宽度（像素/相对于父元素的百分比）
        ·helght：图像的高度（像素/相对于父元素的百分比）
标题标签：<h1>-<h6>
水平线标签：<hr>

<!-- 文档类型为html -->
<!DOCTYPE html>
<html lang="en">
<head>
    <!-- 字符集为UTF-8 -->
    <meta charset="UTF-8">
    <!-- 浏览器的兼容性 -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>焦点访谈
</title>
</head>
<body>
    <!-- img标签：
    src:图片资源路径
    width：宽度（px,像素；%，相对于父元素的百分比）
    height：高度（px,像素；%，相对于父元素的百分比）

    路径书写方式
        绝对路径：
            1.绝对磁盘路径:(D:/xxxx)

            2.绝对网络路径(https://xxxx)
        
        相对路径：从当前文件开始查找（推荐）
            ./ :当前目录，./可以省略
            ../:上一级目录
-->
    <img src="./img/news_logo.png">新浪政务>正文
    <h1>焦点访谈</h1>

    <hr>
    2023年03月02日 21:50 xx网
    <hr>
</body>
</html>

标题样式

CSS引入方式：
·行内样式：写在标签的style属性中（不推荐）
·内嵌样式：写在style标签中（可以写在页面任何位置，但通常约定写在head标签中）
·外联样式：写在一个单独的.css文件中（需要通过 link 标签在网页中引入）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>焦点访谈
    </title>
    <!-- 方式二：内嵌样式 -->
    <style>
        h1{
            /* color: orangered; */
            /* color:rgb(255, 0, 0); */
            color:#4D4F53;
        }
    </style>

    <!-- 方式三：外联样式 -->
    <link rel="stylesheet" href="css/news.css">

</head>
  
</body>
    <img src="./img/news_logo.png">新浪政务>正文

    <!-- 方式一：行内样式 -->
    <!-- <h1 style="color:orangered">焦点访谈</h1> -->

    <h1>焦点访谈</h1>

    <hr>
    2023年03月02日 21:50 xx网
    <hr>
</body>
</html>

h1{
    color: orangered;
}

颜色表示形式：

表示方式	表示含义	取值
关键字	预定义的颜色名	red、 green. blue. . .
rgb表示法	红绿蓝三原色。每项取值范围:0-255	rgb(0,0,0). rgb( 255,255,255). rgb ( 255,0,0)
十六进制表示法	开头，将数字转换或十六进制表示	#00000、#ff0000、#ccccc,简写:#000、#ccc

CSS选择器：用来选取需要设置样式的元素（标签）

元素选择器

元素名称{
color: red;
}

h1 {

color: red;

}

<h1> Hello css </h1>

id选择器

#id属性值{

color : red;
}

#id {

color: red;

}

<h1> id = "hid"> CSS id Selector</h1>

类选择器

.class属性值{

color : red;

}

.cls {

color: red;

}

<h1 class = "cls">CSS class Selector</h1>

·优先级：id选择器 > 类选择器 > 元素选择器

CSS属性

·color:设置文本的颜色
·font-siz:字体大小（注意：记得加px）

<span>标签
<span>是一个在开发网页时大量会用到的没有语义的布局标签
特点：一行可以显示多个(组合行内元素)，宽度和高度默认由内容撑开

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>焦点访谈
    </title>
    <style>
        h1{
            color: #4D4F53;
        }

        /* 元素选择器 */
        /* span{
            color: #968D92;
        } */

        /* 类选择器 */
        /* .cls{
            color: #968D92;
        } */

        /* ID选择器 */
        #time{
            color: #968D92;
            font-size: 13px;/* 设置字体大小 */
        }
    </style>
</head>

<body>   
    <img src="./img/news_logo.png">新浪政务>正文

    <h1>焦点访谈</h1>

    <hr>
    <span class="cls" id="time">2023年03月02日 21:50</span>  <span>xx网</span>
    <hr>

</body>
</html>

超链接

·标签:
<a>-</a>
·属性:
href：指定资源访问的url
target：指定在何处打开资源链接
_self：默认值，在当前页面打开
_blank: 在空白页面打开

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>焦点访谈
    </title>
    <style>
        h1{
            color: #4D4F53;
        }

        #time{
            color: #968D92;
            font-size: 13px;/* 设置字体大小 */
        }

        a{
            color: black;
           /* text-decoration:规定添加到文本的修饰，none表示定义标准的文本*/
            text-decoration: none;/* 设置文本为一个标准的文本 */
        }
    </style>
</head>
    
</body>
    <img src="./img/news_logo.png"> <a href="http://gov.sina.com.cn/" target="_self">新浪政务</a> >正文

    <h1>焦点访谈</h1>

    <hr>
    <span class="cls" id="time">2023年03月02日 21:50</span>  <span> <a href="https://news.cctv.com/2023/03/02/ARTIUCKFf9kE9eXgYE46ugx3230302.shtml" target="_blank">xx网</a> </span>
    <hr>

</body>
</html>

正文排版

·视频标签：<video>
        · src：规定视频的url
        · controls：显示播放控件
        · width：播放器的宽度
        · height：播放器的高度
·音频标签：<audio>
        · src：规定音频的url
        · controls：显示播放控件
·换行标签:  <br>
·段落标签：<p>
·文本加粗标签：<b>/<strong>
注意：在HTML中无论输入多少个空格，只会显示一个。可以使用空格占位符：&nbsp；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>焦点访谈
    </title>
    <style>
        h1{
            color: #4D4F53;
        }

        #time{
            color: #968D92;
            font-size: 13px;
        }

        a{
            color: black;
            text-decoration: none;
        }

        p{
            text-indent: 35px;/* 设置首行缩进 */
            line-height: 40px;/* 设置行高 */
        }

        #plast{
            text-align: right;/* 对齐方式 */
        }

        #center{
            width: 65%;
            /* margin: 0% 17.5% 0% 17.5%;外边距, 上 右 下 左 */
            margin: 0 auto;
        }
    </style>
</head>
    
</body>

<div id="center">
    <img src="./img/news_logo.png"> <a href="http://gov.sina.com.cn/" target="_self">新浪政务</a> >正文

    <h1>焦点访谈</h1>

    <hr>
    <span class="cls" id="time">2023年03月02日 21:50</span> <span> <a
            href="https://news.cctv.com/2023/03/02/ARTIUCKFf9kE9eXgYE46ugx3230302.shtml" target="_blank">xx网</a> </span>
    <hr>

    <!-- 正文 -->
    <!-- 视频 -->
    <video src="video/1.mp4" controls width="950px"></video>

    <!-- 音频 -->
    <!-- <audio src="audio/1.mp3" controls></audio> -->

    <p>
        <b>xx网消息</b> 连续八年1.3万亿斤，这个沉甸甸的数据是如何取得的呢？
    </p>

    <p>
        人勤春来早，春耕农事忙。立春之后，由南到北，我国春耕春管工作陆续展开，春天的田野处处生机盎然。
    </p>

    <img src="img/1.jpg">

    <p>
        今年，我国启动了新一轮千亿斤粮食产能提升行动，这是一个新的起点。2015年以来，我国粮食产量连续8年稳定在1.3万亿斤以上，人
        均粮食占有量始终稳稳高于国际公认的400公斤粮食安全线。从十年前的约12200亿斤到2022年的约13700亿斤，粮食产量提高了1500亿斤。
    </p>

    <img src="img/2.jpg">

    <p>
        中国式现代化一个重要的中国特色是人口规模巨大的现代化。我们粮食生产的发展，意味着我们要立足国内，解决14亿多人吃饭的问
        题。仓廪实，天下安。保障粮食安全是一个永恒的课题，任何时候都不能放松。亿万中国人
        民辛勤耕耘、不懈奋斗，我们就一定能够牢牢守住粮食安全这一“国之大者”，把中国人的饭碗牢牢端在自己手中，夯实中国式现代化基础。
    </p>

    <p id="plast">
        责任编辑：王树淼 SN242
    </p>
</div>
</body>
</html>

页面布局

·盒子：页面中所有的元素（标签），都可以看做是一个盒子，由盒子将页面中的元素包含在一个矩形区域内，通过盒子的视角更方便的进行页面布局
·CSS盒子模型组成：内容区域（content）、内边距区域（padding）、边框区城（border）、外边距区域（margin）

·布局标签：实际开发网页中，会大量频繁的使用div和span这两个没有语义的布局标签。
·标签：<div> <span>
·特点：
        ·div标签：一行只显示一个（独占一行）
                ·宽度默认是父元素的宽度，高度默认由内容撑开
          ·可以设置宽高（width、height）
        ·span标签：
                · 一行可以显示多个
                ·宽度和高度默认由内容撑开
                ·不可以设置宽高（width、height）

注意：如果只需要设置某一个方位的边框、内边距、外边距，可以在属性名后加上-位置，如：padding-top、padding-left、padding-right …

#center{
            width: 65%;
            /* margin: 0% 17.5% 0% 17.5%;外边距, 上 右 下 左 */
            margin: 0 auto;
        }

表格标签

· 场景：在网页中以表格（行、列）形式整齐展示数据，如：班级表。
· 标签：

标签	描述	属性/备注
<table>	定义表格整体，可以包裹多个<tr>	border:规定表格边框的宽度 width:规定表恪的宽度 cellspacing:规定单元之间的空间。
<tr>	表格的行，可以包裹多个<td>
<td>	表格单元格(普通)，可以包裹内容	如昊是表头单元格，可以替换为<th>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML-表格</title>
    <style>
        td {
            text-align: center; /* 单元格内容居中展示 */
        }
    </style>
</head>
<body>
    
    <table border="1px" cellspacing="0"  width="600px">
        <tr>
            <th>序号</th>
            <th>品牌Logo</th>
            <th>品牌名称</th>
            <th>企业名称</th>
        </tr>
        <tr>
            <td>1</td>
            <td> <img src="img/huawei.jpg" width="100px"> </td>
            <td>华为</td>
            <td>华为技术有限公司</td>
        </tr>
        <tr>
            <td>2</td>
            <td> <img src="img/alibaba.jpg"  width="100px"> </td>
            <td>阿里</td>
            <td>阿里巴巴集团控股有限公司</td>
        </tr>
    </table>

</body>
</html>

表单标签

· 场景：在网页中主要负责数据采集功能，如注册、登录等数据采集。
· 标签：<form>
· 表单项：不同类型的 input 元素、下拉列表、文本域等。
        · <input>：定义表单项，通过type属性控制输入形式
        · <select>：定义下拉列表
        · <textareap>：定义文本域
· 属性：
        · action：规定当提交表单时向何处发送表单数据，URL
        · method：规定用于发送表单数据的方式。
                · get：表单数据拼接在ur后面，?username=java,大小有限制
· post：表单数据在请求体中携带，大小没有限制

注意：表单项必须有name属性才可以提交。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML-表单</title>
</head>
<body>
    <!-- 
    form表单属性: 
        action: 表单提交的url, 往何处提交数据 . 如果不指定, 默认提交到当前页面
        method: 表单的提交方式 .
            get: 在url后面拼接表单数据, 比如: ?username=Tom&age=12 , url长度有限制 . 默认值
            post: 在消息体(请求体)中传递的, 参数大小无限制的.
    -->   

    <form action="" method="post">
        用户名: <input type="text" name="username">
        年龄: <input type="text" name="age">

        <input type="submit" value="提交">
    </form>

</body>
</html>

表单标签-表单项

· 表单项：
        · <input>：定义表单项，通过type属性控制输入形式
        · <select>：定义下拉列表
        · <textareap>：定义文本域

type取值	描述	形式
text	默认值，定义单行的输入字段
password	定义密码字段
radio	定义单选按钮
checkbox	定义复选框
file	定义文件上传按钮
date/time/ datetime-local	定义日期/时间/日期时间
number	定义数字输入框
email	定义邮件输入框
hidden	定义隐藏域
submit / reset / button	定义提交按钮/重置按钮/可点击按钮

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML-表单项标签</title>
</head>
<body>

<!-- value: 表单项提交的值 -->
<label action="" method="post">
     姓名: <input type="text" name="name"> <br><br>
     密码: <input type="password" name="password"> <br><br> 
     性别: <label><input type="radio" name="gender" value="1"> 男 </label>
          <label><input type="radio" name="gender" value="2"> 女 </label> <br><br>
     爱好: <label><input type="checkbox" name="hobby" value="java"> java </label>
          <label><input type="checkbox" name="hobby" value="game"> game </label>
          <label><input type="checkbox" name="hobby" value="sing"> sing </label> <br><br>
     图像: <input type="file" name="image">  <br><br>
     生日: <input type="date" name="birthday"> <br><br>
     时间: <input type="time" name="time"> <br><br>
     日期时间: <input type="datetime-local" name="datetime"> <br><br>
     邮箱: <input type="email" name="email"> <br><br>
     年龄: <input type="number" name="age"> <br><br>
     学历: <select name="degree">
               <option value="">----------- 请选择 -----------</option>
               <option value="1">大专</option>
               <option value="2">本科</option>
               <option value="3">硕士</option>
               <option value="4">博士</option>
          </select>  <br><br>
     描述: <textarea name="description" cols="30" rows="10"></textarea>  <br><br>
     <input type="hidden" name="id" value="1">

     <!-- 表单常见按钮 -->
     <input type="button" value="按钮">
     <input type="reset" value="重置"> 
     <input type="submit" value="提交">   
     <br>
</form>

</body>
</html>

JS

什么是JavaScript?

JavaScript（简称：JS）是一门跨平台、面向对象的脚本语言。是用来控制网页行为的，它能使网页可交互。
JavaScript和Java是完全不同的语言，不论是概念还是设计，但是基础语法类似。
JavaScript在1995年由Brendan Eich发明，并于1997年成为ECMA标准。
ECMAScript 6(E56)是最新的JavaScript版本（发布于2015年）.

JavaScript引入方式

· 内部脚本：将JS代码定义在HTML页面中
        · JavaScript代码必须位于<script</script>标签之间
        · 在HTML文档中，可以在任意地方，放置任意数量的<script>
        · 一般会把脚本置于<body>元素的底部，可改善显示速度

· 外部脚本：将JS代码定义在外部JS文件中，然后引入到HTML页面中
· 外部JS文件中，只包含JS代码，不包含<script>标签
· <scripp>标签不能自闭合

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JS-引入方式</title>
    <!-- <script>
        alert("Hello JS");//定义弹出框
    </script> -->
</head>
<body>
    
    <!-- 内部脚本 -->
    <!-- <script>
        alert("Hello JS");//定义弹出框
    </script> -->
    
    <!-- 外部脚本 -->
    <script src="js/demo.js"></script>
</body>
</html>

<!-- <script>
    alert("Hello JS");//定义弹出框
</script> -->

书写语法

· 区分大小写：与Java一样，变量名、函数名以及其他一切东西都是区分大小写的
· 每行结尾的分号可有可无
· 注释：
· 单行注释：//注释内容
· 多行注释：/*注释内容*/
· 大括号表示代码块

输出语句

使用 window.alert() 写入警告框
使用 document.write() 写入HTML输出
使用 console.log() 写入浏览器控制台

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JS-基本语法</title>
</head>
<body>
    
</body>
    
<script>
    /* alert("JS"); */

    //方式一：弹出警告框
    window.alert("hello js");

    //方式二：写入html页面中
    document.write("hello js");

    //方式三：控制台输出
    console.log("hello js");
</script>
</html>

变量

· Javascript 中用 var 关键字(variable 的缩写）来声明变量。
· Javascript是一门弱类语言，变量可以存放不同类型的值。
· 变量名需要遵循如下规则：
        组成字符可以是任何字母、数字、下划线（_）或美元符号（$）
        数字不能开头
        建议使用驼峰命名

注意事项
· ECMAScript 6新增了 let 关键字来定义变量。它的用法类似于var，但是所声名的变量，只在let关键字所在的代码块内有效，且不允许重复声名。
· ECMAScript 6新增了 const 关键字，用来声名一个只读的常量。一但声明，常量的值就不能改变。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JS-基本语法</title>
</head>
<body>
    
</body>
    
<script>
   
    //var定义变量
    //var a = 10;
    //a = "张三";

    //alert(a);

    //特点1：作用域比较大，全局变量
    //特点2：可以重复定义的
    // {
    //     var x = 1;
    //     var x = "A";
    // }
    // alert(x);

    // let:局部变量 ;不能重复定义
    // {
    //     let x = 1;
    //     alert(x);
    // }

    //const:常量 ， 不能被改变
    const pi = 3.14;
    pi = 3.15;
    alert(pi);

</script>
</html>

数据类型

· JavaScript中分为：原始类型和引用类型。

原始类型
· number:数字（整数、小数、NaN(Not a Number))
· string：字符串，单双引皆可
· boolean:布尔。true、false
· null：对象为空
· undefined：当声明的变量未初始化时，该变量的默认值是undefined

·使用typeof运算符可以获取数据类型

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JS-数据类型</title>
</head>
<body>

</body>
<script>

    //原始数据类型
    alert(typeof 3); //number
    alert(typeof 3.14);//number

    alert(typeof "A"); //string
    alert(typeof 'Hello');//string

    alert(typeof true);//boolean
    alert(typeof false);//boolean

    alert(typeof null);//object

    var a ;
    alert(typeof a);//undefined?
        
</script>
</html>

运算符

运算符
· 算术运算符：+，-，*，/，%，++，--
· 赋值运算符：=，+=，-=，*=，/=，%=
· 比较运算：；>，<，>=，<=，!=，==，===
· 逻辅运算符：&&，||，！
· 三元运算符：条件表达式? true_value:false_value

== 和 === 的区别
· =会进行类型转换，===不会进行类型转换

类型转换
· 字符串类型转为数字：
· 将字符串字面值转为数字。如果字面值不是数字，则转为NaN。
· 其他类型转为boolean：
· Number:0 和 NaN为false，其他均转为true。
· String：空字符串为false，其他均转为true。
· Null 和 undefined：均转为false.

流程控制语句

· if.….else if .….else.…
· switch
· for
· while
· do ... while

参考官方文档：https://www.w3school.com.cn/jsref/jsref_statements.asp

函数

· 介绍：函数（方法）是被设计为执行特定任务的代码块。
· 定义：JavaScript 函数通过function关键字进行定义，语法为：
        functon functionName(参数1,参数2..){
//需要执行的代码
}
· 注意：
        · 形式参数不需要类型。因为javaScript是弱类型语言
        · 返回值也不需要定义类型，可以在函数内部直接使用return返回即可
· 调用：函数名称（实际参数列表）

· 定义方式二：
var functionName = function(参数1,参数2...) {
//需要执行的代码
}

注意事项 JS中，函数调用可以传递任意个数的参数。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JS-函数</title>
</head>
<body>
    
</body>
<script>

    //定义函数-1
    // function add(a,b){
    //    return  a + b;
    // }

    //定义函数-2
    var add = function(a,b){
        return  a + b;
    }

    //函数调用
    var result = add(10,20);
    alert(result);

</script>
</html>

Array

· Javascript 中 Array对象用于定义数组。
· 定义

var 变量名 = new Array(元素列表]);//方式一	var arr =new Array(1,2,3,4);
var 变量名 = [元素列表];//方式二	var arr = [1,2,3,4];

· 访问

arr[索引] = 值;

arr[10] = "hello";

注意事项
JavaScript 中的数组相当于Java中集合，数组的长度是可变的，而JavaScript是弱类型，所以可以存储任意的类型的数据。

· 属性

属性	描述
length	设置或返回数组中元素的数量。

· 方法

方法	描述
forEach()	遍历数组中的每个有值的元素,并调用一次传入的函教
push()	将新元素添加到数组的末尾，并返回新的长度。
splice()	从数组中删除元素。

箭头函数(ES6):是用来简化函数定义语法的。具体形式为: (...) =>{...}，如果需要给箭头函数起名字:var xxx=(...) => {...}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JS-对象-Array</title>
</head>
<body>
    
</body>
<script>
    //定义数组
    // var arr = new Array(1,2,3,4);
    // var arr = [1,2,3,4];

    // console.log(arr[0]);
    // console.log(arr[1]);

    //特点: 长度可变 类型可变
    // var arr = [1,2,3,4];
    // arr[10] = 50;

    // console.log(arr[10]);
    // console.log(arr[9]);
    // console.log(arr[8]);

    // arr[9] = "A";
    // arr[8] = true;

    // console.log(arr);

    var arr = [1,2,3,4];
    arr[10] = 50;
    // for (let i = 0; i < arr.length; i++) {
    //     console.log(arr[i]);
    // }

    // console.log("==================");

    //forEach: 遍历数组中有值的元素
    // arr.forEach(function(e){
    //     console.log(e);
    // })

    // //ES6 箭头函数: (...) => {...} -- 简化函数定义
    // arr.forEach((e) => {
    //     console.log(e);
    // }) 

    //push: 添加元素到数组末尾
    // arr.push(7,8,9);
    // console.log(arr);

    //splice: 删除元素
    arr.splice(2,2);
    console.log(arr);

</script>
</html>

string

· String字符串对象创建方式有两种:

var 变量名 = new String("..."); //方式一

var str = new String("Hello string");

var 变量名 = "..."; //方式二

var str = "Hello string";

var str = 'Hello string ';

· 属性:

属性	措述
length	字符串的长度。

· 方法:

方法	措述
charAt()	返回在指定位置的字符。
indexOf(	检索字符串。
trim( )	去除字符串两边的空格
substring(	提取宇符串中两个指定的索引号之间的字符。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JS-对象-String</title>
</head>
<body>
    
</body>
<script>
    //创建字符串对象
    //var str = new String("Hello String");
    var str = "  Hello String    ";

    console.log(str);

    //length
    console.log(str.length);

    //charAt
    console.log(str.charAt(4));

    //indexOf
    console.log(str.indexOf("lo"));

    //trim
    var s = str.trim();
    console.log(s);

    //substring(start,end) --- 开始索引, 结束索引 (含头不含尾)
    console.log(s.substring(0,5));

</script>
</html>

JavaScript自定义对象

· 定义格式:

var对象名={

属性名1:属性值1,

属性名2:属性值2,

属性名3:属性值吟

函数名称: function(形参列表）{}
}；

var user = {

name : "Tom",

age:20,

gender:"male",

eat: function(){

alert("吃饭")；

}

}；

var user = {

name : "Tom",

age:20,

gender:"male",

eat(){

alert("吃饭")；

}

}；

· 调用格式:

对象名.属性名;	console.log(user，nane);
对象名.函数名();	user.eat();

JSON

JSON-介绍

· 概念：JavaScript Object Notation,JavaScript对象标记法。
· JSON是通过JavaScript对象标记法书写的文本。
· 由于其语法简单，层次结构鲜明，现多用于作为数据载体，在网络中进行数据传输。

JSON-基础语法

· 定义
        var 变量名 = '{"key1": value1, "kay2": velue2}';
         >示例
        var userStr = '{"name":"Jerry","age":18,"addr": ["北京","上海", "西安"]}';

· JSON字符串转为JS对象
var jsObject = JSON.parse(userStr);

· JS对象转为JSON字符串
var jsonStr = JSON.stringify(jsObject);

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JS-对象-JSON</title>
</head>
<body>
    
</body>
<script>
    //自定义对象
    // var user = {
    //     name: "Tom",
    //     age: 10,
    //     gender: "male",
    //     // eat: function(){
    //     //     alert("用膳~");
    //     // }
    //     eat(){
    //         alert("用膳~");
    //     }
    // }

    // alert(user.name);
    // user.eat();

    //定义json
    var jsonstr = '{"name":"Tom"," age":18," addr":["北京","上海","西安"]}';
    alert(jsonstr.name);

    //json字符串--js对象
    var obj = JSON.parse(jsonstr);
    alert(obj.name);

    //js对象--json字符串
    alert(JSON.stringify(obj));

</script>
</html>

BOM

· 概念：Browser Object Model 浏览器对象模型，允许javaScript与浏览器对话，JavaScript 将浏览器的各个组成部分封装为对象。

· 组成：
· Window:浏览器窗口对象
· Navigator:浏览器对象
· Screen：屏幕对象
· History：历史记录对象
· Location:地址栏対象

Window

· 介绍：浏览器窗口对象。
· 获取：直接使用window，其中 window.可以省略。
window.alert("Hello Window")； = alert("Hello Window");
· 属性
· history：对History对象的只读引用。请参阅History 对象。
· location：用于窗口或框架的Location对象。请参阅Location 对象。
· navigator：对Navigator 对象的只读引用。请参阅Navigator 对象。
· 方法
· alert()：显示带有一段消息和一个确认按钮的警告框。
· confirm()：显示带有一段消息以及确认按钮和取消按钮的对话框。
· setInterval()：按照指定的周期（以毫秒计）来调用的数或计算表达式
· setTimeout()：在指定的毫秒数后调用函数或计算表达式。

Location

· 介绍：地址栏对象。
· 获取：使用window.location获取，其中window.可以省略。
window.location.属性; = location.属性；

· 属性：
· href：设置或返回完整的URL.
location.href = "https://www.iknow.cn";

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JS-对象-BOM</title>
</head>
<body>
    
</body>
<script>
    //获取
    // window.alert("Hello BOM");
    // alert("Hello BOM Window");

    //方法
    //confirm - 对话框 -- 确认: true , 取消: false
    // var flag = confirm("您确认删除该记录吗?");
    // alert(flag);

    //定时器 - setInterval -- 周期性的执行某一个函数
    // var i = 0;
    // setInterval(function(){
    //     i++;
    //     console.log("定时器执行了"+i+"次");
    // },2000);

    //定时器 - setTimeout -- 延迟指定时间执行一次 
    // setTimeout(function(){
    //     alert("JS");
    // },3000);

    //location
    alert(location.href);

    location.href = "https://www.itcast.cn";

</script>
</html>

DOM

· 概念：Document Object Model，文档对象模型。

· 将标记语言的各个组成部分封装为对应的对象：
· Document：整个文档对象
· Element:元素对象
· Attribute:属性对象
· Text:文本对象
· Comment:注释对象

· JavaScript 通过DOM，就能够对HTML进行操作：
· 改变HITML元素的内容
· 改变HTML元素的样式（CSS）
· 对 HTML DOM 事件作出反应
· 添加和删除HTML元素

· DOM是W3C（万维网联盟）的标准，定义了访问HTML和XML文档的标准，分为3个不同的部分：
  1.Core DOM - 所有文档类型的标准模型
        · Document：整个文档对象
        · Element:元素对象
          · Attribute:属性对象
        · Text:文本对象
          · Comment:注释对象

2.XML DOM-XML 文档的标准模型

3.HTML DOM-HTML文档的标准模型
· Image: <img>
· Button : <input type = 'button'>

· HTML中的Element对象可以通过Document对象获取，而Document对象是通过window对象获取的。
· Document对象中提供了以下获取Element元素对象的函数：
        1.根据id属性值获取，返回单个Elerment对象
                var h1 = document.getElementByTd('h1');
        2.根据标签名称获取，返回Element对象数组
                var divs = document.getElementsByTagName('div');
        3.根据name属性值获取，返回Element对象数组
                var hobbys = document.getElementsByName('hobby');
        4.根据class属性值获取，返回Element对象数组
                var clss = document.getElementsByClassNane('cls');

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JS-对象-DOM</title>
</head>

<body>
    <img id="h1" src="img/off.gif">  <br><br>

    <div class="cls">我是谁</div>   <br>
    <div class="cls">阳光开朗</div>  <br>

    <input type="checkbox" name="hobby"> 电影
    <input type="checkbox" name="hobby"> 旅游
    <input type="checkbox" name="hobby"> 游戏
</body>

<script>
    //1. 获取Elenebt元素
    //1.1获取元素-根据ID获取
    // var img = document.getElementById('h1');
    // alert(img);

    // 1.2 获取元素-根据标签获取 - dir
    // var divs = document.getElementsByTagName('div');
    // for (let i = 0; i < divs.length; i++) {
    //     alert(divs[i]);
    // }

    // 1.3 获取元素-根据name属性获取
    // var ins = document.getElementsByName('hobby');
    // for (let i = 0; i < ins.length; i++) {
    //     alert(ins[i]);
    // }

    // 1.4 获取元素-根据class属性获取
    // var divs = document.getElementsByClassName('cls');
    // for (let i = 0; i < divs.length; i++) {
    //     alert(divs[i]);        
    // }
    
    // 2.查询参考手册，属性，方法
    var divs = document.getElementsByClassName('cls');
    var div1 = divs[1];

    div1.innerHTML = "阳光开朗大男孩";

</script>
</html>

案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <img id="light" src="img/off.gif"> <br>

    <div class="cls">传智教育</div>   <br>
    <div class="cls">黑马程序员</div> <br>

    <input type="checkbox" name="hobby"> 电影
    <input type="checkbox" name="hobby"> 旅游
    <input type="checkbox" name="hobby"> 游戏
    <br>
    <script>
        
        //1. 点亮灯泡
        var img = document.getElementById('light');
        img.src = "img/on.gif";

        //2. 将所有的 div 标签的标签体内容替换为 非常好
        var divs = document.getElementsByTagName("div"); 
        for (let i = 0; i < divs.length; i++) {
            const div = divs[i];
            div.innerHTML += "<font color = 'red'>非常好</font>";
        }

        //3. 使所有的复选框呈现被选中的状态
        var ins = document.getElementsByName('hobby');
        for (let i = 0; i < ins.length; i++) {
            const check = ins[i];
            check.checked = true;//选中
        }

    </script>
</body>
</html>

事件监听

· 事件：HTML事件是发生在HTML元素上的“事情”。比如：
· 按钮被点击
· 鼠标移动到元素上
· 按下键盘按键

· 事件监听：JavaScript可以在事件被侦测到时执行代码。

事件绑定

方式一：通过HTML标签中的事件属性进行绑定

function on(){

alert('我被点击了!');

}

</script>

方式二：通过DOM元素属性绑定

document.getElementById('btn').οnclick=function(){

alert('我被点击了!');

}

</script>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JS-事件-事件绑定</title>
</head>

<body>
    <input type="button" id="btn1" value="事件绑定1" onclick="on()">
    <input type="button" id="btn2" value="事件绑定2">
</body>

<script>
    function on(){
        alert("按钮1被点击了。。。");
    }

    document.getElementById('btn2').onclick = function(){
        alert("按钮2被点击了。。。");
    }

</script>
</html>

常见事件

事件名	说明
onclick	鼠标单击事件
onblur	元素失去焦点
onfocus	元素获得焦点
onload	某个页面或图像被完全加载
onsubmit	当表单提交时触发该事件
onkeydown	某个键盘的键被按下
onmouseover	鼠标被移到某元素之上
onmouseout	鼠标从某元素移开

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JS-事件-常见事件</title>
</head>

<body onload="load()">

    <form action="" style="text-align: center;" onsubmit="subfn()">
        <input type="text" name="username" onblur="bfn()" onfocus="ffn()" onkeydown="kfn()">
        
        <input id="b1" type="submit" value="提交">

        <input id="b1" type="button" value="单击事件" onclick="fn1()">
    </form>  

    <br><br><br>

    <table width="800px" border="1" cellspacing="0" align="center" onmouseover="over()" onmouseout="out()">
        <tr>
            <th>学号</th>
            <th>姓名</th>
            <th>分数</th>
            <th>评语</th>
        </tr>
        <tr align="center">
            <td>001</td>
            <td>张三</td>
            <td>90</td>
            <td>很优秀</td>
        </tr>
        <tr align="center">
            <td>002</td>
            <td>李四</td>
            <td>92</td>
            <td>优秀</td>
        </tr>
    </table>

</body>

<script>
    //onload : 页面/元素加载完成后触发
    function load(){
        console.log("页面加载完成...")
    }

    //onclick: 鼠标点击事件
    function fn1(){
        console.log("我被点击了...");
    }

    //onblur: 失去焦点事件
    function bfn(){
        console.log("失去焦点...");
    }

    //onfocus: 元素获得焦点
    function ffn(){
        console.log("获得焦点...");
    }

    //onkeydown: 某个键盘的键被按下
    function kfn(){
        console.log("键盘被按下了...");
    }

    //onmouseover: 鼠标移动到元素之上
    function over(){
        console.log("鼠标移入了...")
    }

    //onmouseout: 鼠标移出某元素
    function out(){
        console.log("鼠标移出了...")
    }

    //onsubmit: 提交表单事件
    function subfn(){
        alert("表单被提交了...");
    }

</script>
</html>

案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JS-事件-案例</title>
</head>
<body>

    <img id="light" src="img/off.gif"> <br>

    <input type="button" value="点亮" onclick="on()"> 
    <input type="button"  value="熄灭" onclick="off()">

    <br> <br>

    <input type="text" id="name" value="ITCAST" onfocus="lower()" onblur="upper()">
    <br> <br>

    <input type="checkbox" name="hobby"> 电影
    <input type="checkbox" name="hobby"> 旅游
    <input type="checkbox" name="hobby"> 游戏
    <br>

    <input type="button" value="全选" onclick="clickAll()"> 
    <input type="button" value="反选" onclick="reverse()">

</body>

<script>

    //1. 点击 "点亮" 按钮, 点亮灯泡; 点击 "熄灭" 按钮, 熄灭灯泡; 
    function on(){
        // 1.获取img元素对象
        var img = document.getElementById("light");

        // 2.设置src属性
        img.src = "img/on.gif";
    }

    function off(){
        // 1.获取img元素对象
        var img = document.getElementById("light");

        // 2.设置src属性
        img.src = "img/off.gif";
    }



    //2. 输入框聚焦后, 展示小写; 输入框离焦后, 展示大写; 
    function lower(){
        //a. 获取输入框元素对象
        var input = document.getElementById("name");

        //b. 将值转为小写
        input.value = input.value.toLowerCase();
    }

    function upper(){
        //a. 获取输入框元素对象
        var input = document.getElementById("name");

        //b. 将值转为小写
        input.value = input.value.toUpperCase();
    }



    //3. 点击 "全选" 按钮使所有的复选框呈现选中状态 ; 点击 "反选" 按钮使所有的复选框呈现取消勾选的状态 ; -- onclick
    function clickAll(){
        //a. 获取所有复选框元素对象
        var hobbys = document.getElementsByName("hobby");

        //b. 设置选中状态
        for (let i = 0; i < hobbys.length; i++) {
            const element = hobbys[i];
            element.checked = true;
        }
    }

    function reverse(){
        //a. 获取所有复选框元素对象
        var hobbys = document.getElementsByName("hobby");

        //b. 设置选中状态
        for (let i = 0; i < hobbys.length; i++) {
            const element = hobbys[i];
            element.checked = false;
        }
    }

</script>
</html>

Vue

什么是Vue?

· Vue是一套前端框架，免除原生JavaScript中的DOM操作，简化书写。
· 基于MVVM(Model-View-ViewModel)思想，实现数据的双向绑定，将编程的关注点放在数据上。 · 官网：https://v2.cn.vuejs.org/

框架：是一个半成品软件，是一套可重用的、通用的、软件基础代码模型。基于框架进行开发，更加快捷、更加高效。

Vue快速入门

· 新建HTML页面，引入Vue.js文件

· 在JS代码区域，创建Vue核心对象，定义数据模型

new Vue({

el:“#app”,

data: {

message: "Hello Vue!"

}

})

</script>

· 编写视图

</div>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue-快速入门</title>
    <script src="js/vue.js"></script>
</head>
<body>

    <div id = "app">
        <input type="text" v-model = "message">
        {{message}}
    </div>
    

</body>
<script>
    //定义一个Vue对象
    new Vue({
        el:"#app", //vue接管区域
        data:{
            message:"Hello Vue"
        },
    })
</script>
</html>

常用指令

· 指令:HTML标签上带有v-前缀的特殊属性，不同指令具有不同含义。例如: v-if ，v-for...

· 常用指令

指令	作用
v-bind	为HTML标签绑定属性值，如设置href , css样式等
v-model	在表单元素上创建双向数据绑定
v-on	为HTML标签绑定事件
v-if	条件性的渲染某元素，判定为true时渲染,否则不渲染
v-else-if
v-else
v-show	根据条件展示某元素，区别在于切换的是display属性的值
v-for	列表渲染，遍历容器的元素或者对象的属性

v-bing和v-model

<body>
    <div id="app">

        <a v-bind:href="url">链接1</a>
        <a :href="url">链接2</a>

        <input type="text" v-model = "url">

    </div>
</body>
<script>
    //定义Vue对象
    new Vue({
        el: "#app", //vue接管区域
        data:{
           url:"https://www.baidu.com"
        }
    })
</script>

注意事项通过v-bind或者v-model绑定的变量，必须在数据模型中声明。

v-on

<body>
    <div id="app">

        <input type="button" value="点我一下" v-on:click="handle()">
        <input type="button" value="点我一下" @click="handle()">

    </div>
</body>
<script>
    //定义Vue对象
    new Vue({
        el: "#app", //vue接管区域
        data:{
           
        },
        methods: {
            handle:function(){
                alert("你点我一下...");
            }
        }
    })
</script>

v-if和v-show

<body>
    <div id="app">
        
        年龄<input type="text" v-model="age">经判定,为:
        <span v-if="age <= 35">年轻人(35及以下)</span>
        <span v-else-if="age > 35 && age < 60">中年人(35-60)</span>
        <span v-else>老年人(60及以上)</span>

        <br><br>

        年龄<input type="text" v-model="age">经判定,为:
        <span v-show="age <= 35">年轻人(35及以下)</span>
        <span v-show="age > 35 && age < 60">中年人(35-60)</span>
        <span v-show="age >= 60">老年人(60及以上)</span>

    </div>
</body>
<script>
    //定义Vue对象
    new Vue({
        el: "#app", //vue接管区域
        data:{
           age: 20
        },
        methods: {
            
        }
    })
</script>

v-for

<body>
    <div id="app">

        <div v-for="(addr,index) in addrs">{{index + 1}} : {{addr}}</div>

    </div>
</body>
<script>
    //定义Vue对象
    new Vue({
        el: "#app", //vue接管区域
        data:{
           addrs:["北京", "上海", "西安", "成都", "深圳"]
        },
        methods: {
            
        }
    })
</script>

案例-通过Vue完成表格数据的渲染展示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue-指令-案例</title>
    <script src="js/vue.js"></script>
</head>
<body>
    
    <div id="app">
        
        <table border="1" cellspacing="0" width="60%">
            <tr>
                <th>编号</th>
                <th>姓名</th>
                <th>年龄</th>
                <th>性别</th>
                <th>成绩</th>
                <th>等级</th>
            </tr>

            <tr align="center" v-for="(user,index) in users">
                <td>{{index + 1}}</td>
                <td>{{user.name}}</td>
                <td>{{user.age}}</td>
                <td>
                    <span v-if="user.gender == 1">男</span>
                    <span v-if="user.gender == 2">女</span>
                </td>
                <td>{{user.score}}</td>
                <td>
                    <span v-if="user.score >= 85">优秀</span>
                    <span v-else-if="user.score >= 60">及格</span>
                    <span v-else style="color: red;" >不及格</span>
                </td>
            </tr>
        </table>

    </div>

</body>

<script>
    new Vue({
        el: "#app",
        data: {
            users: [{
                name: "Tom",
                age: 20,
                gender: 1,
                score: 78
            },{
                name: "Rose",
                age: 18,
                gender: 2,
                score: 86
            },{
                name: "Jerry",
                age: 26,
                gender: 1,
                score: 90
            },{
                name: "Tony",
                age: 30,
                gender: 1,
                score: 52
            }]
        },
        methods: {
            
        },
    })
</script>
</html>

生命周期

· 生命周期:指一个对象从创建到销毁的整个过程。

· 生命周期的八个阶段:每触发一个生命周期事件，会自动执行一个生命周期方法(钩子)。

状态	阶段周期
beforecreate	创建前
created	创建后
beforeMount	挂载前
mounted	挂载完成
beforeupdate	更新前
updated	更新后
beforeDestroy	销毁前
destroyed	销毁后

· mounted：挂载完成，Vue初始化成功，HTML页面渲染成功。（发送请求到服务端，加载数据）

<body>
    <div id="app">

    </div>
</body>
<script>
    //定义Vue对象
    new Vue({
        el: "#app", //vue接管区域
        data:{
           
        },
        methods: {
            
        },
        mounted () {
            alert("vue挂载完成,发送请求到服务端")
        }
    })
</script>