目录

▐ 快速认识JavaScript

▐ 基本语法

🔑JS脚本写在哪?

🔑注释

🔑变量如何声明?

🔑数据类型  

🔑运算符

🔑流程控制

▐ 函数

▐ 事件

▐ 计时

▐ HTML_DOM对象 *


 建议学习完HTML和CSS后再来学习JavaScript,没有学习的小伙伴文章末尾有相关链接哦!

 快速认识JavaScript

JavaScript原名叫LiveScript,是由美国网景公司开发的一种前端脚本语言,即不需要编译的语言,像sql,python,htmlcss,都是直接由某种解释器(引擎)解释执行,也就是逐行从上向下解释执行的。

JavaScript作为前端三剑客之一,其作用是为网页添加格式各样的动态功能,也就是网页的行为

由于网景公司和Sun公司合作,将LiveScript改名为JavaScript,注意JavaScript和Java没有任何联系,一个是前端脚本语言,一个是后端高级语言,不要因为名字相似而混为一谈。

基本语法


🔑JS脚本写在哪?

JavaScript的脚本写在一个标签中,如果在代码量很多的情况下可以写在外部js文件中,再在html文件中导入外部js文件即可.

🔖一旦标签导入其他的js文件,

前端三剑客之JavaScript基础入门插图

📖 在浏览器中右键—检查—打开调试界面—点击控制台

前端三剑客之JavaScript基础入门插图(1)

▐ 计时

通过使用JavaScript,我们可以做到在一个设定的时间间隔之后来执行代码,而不是在函数被调用后立即执行,也称之为计时事件.

🖇️常用方法

 setTimeout  

 •  用法:setTimeout ( “函数” , “时间” ) 

 •  含义:表示延迟 “指定时间” 后调用 “指定函数” ,且只调用一次.

○ clearTimeout  

 •  用法:clearTimeout ( “number” ) 

 •  含义:关闭setTimeout定时器

这里的参数number是定时器开始时,setTimeout返回的一个整数编号

 setInterval  

 •  用法:setInterval ( “函数” , “时间” ) 

 •  含义:表示每隔 “指定时间” 就调用一次 “指定函数” ,只要不关闭定时器就会一直调用.

 clearInterval  

 •  用法:clearTimeout ( “number” ) 

 •  含义:关闭setInterval定时器

同理,这里的参数number是定时器开始时,setInterva返回的一个整数编号

关于JavaScript中计时的详细介绍请阅读该文章前端三剑客之JavaScript基础入门插图(2)https://blog.csdn.net/2301_79263365/article/details/139471844?spm=1001.2014.3001.5502

HTML_DOM对象 *

 📖 JS HTML DOM是我们学习JavaScript过程中非常重要的内容,它可以解决:如何在JavaScript中操作网页中的标签? 这个问题。

Dom是document Object Model (文档对象模型) 的缩写.

JavaScript认为网页中的每个标签都是一个对象,在js中把这一类标签对象称为html_dom对象

既然我们要操作网页中的标签,那么第一步肯定是先拿到标签对象,那么第一个问题来了:

如何在js中获得网页中的标签对象?

在网页加载完毕后,在js中生成一个document对象(表示整个html文档)里面提供了一个方法: getElementById()

				//通过标签id获得网页中的标签对象
                var obj1 = document.getElementById("txt1");
				var obj2 = document.getElementById("txt2");

拿到网页中的标签对象后就可以通过dom对象操作标签的属性了(包括css属性).

		
			#box{
				width: 300px;
				height: 300px;
			}
		
		
	
	
		
		
	

除此之外我们还可以操作标签体中的内容:

 innerText 把标签内部值拿到,获得标签体中的文本内容

 innerHtml 获得标签内的所有内容(包括子标签)



推荐文章 :

HTML基本语法前端三剑客之JavaScript基础入门插图(2)https://blog.csdn.net/2301_79263365/article/details/138354155?spm=1001.2014.3001.5501HTML常用标签前端三剑客之JavaScript基础入门插图(2)https://blog.csdn.net/2301_79263365/article/details/138555452?spm=1001.2014.3001.5501CSS基本语法前端三剑客之JavaScript基础入门插图(2)https://blog.csdn.net/2301_79263365/article/details/138368375?spm=1001.2014.3001.5501CSS盒子模型前端三剑客之JavaScript基础入门插图(2)https://blog.csdn.net/2301_79263365/article/details/138595204?spm=1001.2014.3001.5501CSS浮动前端三剑客之JavaScript基础入门插图(2)https://blog.csdn.net/2301_79263365/article/details/139303652?spm=1001.2014.3001.5501


🏅本次的分享就到此为止了,希望我的分享能给您带来帮助,创作不易也欢迎大家三连支持,你们的点赞就是博主更新最大的动力!🏅如有不同意见,欢迎评论区积极讨论交流,让我们一起学习进步!🏅有相关问题也可以私信博主,评论区和私信都会认真查看的,我们下次再见 🏅

前端三剑客之JavaScript基础入门插图(3)

海漫浩浩,我亦苦作舟!大家一起学习,一起进步!  本人微信:g2279605572 

本站无任何商业行为
个人在线分享 » 前端三剑客之JavaScript基础入门
E-->