零. 课程安排和准备
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>
