第6天学习Web技术笔记

博主：小草林
发布时间：2021 年 07 月 18 日
825 次浏览
暂无评论
2327字数
分类：编程日常-Web

## 一.JS作用

1  Java工程师，JS必须，熟练
2  Web前端，JS深入，精通，岗位开发语言就是JS
3  大数据工程，爬虫工程师:JS也必须

---

## 二.JS是什么

脚本语言，运行在浏览器中，客户机中，各种浏览器均能执行JS
不同浏览器支持程度不同，不是W3X标准，由欧洲计算机制造商协会的标准
HTML,CSS,JS均由浏览器执行

---

## 三.上网过程，前端代码执行过程

1. B/S结构:Browser/Server   浏览器/服务器结构
2. C/S结构:Client/Server   客户机/服务器结构
3. 单机软件:Word,自己电脑上安，只能自己用

- 输入网址:浏览器向服务器发送请求
- 响应:服务器收到浏览器请求后，服务器会服务器上网页源码HTML,CSS,JS发回浏览器
- 浏览器收到源码后，对源码执行，产生效果

---

## 四.JS学习

1. JS调试较麻烦，要利用Chrome/Firefox控制台
2. 写JS程序细心，排错麻烦

<div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-50281ec10875f6ef82655bdcea54464613" aria-expanded="true"><div class="accordion-toggle"><span style="">Chrome调试控制台console打开方法</span>
<i class="pull-right fontello icon-fw fontello-angle-right"></i>
</div>
</div>
<div class="panel-body collapse-panel-body">
<div id="collapse-50281ec10875f6ef82655bdcea54464613" class="collapse in collapse-content"><p></p> 1.鼠标点击 2.F12 3.Ctrl+Shift+I<p></p></div></div></div>

---

## 五.JS学习重点

1. 语法if,for,运算符
2. 函数
3. 事件
4. 正则表达式与表单验证
5. DOM

---

## 六.JS输出[便于调试]

1. 使用[alert()]
2. 使用[console.log()]

<div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-47206b946896bff475d81aa03c9e150442" aria-expanded="true"><div class="accordion-toggle"><span style="">JS代码位置</span>
<i class="pull-right fontello icon-fw fontello-angle-right"></i>
</div>
</div>
<div class="panel-body collapse-panel-body">
<div id="collapse-47206b946896bff475d81aa03c9e150442" class="collapse collapse-content"><p></p>

1. 网页内部
2. js文件中
   <p></p></div></div></div>

代码示例:
</div>
<div class="tip inlineBlock warning">

这是head区的:
</div>

```js
<head>
	<meta charset="UTF-8">
	<title>JS输出</title>
	<script>
		//放JS代码
		alert("第一次学JS");
		//在控制台输出
		console.log("这是一个测试");
	</script>
</head>
```

---

## 七.JS语法

1. JS为弱类型语言[没类型]
2. JS中变量定义可用var也可不用
3. JS大小写敏感[严格]
4. 语句结尾；可写可不写
5. 函数用function,名称和形参由我定义，无返回[弱类型]

实战示例:
</div>

**结合这个实战示例:**

这是head区的:
</div>

```html
<head>
	<meta charset="UTF-8">
	<title>个人存款计算软件界面</title>
	
	<link href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
	
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
	<script>
		//定义一个函数，完成计算
		function jisuan(){
			//1.获取文本框输入的数字
			var cunkun = document.getElementById("shuru").value;
			//上方取得值为:"数字"
			//"数字"-->数字
			var cunkunnum=parseInt(cunkun);//字符串转为整数
			//2.开始计算
			//取得存款年限
			var lilv=document.getElementById("year").value;
			//3.判断并求利息
			if(lilv=="0.0175") {var lixi=cunkunnum*lilv*1}
			else if(lilv=="0.0225") {var lixi=cunkunnum*lilv*2}
			else if(lilv=="0.02753") {var lixi=cunkunnum*0.0275*3}
			else if(lilv=="0.02755") {var lixi=cunkunnum*0.0275*5}
			var benxi=lixi+cunkunnum//本息合计
			//3.把结构写入相应文本框
			document.getElementById("lixi").value=lixi;
			document.getElementById("total").value=benxi;
		}
	</script>
</head>
```

这是body区的:
</div>

