JavaScript回顾一：简单介绍

月薪入万不是梦

于 2021-09-04 14:55:47 发布

阅读量323

点赞数 1

文章标签： javascript

本文链接：https://blog.csdn.net/weixin_49521534/article/details/120098674

版权

本文详细介绍了JavaScript的基础知识，包括它的定义、与Java的区别、特点、ES与JavaScript的关系，以及JS的引入方式和执行顺序。还探讨了JS在DOM操作中的注意事项，如DOM树的加载和JS错误处理。提供了JS输入输出工具如prompt和alert的使用方法，以及控制台输出信息的功能。此外，文章还分享了学习JavaScript的方法和技巧，强调了错误调试和不背单词的重要性。

摘要由CSDN通过智能技术生成

JS简单介绍

1.要学习JavaScript，就得知道什么是javascript？

javascript是一种功能强大的编程语言，简称js，用于开发交互式的web页面和给页面添加动态效果。Javascript不仅可以运行在客户端，还可以运行在服务器端，比如：node.js

2.Java和Javascript的关系

java和JavaScript是完全不同的两种语言；JavaScript借鉴了Java的语法；Java和JavaScript都是面向对象的（实现方式略有不同）；如同雷锋和雷峰塔的关系。

3.Js的特点

是一种脚本（script）语言，JavaScript与其他脚本语言一样，采用小程序段的方式实现编程；
是一种解释性语言，JavaScript程序代码在运行过程中逐行解释；
是一种基于对象的语言，有关JavaScript的对象特性；
是一种安全性语言，称为具有web安全特性，他不允许访问本地的硬盘，也不允许对网络文档进行修改和删除，而只能通过浏览器实现信息浏览或动态交互。
跨平台性，JavaScript的执行依赖于浏览器本身，而与操作环境无关，只要是能运行浏览器的计算机，而该浏览器又支持JavaScript，则脚本就可正确执行。

4. ES、JS和JScript的关系

ECMA:国际标准化组织；
ECMAScript:简称ES，可理解为是JavaScript的一个标准；
JavaScript：网景公司开发的一种脚本语言；
JScript：微软公司开发的一种脚本语言；
JS和JScript的差别微乎其微，对使用者无太大影响。

5.JS内部引入注释

js开发工具可用HBuilder；调试工具可用火狐浏览器（F12）等；js内部引入，在head标签内写上一对script标签；js注释：（1）单行注释，以" // “开头；（2）多行注释，以” /* "开头和结尾；（3）HBuilder注释快捷键：ctrl+/;

6.JS的引入

内部引入：在head标签内写上一对script标签；
外部引入：新建.js文件，通过script标签的src属性来引入；
行内引入：行内引入方试必须结合事件来使用，但是内部js和外部js可以不结合事件，行内引入用得少。

//内部引入语法格式：
<script type="text/javascript"/>  
	alert("我要自学网"/>
</script>

//外部引入
<script src="js/01.js"  type="text/javascript"  charset="UTF-8"></script>

//行内引入
<button  onclick="alert("我要自学网")">点我试试</button>

7.输入输出工具

显示可提示用户进行输入的对话框，简称“输入弹窗”；语法格式：prompt(对话框中显示的纯文本，默认的输入文本)；
弹出一条带有指定消息和一个确定按钮的警告框，简称“输出弹窗”；语法格式：alert(对话框中显示的纯文本)；
输出到页面，会以HTML的语法解析里面的内容；语法格式：document.write(参数1，参数2，参数3，…)，他们将按顺序被追加到文档中。

<script  type="text/javascript">
//prompt()    "输入弹窗"
prompt();
prompt("请输入姓名：")；
prompt("请输入姓名：" ，"张三")；

//alert()    “输出弹窗”
alert("我要自学网")；

//doucment.write()   "输出到页面"
document.write("我要自学网")；
document.write("<span style='color:red;'>我要自学网</span>")；
document.write("<span style='color:red;'>我要自学网</span>" ,
  "<br/>" , "<span style='color:blue;'>我要自学网</span>"
)；
</script>

8.控制台输出信息

在控制台上输出的信息，浏览器按下F12，打开控制台，Console即控制台。可以接受任何字符串、数字和js对象，可以看到清楚地对象属性结构，不会阻塞程序的执行。

<script>
	//console.log("我要自学网")；
	var z={name:'李四'，sex:'男'，age:'15'}；
	//alert("我要自学网")；会阻塞程序的执行
	console.log(z);
	alert("我要自学网")；
</script>

9.引入区域和执行顺序

引入区域：js可以引入文档中的任何区域，js都可以正确执行；js通常写在head区域和body区域。
执行顺序：代码在执行过程中，另一端代码想要执行就必须等当前代码执行完后才可以执行；js是按照语句出现的先后顺序执行，
和引入方式无关。

<script>
	alert("我要自学网1")；
	alert("我要自学网2")；
</script>

10.JS对DOM树的阻塞

DOM:JS操作网页的借口，全称为“文档对象模型”（Document Object Model）;可以理解成页面中的元素。
DOM树：元素和元素之间的关系，可以简单理解成页面结构。
JS的执行会阻塞页面结构的加载，此时DOM树是不完整的，这样在调用一些Js代码时就可能报错。
防止阻塞的两种方法：（1)把所有js代码放在body区域的最后；（2）添加window.onload事件，表示网页加载完毕后（包括图片、css文件等）执行的操作；

<head>
	window.onload=function(){     //若没有window.onload会发生阻塞；
		var a=document.getElementById("z")；
		a.sytle.color="red";
		a.style.fontSize="50px";
		a.style.fontWeight="700"；//驼峰命名法
	}
	</head>
<body>
	<div  id="z">我要自学网</div>
</body>

11.js发生错误时的阻塞

根据js执行顺序：按照语句出现的先后顺序执行，上一段代码执行完毕，才能执行下一段代码；如果一段代码出现问题，那么这段代码之后的代码都不能执行；
如何找出错误：（1）根据浏览器控制台错误提示对错误进行调试；（2）根据alert()，阻塞特性，可以对错误进行调试，“在代码中写一段alert()代码，若输出弹窗，则前面代码没问题”。

12.js学习方法和技巧