javaScript入门

爱被打了一巴掌 2023-10-08 22:13 48阅读 0赞

## 1.1 网页组成标准 ##

*  **`HTML`**是一种标记语言，用来结构化我们的网页内容并赋予内容含义，例如定义段落、标题和数据表，或在页面中嵌入图片和视频。
 *  **`CSS`**是一种样式规则语言，可将样式应用于 HTML 内容，例如设置背景颜色和字体，在多个列中布局内容。
 *  **javascript**是一种脚本语言，可以用来创建动态更新的内容，控制多媒体，制作图像动画，还有很多。

## 1.2 javascript概述 ##

1.  JavaScript主要用于HTML页面当中，写在HTML源码中
2.  JavaScript是因特网上最流行的脚本语言，它存在于全世界所有的Web浏览器中，能够增强用户与Web站点和Web应用程序之间的交互。
3.  **JS是弱类型语言**，没有类型声明，它的变量不必具有一个明确的类型。
4.  **JS是脚本语言**。换句话说，能够用来编程的并且直接执行源代码的语言，就是脚本语言。
5.  JS也是解释性的语言。何为解释性语言？是在运行的时候将程序直接翻译成机器语言。

## 1.3 javascript能干什么？ ##

1. 常见的网页效果【表单验证，轮播图......】
    2. 与H5配合实现游戏【水果忍者： http://www.jq22.com/demo/html5-fruit-ninja/】
    3. 实现应用级别的程序【http://naotu.baidu.com】
    4. 实现统计效果【http://echarts.baidu.com/examples/】
    5. 地理定位等功能【http://lbsyun.baidu.com/jsdemo.htm#i4_5】
    6. 在线学编程【https://codecombat.163.com/play/】
    7. js可以实现人工智能【面部识别】
    8. ......

## 1.5 javscript的组成 ##

<table> 
 <thead> 
  <tr> 
   <th>组成部分</th> 
   <th>作用</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>ECMAScript</td> 
   <td>构成了JS的核心语法</td> 
  </tr> 
  <tr> 
   <td>BOM</td> 
   <td>Browser Object Model【浏览器对象模型】，用来操作浏览器上的对象</td> 
  </tr> 
  <tr> 
   <td>DOM</td> 
   <td>Document Object Model【文档对象模型】，用来操作网页中的元素</td> 
  </tr> 
 </tbody> 
</table>

1.  **`ECMAScript`**: 定义了javascript的语法规范,描述了语言的基本语法和数据类型
2.  **`BOM`** (Browser Object Model): 浏览器对象模型
    
     *  有一套成熟的可以操作浏览器的 API，通过 BOM 可以操作浏览器。
     *  比如： 弹出框、浏览器跳转、获取分辨率等
3.  **`DOM`** (Document Object Model): 文档对象模型
    
     *  有一套成熟的可以操作页面元素的 API，通过 DOM 可以操作页面中的元素。
     *  比如： 增加个 div，减少个 div，给div 换个位置等

> **`总结`**： **JS 就是通过固定的语法去操作 浏览器 和 标签结构 来实现网页上的各种效果**

### javascript基本使用 ###

## 2.1 JS 嵌入方式 ##

在 HTML 中使用 JS 可以用以下几种方式实现：

*  行内式
 *  内嵌式
 *  外部引用 js 文件

行内式，可以在 html 元素中直接用使用 js 语句，但是一般都是调用函数或简短的语句。

内嵌式，一般用于实现比较小的功能，代码不长的情况

外部JS文件，最常见的方式

#### 2.2 JS 注释 ####

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

#### 2.3 JS 输入输出语句 ####

*  **alter/prompt/confirm来源于window对象**

alert(msg)  // 浏览器弹出框
    console.log(msg)  // 浏览器控制台打印输出信息
    prompt(info)  // 浏览器弹出输入框，用户可以输入
    confirm()

#### 2.4 JS事件 ####

*  标签的事件属性

<button onclick = "alert('123')">点我</button>
    
    <button onclick = "a();">点我</button>
    
    a()====>函数
    function a(){
    
    }
    
    
    onclick         // 鼠标点击左键
    ondbclick       // 鼠标双击
    oncontextmenu   // 鼠标点击右键
    mousedown       // 鼠标按键被按下
    mouseup         // 松开鼠标按键
    onselect        // 文本被选中
    oncopy          // 元素内容被复制
    onmouseenter    // 鼠标移动到事件监听的元素内（不区分子元素）
    onmouseover     // 鼠标移动到有事件监听的元素或它的子元素内
    onmouseleave    // 鼠标离开元素外（不区分子元素）
    onmouseout      // 鼠标离开元素，或它的子元素外
    onfocus         // 获得鼠标焦点(点击input输入框)
    onblur          // 失去鼠标焦点（进入其他input输入框）
    onmousemove     // 鼠标移动
    onmouseup       // 鼠标弹起
    onmousedown     // 鼠标按下