首页 > 资讯 > 前端开发 > JavaScript >javascript知识点详解

503

分享到

javascript知识点详解

2024-04-02 19:04:59 503人浏览泡泡鱼

摘要

目录一.javascript基本介绍二、Javascript基础语法三、JavaScript事件例子2：当点击div标签时，做一件事，如点击后弹出对话框。——用id类例子3：添加标签

一.JavaScript基本介绍

js诞生于1995年，是Javascript的缩写，其与java语言没有关系，当时的主要目的是验证表单的数据是否合法

科普: Javascript的本来应该叫livescript，但是在发布前夕，想搭上媒体超热java的顺风车，临时把名字改为了javascript。(也就是说js跟java没有关系，当时的只是想借助java的名气)

作用:负责控制web前端标准的前两者。结构和样式;

如：箭头切换图片页面，左下角的点也是

没有js：没有js的页面，想要准确提交信息，是非常麻烦的事。

ANS：js出生时是为了验证表单数据的合法性，js 就是在里面添加验证，输入完成如果对就通过，如果不对就提示错误，js就是解决这个问题。

当今，js不仅能做验证，还能做网站特效

二、Javascript基础语法

1.写script标签，放在html页面的最后位置，js代码写在html中的script标签中

2.从script标签的中间，alert("弹窗内容，这里写什么就会弹出什么");


<script>
    alert("弹窗中的显示内容");
</script>

弹出警示框，弹出对话框：


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
	</body>
</html>
<script type = "text/javascript">
	alert();
</script>


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
	</body>
</html>
<script type = "text/javascript">
	alert('注意：弹出弹窗');
</script>

注意：浏览器自带的alert对话框，无法统一，这都是浏览器底层自带的，无法修改。

三、JavaScript事件

定义:在什么情况下，执行什么命令

作用:捕获用户的行为(单击、双击、鼠标的移入移出。.. )

例子1：在点击时，进行界面切换，在什么什么情况下，执行的命令。

事件三要素:

事件的三要素：事件源.事件的类型 = 执行的命令

1.事件源:《解释就是这个事件加给谁)

2.事件类型:(就是指的这个事件是什么时候发生的)

3.执行的指令:固定写法function(H你的命令写在这里}事件源""点事件名=匿名函数（匿名方法)

例子2：当点击div标签时，做一件事，如点击后弹出对话框。——用id类


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id = "div1">哈哈哈</div>
	</body>
</html>
<script type = "text/javascript">
	// 点击页面中的div,弹出对话框
	// 第一步：如果想要控制某个标签必须先要找到它，在CSS中用选择器寻找，js在当前页面的文档找
	//第二步：点击页面的div
	// 第三步：弹出对话框
	document.getElementById('div1').onclick=function()
	{
		alert('点击时，才会弹出');
	}
	//事件的三要素：事件源.事件的类型 = 执行的命令
</script>

例子3：添加标签p，用class类来


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id = "div1">哈哈哈</div>
		<p class = "p1"> 我是p1标签</p>
		<p class = "p1"> 我是p2标签</p>
	</body>
</html>
<script type = "text/javascript">
	// 点击页面中的div,弹出对话框
	// 第一步：如果想要控制某个标签必须先要找到它，在css中用选择器寻找，js在当前页面的文档找
	//第二步：点击页面的div
	// 第三步：弹出对话框
	document.getElementById('div1').onclick=function()
	{
		alert('点击div时，才会弹出');
	}
	//事件的三要素：事件源.事件的类型 = 执行的命令
	document.getElementsByClassName('p1')[0].ondblclick=function()
	{
		alert('点击p时，才会弹出');
	}
	// getElementsByClassName 通过class来找页面中的元素，而class可以设置多个重复的类名
	// 则在获取时必须要在后面添加[0],从数字0开始计数
</script>

注意：

id是唯一的，即单一

而class是类，是复数，在js中用getElementsByClassName 通过class来找页面中的元素，而class可以设置多个重复的类名，则在获取时必须要在后面添加[0],从数字0开始计数

测试点：

1、未点击弹出对话框

2、点击未弹出对话框

四、 Javascript书写位置（引入方式）

4.1 内嵌js

内嵌js:在html文件中。放在scipt标签里，即写在html中放在script标签里面，叫内嵌式


