Java开发必备前端知识~html+css+js

风止￴

已于 2024-08-13 00:28:42 修改

阅读量539

点赞数 20

分类专栏： java复习文章标签： java html css js

于 2024-08-13 00:27:23 首次发布

windStop

本文链接：https://blog.csdn.net/m0_74749208/article/details/141145257

版权

java复习专栏收录该内容

26 篇文章 0 订阅

订阅专栏

零. 课程安排和准备

web程序流程

在这里插入图片描述

Vscode(前端)安装

自己参照文档完成…

一.Html

1.1 html概述

概念: hyper text markup language: 超文本标记语言

超文本:不仅仅包含文本,还包含多媒体数据

标记: 写一些字符(标签),会有特点的效果

入门:

1.html语言写的文件的后缀名 .html / .htm

2.标签: 自闭合标签<标签名/>, 围堵标签 <标签名></标签名>

3.属性: <标签名属性名=“属性值”></标签名>

4.标签需要正确的嵌套

5.html文档中,有且仅有一个根标签html

6.一个html文档中,必须要有的标签: html head body

7.注释格式

8.html中的标签都是预定义的标签

<html>
    <head>
		<title>html快速入门</title>
    </head>
    <!--这是体标签-->
    <body>
        <font color="red" size="28">我爱中国</font>
    </body>
</html>

注意: html的语法比较松散,但是还是建议大家按照语法写

1.2 html基础标签

标签	描述
~	定义标题，h1最大，h6最小
	定义文本的字体、字体大小、字体颜色
	定义粗体文本
	定义斜体文本
	定义文本下划线
	定义文本居中
	定义段落
	定义折行
	定义水平线

<!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>Document</title>
</head>
<body>
    <h1>不识妻美刘强东</h1>
    <h2>悔创阿里杰克马</h2>
    <h3>顺义</h3>
    <h4>通州</h4>
    <h5>昌平</h5>
    <h6>朝阳</h6>
    <!-- html中的标签: 行级标签(独占一行),行内标签(占自己内容的大小) -->
    <font color="red" size="48">我爱柳岩</font> <br/>
    <b>我爱舒淇</b><br/>
    <i>我爱林青霞</i><br/>
    <center>
        <u>我爱吴孟达</u>
    </center>
    <p>今天早上我吃了包子油条奶茶还有玉米红薯米饭面条...</p>
    <p>今天早上我吃了包子油条奶茶还有玉米红薯米饭面条...</p>
    今天早上我吃了包子油条奶茶还有玉米红薯米饭面条...
    今天早上我吃了包子油条奶茶还有玉米红薯米饭面条...
    <hr>
</body>
</html>

1.3 html多媒体标签

标签	属性	描述
		在页面上引入图片的
	height	用来定义图片的高度
	width	用来定义图片的宽度
	src	规定显示图像的 url（统一资源定位符）
		定义音频(支持MP3、MAV、OGG)
	src	规定音频的 url
	controls	显示播放控件
		定义视频(支持MP4、WebM、OGG)
	src	规定视频的 url
	controls	显示播放控件

<!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>Document</title>
</head>
<body>
    <!-- 图片标签 -->
    <!-- 
        路径书写:
            绝对路径: C:\Users\Administrator\Desktop\秋招1期_JavaSE\课程\day10_html_css_javascript\代码\code\material\01.jpg
            相对路径: 
                ./ : 当前文档所在的目录
                ../: 当前文档所在目录的上一级目录
                ../../: 当前文档所在目录的上一级目录的上一级目录
     -->
    <img src="./material/01.jpg" width="200" height="200">

    <!-- 音频标签 -->
    <audio src="./material/01.mp3" controls></audio>

    <!-- 视频标签 -->
    <video src="./material/01.mp4" controls></video>

    <img src="https://pics2.baidu.com/feed/10dfa9ec8a1363274097db3701a7ede208fac776.jpeg@f_auto?token=b139e182fc39a6e97a290c3d5ba4ade1">
</body>
</html>

1.4 超链接标签和表格标签

标签

属性

描述

定义超链接，用于连接到另一个资源

href

指定需要访问的资源的URL

target

_self,默认值，在当前页面打开, _blank在空白页打开

