前端代码 (html css JavaScript DOM JSON)

HTML

是超文本标记语言.用来完成一个静态网页.
结构:
由大量的标签组成的.
标签都是成对儿出现的

入门案例

<!DOCTYPE html>

</head>

hello

</body>

</html>

概述

是一个开源的分布式的版本控制产品.

可以上传开源项目 , 上传到Gitee服务器上. 很方便的管理代码, 还可以下载.

上传:

工作空间: 用来保存资源的一个文件夹

本地索引: 给即将上传的资源, 设置索引, 提高传输效率

本地仓库: 是指你自己电脑里 ,的一个文件夹 ,已经存好了要提交的资源

远程仓库: 是指在Gitee的服务里 ,创建一个文件夹 ,保存了你提交的资源

下载:

只从远程仓库下载资源到自己的电脑里

常用命令

add : 从工作空间把要上传的资源添加到本地索引
commit : 从本地索引提交到本地仓库
push : 从本地仓库把资源推送到远程仓库
clone/pull : 从远程仓库下载到本地

准备环境

安装Git软件,下一步就行了
注册一个Gitee的账号
创建了一个本地仓库(在你自己的磁盘里创建的,存放你想要上传的资源)
创建了一个远程仓库(在Gitee服务器上,创建的)

执行一些自动生成的Git命令

在本地仓库,执行命令(在本地仓库的路径处,直接输入cmd):

git config --global user.name "cgblpx" #配置在gitee上注册的账号

git config --global user.email "2250432165@qq.com" #配置在 gitee上注册的邮箱

git config --list #检查配置信息

git init #初始化了git(产生了一个隐藏文件.git)

git add . # 提交本地仓库的所有资源

git commit -m "first commit" #把本地索引的文件提交到本地仓库

git remote add origin https://gitee.com/cgblpx/cgb2107.git # 建立本地仓库和远程仓库的关系

git push -u origin master #把本地仓库的资源提交给Git服务器

#第一次上传文件,需要输入用户名和密码的......；坎坎坷坷

表格标签

测试

<!DOCTYPE html>

<html>

<head>

<title>测试常用标签</title>

</head>

<body>

密码输入框:<input type="password" /> <br/>

普通输入框:<input type="text" /> <br/>

单选框:<input type="radio" />男 <br/>

多选框:<input type="checkbox" />迪丽热巴 <br/>

日历:<input type="week" /> <br/>

数字:<input type="number" /> <br/>

邮箱:<input type="email" /> <br/>

普通按钮:<input type="button" value="点我"/>

提交按钮:<input type="submit" value="注册"/>

<!-- 2. table表格标签 tr是行 th是表头(加粗居中) td是列

border设置边框 width设置宽度

bgcolor设置背景颜色 cellspacing单元格间距

rowspan行合并(合并多个行) colspan列合并(合并多个

列)

-->

<table border="2px" width="300px"

bgcolor="lightgreen" cellspacing="0">

<tr>

<td colspan="3"><h2>流量调查表</h2></td>

</tr>

</tr>

<tr>

</tr>

<tr>

</tr>

</table>

</body>

</html>

表单标签

最大的作用就是可以提交数据.
把表格里想要收集的数据可以提交给服务器.

测试

<!DOCTYPE html>

<html>

<head>

<title>测试表单标签</title>

</head>

<body>

<!-- 1. 表单标签form:用来提交数据,默认数据是在地址栏中

拼接的

提交的数据有两种方式: get post

区别:

get方式提交数据是在地址栏,默认方式,安全性低,长度受

限

http://127.0.0.1:8848/hbuilderx/cgb2107/test4.html?

user=1&pwd=2&repwd=2&nick=3&mail=4@.com&sex=on&hobby=on&hobby=

on&hobby=on

post方式提交数据不在地址栏,安全性高,没有上限

method属性用来设置数据的提交方式,默认是get

action属性用来指定数据即将提交给哪个程序去处理

-->

<table border="1px" bgcolor="#A9A9A9"

width="500px" cellspacing="0">

<tr>

<td>

</td>

</tr>

<tr>

<td>

</td>

</tr>

<tr>

<td>

</td>

</tr>

<tr>

<td>

</td>

</tr>

<tr>

<td>

</td>

</tr>

<tr>

<td>

<input type="radio" name="sex" value="1"/> 男

<input type="radio" name="sex" value="0"/> 女

</td>

</tr>

<tr>

<td>

<input type="checkbox" name="hobby"

value="1"/>篮球

<input type="checkbox" name="hobby"

value="2"/>足球

<input type="checkbox" name="hobby"

value="3"/>乒乓球

</td>

</tr>

<tr>

<td>

</select>

</td>

</tr>

<tr>

<td>

</td>

</tr>

<tr>

<td>

<button>点我换一张</button>

</td>

</tr>

<tr>

<td>

<textarea>在这儿输入...</textarea>

</td>

</tr>

<tr>

</td>

</tr>

</table>

</form>

</body>

</html>

总结

form 标签用来把页面填写的数据提交给后台的java程序

