JavaScript超级入门基础(一)

最新推荐文章于 2024-03-21 09:57:02 发布

做个疯狂的程序员

最新推荐文章于 2024-03-21 09:57:02 发布

阅读量543

点赞数 2

CC 4.0 BY-SA版权

分类专栏： javaWeb 文章标签： javascript js

本文链接：https://blog.youkuaiyun.com/qq_44972915/article/details/108419863

javaWeb 专栏收录该内容

21 篇文章

订阅专栏

本文深入浅出地介绍了JavaScript的基础概念，包括其历史、数据类型、变量、运算符等，同时详细解析了HTML-DOM模型，涵盖节点类型、编程接口及常见方法，如getElementById()，并提供了实例代码。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

JavaScript基础(一)

HTML-DOM

（一）什么是 HTML DOM？

HTML DOM 是：

HTML 的标准对象模型
HTML 的标准编程接口
W3C 标准

HTML DOM 定义了所有 HTML 元素的对象和属性，以及访问它们的方法。换言之，HTML DOM 是关于如何获取、修改、添加或删除 HTML 元素的标准。

（二）HTML节点：

HTML文档中的每个成分都是一个节点。
整个文档是一个文档节点(Document)
每个 HTML 标签是一个元素节点(Element)
每一个 HTML 属性是一个属性节点(Attribute)
包含在 HTML 元素中的文本是文本节点(Text)

在这里插入图片描述

（三）htmlDemo详解

请看下面的 HTML 片段：

<html>
  <head>
    <title>DOM 教程</title>
  </head>
  <body>
    <h1>DOM 第一课</h1>
    <p>Hello world!</p>
  </body>
</html>

从上面的 HTML 中：

<html> 节点没有父节点；它是根节点
<head> 和 <body> 的父节点是 <html> 节点
文本节点 "Hello world!" 的父节点是 <p> 节点
并且：

<html> 节点拥有两个子节点：<head> 和 <body>
<head> 节点拥有一个子节点：<title> 节点
<title> 节点也拥有一个子节点：文本节点 "DOM 教程"
<h1> 和 <p> 节点是同胞节点，同时也是 <body> 的子节点
并且：

<head> 元素是 <html> 元素的首个子节点
<body> 元素是 <html> 元素的最后一个子节点
<h1> 元素是 <body> 元素的首个子节点
<p> 元素是 <body> 元素的最后一个子节点

- 编程接口
可通过 JavaScript （以及其他编程语言）对 HTML DOM 进行访问。所有 HTML 元素被定义为对象，而编程接口则是对象方法和对象属性。方法是您能够执行的动作（比如添加或修改元素）。属性是您能够获取或设置的值（比如节点的名称或内容）。

- getElementById() 方法
getElementById() 方法返回带有指定 ID 的元素：

一个例子：


<!DOCTYPE html>
<html>
<body>

<p id="intro">Hello World!</p>
<p>本例演示 <b>getElementById</b> 方法！</p>

<script>
x=document.getElementById("intro");
document.write("<p>来自 intro 段落的文本：" + x.innerHTML + "</p>");
</script>

</body>
</html>

在这里插入图片描述

HTML DOM对象 - 方法和属性

在这里插入图片描述

一些常用方法

在这里插入图片描述

JavaScript概述

JavaScript（简称“JS”）是一种具有函数优先的轻量级，解释型或即时编译型的高级编程语言。虽然它是作为开发Web页面的脚本语言而出名的，但是它也被用到了很多非浏览器环境中，JavaScript 基于原型编程、多范式的动态脚本语言，并且支持面向对象、命令式和声明式（如函数式编程）风格。
JavaScript在1995年由Netscape公司的Brendan Eich，在网景导航者浏览器上首次设计实现而成。因为Netscape与Sun合作，Netscape管理层希望它外观看起来像Java，因此取名为JavaScript。但实际上它的语法风格与Self及Scheme较为接近。
JavaScript的标准是ECMAScript 。截至 2012 年，所有浏览器都完整的支持ECMAScript 5.1，旧版本的浏览器至少支持ECMAScript 3 标准。2015年6月17日，ECMA国际组织发布了ECMAScript的第六版，该版本正式名称为 ECMAScript 2015，但通常被称为ECMAScript 6 或者ES6。

来自百度百科

JavaScript的引入

两种常用的引入javascript方式：内嵌式、外链式

内嵌式

<!DOCTYPE html PUBLIC>
<html>
<head>
	<title>JavaScriptDemo</title>
	<script language="javascript">
		document.write("javascript内嵌式");
	</script>
</head>
<body>
<p>学习javaScript</p>
</body>
</html>

外链式
jsdemo.js

document.write("javascript外链式");

<!DOCTYPE html PUBLIC>
<html>
<head>
	<title>JavaScriptDemo</title>
	<script language="javascript" src="jsdemo.js"></script>
</head>
<body>
<p>学习javaScript</p>
</body>
</html>

在这里插入图片描述

数据类型表

Number	数值型
String	字符串型
Boolean	布尔类型
object	对象类型
Null	空类型
Undefined	未定义类型

变量

在javaScript中，使用var命令声明变量，由于javaScript是一种弱类型语言，所以在声明变量时，不需要指定变量的类型，变量的类型由赋值决定。

var carName = "porsche";

运算符

与java一致

条件语句

与java大体一致

JavaScript的使用

函数的定义及调用

在javaScript中，定义函数是通过function语句实现的

Demo.html

<!DOCTYPE html PUBLIC>
<html>
<head>
	<title>JavaScriptDemo</title>
	<script type="text/javascript" src="jsdemo.js"></script>
</head>
<body>
<input type="button" value="当前时间" onclick="showdate()"/>
</body>
</html>

jsdemo.js

function showdate(){
	var myDate = new Date();
	var time = myDate.toLocaleDateString().split('/').join('-');
	document.write(time);
}

事件处理

所谓的事件，是指用户在访问页面时执行的操作。
时间处理的过程通常分为3步：发生事件、启动事件处理程序和事件处理程序做出反应。

在上面的例子中，<input type="button" value="当前时间" onclick="showdate()"/>就表示，当按击该按钮时启动showdate()事件；

javaScript的常用事件
在这里插入图片描述

常用对象

（1）Window 对象
在这里插入图片描述

（1）Date对象
在这里插入图片描述
（3）String对象