JavaScript-JavaScript概述及简单使用

简介: JavaScript-JavaScript概述及简单使用

什么是


JavaScript 是一种具有面向对象能力的、解释型的程序设计语言。更具体一点,它是基于对象事件驱动并具有相对安全性的客户端脚本语言。

因为它不需要在一个语言环境下运 行,而只需要支持它的浏览器即可。它的主要目的是,验证发往服务器端的数据、增加 Web 互动、加强用户体验度等.


JavaScript 的特点


  • 松散性

JavaScript 语言核心与 C、C++、Java 相似,比如条件判断、循环、运算符等。但它 却是一种松散类型的语言,也就是说,它的变量不必具有一个明确的类型。


  • 对象属性

JavaScript 中的对象把属性名映射为任意的属性值。它的这种方式很像哈希表或关联数组,而不像 C 中的结构体或者 C++、Java 中的对象。

  • 继承机制

JavaScript 中的面向对象继承机制是基于原型的,这和另外一种不太为人所知的 Self语言很像,而和 C++以及 Java 中的继承大不相同。


JavaScript 的核心


虽然 JavaScript 和 ECMAScript 通常被人们用来表达相同的含义,但 JavaScript 的含义却比ECMA-262中规定的要多得多。一个完整的JavaScript应该由下列三个不同的部分组成。


  • 1.核心(ECMAScript)
  • 2.文档对象模型(DOM)
  • 3.浏览器对象模型(BOM)

文档对象模型 (DOM)


文档对象模型(DOM,Document Object Model)是针对 XML 但经过扩展用于 HTML的应用程序编程接口(API,Application Programming Interface)


浏览器对象模型 (BOM)


访问和操作浏览器窗口的浏览器对象模型(BOM,Browser Object Model)。开发人员使用 BOM可以控制浏览器显示页面以外的部分。而 BOM 真正与众不同的地方(也是经常会导致问题的地方),还是它作为 JavaScript实现的一部分,至今仍没有相关的标准。


使用

1.创建一张 HTML 页面

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title></title>
</head>
<body>
</body>
</html>


2.<Script>标签解析


<script>xxx</script>这组标签,是用于在 html 页面中插入 js 的主要方法。

它主要有以下几个属性:


1.charset:可选。表示通过 src 属性指定的字符集。由于大多数浏览器忽略它,所以很少有人用它。


2.defer:可选。表示脚本可以延迟到文档完全被解析和显示之后再执行。由于大多数浏览器不支持,故很少用。


3.language:已废弃。原来用于代码使用的脚本语言。由于大多数浏览器忽略它,所以不要用了。


4.src:可选。表示包含要执行代码的外部文件。


5.type:必需。可以看作是 language 的替代品。表示代码使用的脚本语言的内容类型。

<script type="text/javascript">
    alert('欢迎来到 JavaScript 世界!');
</script>

3.JS 代码嵌入的一些问题


如果你想弹出一个</script>标签的字符串,那么浏览器会误解成 JS 代码已经结束了。 解决的方法,就是把字符串分成两个部分,通过连接符‘+’来连接

<script type="text/javascript">
    alert('</scr'+'ipt>');
</script>

经验证,不拆分开也能识别。

一般来说,JS 代码越来越庞大的时候,我们最好把它另存为一个.js 文件,通过 src 引入即可。它还具有维护性高、可缓存(加载一次,无需加载)、方便未来扩展的特点。

<script type="text/javascript" src="demo1.js"></script>

这样标签内就没有任何 JS 代码了。但要注意的是,虽然没有任何代码,也不能用单标签:

错误的写法
<script type="text/javascript" src="demo1.js" />;

也不能在里面添加任何代码:

错误的写法
<script type="text/javascript" src="demo1.js">alert('我很可怜,执行不到!')</script>

按照常规,我们会把<script>标签存放到<head>...</head>之间。但有时也会放在 body 之间。


不再需要提供注释,以前为了让不支持 JavaScript 浏览器能够屏蔽掉<script>内部的代码,我们习惯在代码的前后用 html 注释掉,现在已经不需要了。

<script type="text/javascript">
    <!--
    alert('欢迎!');
    -->
</script>

平稳退化不支持 JavaScript 处理:<nosciprt>

<noscript>
    您没有启用 JavaScript
</noscript>


完整实例:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>使用JavaScript</title>
</head>
<body>
<noscript>
    本站必须启用JavaScript
</noscript>
<script type="text/javascript">
    alert('欢迎来到JavaScript世界!');
</script>
欢迎来到JavaScript世界!
</body>
</html>

另外如果通过src引用另外的文件的话 (在同一个目录下)

修改

<script type="text/javascript" src=demo.js><script>


demo.js

alert('Hello');


相关文章
|
1月前
|
Web App开发 存储 JavaScript
Node.js概述
Node.js概述
33 3
|
5月前
|
JavaScript 前端开发 开发者
JavaScript数据类型概述及Undefined与Null详解
JavaScript数据类型概述及Undefined与Null详解
N..
|
6月前
|
JavaScript 前端开发 API
Vue.js概述
Vue.js概述
N..
65 2
|
6月前
|
存储 XML 前端开发
编程笔记 html5&css&js 036 CSS概述
编程笔记 html5&css&js 036 CSS概述
|
6月前
|
数据采集 JavaScript 前端开发
Vue Nuxt.js 概述
Vue Nuxt.js 概述
103 0
|
12月前
|
存储 JavaScript 前端开发
【js】函数概述学习笔记(8)
【js】函数概述学习笔记(8)
41 0
|
Web App开发 JavaScript 前端开发
Node.js -- Node.js概述与安装和运行
Node.js -- Node.js概述与安装和运行
|
JavaScript 前端开发 数据库
Node.js 阻塞与非阻塞概述
Node.js 阻塞与非阻塞概述
|
Web App开发 JavaScript 开发工具
零基础html5+div+css+js网页开发教程#001网页开发概述
零基础html5+div+css+js网页开发教程#001网页开发概述