table 标签用来向网页中添加表格

tr标签用来表示表格里的一行

td标签表示行里的列元素

input标签用来实现输入框(text password email radio checkbox…)

select标签用来定义一个下拉框,option标签用来定义选项

textarea 标签用来表示一个大的文本框(文本域)

img 标签用来向网页中加入图片

button标签用来表示一个按钮

src属性用来指定图片的位置,type属性用来指定输入框的类型,

width属性用来指定宽度,height属性用来指定高度,bgcolor属性用来

设置背景颜色

提交数据

必须用form标签
必须有提交submit按钮
必须设置name属性
提交的数据都在?之后 , 多个值用&连接 ,
每个值用=连接 , user和pwd是页面上name属性的值 , 1和2是用户在浏览器输入的数据
http://127.0.0.1:8848/hbuilderx/cgb2107/test4.html?user=1&pwd= 2
遇到的问题
–性别可以多选: 让性别的输入框name属性的值相同
–单选框和多选框提交的数据是on: 设置value属性

练习学生管理系统

<!DOCTYPE html>

<html>

<head>

<title>注册学生信息</title>

</head>

<body>

</audio>

</video>

<!-- form标签用来提交数据,

method属性用来指定提交数据的方式,

action属性用来指定提交到哪里

-->

<table>

<tr>

<td>

<h2>学生信息管理系统MIS</h2>

</td>

</tr>

<tr>

</tr>

<tr>

<td>

<input type="text" name="user"

placeholder="在这里输入姓名"/>

</td>

</tr>

<tr>

</tr>

<tr>

<td>

<input type="number" name="age"

placeholder="在这里输入年龄"/>

</td>

</tr>

<tr>

<td>

性别:(单选框)

<input type="radio" name="sex" value="1"

checked="checked"/>男

女

</td>

</tr>

<tr>

<td>

爱好:(多选)

<input type="checkbox" name="hobby"

value="1" checked="checked"/>乒乓球

<input type="checkbox" name="hobby"

value="2"/>爬山

<input type="checkbox" name="hobby"

value="3"/>唱歌

</td>

</tr>

<tr>

<td>

学历:(下拉框)

</select>

</td>

</tr>

<tr>

<td>

入学日期:

</td>

</tr>

<tr>

<td>

</td>

</tr>

</table>

</form>

</body>

</html>

1，CSS全称是层叠样式表 stylesheet , 用来修饰HTML的 .

CSS语法 : 元素的选择器{ 属性名 : 属性值 ; 属性名 : 属性值 ; 属性

名 : 属性值 ; }

CSS使用的位置:

（1）行内CSS(给标签加了一个style属性)

（2）内部CSS(使用HTML提供的style标签,把CSS代码包起来)

（3）外部CSS(在网页里,引入一个外部的CSS文件)

2，测试

<!DOCTYPE html>

<html>

<head>

<title>测试 css的入门案例</title>

<style>

/* 语法:选择器{ css的效果 } */

h1{ /* 设置h1的文字居中 */

text-align:center;

}

</style>

</head>

<body>

<div style="text-align:center;">我是div1</div>

<div style="text-align:center;">我是div2</div>

</body>

</html>

选择器

CSS提供的一种方式,可以方便的选中网页中的各种元素.
常用的选择器: 简单选择器(标签名,id,类) 分组选择器属性选择器

<!DOCTYPE html>

<html>

<head>

<title>测试 css选择器</title>

<style>

/* 1. 标签名选择器:选中了网页中,所有标签名字叫div的

元素 */

div{ /* 选中所有div的 */

color:red; /* 文字设置成红色 */

border-style:dashed; /* 设置虚线边框 */

border-radius:15px; /* 圆角边框 */

border-color: green; /* 边框的颜色*/

}

h1{ /* 选中所有h1 */

background-color:Tomato; /* 背景颜色 */

color:white; /* 文字颜色 */

}

/* 2. */

</style>

</head>

<body>

<div>我是div1</div>

<div>我是div2</div>

<div>我是div3</div>

<div>我是div4</div>

<span>我是span1</span>

<span>我是span2</span>

<span>我是span3</span>

</body>

</html>

模拟服务器解析浏览器发来的数据

package cn.tedu.test2;

