Web网页之JavaScript
一.JavaScript简介
JavaScript 是互联网上最流行的脚本语言,这门语言可用于 HTML 和 web,更可广泛用于服务器、PC、笔记本电脑、平板电脑和智能手机等设备。
二.JavaScript是什么?
- JavaScript是一门脚本语言。
- JavaScript 是一种轻量级的编程语言。
- JavaScript 是可插入 HTML 页面的编程代码。
- JavaScript 插入 HTML 页面后,可由所有的现代浏览器执行。
三.JavaScript的用法
HTML 中的 Javascript 脚本代码必须位于 <script> 与 </script>
标签之间。Javascript 脚本代码可被放置在 HTML 页面的 <body> 和 <head>
部分中。
1.script标签
如需在 HTML 页面中插入 JavaScript,请使用
<script> 和 </script>
会告诉 JavaScript 在何处开始和结束。<script> 和 </script>
之间的代码行包含了 JavaScript。
格式如下:
<script>
alert("我的第一个 JavaScript");
</script>
2.<body>
中的 JavaScript
JavaScript 会在页面加载时向 HTML 的 写文本。
案例如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>body中的Javascript</title>
</head>
<body><p>
JavaScript 能够直接写入 HTML 输出流中:
</p>
<script>
document.write("<h1>红尘客栈</h1>");
document.write("<p>沉默是金。</p>");
</script>
<p>
JavaScript向HTML文本中加入了新的文本,通多使用document.write输出流来进行。
</p></body>
</html>
运行结果如下:
3.在 <head>
或者 <body>
的JavaScript
3.1、<head>
中的 JavaScript 函数
我们把一个 JavaScript 函数放置到 HTML 页面的 <head>
部分。该函数会在点击按钮时被调用。
格式如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>在head中的javascript</title>
<script>
function myFunction(){document.getElementById("demo").innerHTML="心有多大、路就有多广";
}
</script>
</head>
<body><h1>这是一个有反应的页面</h1>
<p id="demo">精彩点击查看。</p>
<button type="button" onclick="myFunction()">点击这里</button></body>
</html>
运行结果:点击之前
点击之后:
3.2、 中的 JavaScript 函数
我们把一个 JavaScript 函数放置到 HTML 页面的 部分。格式案例如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>body中的javascript</title>
</head>
<body><h1>一个新的页面</h1>
<p id="demo">这不仅仅是一个例子。</p>
<button type="button" onclick="myFunction()">点击这里</button>
<script>
function myFunction(){document.getElementById("demo").innerHTML="心有多大,舞台就有多大!";
}
</script></body>
</html>
运行结果如下:点击之前、
点击之后:
4.外部的 JavaScript
- 可以把脚本保存到外部文件中。外部文件通常包含被多个网页使用的代码。
- 外部 JavaScript 文件的文件扩展名是 .js。
- 如需使用外部文件,请在
代码格式如下:
<!DOCTYPE html>
<html>
<body>
<script src="myScript.js"></script>
</body>
</html>
也可以将脚本放置于 <head>
或者 <body>
中,放在 <script>
标签中的脚本与外部引用的脚本运行效果完全一致。
外部脚本不能包含 <script>
标签。
4. JavaScript的输出
JavaScript 没有任何打印或者输出的函数。
4.1、JavaScript 显示数据
- 使用 window.alert() 弹出警告框。
- 使用 document.write() 方法将内容写到 HTML 文档中。
- 使用 innerHTML 写入到 HTML 元素。
- 使用 console.log() 写入到浏览器的控制台
4.1.1、 window.alert()的使用
弹出警告框来显示数据:
格式如下:
<!DOCTYPE html>
<html>
<body><h1>我的第一个页面</h1>
<p>我的第一个段落。</p><script>
window.alert(5 + 6);
</script></body>
</html>
运行结果如下:
4.1.2、操作 HTML 元素
如需从 JavaScript 访问某个 HTML 元素,您可以使用 document.getElementById(id) 方法。
请使用 “id” 属性来标识 HTML 元素,并 innerHTML 来获取或插入元素内容:
格式如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>对HTML 元素进行操作</title>
</head>
<body><h1>我的第一个 Web 页面</h1>
<p id="demo">我的第一个段落。</p>
<script>
document.getElementById("demo").innerHTML="段落已修改。";
</script></body>
</html>
运行结果如下:
以上 面JavaScript 语句(在 <script>
标签中)可以在 web 浏览器中执行:
document.getElementById(“demo”) 是使用 id 属性来查找 HTML 元素的 JavaScript 代码 。innerHTML = “段落已修改。” 是用于修改元素的 HTML 内容(innerHTML)的 JavaScript 代码。
4.1.3、将javascript写到 HTML 文档
代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>将javascript直接写到页面中</title>
</head>
<body><h1>我的第一个 Web 页面</h1>
<p>我的第一个段落。</p>
<script>
document.write(Date());
</script></body>
</html>
运行结果:
请使用 document.write() 仅仅向文档输出写内容。
如果在文档已完成加载后执行 document.write,整个 HTML 页面将被覆盖。
4.1.4、写到控制台
如果您的浏览器支持调试,你可以使用 console.log() 方法在浏览器中显示 JavaScript 值。
浏览器中使用 F12 来启用调试模式, 在调试窗口中点击 “Console” 菜单。
代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body><h1>我的第一个 Web 页面</h1>
<p>
浏览器中(Chrome, IE, Firefox) 使用 F12 来启用调试模式, 在调试窗口中点击 "Console" 菜单。
</p>
<script>
a = 5;
b = 6;
c = a + b;
console.log(c);
</script></body>
</html>
运行结果如下:
三.JavaScript的语法
JavaScript 是一个脚本语言。
它是一个轻量级,但功能强大的编程语言。
JavaScript 字面量
在编程语言中,一般固定值称为字面量,如 3.14。
数字(Number)字面量 可以是整数或者是小数,或者是科学计数(e)。
字符串(String)字面量 可以使用单引号或双引号。
数组(Array)字面量 定义一个数组。
对象(Object)字面量 定义一个对象。
函数(Function)字面量 定义一个函数。JavaScript 变量
在编程语言中,变量用于存储数据值。
JavaScript 使用关键字 var 来定义变量, 使用等号来为变量赋值。
变量是一个名称。字面量是一个值。JavaScript 操作符
包含:1、算术运算符,2、赋值运算符JavaScript 语句
JavaScript 关键字
JavaScript 关键字用于标识要执行的操作。
和其他任何编程语言一样,JavaScript 保留了一些关键字为自己所用。
var 关键字告诉浏览器创建一个新的变量:
JavaScript 同样保留了一些关键字,这些关键字在当前的语言版本中并没有使用,但在以后 JavaScript 扩展中会用到。
以下是 JavaScript 中最重要的保留关键字(按字母顺序):
JavaScript 注释
不是所有的 JavaScript 语句都是"命令"。双斜杠 // 后的内容将会被浏览器忽略。JavaScript 数据类型
值类型(基本类型):字符串(String)、数字(Number)、布尔(Boolean)、空(Null)、未定义(Undefined)、Symbol。
引用数据类型(对象类型):对象(Object)、数组(Array)、函数(Function),还有两个特殊的对象:正则(RegExp)和日期(Date)。
JavaScript 函数
JavaScript 语句可以写在函数内,函数可以重复引用:
引用一个函数 = 调用函数(执行函数内的语句)。
格式如下:
function myFunction(a, b) {return a * b; // 返回 a 乘以 b 的结果
}
JavaScript 中,常见的是驼峰法的命名规则,如 lastName (而不是lastname)。
四.JavaScript HTML DOM
通过 HTML DOM,可访问 JavaScript HTML 文档的所有元素。
4.1 HTML DOM (文档对象模型)
当网页被加载时,浏览器会创建页面的文档对象模型(Document Object Model)。
HTML DOM 模型被构造为对象的树:
HTML DOM树:
通过可编程的对象模型,JavaScript 获得了足够的能力来创建动态的 HTML。
- JavaScript 能够改变页面中的所有 HTML 元素
- JavaScript 能够改变页面中的所有 HTML 属性
- JavaScript 能够改变页面中的所有 CSS 样式
- JavaScript 能够对页面中的所有事件做出反应
4.2 查找 HTML 元素
通常,通过 JavaScript,需要操作 HTML 元素。
为了做到这件事情,您必须首先找到该元素。有三种方法来做这件事:
- 通过 id 找到 HTML 元素
- 通过标签名找到 HTML 元素
- 通过类名找到 HTML 元素
4.2.1 查找 HTML 元素 通过 id 查找 HTML 元素
在 DOM 中查找 HTML 元素的最简单的方法,是通过使用元素的 id。
实例如下:
var x=document.getElementById("intro");
代码以及运行结果:
4.2.2 通过标签名查找 HTML 元素
本例查找 id=“main” 的元素,然后查找 id=“main” 元素中的所有
元素:
实例如下:
var x=document.getElementById("main");
var y=x.getElementsByTagName("p");
代码及运行结果:
4.2.3 通过类名找到 HTML 元素
通过 getElementsByClassName 函数来查找 class=“intro” 的元素:
实例代码如下:
var x=document.getElementsByClassName("intro");
代码及运行结果:
总结
以上是javascript的基础知识点以及浅尝DOM ,将继续写完善下去…
心有多大,舞台就有多大!
Web网页之JavaScript相关推荐
- web网页设计 JavaScript 搜索框代码
初学JavaScript,略微懂得一点毛皮,得出一点复习经验,在这里分享一下. <!DOCTYPE html> <html lang="en"> <h ...
- 文化网页设计成品 web网页设计实例作业 ——古典中国风工艺美术(9页) html+css+javascript网页设计实例
web网页设计实例作业 --古典中国风工艺美术(9页) html+css+javascript网页设计实例 常见网页设计作业题材有 个人. 美食. 公司. 学校. 旅游. 电商. 宠物. 电器. 茶叶 ...
- web网页设计实例作业 ——古典中国风工艺美术(9页) html+css+javascript网页设计实例
web网页设计实例作业 --古典中国风工艺美术(9页) html+css+javascript网页设计实例 常见网页设计作业题材有 个人. 美食. 公司. 学校. 旅游. 电商. 宠物. 电器. 茶叶 ...
- HTML5期末大作业:在线电影介绍(6页) HTML+CSS+JavaScript 大学生毕设网页设计源码HTML web网页设计制作成品
HTML5期末大作业:在线电影介绍(6页) HTML+CSS+JavaScript 期末作业HTML代码 学生网页课程设计期末作业下载 web网页设计制作成品 常见网页设计作业题材有 个人. 美食. ...
- HTML5期末大作业:动漫网站设计——斗破苍穹动漫(6页)带轮播特效 HTML+CSS+JavaScript 期末作业HTML代码 学生网页课程设计期末作业下载 web网页设计制作成品
HTML5期末大作业:动漫网站设计--斗破苍穹动漫(6页)带轮播特效 HTML+CSS+JavaScript 期末作业HTML代码 学生网页课程设计期末作业下载 web网页设计制作成品 大学生毕设网页 ...
- html大二实训大作业:蛋糕甜品网站设计——棕色蛋糕甜品店网页设计(4页) HTML+CSS+JavaScript HTML5期末大作业 web网页设计制作成品
HTML5期末大作业:蛋糕甜品网站设计--棕色蛋糕甜品店网页设计(4页) HTML+CSS+JavaScript 期末作业HTML代码 学生网页课程设计期末作业下载 web网页设计制作成品 常见网页设 ...
- HTML5期末大作业:web网页设计与开发网站设计——爱奇艺首页(1页) HTML+CSS+JavaScript
HTML5期末大作业:web网页设计与开发网站设计--爱奇艺首页(1页) HTML+CSS+JavaScript 学生DW网页设计作业成品 web课程设计网页规划与设计 计算机毕设网页设计源码 常见网 ...
- HTML5期末大作业:web网页设计与开发网站设计——爱奇艺首页(1页) HTML+CSS+JavaScript 学生DW网页设计作业成品 web课程设计网页规划与设计 计算机毕设网页设计源码
HTML5期末大作业:web网页设计与开发网站设计--爱奇艺首页(1页) HTML+CSS+JavaScript 学生DW网页设计作业成品 web课程设计网页规划与设计 计算机毕设网页设计源码 常见网 ...
- HTML5期末大作业:仿苏宁易购商城网站设计——仿苏宁易购官网商城(1页) HTML+CSS+JavaScript web网页大作业
HTML5期末大作业:仿苏宁易购商城网站设计--仿苏宁易购官网商城(1页) HTML+CSS+JavaScript web网页大作业 常见网页设计作业题材有 个人. 美食. 公司. 学校. 旅游. 电 ...
最新文章
- 【机器学习基础】非常详细!机器学习模型评估指标总结!
- C++菱形继承产生的问题和解决
- Java并发编程—说说Runnable与Callable
- Dynamics CRM 开启图表的3D效果展示
- 详解GPU技术关键参数和应用场景
- xshell与xftp如何实现相互连接
- C++ 通讯录设计(二)
- JQuery实现旅游导航菜单应用方便
- Python标准库random用法精要
- extjs java 教程,JAVA开发工具 - 在IntelliJ IDEA下开发ExtJS应用指南
- erp系统源码php_最新仿金蝶 PHP电商ERP进销存系统软件 带扫描功能
- 2022年计算机软件水平考试软件设计师(中级)练习题及答案
- mysql stmt
- 内网穿透软件对比——cpolar : 花生壳(上)
- 互联网晚报 | 12月30日 星期四 | 百度网盘青春版正式上线;汽车之家回应“年底大裁员”;A股年内成交额创历史新高...
- 异步爬虫(高效爬虫)
- java盒图_盒须图简介 - Java报表工具技术讨论,Style Report 报表专题 - OSCHINA - 中文开源技术交流社区...
- 【学习笔记】兄弟连Linux教程摘要
- Microsoft SQL Server 图书管理数据库的建立
- 如何实现外网访问erp系统软件?快解析端口映射
热门文章
- (免费分享)springboot音乐网站
- 零分贝超静音无线鼠标!数量有限!!先到先得!!!【元旦专享】
- android 字体文件压缩,Android创建assets文件夹并使用字体图标(Icon Font)
- Python selenium 插入图片
- 检查java环境_如何检查是否安装了java环境(即JRE)
- Android 截长图
- 优信年营收16亿:亏损3亿 已与蔚来资本及58集团签署股权协议
- java html中引入视频的格式_HTML中插入视频
- 学习总结(袁莹君)--python笔记
- 爬虫练习本地html文档