定义表格

broder

规定表格边框的粗细

width

规定表格的宽度

cellspacing

规定单元格之间的空白

定义表格的行

align

定义表格行的内容对齐方式

定义普通单元格

定义表头单元格，会有加粗居中的效果

<!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>Document</title>
</head>
<body>
    <!-- 超链接标签 -->
    <a href="https://www.itheima.com" target="_blank" >点我呀,我给你调一下啊</a>

    <!-- 表格标签: 定义一个范围 -->
    <table border="1 solid" cellspacing="0" width="200">
        <!-- 一行 -->
        <tr>
            <!-- 一个单元格 -->
            <th>姓名</td>
            <th>年龄</td>
            <th>性别</td>
            <th>住址</td>
        </tr>
        <!-- 一行 -->
        <tr>
            <!-- 一个单元格 -->
            <td>张三</td>
            <td>18</td>
            <td>男</td>
            <td>通州</td>
        </tr>
        <!-- 一行 -->
        <tr>
            <!-- 一个单元格 -->
            <td>张三</td>
            <td>18</td>
            <td>男</td>
            <td>通州</td>
        </tr>
        <!-- 一行 -->
        <tr>
            <!-- 一个单元格 -->
            <td>张三</td>
            <td>18</td>
            <td>男</td>
            <td>通州</td>
        </tr>
    </table>
</body>
</html>

1.5 表单标签

作用: 用于定义一个获取用户录入的范围区间,获取用户录入的内容,提交给后台服务器

标签	属性	描述
		定义表单的
	action	定义表单数据提交的服务器地址
	method	定义表单数据提交的方式，一般有get和post这2种

<!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>Document</title>
</head>
<body>
    
    <!-- 表单标签 -->
    <!-- 
        action:提交的目的地(服务器地址)
        method:指定请求方式
            get: 查询
            post: 新增
            put: 修改
            delete: 删除
     -->
    <form action="http://localhost:8080/login" method="get">
            
		
    </form>
</body>
</html>

1.6 表单项标签

标签	属性	描述
		定义表单项，通过type属性控制输入形式,接受用户的信息
	type	定义input表单项的表现形式，例如：文本框，密码框等
		定义下拉列表，字标签定义选项
		定义文本域

浏览器调试工具:

f12键或者 fn+f12

在这里插入图片描述

<!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>Document</title>
</head>
<body>
    <!-- 表单项标签 -->
    <!-- 
        #代表当前页面

        method:
            get:请求数据 url中携带
            post: 请求数据在请求体中携带
            put: 请求数据在请求体中携带
            delete: 情趣数据 url中携带
     -->
    <form action="#" method="post">
        <!-- input标签 -->
        <!-- 表单项的数据要想被提交,必须写一个属性: name(请求数据起名) -->
        <!-- 
            type:
                text: 文本
                password: 密文
                radio: 单选
                checkbox: 复选
                date: 日期
                submit: 按钮
                button: 按钮
                number: 输入数字
         -->
        用户名: <input type="text" name="username"/><br/>
        密码: <input type="password" name="password"/><br/>
        <!-- 单选效果,多个input的name属性值需要一样 -->
        <!-- 单选时,需要给input输入框指定 value属性,该value属性指的是当该选项被选择后,给后台提交的内容 -->
        性别: <input type="radio" name="gender" value="男"> 男 <input type="radio" name="gender" value="女">女<br/>
        爱好: <input type="checkbox" name="hobbies" value="palay ball">打球 <input type="checkbox" name="hobbies" value="eat">吃饭 <input type="checkbox" name="hobbies" value="sleep">睡觉  <br>
        出生日期: <input type="date" name="birthday"><br>
        年龄: <input type="number" name="age"><br>



         <!-- select 下拉列表 -->
        住址: <select name="address" multiple >
                <option>北京</option>
                <option>上海</option>
                <option>南京</option>
                <option selected>西安</option>
             </select> <br>
             
        <!-- textarea:文本域 -->
        个人评价: <textarea name="self_comment"  cols="30" rows="20"></textarea>

        <!-- <button>登录</button> -->
        <!-- 
            type:用于确定当前的输入框长什么样子
         -->
        <input type="submit" value="登录"/>
    </form>