public class TestUrl {

public static void main(String[] args) {

//1,接受用户发来的数据

String url = "http://127.0.0.1:8848/cgb2107/student.html?

user=jack&age=18&sex=1&hobby=1&hobby=2&hobby=3&xueli=2&day =2021-09-03";

//按照?切割字符串

String[] a = url.split("\\?");

//[http://127.0.0.1:8848/cgb2107/student.html,

//user=jack&age=18&sex=1&hobby=1&hobby=2&hobby=3&xueli= 2&day=2021-09-03]

//只获取数组里的第二部分

String data = a[1];

//继续切,用&切

String[] b = data.split("&");

//[user=jack,age=18,sex=1,hobby=1,hobby=2,hobby=3,xueli=2, day=2021-09-03]

//循环b数组

for(String s : b){//获取到每一组数据user=jack,age=18

String[] c = s.split("=");//把每组数据按照=切割 [age,18]

String datas = c[1];//只取=后面的数据c[1]

System.out.println(datas);

}

CSS选择器

概述

CSS提供的一种方式,可以方便的选中网页中的各种元素.
常用的选择器: 简单选择器(标签名,id,类) 分组选择器属性选择器

简单选择器测试

<!DOCTYPE html>

<html>

<head>

<title>测试 CSS的选择器</title>

<style>

/* 1.标签名选择器:按照标签的名字选中元素 */

h1{/* 给h1设置字的颜色 */

color: #00FFFF;

}

/* 2.类选择器:按照class属性的值选中元素

先给元素加class属性 + 通过.获取class的值

.a{ /* 选中网页中class=a的元素 */

font-family: "黑体"; /* 字体 */

font-style: oblique; /* 字体倾斜 */

font-size: 30px; /* 字号 */

}

.b{/* 选中网页中class=b的元素 */

/* 文字阴影水平阴影垂直阴影模糊程度阴

影颜色 */

text-shadow: 2px 2px 5px red;

}

/* 3. id选择器:按照id属性的值(唯一) 选中元素

先给元素加id属性 + 通过# 获取id的值

#div1{

opacity: 0.5;/* 设置不透明度,0~1,越小越

透明 */

}

</style>

</head>

<body>

<div>我是div2</div>

<div class="a">我是div3</div>

<div id="div1">我是div4</div>

<span>我是span1</span>

<span class="b a">我是span2</span>

<span>我是span3</span>

</body>

</html>

分组选择器属性选择器

<!DOCTYPE html>

<html>

<head>

<title>CSS的高级选择器</title>

<style>

/*1.分组选择器:选中一批元素分成一组,统一设置样式

div,span{/* 把所有div和span设置字体颜色 */

color:red; /* 字的颜色 */

font-family: "微软雅黑"; /* 字体*/

font-size: 20px; /* 字号*/

background-color: #00FFFF; /* 背景色 */

}

/* 2. 属性选择器: 通过标签的属性选中元素 */

a[href]{ /* 选中有href属性的a标签*/

color: #008000; /* 字的颜色*/

}

/* 选中type=text的input设置背景色 */

input[type="text"]{

background-color: #008000;

}

.m{

color: red;

}

.n{

color: green;

text-indent: 200px; /* 首行缩进*/

}

</style>

</head>

<body>

<div>我是div1</div>

<div>我是div2</div>

<span>我是span1</span>

</body>

</html>

综合练习

盒子模型

CSS把网页里的每个元素都当做一个盒子来看.
外边距: 盒子间的距离margin
内边距: 一个盒子里, 内容和边框的距离padding
宽width/高height/边框border: 一个盒子里的

<input type="radio" name="sex" value="1"

style="margin-left:30px;"/>男2

<input type="radio" name="sex" value="1"

style="margin-right:30px;"/>男3

<input type="radio" name="sex" value="1"

style="margin-top:30px;"/>男4

<input type="radio" name="sex" value="1"

style="margin-bottom:30px;"/>男5

<input type="text" placeholder="你好0"

style="padding:20px;"/>

<input type="text" placeholder="你好1"

style="padding-left:20px;"/>

<input type="text" placeholder="你好2"

style="padding-top:20px;"/>

<input type="text" placeholder="你好3"

style="padding-bottom:20px;"/>

注册页面

<!DOCTYPE html>

<html>

<head>

<title>测试用户注册</title>

<style>

/* 1.修饰输入框 */

.a{

padding:10px;/* 内边距 */

width: 300px;/* 宽度 */

height:30px;/* 高度 */

font-size:20px;/* 文字大小 */

}

/* 2.修饰提示文字 */

.b{

font-size:8px;/* 字号 */

color: #999999;/* 字的颜色 */

padding: 10px;/* 内边距 */

}

/* 3.修饰我已阅读 */

#c{

margin: 10px; /*外边距 */

text-indent:40px ;/* 首行缩进 */

font-size: 8px;/* 文字变小 */

}

/* 4.修饰立即注册按钮 */

input[type="submit"]{

width: 320px;/* 宽度 */

height: 50px;/* 高度 */

background-color: tomato;/* 背景色 */

border-color:tomato ;/* 边框颜色 */

color: white;/* 文字颜色 */

font-size: 25px;/* 字体大小 */

text-align: center;/* 文字居中 */

}

/* 修饰用户注册居中 */

h2{

text-indent:100px;/* 文本缩进 */

}

</style>

</head>

<body>

<table>

<tr>

<td>

</td>

</tr>

<tr>

<td>

<input class="a" type="text"

placeholder="用户名" name="user"/>

</td>

</tr>

<tr>

<td class="b" >支持中文、字母、数字、“-”、

“_”的组合，4-20个字符</td>

</tr>

<tr>

<td>

<input class="a" type="password"

placeholder="设置密码" name="pwd"/>

</td>

</tr>

<tr>

<td class="b" >建议使用数字、字母和符号两

种以上的组合，6-20个字符</td>

