JavaScript-JavaScript概述及简单使用

2021-08-17 10:06:59 浏览数 (1)
  • 什么是
  • JavaScript 的特点
  • JavaScript 的核心
  • 使用
    • 创建一张 HTML 页面
    • Script标签解析
    • JS 代码嵌入的一些问题
  • 完整实例

什么是

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 页面

代码语言：javascript复制
<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.</code>标签解析</h2> <p><code><script>xxx这组标签，是用于在 html 页面中插入 js 的主要方法。 它主要有以下几个属性：

  • 1.charset：可选。表示通过 src 属性指定的字符集。由于大多数浏览器忽略它，所以很少有人用它。
  • 2.defer：可选。表示脚本可以延迟到文档完全被解析和显示之后再执行。由于大多数浏览器不支持，故很少用。
  • 3.language：已废弃。原来用于代码使用的脚本语言。由于大多数浏览器忽略它，所以不要用了。
  • 4.src：可选。表示包含要执行代码的外部文件。
  • 5.type：必需。可以看作是 language 的替代品。表示代码使用的脚本语言的内容类型。

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

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

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

代码语言：javascript复制
<script type="text/javascript">
    alert(' 'ipt>');
script>

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

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

代码语言：javascript复制
<script type="text/javascript" src="demo1.js">script>

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

代码语言：javascript复制
错误的写法
type</span>=<span class="hljs-string">"text/javascript"</span> src=<span class="hljs-string">"demo1.js"</span> />；</code></pre> 
<p><font color="red">也不能在里面添加任何代码：</font></p> 
<pre class="prettyprint"><code class=" hljs xml">错误的写法
<span class="hljs-tag"><<span class="hljs-title">script</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">"text/javascript"</span> <span class="hljs-attribute">src</span>=<span class="hljs-value">"demo1.js"</span>></span><span class="javascript">alert(<span class="hljs-string">'我很可怜，执行不到！'</span>)</span><span class="hljs-tag"></<span class="hljs-title">script</span>></span></code></pre> 
<hr> 
<p><font color="blue">按照常规，我们会把<code><script></code>标签存放到<code><head>...</head></code>之间。但有时也会放在 body 之间。</font></p> 
<hr> 
<p>不再需要提供注释，以前为了让不支持 JavaScript 浏览器能够屏蔽掉<code><script></code>内部的代码，我们习惯在代码的前后用 html 注释掉，现在已经不需要了。</p> 
<pre class="prettyprint"><code class=" hljs xml"><span class="hljs-tag"><<span class="hljs-title">script</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">"text/javascript"</span>></span><span class="javascript">
    <!--
    alert(<span class="hljs-string">'欢迎！'</span>);
    -->
</span><span class="hljs-tag"></<span class="hljs-title">script</span>></span></code></pre> 
<p><font color="red">平稳退化不支持 JavaScript 处理：<code><nosciprt></code></font></p> 
<pre class="prettyprint"><code class=" hljs xml"><span class="hljs-tag"><<span class="hljs-title">noscript</span>></span>
    您没有启用 JavaScript
<span class="hljs-tag"></<span class="hljs-title">noscript</span>></span></code></pre> 
<h1 id="完整实例">完整实例：</h1> 
<pre class="prettyprint"><code class=" hljs xml"><span class="hljs-doctype"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"></span>
<span class="hljs-tag"><<span class="hljs-title">html</span> <span class="hljs-attribute">xmlns</span>=<span class="hljs-value">"http://www.w3.org/1999/xhtml"</span>></span>
<span class="hljs-tag"><<span class="hljs-title">head</span>></span>
<span class="hljs-tag"><<span class="hljs-title">meta</span> <span class="hljs-attribute">http-equiv</span>=<span class="hljs-value">"Content-Type"</span> <span class="hljs-attribute">content</span>=<span class="hljs-value">"text/html; charset=gb2312"</span> /></span>
<span class="hljs-tag"><<span class="hljs-title">title</span>></span>使用JavaScript<span class="hljs-tag"></<span class="hljs-title">title</span>></span>

<span class="hljs-tag"></<span class="hljs-title">head</span>></span>
<span class="hljs-tag"><<span class="hljs-title">body</span>></span>

<span class="hljs-tag"><<span class="hljs-title">noscript</span>></span>
    本站必须启用JavaScript
<span class="hljs-tag"></<span class="hljs-title">noscript</span>></span>



<span class="hljs-tag"><<span class="hljs-title">script</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">"text/javascript"</span>></span><span class="javascript">
    alert(<span class="hljs-string">'欢迎来到JavaScript世界！'</span>);
</span><span class="hljs-tag"></<span class="hljs-title">script</span>></span>



欢迎来到JavaScript世界！


<span class="hljs-tag"></<span class="hljs-title">body</span>></span>
<span class="hljs-tag"></<span class="hljs-title">html</span>></span>
</code></pre> 
<hr> 
<p>另外如果通过src引用另外的文件的话 (在同一个目录下)</p> 
<p>修改 </p> 
<pre class="prettyprint"><code class=" hljs xml"><span class="hljs-tag"><<span class="hljs-title">script</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">"text/javascript"</span> <span class="hljs-attribute">src</span>=<span class="hljs-value">demo.js</span>></span><span class="javascript"><script></span></code></pre> 
<p>demo.js</p> 
<pre class="prettyprint"><code class=" hljs scss"><span class="hljs-function">alert(<span class="hljs-string">'Hello'</span>)</span>;</code></pre>
javascript html java c++ ecmascript

0 人点赞