```html
<body>
	<div class="container text-center">
		<h1>个人存款计算</h1>
		<table class="table table-bordered text-center">
			<tr class="bg-primary">
				<td colspan="2">个人存款计算器</td>
			</tr>
			<tr>
				<td>存款金额</td>
				<td>
					<input class="form-control" type="text" id="shuru" placeholder="请输入存款金额"/>
				</td>
			</tr>
			<tr>
				<td>存款年限</td>
				<td>
					<select id="year" class="form-control"/>
						<option value="0.0175">1年(1.75%)</option>
						<option value="0.0225">2年(2.25%)</option>
						<option value="0.0275">3年(2.75%)</option>
						<option value="0.0275">5年(2.75%)</option>
					</select>
				</td>
			</tr>
			<tr>
				<td>所得利息</td>
				<td>
					<input class="form-control" type="text" id="lixi" readonly="readonly" />
				</td>
			</tr>
			<tr>
				<td>本息合计</td>
				<td>
					<input class="form-control" type="text" id="total" readonly="readonly" />
				</td>
			</tr>
			<tr>
				<td colspan="2">
					<button class="btn-primary btn-block">计算</button>
				</td>
			</tr>
		</table>
		开发者信息: 小草林
	</div>
</body>
```

最后修改：2021 年 07 月 24 日

如果觉得我的文章对你有用，请随意赞赏，谢谢

发表评论取消回复
本站使用cookie技术保留您的个人信息以便您下次快速评论，继续评论表示您已同意该条款

评论 *

打卡

私密评论

名称 *

🎲

邮箱 *

地址

缘梦の镇
申请更换链接：网站名称：缘梦の镇网站描述：只要你肯奋斗，没有什...
缘梦の镇
申请更换链接：网站名称：缘梦の镇网站描述：只要你肯奋斗，没有什...
譚興宇
相机拍照偏色
小有名气的道士
ヾ(≧∇≦*)ゝ
蓝易云
该评论仅登录用户及评论双方可见

79 文章数目
123 评论数目
29.06 万全站字数
3 在线人数
67,265 访客总数
1年259天运行天数
92 ms 响应耗时
2 星期前最后活动

今日已经过去小时

这周已经过去天

本月已经过去天

今年已经过去个月

第6天学习Web技术笔记

小草林 • 2021 年 07 月 18 日

## 一.JS作用

1  Java工程师，JS必须，熟练
2  Web前端，JS深入，精通，岗位开发语言就是JS
3  大数据工程，爬虫工程师:JS也必须

---

## 二.JS是什么

---

## 三.上网过程，前端代码执行过程

1. B/S结构:Browser/Server   浏览器/服务器结构
2. C/S结构:Client/Server   客户机/服务器结构
3. 单机软件:Word,自己电脑上安，只能自己用

---

## 四.JS学习

1. JS调试较麻烦，要利用Chrome/Firefox控制台
2. 写JS程序细心，排错麻烦

---

## 五.JS学习重点

1. 语法if,for,运算符
2. 函数
3. 事件
4. 正则表达式与表单验证
5. DOM

---

## 六.JS输出[便于调试]

1. 使用[alert()]
2. 使用[console.log()]

1. 网页内部
2. js文件中
   <p></p></div></div></div>

代码示例:
</div>
<div class="tip inlineBlock warning">

这是head区的:
</div>

```js
<head>
	<meta charset="UTF-8">
	<title>JS输出</title>
	<script>
		//放JS代码
		alert("第一次学JS");
		//在控制台输出
		console.log("这是一个测试");
	</script>
</head>
```

---

## 七.JS语法

实战示例:
</div>

**结合这个实战示例:**

这是head区的:
</div>

这是body区的:
</div>

第6天学习Web技术笔记

发表评论取消回复
本站使用cookie技术保留您的个人信息以便您下次快速评论，继续评论表示您已同意该条款

浅谈中国高校学生如何申请教育优惠

浅谈自己部署使用Gitlab

小草林学习宝&我的仓库&鸿蒙交流群

第5天学习Web技术笔记

第7天学习Web技术笔记

新春快乐

数据结构笔记-4

小草林系列软件交流群&微信公众号

浅谈C语言课程设计 --- 校园导航问题[已评优秀]

浅谈中国高校学生如何申请教育优惠

第6天学习Web技术笔记

发表评论 取消回复 本站使用cookie技术保留您的个人信息以便您下次快速评论，继续评论表示您已同意该条款

第6天学习Web技术笔记

发表评论取消回复
本站使用cookie技术保留您的个人信息以便您下次快速评论，继续评论表示您已同意该条款