</tr>

<tr>

<td>

<input class="a" type="password"

placeholder="确认密码" name="repwd"/>

</td>

</tr>

<tr>

<td class="b" >两次密码输入不一致</td>

</tr>

<tr>

<td>

<input class="a" type="text"

placeholder="验证手机" name="tel"/>

或 <a href="#">验证邮箱</a>

</td>

</tr>

<tr>

<td>

我已阅读并同意

<a href="#">《京淘用户注册协议》</a>

</td>

</tr>

<tr>

<td>

<input type="submit" value="立即注册

"/>

</td>

</tr>

</table>

</form>

</body>

</html>

3）优化HTML / CSS，实现松耦合

创建CSS文件

/* 1.修饰输入框 */

.a{

padding:10px;/* 内边距 */

width: 300px;/* 宽度 */

height:30px;/* 高度 */

font-size:20px;/* 文字大小 */

}

/* 2.修饰提示文字 */

.b{

font-size:8px;/* 字号 */

color: #999999;/* 字的颜色 */

padding: 10px;/* 内边距 */

}

/* 3.修饰我已阅读 */

#c{

margin: 10px; /*外边距 */

text-indent:40px ;/* 首行缩进 */

font-size: 8px;/* 文字变小 */

}

/* 4.修饰立即注册按钮 */

input[type="submit"]{

width: 320px;/* 宽度 */

height: 50px;/* 高度 */

background-color: tomato;/* 背景色 */

border-color:tomato ;/* 边框颜色 */

color: white;/* 文字颜色 */

font-size: 25px;/* 字体大小 */

text-align: center;/* 文字居中 */

}

/* 修饰用户注册居中 */

h2{

text-indent:100px;/* 文本缩进 */

}

修改HTML文件

<!DOCTYPE html>

<html>

<head>

<title>测试用户注册</title>

<!-- 引入外部的css文件

href属性用来指定文件的位置

rel属性用来指定文件的类型

-->

</head>

<body>

<table>

<tr>

<td>

</td>

</tr>

<tr>

<td>

<input class="a" type="text"

placeholder="用户名" name="user"/>

</td>

</tr>

<tr>

<td class="b" >支持中文、字母、数字、“-”、

“_”的组合，4-20个字符</td>

</tr>

<tr>

<td>

<input class="a" type="password"

placeholder="设置密码" name="pwd"/>

</td>

</tr>

<tr>

<td class="b" >建议使用数字、字母和符号两

种以上的组合，6-20个字符</td>

</tr>

<tr>

<td>

<input class="a" type="password"

placeholder="确认密码" name="repwd"/>

</td>

</tr>

<tr>

<td class="b" >两次密码输入不一致</td>

</tr>

<tr>

<td>

<input class="a" type="text"

placeholder="验证手机" name="tel"/>

或 <a href="#">验证邮箱</a>

</td>

</tr>

<tr>

<td>

我已阅读并同意

<a href="#">《京淘用户注册协议》</a>

</td>

</tr>

<tr>

<td>

<input type="submit" value="立即注册

"/>

</td>

</tr>

</table>

</form>

</body>

</html>

JavaScript

1概述

是弱类型的语言, 是基于对象和事件驱动的脚本语言

基于对象: JS和java一样,也有对象的概念,也提供了一些内置的对象, 也可以自定义对象

事件驱动: JS里有很多的事件, 当事件被触发时才执行JS代码. 常用的事件:鼠标滑过/单击/双击/鼠标悬停

脚本语言: JS是一个弱类型,被浏览器执行的语言. 只要有浏览器的地方都可以执行JS

好处: 是直译式的语言,增强了用户和浏览器之间的交互性.

使用位置:

1）行内JS: 只能作用在一行

2）内部JS: 通常在head标签里,使用script标签,把JS的代码包起来

3）外部JS: 松耦合,单独创建一个js文件,可以被引入到各种网页中

：cgb2107-day08_cgblpx的博客-CSDN博客

入门案例

<!DOCTYPE html>

<html>

<head>

<title>测试 JavaScript</title>

alert('我来了')

</script>

</head>

<body>

<div οnclick="alert(100)">我是div1</div>

<div οndblclick="alert('你好')">我是div2</div>

<div οnmοuseenter="alert(200)">我是div3</div>

</body>

</html>

测试

<!DOCTYPE html>

<html>

<head>

<title>测试 JavaScript</title>

//JS的数据类型:number string null boolean undefined

alert(2.4+3.6); //number类型的运算,会自动类型转换

alert('hello js'); //string类型

alert("hello js"); //string类型

alert(true); //boolean类型

alert(false); //boolean类型

alert(null); //null类型

</script>

</head>

<body>

<div οnclick="alert(100);">我是div1</div>

<div οndblclick="alert('你好');">我是div2</div>

<div οnmοuseenter="alert(200);">我是div3</div>

</body>

</html>

4，JavaScript的基础语法

1）测试

<!DOCTYPE html>

<html>

<head>

<title>测试 js的基础语法</title>

//2.JS的运算符

