响应式网页设计之JavaScript基础

最新推荐文章于 2024-06-17 12:01:08 发布

PRINT！

最新推荐文章于 2024-06-17 12:01:08 发布

阅读量1.2k

点赞数 6

分类专栏：响应式网页学习笔记文章标签： javascript visual studio code

本文链接：https://blog.csdn.net/qq_48592827/article/details/114366143

版权

响应式网页学习笔记专栏收录该内容

20 篇文章 3 订阅

订阅专栏

JavaScript

一、认识JavaScript
二、JavaScript基础入门
三、网页小案例
- 1.题目要求
- 2.原码奉上

一、认识JavaScript

1.什么是JavaScript？

JavaScript（简称js）是一门客户端脚本语言(也是弱类型语言)，运行在客户端的浏览器中，浏览器内核可以直接解析执行js代码。
在这里插入图片描述

2.JavaScript的组成？

在这里插入图片描述

ECMAScript标准
用于脚本语言规范（主要描述语法、变量、数据类型、关键字、保留字、运算符、逻辑控制语句、对象）
DOM（Document Object Model）
文档对象模型，通过DOM操作HTML文档，如读取、修改页面内容等；
BOM（Browser Object Model）
浏览器对象模型，通过BOM操作浏览器，如移动、缩放、关闭窗口；打开新窗口；页面跳转等；

3.JavaScript用来做些什么？

JavaScript常用与客户端表单验证，现在很多表单都会有输入规范，例如：手机号只能是11位数字（反过来看就是手机号不能包含字母和特殊字符，也必须是正好11位），如果遇到必填项还得限制不能为空。关于这些特殊限制我们可以采用JavaScript来实现。
在这里插入图片描述

当然除了这个功能JavaScript还可以给页面增加动态效果，如京东商城的抢购倒计时和轮动展示都可以通过js实现，还可以改变页面内容，这就是与静态网页的区别了。

2.JavaScript与java有什么关联？

JavaScript中文翻译意思是‘Java描述语言’，但是JavaScript和java并没有什么关联，JavaScript运行在浏览器中，代码由浏览器解释后执行，而Java运行在JVM中。既然没有关系，那为什么名字却如此相似？原来是因为JavaScript本来应该叫Livescript，但是在发布前夕，想搭上当时超热的java顺风车，临时把名字改为了JavaScript，只是为了蹭一蹭java的热度而已。不得不说这招数实在高！
在这里插入图片描述

二、JavaScript基础入门

1.在网页中引入JavaScript的方式(3种)

JavaScript的书写位置可以写在html文件的< head >< /head >，也可以写在< body >< /body >。

内嵌式（适合简短的JS代码）
将JS代码写在< script >标签内，< script >标签可放置于任何位置

<script type="text/javascript">  
   alert(‘hello world!’) //alert()方法为弹出一个警告对话框 
</script>

外联式（适合复杂的JS代码）
将JS代码写入外部JS文件中，通过< script >标签内的src属性引入

<script type="text/javascript"  src="./index.js"></script>

行内JS（不推荐）
直接将代码写在HTML元素内，该方法问题较多，不推荐使用

<button type="button" onclick="javascript:alert('hello world!')">click me</button>

2.输入/输出语句

输入框：
prompt(‘此处是提示语’);接收用户的输入
输出框：
弹出警示框：alter(‘警示框中显示的内容’);
控制台输出：console.log(‘F12中的Console可以查看’);
页面输出：document.write(“这个可以实现在页面中显示”);

<script type="text/javascript">
var name =  prompt("请输入你的姓名：");     // 变量name会保存输入的内容
alert("你输入的姓名是："+name);             // 弹出警示框
console.log("你输入的名字已经成功显示");    //控制台输出
document.write("<p>姓名："+name+"</p>");      //页面输出   
</script>

补充：这里的js代码是写在html文件的< body >中的
变量是用var关键字声明，因为JavaScript是弱类型语言，所以不区分整型和浮点型等；
var name = prompt(“请输入你的姓名：”); // 变量name会保存输入的内容
在这里插入图片描述
alert(“你输入的姓名是：”+name); // 弹出警示框
console.log(“你输入的名字已经成功显示”); //控制台输出
document.write("< p >姓名："+name+"< /p >"); //页面输出

2.转移字符

当JS输出字符串时，如果字符串中包含某些特殊字符，无法直接输出，需要使用转义字符进行输出
转移字符

<script >
alert("祝你也祝我：\n学业进步！\n更上一层楼！！");       
</script>

在这里插入图片描述

三、网页小案例

1.题目要求

本次题目结合了以上所讲的输入与输出以及转义字符的使用，还运用了部分html的知识，希望学习的小伙伴有html的基础知识储备喔。
题目详细要求如下图所示：
在这里插入图片描述

2.原码奉上

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			#btn{
				width: 100px;
				height: 30px;
				background-color: #369;
				color: #fff;
				line-height: 30px;
			}
		</style>
	</head>
	<body>
		<script type="text/javascript">
			var name = prompt("你的姓名：");
			alert("你输入的姓名是\n"+name);
			var gender = prompt("你的性别：");
			alert("你输入的性别是\n"+gender);
			var age = prompt("你的年龄：","19");
			alert("你输入的年龄是\n"+age);
			function getTable(){
				console.log("资料已读取，生成表格");
				document.write("<table border='1px solid '><tr><td>姓名</td><td>性别</td><td>年龄</td></tr>"+
								"<tr><td>"+name+"</td><td>"+gender+"</td><td>"+age+"</td></tr></table>");
			}
//			console.log("资料已读取，生成表格");
//			document.write("<table border='1px solid '><tr><td>姓名</td><td>性别</td><td>年龄</td></tr>"+
//			"<tr><td>"+name+"</td><td>"+gender+"</td><td>"+age+"</td></tr></table>")
		</script>
		<input type="button" name="btn" id="btn" value="一键生成表格" onclick="getTable()" />
	</body>
</html>

PRINT！

关注

6
点赞
踩
13

收藏

觉得还不错? 一键收藏
打赏
9
评论
响应式网页设计之JavaScript基础

JavaScript一、认识JavaScript1.什么是JavaScript？2.JavaScript的组成？3.JavaScript用来做些什么？2.JavaScript与java有什么关联？二、JavaScript基础入门1.在网页中引入JavaScript的方式(3种)2.输入/输出语句2.转移字符三、网页小案例1.题目要求2.原码奉上一、认识JavaScript1.什么是JavaScript？JavaScript（简称js）是一门客户端脚本语言(也是弱类型语言)，运行在客户端的浏览器中，浏
复制链接

扫一扫