</body>
</html>

1.7 布局标签

布局: 把页面中的元素如何摆放

div,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>Document</title>
</head>
<body>
    <!-- 布局标签需要配合css样式完成布局 -->
    <div>我是你大爷</div>
    <div style="float: right">我是你大爷</div>
    <span>我是你二大爷</span>
    <span>我是你二大爷</span>
</body>
</html>

二.CSS

1.1 css概述

概念: cascading style sheet-----层叠样式表

作用: 美化当前页面

1.2 css使用

1.内联样式

在标签上添加style属性书写样式

2.内部样式

在html文档内部,借助于style标签,书写样式

3.外部样式

在外部的xxx.css文件中书写样式

在html文档中使用link标签引入外部的样式文件

css的样式:

样式名称:样式值

<!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>Document</title>
    <link rel="stylesheet" href="./css/my.css">
</head>

<!-- style书写内部样式 -->
<style>
    div{
        color: aqua;
        font-size: 48px;
    }
</style>

<body>
    <!-- 内联样式 -->
    <h1 style="color: green; font-size: 28px;">我是好人!</h1>
    <h1 style="color: green; font-size: 28px;">我爱我媳妇</h1>
    <div>我是好男人</div>
    <div>我是中国最强的男人</div>
    <span>我是人</span>
</body>
</html>

span{
    color: red;
    font-size: 96px;
}

1.3 css选择器

作用: 筛选出具有相同特征的元素

分类:

id选择器

#标签的id属性指{

样式

}

元素选择器

标签名{

样式

}

类选择器

.标签的class属性值{

样式

}

…

<!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>Document</title>
</head>
<!-- 内部样式 -->
<style>
    /* id选择器: 一般只用于控制一个指定id的元素的样式 */
    #bj{
        color: red;
    }
    /* 元素选择器 */
    span{
        color: blue;
    }

    /* 类选择器 */
    .c1{
        color: greenyellow;
    }
    .c2{
        font-size: 48px;
    }
    .c3{
       margin-left: 50px;
    }

    /* ...其它的选择器 */
</style>
<body>
    
    <div>
        <h1 id="bj">北京</h1>
        <!-- <h1 id="bj">上海</h1> -->
        <h1>上海</h1>
        <h2>南京</h1>
        <h2>西安</h1>
    </div>

    <div>
        <span>通州</span>
        <span>顺义</span>
        <span>昌平</span>
        <span>朝阳</span>
    </div>
    <div>
        <div class="c1">郝龙杰</div>
        <div class="c1 c2 c3">胖江涛</div>
        <div class="c1 c3">痩江涛</div>
    </div>
</body>
</html>

1.4 css中的样式

成千上万种,你有兴趣,自己学…

三.JavaScript

3.1 js概述

概念: 是一门浏览器脚本语言,是一门弱类型的语言(一般不需要编译),解释执行。欧洲计算机协会ECMAScript(标准) ES6,JavaScript是ECMAScript规范的实现方案之一

作用: 让html页面和人进行交互

3.2 js引入方式

1.内部js

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>Document</title>
</head>
<body>
    
</body>

<!-- 内部js -->
<script>
    window.alert("js你好!")
</script>
<script>
    window.alert("js你真好!")
</script>

<!-- 外部js -->
<!-- 
    1.script标签必须写成围堵标签,不能自闭合
    2.如果一个script标签引入了外部的js标签,那么该标签的内部将不能写js代码
 -->
<script src="./js/my.js"></script>

<!-- 注意， script标签写在任何位置都行， 一般喜欢写body下面 -->
</html>

3.3 js书写语法

3.3.1 书写格式

1.一行代码的结束标记是；不过；可以省略

2.js中注释的格式：  //单行注释  /*多行注释*/

3.js中严格区分大小写

3.3.2 输出语句

window.alert(): 弹出内容
document.write(): 往页面上写内容
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>Document</title>
</head>
<body>
    <h1>柳岩,我爱你...</h1>
</body>
<script>
    /* window.alert("aaa");
    window.alert("bbb"); */
    //一行语句的分隔符;
    window.alert("aaa")
    window.alert("bbb")

    //往页面写内容
    document.write("祖国,我爱你...")

    //往控制台写内容
    console.log("如花,我爱你...")
