JavaScript基础——基本概念

193 阅读3分钟

语法结构

  1. Js是一种转为与网页交互而设计得脚本语言,有三个不同的组成部分。

    ECMAScript:提供核心语言功能
    文档对象模型(DOM):提供访问和操作网页内容的方法和接口
    浏览器对象模型(BOM):提供与浏览器交互的方法和接口

  2. Js是用Unicode字符集编写的

  3. 区分大小写

    比如关键字"while"不能写成"WHILE"。 但需要注意的是HTML不区分大小写, 在HTML中设置事件处理程序时,onclick可以写成 onClick ,但是在js中必须使用小写onclick

  4. js会忽略空格和换行

    因此可以采用整齐,一致的缩进来形成同意的编码风格,从而提升代码的可读性

  5. 注释

    //单行注释 和 /**/多行注释

  6. 标识符和保留字

    ➣标识符就是用来对变量和函数进行命名。
    ➣js把一些标识符拿出来用做自己的关键字,因此不能再程序中把这些关键字用作标识符。 比如break,case,catch....
    ➣ECMAScript5保留了关键字:class,const,enum,export,extends,import,super
    ➣js预定义了很多全局变量和函数,应当避免把他们用作变量名和函数名 比如: arguments,Number,Date,Nan...

  7. js使用;将语句分开

在HTML中使用JavaScript

  1. <script>元素

src属性:表示要执行代码的外部文件
type属性:表示代码使用的脚本语言的内容类型,也称MIME类型,这个属性不是必须的,如果没有指定这个属性,其默认值仍为text/javascript

  1. 嵌入脚本
   <script type="text/javascript">
            function fn(){
                console.log("hello world")
            }
   </script>
  1. 外部脚本
<script type="text/javascript" src="example.js"></script>

带有src属性的<script>元素不应该在<script></script>标签之间包含额外的代码,只会下载执行外部脚本文件,嵌入的代码会被忽略

  1. 外部文件的优点

➤ 可维护性:把所有的js文件都放在一个文件夹中,维护起来轻松的多。 ➤ 可缓存: 浏览器能够根据具体的设置缓存链接的所有外部文件,也就是说,如果有两个页面都是用同一个文件,那么这个文件只需要下载一次。能够加快页面的加载速度。

  1. 标签的位置

把所有的<script>元素放在页面的<head>元素中

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8" />
    		<title>demo</title>
    		<script type="text/javascript" src="exapmle1.js"></script>
    		<script type="text/javascript" src="exapmle2.js"></script>
    	</head>
    	<body>
    		<!--这里是内容-->
    	</body>
    </html>

这种方式意味着必须等到全部js代码都被下载,解析,执行完成以后,才开始呈现页面内容。有可能会导致浏览器在呈现页面时出现明显的延迟,为了避免这个问题,一般都放在<body>元素中页面内容的后面,如:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>demo</title>
	</head>
	<body>
		<!--这里是内容-->
		<script type="text/javascript" src="exapmle1.js"></script>
		<script type="text/javascript" src="exapmle2.js"></script>
	</body>
</html>
  1. <noscript>元素

这个元素用在不支持JavaScript的浏览器中显示替代的内容。只有在2中情况下才会显示出来
浏览器不支持脚本
浏览器支持脚本,但脚本被禁用

<!DOCTYPE html>
<html>
 <head>
 	<meta charset="utf-8" />
 	<title>demo</title>
 	<script type="text/javascript" src="exapmle1.js"></script>
 	<script type="text/javascript" src="exapmle2.js"></script>
 </head>
 <body>
 	<noscript>
 		<p>本页面需要浏览器支持(启用 )javascript</p>
 	</noscript>
 </body>
</html>