//typeof运算符获取数据的类型

var i = 10;

console.log(typeof i);//number,控制台输出的日

志,f12

i = 'hello';

console.log(typeof i);

console.log(typeof i + 'abc');

//比两个数里的最大值

var e = 3;

var f = 5;

var g = e > f ? e: f ;

alert(g);

//比三个数里的最大值

var h = 8;

// g = g > h ? g : h ;

// g = e > f ? e大 : f大 ;

g = e > f ? (e > h ? e : h) : (f > h ? f : h) ;

alert(g);

var c = 10 ;

var d = '10' ;

alert(c==d);//true

alert(c===d);//false,比值和类型

alert(c!=d);//false

alert(c!==d);//true

var b = 10;

alert(b+1);//11

alert(b-2);//8

alert(b*1.6);//16

alert(b/3);//3.333

alert(b%3);//1

//自增自减

//alert(b++);//10

//alert(++b);//11

// b = b++ ;

// alert(b+"====");//10

//java面试题:以下两行代码有区别吗?

// byte b = 1;

// b = b * 2 ; // 错误,需要强转

// b *= 2 ; //正确,复合赋值运算符会自动类型转换

b = b * 2 ;

b *= 2 ;

// 1.JS的变量: 变量类型变量名=变量值

var a = 5;

//修改a的类型

a = 1.5;

a = "hello js" ;

a = 'hello js2' ;

a = true ;

alert(a);

</script>

</head>

<body>

</body>

</html>

JavaScript语句

概述

<!DOCTYPE html>

<html>

<head>

<title>测试 JS的语句</title>

// 2. JS的循环结构:for while

//练习:while 计算1个亿一天花一半,花多少天

var days = 0;//定义变量,记录天数

var money = 100000000 ;//定义变量,记录钱

while( money > 1 ){

money /= 2 ; //照着一半花

days++ ; //天数++

}

console.log('1个亿总共花了'+days+'天');

//练习:for计算1~100里的奇数个数

var count = 0;//定义变量,记录个数

