响应式网页设计之JavaScript基础

JavaScript

  • 一、认识JavaScript
    • 1.什么是JavaScript?
    • 2.JavaScript的组成?
    • 3.JavaScript用来做些什么?
    • 2.JavaScript与java有什么关联?
  • 二、JavaScript基础入门
    • 1.在网页中引入JavaScript的方式(3种)
    • 2.输入/输出语句
    • 2.转移字符
  • 三、网页小案例
    • 1.题目要求
    • 2.原码奉上


一、认识JavaScript

1.什么是JavaScript?

JavaScript(简称js)是一门客户端脚本语言(也是弱类型语言),运行在客户端的浏览器中,浏览器内核可以直接解析执行js代码。
响应式网页设计之JavaScript基础_第1张图片

2.JavaScript的组成?

响应式网页设计之JavaScript基础_第2张图片

  • ECMAScript标准
    用于脚本语言规范(主要描述语法、变量、数据类型、关键字、保留字、运算符、逻辑控制语句、对象)

  • DOM(Document Object Model)
    文档对象模型,通过DOM操作HTML文档,如读取、修改页面内容等;

  • BOM(Browser Object Model)
    浏览器对象模型,通过BOM操作浏览器,如移动、缩放、关闭窗口;打开新窗口;页面跳转等;

3.JavaScript用来做些什么?

JavaScript常用与客户端表单验证,现在很多表单都会有输入规范,例如:手机号只能是11位数字(反过来看就是手机号不能包含字母和特殊字符,也必须是正好11位),如果遇到必填项还得限制不能为空。关于这些特殊限制我们可以采用JavaScript来实现。
响应式网页设计之JavaScript基础_第3张图片

当然除了这个功能JavaScript还可以给页面增加动态效果,如京东商城的抢购倒计时和轮动展示都可以通过js实现,还可以改变页面内容,这就是与静态网页的区别了。
响应式网页设计之JavaScript基础_第4张图片

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 mebutton> 

2.输入/输出语句

  • 输入框:
    prompt(‘此处是提示语’);接收用户的输入
  • 输出框:
    弹出警示框:alter(‘警示框中显示的内容’);
    控制台输出:console.log(‘F12中的Console可以查看’);
    页面输出:document.write(“这个可以实现在页面中显示”);
<script type="text/javascript">
var name =  prompt("请输入你的姓名:");     // 变量name会保存输入的内容
alert("你输入的姓名是:"+name);             // 弹出警示框
console.log("你输入的名字已经成功显示");    //控制台输出
document.write("

姓名:"+name+"

"
); //页面输出 </script>

补充:这里的js代码是写在html文件的< body >中的
变量是用var关键字声明,因为JavaScript是弱类型语言,所以不区分整型和浮点型等;
var name = prompt(“请输入你的姓名:”); // 变量name会保存输入的内容
响应式网页设计之JavaScript基础_第5张图片
alert(“你输入的姓名是:”+name); // 弹出警示框响应式网页设计之JavaScript基础_第6张图片
console.log(“你输入的名字已经成功显示”); //控制台输出
document.write("< p >姓名:"+name+"< /p >"); //页面输出 响应式网页设计之JavaScript基础_第7张图片

2.转移字符

当JS输出字符串时,如果字符串中包含某些特殊字符,无法直接输出,需要使用转义字符进行输出
响应式网页设计之JavaScript基础_第8张图片

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

响应式网页设计之JavaScript基础_第9张图片

三、网页小案例

1.题目要求

本次题目结合了以上所讲的输入与输出以及转义字符的使用,还运用了部分html的知识,希望学习的小伙伴有html的基础知识储备喔。
题目详细要求如下图所示:
响应式网页设计之JavaScript基础_第10张图片

2.原码奉上


<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(""+"
姓名性别年龄
"+name+""+gender+""+age+"
"
); } // console.log("资料已读取,生成表格"); // document.write(""+// "
姓名性别年龄
"+name+""+gender+""+age+"
")
script> <input type="button" name="btn" id="btn" value="一键生成表格" onclick="getTable()" /> body> html>

你可能感兴趣的:(响应式网页学习笔记,javascript,visual,studio,code)