javascript概念以及js四种引入方式和三种内容输出方式

js概念熟悉

首先了解一下编程语言

编程语言（programming language）（计算机语言）是人和计算机交流的一种语言。

编程语言的作用：

作用：
主要用于处理日常数据

其实，编程语言生活中无处不在，如使用的聊天软件

javaScript 简介

JavaScript概念:基于对象和事件驱动，并且具有相对安全性的解释型的客户端脚本语言

• 具有面向对象能力：js一开始就是基于对象的一门语言，不像php从面向过程慢慢过渡到面向对象的，js中有很多内置对象，像window location对象...无须定义就可以使用。

• 解释型：直接读代码而且运行,不像java，需要编译成一个点class文件，然后再执行那个class文件。

• 事件驱动：js大部分操作是基于浏览器的，比如你要点击一下页面，点击一下这个按钮，鼠标选中这段文本才触发一段JavaScript代码的执行。

• 相对安全性： 它没有一些修改文件和删除文件等一些恶意操作。（也是其魅力所在）

• 客户端：不需要服务器端就能执行的 ，当你打开一个浏览器，打开一个网站，它的网页存放到你本地的临时空间，才去执行你的js代码。所以他是在本地执行的，所以叫客户端，服务端就不叫本地了，而是叫远程端

• 脚本语言： 不像java需要一个JDK环境，还有.net需要一个SDK环境才能运行,他只是一个脚本语言，只需要支持他的浏览器即可，js是一种弱类型语言,浏览器内部已经内置了……

JavaScript是一门强大的编程语言，它既是一门非常简单的语言，又是一门非常复杂的语言。

此处，推荐两本书：犀牛书，javascript高级程序设计

Javascript的作用

• 表单数据验证：表单数据验证是JavaScript最基本也是最能体现效率的功能。验证用户输入的信息是否符合要求，早期主要用于表单验证，在网络极差的时候。

• 动态HTML（即DHTML）：动态HTML指不需要服务器介入而动态变化的网页效果，包括动态内容、动态样式、动态布局等。通过js来判定屏幕的大小，使用js动态的实现css的引入。

• 用户交互：用户交互指根据用户的不同操作进行的响应处理。例如：联动菜单等。三级联动菜单，鼠标hover上去的下拉菜单

• 数据绑定：HTML中表单和表格能够以.txt文件定义的数据源，通过对位于服务器端的数据源文件的访问，便可以将数据源中的数据传送到客户端，并将这些数据保存在客户端。通过js引入数据，数组，json格式。

• 少量数据查找：能够实现在当前网页中进行字符串的查找和替换。增删改查都可以。

• AJAX核心技术：AJAX即异步JavaScript+XML。该对象提供一种支持异步请求的技术，使客户端可以使用JavaScript向服务器提出请求并处理响应，但并不影响用户在客户端的浏览。

实现js效果的两个步骤：

1.引入js代码
2.输出js的内容

js版本：ES5(指2014年以前的版本)， ES6 ， ES7(当前最新的版本)

四种引入js代码的方式

1.内嵌式

• 语法：<script>js代码</script>
• 位置：网页中的任意位置
  写在body结束标签前，<script>js代码</script>
  可以写在head标签内的script标签内

2.外链式（外联式）

• 在外部创建一个.js的文件，里面写js代码
• 语法：直接通过script标签的src属性引入.js的文件

<script src="./my.js"></script>

3.在html标签中引入事件属性来绑定js代码

• 语法： 在标签上写
• 如：

<div onclick = "alert('点击了')"> </div>

• 事件属性：
  a.鼠标事件：

  • onclick:鼠标单击事件，
  • onmouseover:鼠标的移入事件，
  • onmouseout:鼠标的移出事件

  b.键盘事件：

4.使用a标签中href属性的伪协议操作：

• 语法：通过a标签

<a href="javascript:alert('你点击了')"></a>

注意事项：

1.内嵌式和外链式：

• script标签上的type属性是一个可选值。

<script type="text/javascript">
    js代码
</script>

h5中默认值就是type="text/javascript"，所以可以不写

• script标签内只能写js代码

• 不能在内嵌式中使用src属性

• 外链式script标签内不能写js代码
  错误原因：外部引入的js代码会覆盖script标签里面的js代码，只显示外链式的js代码

• js代码的引入位置
  a.一般都在head标签内
  b.可以写在body结束标签之前

• 运用场景

  a.内嵌式主要用于测试
  b.外链式主要用于实际项目中

2.第三种和四种方式一般不使用

a.html标签内通过事件属性来绑定js代码，主要针对当前标签绑定js生效，必须通过事件来执行js文件

b.在a标签中href属性为协议，<a href="javascript:js代码">文字</a>的方式

• javascript:表示为协议，一般都使用小写

• 写法：
  a.javascript:js代码
  b.javascript:void() 一般用于禁止a标签跳转。

输出js代码的三种方式

1.网页中输出指定内容

• 语法：
  document.write("输出内容");
  a. 可以输出中文、英文

    <script>
        document.write("今天天气也很不错")
    </script>

b.可以输出html代码

 <script>
        // document.write("今天天气也很不错");
        document.write(" <h2> 标题 </h2>")
 </script>

显示的结果是被h2修饰的标题

2.弹出框

• 语法：alert("内容")；
  字符串用引号引起来，变量不用引号。

3.在控制台中输出

• 语法：
  console.log("文字"); 打印日志
  console.debug(""); 一般用于调试
  在控制台中输出是使用最多的方式。

输出js代码的作用：

编程中会产生很多相关数据，为了验证数据是否复合要求，必须通过输出的形式来查看数据的正确性