for(var i = 1 ; i<=100 ; i++){

if(i % 2 == 1){//奇数

count++ ;//遇到奇数就加1

}

console.log('奇数个数是:'+count);

//练习:for计算1~100里的偶数和

var sum = 0;//定义变量,记录和

for(var i=1 ; i<=100 ;i++){

if( i % 2 == 0 ){//偶数

sum = sum + i ;

}

console.log('偶数和是:'+sum);

// 1. JS的分支结构:

//switch...case

//练习:根据变量的值,提示今天星期几

var week = 1 ;

switch(week){

case 1 : console.log('今天星期1');break;

case 2 : console.log('今天星期2');break;

case 3 : console.log('今天星期3');break;

case 4 : console.log('今天星期4');break;

case 5 : console.log('今天星期5');break;

case 6 : console.log('今天星期6');break;

case 7 : console.log('今天星期7');break;

}

//if...else

//练习: 80~100(包括80，也包括100) 优秀

// 60~80(包括60，但不包括80) 中等

// 0~60(包括0，但不包括60) 不及格

// 其他值输入有误

var score = 78 ;

if(score>=80 && score<=100){

console.log('优秀');

}else if(score>=60 && score<80){

console.log('中等');

}else if(score>=0 && score<60){

console.log('不及格');

}else{

console.log('输入有误');

}

const m = 10 ;//const定义常量,必须被初始化,

而且不能改值

// m = 1.1;

console.log(m);

var a = 10;

if( a > 5 ){

console.log('ok');

}else{

console.log('no ok');

}

</script>

</head>

<body>

</body>

</html>

JavaScript数组

测试

<!DOCTYPE html>

<html>

<head>

<title>测试 JS的数组</title>

// 1.创建js数组: 数据类型丰富,长度可变

//第二种方式: 推荐!!

var b = [] ;

console.log(b.length);

b = [10,1.1,'jack',true,null] ;

console.log(b.length);

b[3]=99;

console.log(b);

//遍历数组:i表示下标,b.length是数组的长度

for(var i = 0 ; i < b.length ; i++ ){

console.log(b[i]);//根据下标获取数据

}

//java里的foreach: for(Object o : b){

//js里的for..in

for(var o in b){

console.log(b[o]);//o是下标,根据下标获取

数据

}

//第一种方式:

var a = new Array();

console.log(a);

console.log(a.length);//获取数组的长度

//修改长度并存入各种类型的数据

a = new Array(10,1.1,'jack',true,null);

console.log(a);

a[99]=100;

console.log(a.length);//100

console.log(a);

</script>

</head>

<body>

</body>

</html>

JavaScript函数

测试

<!DOCTYPE html>

<html>

<head>

<title>测试 JS的函数</title>

//定义JS的函数方式2:

// 1.定义JS的函数

//语法:function 函数名(参数列表){函数体}

function add(){

//需求:统计整数数组里的和

var a = [1,2,3,4,5];

var b = 0;//定义变量,记录和

for(var i in a){//i是下标

//a[i]根据下标获取数据

b = b + a[i] ;//累计求和

}

console.log('总和是:'+b);

}

//优化add(),动态接受用户调用时传入的参数

//需求:统计整数数组里的和

function add2(a){

var b = 0;//定义变量,记录和

for(var i in a){//i是下标

//a[i]根据下标获取数据

b = b + a[i] ;//累计求和

}

console.log('总和是:'+b);

}

//优化add2(),给调用者返回结果

function add3(a){

var b = 0;//定义变量,记录和

for(var i in a){//i是下标

//a[i]根据下标获取数据

b = b + a[i] ;//累计求和

}

return b ;//return把结果返回给调用者

}

// 2.调用函数

//语法:函数名(参数列表);

add();

var arr = [1,2,3];

add2(arr);//需求:统计整数数组里的和

//调用了一个有返回值的函数

var sum = add3(arr);

console.log(sum*5);

</script>

</head>

<body>

</body>

</html>

复习

<!DOCTYPE html>

<html>

<head>

//统计1~100里4的整数倍数的和

//方式1:

//1. 定义js函数

function test1(){

var sum = 0 ;//定义变量,记录总和

for(var i=1;i<=100;i++){

if(i % 4 == 0){//4的整数倍

sum = sum + i ; //求和

}

return sum ;//把算完的和返回给调用者

}

//2.调用函数

var a = test1();

console.log(a);

//方式2:

//1.定义函数

var test2 = function(){

console.log(100);

}

var test3 = function(){

return 666; //返回值,交给调用者保存

}

var test4 = function(a,b,c){

//参数列表等着调用者传入具体的值

return a+b+c;

}

//2.调用函数

var tt = test4(1,2,3);

console.log(tt);

var t = test3();

console.log(t);

test2();

</script>

</head>

<body>

</body>

</html>

JavaScript对象

测试

<!DOCTYPE html>

<html>

<head>

<title>测试 JS的对象</title>

//2. js的自定义对象

//方式2: {name: 'jack', age: 20}

//练习:创建新的js对象

var car = {

//绑定属性 k:v

color : 'red' ,

price : 9.9 ,

//绑定函数

run : function(a,b){

console.log(a+b);

stop : function(x,y,z){

return x+y+z ;//返回给调用者

}

//调用属性

console.log(car.color + car.price);

//调用函数

var res = car.stop(1,2,3);

console.log(res);

car.run(1,2);

console.log(car);

var teacher = {

//绑定属性

name : 'jack',

age : 20 ,

//绑定函数

run : function(){

console.log(100);

eat : function(){

console.log(200);

}

teacher.eat();//调用函数

teacher.run();

console.log( teacher.name );

//调用属性的值可以打印或修改

//方式1:

function Student(){}//声明对象

var s = new Student();//创建对象

//绑定属性

s.name='蔡徐坤';

s.hobby='唱跳rap';

//绑定函数

s.sing=function(){

console.log("solo...");

}

console.log(s);

s.sing();

function Person(){}//声明对象

var p = new Person();//创建对象

//动态的给对象绑定属性

p.name = 'jack';

p.age = 20;

//动态的给对象绑定函数

p.eat = function(){

console.log(100);

}

console.log(p);

p.eat();//调用函数

//1.js的内置对象

//document对象,JSON对象...重点后面讲

//window对象的常用功能--了解

// window.alert('123');//弹出框

// window.confirm('请选择');//确认框

// window.prompt('请输入');//输入框

// window.document //获取document文档对象

// //string对象的常用功能--了解

// alert('123'.length);//求字符串的长度

// alert('123'.concat("hello"));//拼接字符串

// //number对象的常用功能--了解

// alert(3.3333.toFixed(2));

//约束小数位数,参数是小数的位数

// var a = parseInt('100')+1 ;

//把字符串转成数字

// alert(a);//101

</script>

</head>

<body>

</body>

</html>

DOM技术

概述

全称是文档对象模型.用来利用document对象提供的各种属性和方法, 方便快速的定位网页中的所有元素

document对象

获取对象: window.document
常用的方法:

按照id的值获取元素: getElementById(id属性的值)–只会获取到一个元素

按照name的值获取元素: getElementsByName(name属性的值)–获取到多个元素 , 存入数组

按照class的值获取元素: getElementsByClassName(class属性的值)–获取到多个元素 , 存入数组

按照标签名的值获取元素: getElementsByTagName(标签的名字)– 获取到多个元素 , 存入数组

直接向网页输出: write()

常用的属性

title–返回网页的标题
id–设置或返回元素的id
innerHTML–设置或返回元素的内容

测试

<!DOCTYPE html>

<html>

<head>

<title>测试 DOM技术</title>

<!--

DOM: document object model 文档对象模型,用来利用js 的技术快速的操作元素

利用核心对象document提供的API完成

-->

</head>

<body>

<!-- onclick给元素设置鼠标点击事件,

调用指定函数test1() -->

<div οnclick="test1()">我是div1</div>

<div name="n1">我是div2</div>

<div class="c1">我是div3</div>

<span id="d1">我是span1</span>

<span name="n1">我是span2</span>

// 1. 定义函数--当点击我是div1时触发

function test1(){

//需求3:输出第二个class="c1"的元素内容

var data2 =

document.getElementsByClassName("c1")[1].innerText;

console.log(data2);

//修改元素内容

// document.getElementsByClassName("c1")[1].innerText='<p>我是

p1</p>';//不解析标签

document.getElementsByClassName("c1")[1].innerHTML='<p>我是

p1</p>';//解析

//修改元素的样式css变字的颜色

document.getElementById("d1").style.color='red' ;

//需求2:输出第一个name="n1"的元素内容

//document.getElementsByName根据name属性获取到

多个元素,存入数组

//[0]按照下标,获取到数组里的第一个元素

var data =

document.getElementsByName("n1")[0].innerText ;

console.log(data);

//也可以选中元素后,直接修改内容

document.getElementsByName("n1")[0].innerHTML='<h1>我又变

了...</h1>' ;

//document对象提供的innerHTML和innerText属性的区别?前者可以解析HTML代码

//需求1:输出了id=d1的元素内容

var a = document.getElementById("d1");

//获取id=d1的元素

console.log(a);//输出了整个元素

console.log(a.innerHTML);//获取元素的内容

a.innerHTML='我变了....';//修改元素的内容

}

</script>

</body>

</html>

JSON

1,概述

就是一个字符串,作用就是用来,完成浏览器和服务器之间的数据的交换
规定了浏览器和服务器之间的数据的格式 : ’ “name” : “jack” ’

测试

<!DOCTYPE html>

<html>

<head>

<title>测试 JSON字符串</title>

<!-- JSON用来完成浏览器和服务器之间的数据交换的格式

-->

// 1. 定义一个简单的json字符串

var a = '"name":"jack"' ;

console.log(a);

console.log(a.length);//求字符串的长度

// 2. 定义一个json对象

var b = '{"name":"jack","age":"20"}' ;

console.log(b);

var c = b.concat('hello');//b拼接字符串

// 3. 定义一个json数组

var d ='[{"firstname":"tom","lastname":"chen"},

{"firstname":"jerry","lastname":"wang"}]';

console.log(d);

//问题: 解析json字符串里的数据太麻烦,还要对字符串进行切割

截取....

//解决方案:把一个json字符串转成JS对象,再通过对象方便的调

用属性的值--利用JSON对象

</script>

</head>

<body>

</body>

</html>

3,概述

是一个字符串,用来完成前后端数据交互的格式.

是一种轻量级的数据交换格式,而且数据格式看起来很简洁

JSON对象: 可以把 json字符串和 js对象互转

1） json字符串转成 js对象: 方便的通过对象,调用属性函数

JSON.parse(json字符串) :接受一个json字符串作为参数,返回 js对

象

2） js对象转成 json字符串: 方便对字符串操作(拼接,长度,截取…)

JSON.stringify(js对象) : 接受一个js对象,返回一个 json字符串

4，测试

<!DOCTYPE html>

<html>

<head>

<title>测试 JSON对象</title>

//定义函数,点击div1时触发

function test1(){

// 1. json字符串,对象的写法

var a ='{"name":"jack","age":"20"}';

// 2. json字符串,数组的写法

var b ='[{"name":"tony","age":"20"}

,{"name":"rose","age":"30"}]';

//3. JSON对象

//3.1 json字符串的转成js对象:目的是方便的调用对

象封装的属性

var jsobj = JSON.parse(a);//json字符串的转成

js对象

console.log(jsobj);//{name: 'jack', age: '20'}

console.log(jsobj.name);//获取对象里name属性

的值

console.log(jsobj.age);//获取对象里age属性的

值

//需求: 利用dom技术,把解析到的name属性的值,

展示在id="d2"位置

document.getElementById("d2").innerHTML=jsobj.name ;

//练习:

var jsobj2 = JSON.parse(b);//json字符串的转成

js对象

console.log(jsobj2);//类似于数组结构

console.log(jsobj2[1].name);//获取到数组里第

二个对象的name属性的值

console.log(jsobj2[0].age);//获取到数组里第

一个对象的age属性的值

//需求: 利用dom技术,把解析到的20,展示在

id="d3"位置

document.getElementById("d3").innerHTML =

jsobj2[0].age ;

//3.2 js对象转成json字符串:目的是方便的操作字符

串,也可以发送给服务器

//创建js对象

var obj = { name:"jack" , age:20 } ;

var jsonstr = JSON.stringify(obj);//js对象转

成json字符串

console.log(jsonstr);//得到json字符串

console.log(jsonstr.length);

//获取字符串的长度

console.log(jsonstr.concat('hello'));

//拼接字符串

}

</script>

</head>

<body>

<div id="d1" οnclick="test1()">我是div1,点我</div>

<div id="d2">我是div2</div>

<div id="d3">我是div3</div>

</body>

</html>

5，优化HTML 和JavaScript文件，实现松耦合

1）创建JavaScript文件

//定义函数,点击div1时触发

function test1(){

// 1. json字符串,对象的写法

var a ='{"name":"jack","age":"20"}';

// 2. json字符串,数组的写法

var b ='[{"name":"tony","age":"20"},

{"name":"rose","age":"30"}]';

//3. JSON对象

//3.1 json字符串的转成js对象:目的是方便的调用对象封装

的属性

var jsobj = JSON.parse(a);//json字符串的转成js对象

console.log(jsobj);//{name: 'jack', age: '20'}

console.log(jsobj.name);//获取对象里name属性的值

console.log(jsobj.age);//获取对象里age属性的值

//需求: 利用dom技术,把解析到的name属性的值,展示在

id="d2"位置

document.getElementById("d2").innerHTML=jsobj.name ;

//练习:

var jsobj2 = JSON.parse(b);//json字符串的转成js对象

console.log(jsobj2);//类似于数组结构

console.log(jsobj2[1].name);

//获取到数组里第二个对象的name属性的值

console.log(jsobj2[0].age);

//获取到数组里第一个对象的age属性的值

//需求: 利用dom技术,把解析到的20,展示在id="d3"位置

document.getElementById("d3").innerHTML =

jsobj2[0].age ;

//3.2 js对象转成json字符串:目的是方便的操作字符串,

也可以发送给服务器

//创建js对象

var obj = { name:"jack" , age:20 } ;

var jsonstr = JSON.stringify(obj);

//js对象转成json字符串

console.log(jsonstr);//得到json字符串

console.log(jsonstr.length);//获取字符串的长度

console.log(jsonstr.concat('hello'));//拼接字符串

}

2）修改HTML文件

<!DOCTYPE html>

<html>

<head>

<title>测试 JSON对象</title>

</head>

<body>

<div id="d1" οnclick="test1()">我是div1,点我</div>

<div id="d2">我是div2</div>

<div id="d3">我是div3</div>

</body>

</html>

前端代码 (html css JavaScript DOM JSON)相关推荐

javaWeb学习笔记1—前端三件套 HTML CSS JavaScript
学习视频地址 javaWeb学习笔记-前端三件套 HTML CSS JavaScript 1.字体标签 2. 字符实体 3.标题标签 4.超链接 5.列表标签 6. img标签路径 7.表格 8.i ...
【Web前端】html+css+javascript
1 HTML 1.1. HTML基本概念 HTML:hyper text markup language 超文本标记语言,就是超出纯文本范畴的语言,其中既可以定义文本也可以定义图片,超链接等等非文本性 ...
100行JS代码实现❤坦克大战js小游戏源码 HTML5坦克大战游戏代码(HTML+CSS+JavaScript )
坦克大战js小游戏源码 HTML5坦克大战游戏代码(HTML+CSS+JavaScript ) HTML5坦克大战网页小游戏,完美还原小霸王学习机效果,以坦克战斗及保卫基地为主题,属于策略型类游戏. ...
前端笔记(Html+CSS+JS+DOM+网页特效+jQuery+HTML5+CSS3+canvas 标签+web开发重难点+面向对象+AJAX)
第1章Html Html:超级文本标记语言(HyperText Markup Language),在浏览器上运行的一种标记语言. 就是给文本加上含有语义的标签. 接下来应该学习更多具体语义标签: 一. ...
HTML5期末大作业：动漫网站设计——福五鼠动漫(6页)带轮播特效高质量代码 HTML+CSS+JavaScript 毕设网页设计HTML
HTML5期末大作业:动漫网站设计--福五鼠动漫(6页)带轮播特效 HTML+CSS+JavaScript 大学生毕设网页设计HTML 学生网页课程设计期末作业下载 web网页设计制作成品常见网页设 ...
程序猿小明需要为公司员工的个人信息录入编写前端代码,html +css +js正则表达式实现个人信息登录表
~关注我带你看更多精品技术和面试必备程序猿小明需要为公司员工的个人信息录入编写前端代码,效果如下图需求:要保证信息录入格式正确无遗漏(输入有误要给到对应提示) 我写的代码如下 : 可以借 ...
前端复习HTML+CSS+JavaScript（必问面试题）
前端复习 HTML 常见的几种图片格式以及他们之间的区别是什么? JPG:支持有损压缩.不支持透明.不支持动画.色彩还原度较好 PNG:不支持压缩.支持透明.半透明.不透明.不支持动画 GIF:支持有 ...
vscode前端环境(html+css+javascript)的配置
现在最新版本的vscode已经不需要额外配置这三个语言本身了.已经默认支持很多功能. IntelliJ IDEA Keybindings快捷键插件习惯用idea的快捷键,根据需要来.这个插件可以将快 ...
前端基础(HTML,CSS,JavaScript,jQuery)
文章目录 `HTML` 基础 `HTML`文件的基本结构标签属性转义字符元素之间的关系常用标签基本列表图片表格嵌套页面表单 `form`提交表单的属性: `GET`请求的特点 ` ...

前端代码 (html css JavaScript DOM JSON)

前端代码 (html css JavaScript DOM JSON)相关推荐

最新文章

热门文章