</script>
</html>

3.4 js变量

注意: 由于JavaScript是一门弱类型的语言,而弱类型的语言对于内存存储的数据并不做限定,因此定义变量的时候不需要声明类型, 而是需要使用特定的关键字表示接下来定义的是变量

关键字	解释
var	早期ECMAScript5中用于变量声明的关键字
let	ECMAScript6中新增的用于变量声明的关键字，相比较var，let只在代码块内生效
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>Document</title>
</head>
<body>
    
</body>
<script>
    //使用var定义变量,不具有局部作用域,天生全局作用域
    var num = 10
    console.log(num)

    {
        var name='李四'
    }
    console.log(name)


    //使用let定义变量,具有局部作用域
    {
        let age = 29
        console.log(age)
    }
    //console.log(age) 报错

    //使用const定义变量,定义常量
    const PI = 3.14
    console.log(PI)
    //PI=3.33 报错
    console.log(PI)

    //弱类型语言,它们中的变量可以存储任何数据
    let aa = '中国'
    console.log(aa)
    aa = 23
    console.log(aa)
</script>
</html>

3.5 js数据类型和运算符和流程控制语句

3.5.1 数据类型

弱类型的语言,并没有规定变量中存储数据的数据类型,但是弱类型语言中也有数据类型.

原始类型:

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

引用类型:所有的对象

typeof运算符: 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>Document</title>
</head>
<body>
    
</body>
<script>
    //数据类型
    let v1 = 10
    console.log(typeof v1)

    v1='张三'
    console.log(typeof v1)

    v1 = true
    console.log(typeof v1)

    //如果一个变量声明了,但是赋值,默认值是undefined, 数据undefined的数据类型也是undefined
    let v2
    console.log(v2)
    console.log(typeof v2)

    v2 = null
    console.log(typeof v2)


    let v3 = new Array(1,2,3)
    console.log(typeof v3)
</script>
</html>

3.5.2 运算符

运算规则	运算符
算术运算符	+ , - , * , / , % , ++ , –
赋值运算符	= , += , -= , *= , /= , %=
比较运算符	> , < , >= , <= , != , == , === 注意 == 会进行类型转换，=== 不会进行类型转换
逻辑运算符	&& , \|\| , !
三元运算符	条件表达式 ? true_value: false_value

3.5.3 流程控制语句

js中的流程控制语句和java中的一模一样

<!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>Document</title>
</head>
<body>
    
</body>
<script>
    /*
        ==: 如果左右两边的数据类型不一致,那么先尝试转换类型,转换成一致类型的数据,再比较
        ===: 如果左右两边数据类型不一致,那么直接返回false
    */
   let v1 = 10
   let v2 = '10'
    console.log(v1 == v2)
    console.log(v1 === v2)

    /* 
        js中的数据类型转换
        
        其它数据类型转换为number
            字符串转换number  + -
        其它数据类型转换为string
            其它数据+''

        其它数据类型转换为布尔:
            非空字符串: true
            空字符串: false
            非0转为:true
            0转为:false
            undeined: false
            NaN: false
            null: false
            对象: true
    */

    let v3 = '10'
    let v4 = -v3
    console.log(typeof v4)
    console.log(v4)

    //v5是个字符串
    let v5 = v3+1
    console.log(v5)

    //v6是个数字
    let v6 = +v3+1;
    console.log(v6)

    //v8是string
    let v7 = 10;
    let v8 = v7+''
    console.log(typeof v8)

    //NaN: not a number:用于描述一个不是数字的数字, 类型是number
    let v9 = 'abc'
    let v10 = +v9
    console.log(v10)//NaN
    console.log(typeof v10)

    let v11 = v10+1
    console.log(v11)//NaN

    let v12//undeinfed
    let v13 = v12+1
    console.log(v13)//NaN


    //其它类转布尔
    let v14='abc'
    if(v14){
        console.log('v14被转换成true')    
    }else{
        console.log('v14被转换成false')    
    }

    let v15=''
    if(v15){
        console.log('v15被转换成true')    
    }else{
        console.log('v15被转换成false')    
    }

    let v16 = 0
    if(v16){
        console.log('v16被转换成true')    
    }else{
        console.log('v16被转换成false')    
    }

    let v17 = null
    if(v17){
        console.log('v17被转换成true')    
    }else{
        console.log('v17被转换成false')    
    }

    let v18 = new Array(1,2,3)
    if(v18){
        console.log('v18被转换成true')    
    }else{
        console.log('v18被转换成false')    
    }

    //写一个循环
    for(var i = 0; i<10;i++){
            
    }
    
