《客户端脚本语言-JavaScript》

2024-04-27 15:12:32

字体：大中小

来源：转载

供稿：网友

前言：

在之前学习的项目中接触过javaScript，并且在参与的积分系统中也有涉略。但对于其的认识是碎片化的，通过此《北风网李炎恢视频》的学习，对于Javascript有了一个较为系统的认识。此篇博文重点为大家展示JavaScript是何物？

JavaScript

基于对象和事件驱动并且具有相对安全性的、具有面向对象能力的、解释型的程序设计语言，具体来说，便是客户端脚本语言。运行依赖于可支持的浏览器。

特点：

（1）松散性：变量无需一个明确的类型

（2）对象属性：对象可把属性名映射为任意的属性值

（3）继承机制：基于原型

组成:

（1）核心（ECMAScript）

（2）文档对象模型（DOM：Document Object Model）：针对HTML和xml的API（应用程序接口）描绘了一个层次化的节点树，运行开发人员添加、移除、修改页面的某一部分，是表现和操作页面标记的真正跨平台、语言中立的方式。

D：整个web加载的网页文档

O：类似Window对象之类的东西，可调用属性和方法

M:网页文档的树形结构

（3）浏览器对象模型（BOM：Browser Object Model）:提供很多对象，用于访问浏览器的功能。

用法：

JavaScript是轻量级的编程语言，可插入HTML页面，由所有的现代浏览器执行。

简而言之：JavaScript与HTML、CSS一起工作。具体关系为：HTML定义网页的内容；CSS描述网页的布局；JavaScript关乎网页的行为

基本原则：

1. HTML 中的脚本必须位于 <script> 与 </script> 标签之间。

2. 脚本可被放置在 HTML 页面的 <body> 和 <head> 部分中。

实例：

（1）直接写入HTML输出流

<!DOCTYPE html><html><head><meta charset="utf-8"><title>JavaScript实例</title></head><body>	<p>JavaScript 能够直接写入 HTML 输出流中：</p><script>document.write("<h1>清风明月</h1>");document.write("<p>清风徐来</p>");</script><p>您只能在 HTML 输出流中使用	</body></html>
运行结果：
 
（2）对事件作出反应：alert()函数在起作用，可用于代码测试
<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>JavaScript实例</title></head><body><h1>我的第一个JavaScript</h1><p><button type="button" onclick="alert('欢迎加入')"/>点我!</p></body></html>
结果：
        
（3）改变HTML内容
<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>JavaScript实例</title> </head><body><h1>我的第一段 JavaScript</h1><p id="demo">//*********************************************以ID为链接，改变此处的内容显示JavaScript 能改变 HTML 元素的内容。</p><script>  function myFunction(){    x=document.getElementById("demo"); // 找到元素    x.innerHTML="Hello JavaScript!"; // 改变内容  }</script><button type="button" onclick="myFunction()">点击这里</button> //*******************************创建按钮，触发myFunction()</body></html>
结果：
        
 
（4）改变HTML样式
<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>JavaScript实例</title> </head><body><h1>我的第一段 JavaScript</h1><p id="demo">JavaScript 能改变 HTML 元素的样式。</p><script>    function myFunction(){          x=document.getElementById("demo") // 找到元素          x.style.color="#ff0000"; // 改变样式     }</script><button type="button" onclick="myFunction()">点击这里</button> //***********************改变字体颜色，运行机制与改变HTML内容一致</body></html>结果：
        
（5）验证输入
<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>JavaScript实例</title> </head><body><h1>我的第一段 JavaScript</h1><p>请输入数字。如果输入值不是数字，浏览器会弹出提示框。</p><input id="demo" type="text"><script>function myFunction()//***********************************************关键部分{var x=document.getElementById("demo").value;if(x==""||isNaN(x)){   alert("不是数字");}}//****************************************************************************</script><button type="button" onclick="myFunction()">点击这里</button></body></html>
结果：        
后记：
   学习一个项目，首先要进行宏观把控，其次要进行反馈跟踪，最终要撰写学习总结。在学习的每一个阶段要了解这部分在整体中居怎样的地位，产生怎样的作用。让学习有方向可言。