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代码。

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>

响应式网页设计之JavaScript基础相关推荐

响应式网页设计之JavaScript与CSS交互
JavaScript与CSS交互补充:文章中所有的代码都是写在html文件中,JS代码需要用< script >< /script >标签包起来. 文章目录 JavaScri ...
HTML5期末大作业：美食主题网站设计——美食零食官网响应式网页设计(6页) HTML+CSS+JavaScript
HTML5期末大作业:美食主题网站设计--美食零食官网响应式网页设计(6页) HTML+CSS+JavaScript 期末作业HTML代码学生网页课程设计期末作业下载 web网页设计制作成品常见网 ...
12个最佳的响应式网页设计教程，轻松带你入门！
如何让你的网站在其出现的任何设备和屏幕尺寸上能够完美的呈现?响应式设计完美的解决了这一难题,作为现在的网页设计师都应该了解响应式网页设计的原则.而对于刚步入网页设计的新手设计师,如果你还不了解什么是响 ...
带有响应式网页设计的MEAN和UGLI CRUD
现在您已经熟悉了MEAN应用程序的机制,是时候开始定制在本系列的第一部分中创建并在第二部分中浏览的MEAN.JS应用程序了. 在第三部分中,我将演示该应用程序的基本CRUD功能. 您还将学到一些有关响 ...
响应式网页设计_响应式网页设计的意义和目的
响应式网页设计 The following is an exclusive extract from our new book, Jump Start Responsive Web Design, 2 ...
FROONT – 超棒的可视化响应式网页设计工具
FROONT 是一个基于 Web 的设计工具,在浏览器中运行,使得各类可视化设计的人员都能进行响应式的网页设计,即使是那些没有任何编码技能的设计师.FROONT 使得响应式网页设计能够可视化操作,能够 ...
20个响应式网页设计中的“神话”误区
关于响应式网页的重要性我们已经证实了很长时间了,现在是该把焦点放到如何做出好的响应式网页设计的时候了.一起来看看吧! 虽然很多人都在谈论响应式网页,但并不是每个人都知道他们在说什么.很多时候你看到网上 ...
设计师必读的15个响应式网页设计教程
@陈子木响应式设计是由著名网页设计师Ethan Marcotte在2010年5月提出的设计概念,随后席卷前端和设计领域,成为了如今网页设计的大趋势.正如同Ethan所说:"响应式网站设计提 ...
响应式网页设计简单入门
Overview: 构造基本的HTML页面动态加载样式表 Viewport 字体缩放侧边栏导航菜单图片自适应其他总结说到响应式网页设计(Responsive web design),最近 ...

响应式网页设计之JavaScript基础