</script>
</html>

3.6 js函数

3.6.1 第一种函数声明格式

3.6.2 第二种函数声明格式

3.6.3 第三种函数声明格式

3.6.4 注意事项

<!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>Document</title>
</head>
<body>
    
</body>
<script>
    //函数的第一种声明方式
    /* function show(){
        console.log('柳岩是我的丰碑!')
    } */

    //函数的第二种声明方式
    /* let show = function(){
        console.log("我的丰碑不是柳岩...")
    } */
    //函数的第三种声明方式
    /* let show = ()=>{
        console.log("我的丰碑不是柳岩妹妹...")
    } */
    //调用函数
    //show()

    function sum(a, b) {
        //在每个函数的内部,都有一个内置的数组 arguments用于接收传递的参数
        for(let i = 0;i<arguments.length;i++){
            console.log(arguments[i] + "-------")
        }
        let sum = a+b;
        return sum;
    }

    /* function sum(a, b) {
        let sum = a+b;
        return sum;
    } */
    /* let sum = function (a, b) {
        let sum = a+b;
        return sum;
    } */
    /* let sum =  (a, b) => {
        let sum = a+b;
        return sum;
    } */
    //注意: js中,调用函数时,传递的参数个数可以和函数的参数列表上的声明不一致
    let result = sum(1,4,3);
    //let result = sum(1);
    console.log(result)

</script>
</html>

3.7 js对象

3.7.1 Array

属性：

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

方法：

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

<!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>Document</title>
</head>
<body>
    
</body>
<script>
    //数组
    //声明数组会有两种方式
    //let names = new Array('张三','李四','王麻子')
    let names = ['张三','李四','王麻子']
    console.log(names)

    console.log(names.length)

    //常用方法
    for(let i=0;i<names.length;i++){
        console.log(names[i])
    }
    console.log('======================')
    /*
        当调用forEach函数时,背后会依次取出数组中的每一个数据
        会调用一次你传递的函数,并且把得到的数据作为参数传递给函数


        没有名字的函数: 匿名函数
    */
    /* names.forEach(function(name){
        console.log(name)
    }) */

    //遍历数组
    names.forEach(name=>console.log(name))

    //push:添加元素
    names.push('柳岩')
    console.log(names)

    //splice: 删除数组中的元素: 从哪删,删几个
    names.splice(1,2)
    console.log(names)

    //注意事项: 数组的长度是可变的, 并且如果指定的所引处没有存元素,默认为undefined
    let nums = [1,2,3]
    console.log(nums[10])
    nums[10] = 123
    console.log(nums[10])
    console.log(nums[9])



</script>
</html>

3.7.2 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>Document</title>
</head>
<body>
    
</body>
<script>
   //string
   //对象的创建
   //let name = new String()
   //let name = new String('abc')
   let name = '中国人'
   console.log(name)

   //方法的调用
   console.log(name.length)
   console.log(name.charAt(1))
   console.log(name.lastIndexOf('国'))

</script>
</html>

3.7.3 自定义对象

在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>Document</title>
</head>
<body>
    