<script>
    alert ("弹窗中的显示内容"");
</script>

例子：


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
	</body>
</html>
<script type = "text/javascript">
	alert('弹窗 内嵌');
</script>

4.2 外链js

外链js:可以在单独的js文件里，通过script标签中的src属性引用到页面中;即写在单独js文件，通过script中的src来链入到html页面的，叫外链式


<script src="js文件的路径>
    此处不要写代码，写什么都不会执行
</script>

例子：


.html文件：
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
	</body>
</html>
<!-- <script type = "text/javascript">
	alert('弹窗 内嵌');
</script> -->
<script type="text/javascript" src="js.js">
</script>
js.js文件：
alert('弹窗 外链');

注意：


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
	</body>
</html>
<script type="text/javascript" src="js.js">
	//此处如果是外链的语法，这里写什么都不会执行
	alert('111111');
</script>

4.3 行内js（禁止使用）

行内js:写在标签的属性里，这个属性必须是事件属性。(任何标签都有事件属性)，与行内css一样，不推荐使用! 即写在html标签身上的，叫行内式


<div onclick-alert ( 'heihei');”> 按钮 </div>


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div onclick = "alert('弹窗 行内');">不规范范例</div>
	</body>
</html>

注意：双引号和单引号的区别在行内，


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div onclick = "alert("弹窗 行内");">不规范范例</div>
	</body>
</html>

在行内只能用单引号实现，否则无法执行js行为

注意事项：

行内js和行内css一样，都是不推荐使用！内嵌和外链随意使用，还是建议使用外链式，因为能实现js代码和html代码的分离，更方便代码的修改。

五、 js常见特效（了解）

需要将专业名词与显示效果对的上。

5.1 导航跟随/电梯导航

导航：点哪去哪

5.2 返回顶部

点击后，回到页面最顶部

5.3 滚动跟随

哪个地方动图，让用户注意点在哪。

5.4 呼吸灯/焦点图（banner图）

图片切换,渐隐渐现效果

5.5 js实现动画效果

测试时一定要多次触发动画，查看动画是否有累积的情况。

注意：若是带动画的效果存在经典bug,js写的,——动画累积bug,移入移出多少次，动画就会自行执行多少次。

只要遇到动画的地方，——怎么测？重复触发的测试，因为所谓的动画，不是点才动。

5.6 模态窗口

模态窗口：弹出两个层，一个负责盖住下面的其他页面内容（背景色是灰色，无法操作底层其他控件），另外一个是让用户操作的层；只允许用户操作弹初的那个层。

目的是：让用户优先解决最上面的那个层

5.7 定时切换

5.8 自定义单选、多选、下拉菜单

系统自带（原生的）：

自定义：

只要不是系统浏览器原生的，就算是自定义，这些程序需要js + html + css组合才能实现，肯定比原生的写法浪费时间，但是为了整体页面的美观，必须要求程序员按照设计师的要求实现。

总结

本篇文章就到这里了，希望能够给你带来帮助，也希望您能够多多关注编程网的更多内容!

点击免费下载>>软考高级考试备考技巧/历年真题/备考精华资料

--结束END--

本文标题: javascript知识点详解

本文链接: https://www.lsjlt.com/news/136208.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑，方便收藏和打印～

下载Word文档

去做题

猜你喜欢

javascript知识点详解

目录一.JavaScript基本介绍二、Javascript基础语法三、JavaScript事件例子2：当点击div标签时，做一件事，如点击后弹出对话框。——用id类例子3：添加标签...

99+

2024-04-02
JavaScript进阶知识点作用域详解

目录JavaScript进阶讲解一一、浏览器的内核1.常见的浏览器内核二、JavaScript引擎2.1.为什么需要JavaScript引擎？2.2.常见的JavaScript引擎三...

99+

2024-04-02
JavaScript 知识点

立即执行函数代码(function () {// ...})(); 创建函数的同时立即执行，没有绑定任何事件，也无需等待任何异步操作function () {} 是一个匿名函数，包围它的一对括号将其转换为一个表达式，紧跟其后的一对括号调用...

99+

2023-08-30

javascript
Javascript基础知识详解

目录变量数据类型扩展点总结变量基本语法 var age=10;//声明一个名称为age的变量，并且为它赋值，称为变量的初始化 var是一个JS关键字，用来声明...

99+

2024-04-02
详解Java注解知识点

目录一、注解是什么二、jdk支持的注解有哪些2.1 三种常用的注解：2.2 元注解三、注解实例四、总结一、注解是什么 Java 注解用于为 Java 代码提供元数据，看完这句话也许你...

99+

2024-04-02
MySQL索引知识点详解

这篇文章主要讲解了“MySQL索引知识点详解”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“MySQL索引知识点详解”吧！普通索引创建索引这是最基本的索引，它...

99+

2024-04-02
【知识点】python的__init__详解

介绍__init__方法的作用 __init__ 方法是 Python 中面向对象编程中类的特殊方法，也称为构造方法，当创建一个类的实例时，__init__ 方法会自动调用。它的主要作用是初始化实例的属性，在实例被创建后，你可以通过这...

99+

2023-09-02

python Powered by 金山文档
JavaScript进阶之函数和对象知识点详解

目录JavaScript函数基本构造调用函数方法函数参数argument和rest代码调试变量的作用域函数体内变量作用域解释良好的变量定义格式全局变量局部变量常量Const方法的定义...

99+

2024-04-02
Javascript中的闭包知识点讲解

本篇内容介绍了“Javascript中的闭包知识点讲解”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！1. ...

99+

2024-04-02
java伪泛型知识点详解

说明 1、Java中的泛型是伪泛型。这种泛型实现方法称为类型擦除，基于这种方法实现的泛型称为伪泛型。 2、由于Java的泛型只在编译阶段发挥作用，因此在写代码时，起到了检查的作用，...

99+

2024-04-02
JS闭包的知识点详解

本篇内容主要讲解“JS闭包的知识点详解”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“JS闭包的知识点详解”吧!一、什么是闭包学习一个陌生的概念，我们首先要去明白...

99+

2024-04-02
【知识点】Python 的np.prod函数详解

np.prod是Numpy库中的一个函数，全称为numpy.prod，它的作用是计算数组中所有元素的乘积。该函数是一个快速的计算积的方法，可以接收任意数组或矩阵作为输入，并返回这些数字的乘积。举个例子： import numpy as...

99+

2023-10-02

python numpy Powered by 金山文档
k8s编排之DaemonSet知识点详解

目录如何对 StatefulSet 进行“滚动更新”（rolling update）？下面重点讲解一个\知识点：DaemonSet列举几个例子：API 对象的...

99+

2023-01-17

k8s编排DaemonSet k8s DaemonSet
python中__init__方法知识点详解

目录介绍__init__方法的作用讲解__init__方法的语法演示如何在类中使用__init__方法初始化类的属性讲解如何使用__init__方法给对象动态添加属性__init__...

99+

2023-05-16

python __init__方法有什么用 python中init方法 python __init__的作用
R语言“循环”知识点详解

可能有一种情况，当你需要执行一段代码几次。通常，顺序执行语句。首先执行函数中的第一个语句，然后执行第二个语句，依此类推。编程语言提供允许更复杂的执行路径的各种控制结构。循环语...

99+

2024-04-02
Java集合HashMap的知识点详解

这篇文章主要讲解了“Java集合HashMap的知识点详解”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“Java集合HashMap的知识点详解”吧！一、什么是哈希表在讨论哈希表之前，我们先大...

99+

2023-06-02
JavaScript数组知识点整理

本篇内容介绍了“JavaScript数组知识点整理”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！JavaS...

99+

2024-04-02
JavaScript基础知识点分析

这篇“JavaScript基础知识点分析”除了程序员外大部分人都不太理解，今天小编为了让大家更加理解“JavaScript基础知识点分析”，给大家总结了以下内容，具有一定借鉴价值，内容详细步骤清晰，细节处理妥当，希望大家通过这篇文章有所收获...

99+

2023-06-06
javascript小知识点有哪些

本篇内容主要讲解“javascript小知识点有哪些”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“javascript小知识点有哪些”吧!设置图片时<image scr="&qu...

99+

2023-06-04
JavaScript闭包知识点整理

这篇文章主要讲解了“JavaScript闭包知识点整理”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“JavaScript闭包知识点整理”吧！在谈闭包之前，我...

99+

2024-04-02