</body>
<script>
    /* 自定义对象 */

    let teacher =  {
        name:'张三',
        age:18,
        gender:'男',
        teach: function(){
            console.log('老师教你怎么作弊...')
        },
        /* eat:function(){
            console.log('老师吃菜菜...')
        } */
        eat(food){
            console.log('老师吃'+food)
        }
    }

    //使用老师对象的属性: 对象名.属性名
    console.log(teacher.name)
    teacher.name = '李四'
    console.log(teacher.name)

    //使用老师对象的方法
    teacher.teach()
    teacher.eat('骨头')

    //当有了一个对象后,还可以动态的给这个对象添加属性
    console.log(teacher.address)
    teacher.address  = '顺义'
    console.log(teacher.address)
    
    teacher.drink = function(){
        console.log('老师喝可乐')
    }

    teacher.drink()


    //定义数组
    let ts = [
        {
            name:'张三',
            age:18,
            gender:'男',
            teach: function(){
                console.log('老师教你怎么作弊...')
            },
            /* eat:function(){
                console.log('老师吃菜菜...')
            } */
            eat(food){
                console.log('老师吃'+food)
            }
        },
        {
            name: '李四',
            age:18,
            gender:'男',
            teach: function(){
                console.log('老师教你怎么作弊...')
            },
            /* eat:function(){
                console.log('老师吃菜菜...')
            } */
            eat(food){
                console.log('老师吃'+food)
            }
        }
    ]
    console.log(ts[1].name)

    let stus = [
        {name:'柳岩',hobbies:['化妆','给东哥做饭']},
        {name:'舒淇',hobbies:['化妆','给东哥捏脚']},
    ]

    console.log(stus[1].hobbies[1])
</script>
</html>

3.7.4 json字符串

概念: 满足特定格式的字符串

在这里插入图片描述

格式:

{}: 对象

[]: 数组

键值对: 代表属性

键必须用引号引起来

非数字的值必须用引号引起来

在这里插入图片描述

内置对象JSON可以完成json字符串和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>Document</title>
</head>
<body>
    
</body>
<script>
    //json字符串
    let stuJsonStr = '{"name":"张三","age":18,"gender":"男"}'
    let stusJsonStr = '[{"name":"张三","age":18,"gender":"男"},{"name":"李四","age":18,"gender":"男"},{"name":"王五","age":18,"gender":"男"}]'

    //把json字符串转换成js对象
    let stu = JSON.parse(stuJsonStr)
    console.log(stu.name)

    let stus = JSON.parse(stusJsonStr)
    console.log(stus[1].name)


    //把js对象转换成json字符串
    let str1 = JSON.stringify(stu);
    console.log(typeof str1)
    console.log( str1)

    let str2 = JSON.stringify(stus)
    console.log(str2)
    


</script>
</html>

哥做饭’]},
{name:‘舒淇’,hobbies:[‘化妆’,‘给东哥捏脚’]},
]

console.log(stus[1].hobbies[1])

```

3.7.4 json字符串

概念: 满足特定格式的字符串

[外链图片转存中…(img-M1sL1aK5-1723479739542)]

格式:

{}: 对象

[]: 数组

键值对: 代表属性

键必须用引号引起来

非数字的值必须用引号引起来

[外链图片转存中…(img-aMJb3ujD-1723479739542)]

内置对象JSON可以完成json字符串和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>Document</title>
</head>
<body>
    
</body>
<script>
    //json字符串
    let stuJsonStr = '{"name":"张三","age":18,"gender":"男"}'
    let stusJsonStr = '[{"name":"张三","age":18,"gender":"男"},{"name":"李四","age":18,"gender":"男"},{"name":"王五","age":18,"gender":"男"}]'

    //把json字符串转换成js对象
    let stu = JSON.parse(stuJsonStr)
    console.log(stu.name)

    let stus = JSON.parse(stusJsonStr)
    console.log(stus[1].name)


    //把js对象转换成json字符串
    let str1 = JSON.stringify(stu);
    console.log(typeof str1)
    console.log( str1)

    let str2 = JSON.stringify(stus)
    console.log(str2)
    


</script>
</html>

风止￴

关注

20
点赞
踩
8

收藏

觉得还不错? 一键收藏
打赏
0
评论
Java开发必备前端知识~html+css+js

自己参照文档完成…概念: hyper text markup language: 超文本标记语言超文本:不仅仅包含文本,还包含多媒体数据标记: 写一些字符(标签),会有特点的效果入门: 1.html语言写的文件的后缀名 .html / .htm 2.标签: 自闭合标签, 围堵标签 3.属性: 4.标签需要正确的嵌套 5.html文档中,有且仅有一个根标签html 6.一个html文档中,必须要有的标签:
复制链接

扫一扫