JavaScript简单学习，看这篇就够了！

￡神魔★判官ぃ 2023-07-09 06:27 12阅读 0赞

### 文章目录 ###

*  1 JavaScript
 *   *  1.1 JavaScript概述
     *  1.2 JS的组成
     *  1.3 JS语言基础
     *   *  1.3.1 JS的语法
         *  1.3.2 JS的数据类型
         *  1.3.3 JS的运算符和语句
         *  1.3.4 JS的输出
         *  1.3.5 JS声明变量
         *  1.3.6 JS声明函数
     *  1.4 JS事件
     *  1.4 DOM 树操作
     *  1.5 JS的开发步骤
     *  1.6 JS简单案例
     *   *  1.6.1 完成页面定时弹出广告
         *   *  1.6.1.1 需求分析
             *  1.6.1.2 技术分析
             *  1.6.1.3 步骤分析
             *  1.6.1.4 代码实现

--------------------

# 1 JavaScript #

## 1.1 JavaScript概述 ##

1.  什么是javascript: JavaScript一种直译式脚本语言，
2.  什么是脚本语言?  
    Java源代码 —> 编译成.class文件 —> Java虚拟机中才能执行  
    脚本语言: 源码 —> 解释执行  
    js由我们的浏览器来解释执行
3.  HTML: 决定了页面的框架  
    CSS: 用来美化我们的页面  
    JS: 提供用户的交互的

## 1.2 JS的组成 ##

ECMAScript: 核心部分,定义js的语法规范  
DOM: document Object Model 文档对象模型 , 主要是用来管理页面的  
BOM: Browser Object Model 浏览器对象模型, 前进,后退,页面刷新, 地址栏, 历史记录, 屏幕宽高

## 1.3 JS语言基础 ##

### 1.3.1 JS的语法 ###

1.  变量弱类型: var i = true
2.  区分大小写
3.  语句结束之后的分号 ,可以有,也可以没有
4.  写在script标签
5.  JS引入外部文件: script

### 1.3.2 JS的数据类型 ###

1.  基本类型
    
     *  string
     *  number
     *  boolean
     *  undefine
     *  null
2.  引用类型
    
     *  对象, 内置对象
3.  类型转换
    
     *  js内部自动转换

### 1.3.3 JS的运算符和语句 ###

1.  运算符和Java一样
    
     *  ‘===’: 全等号, 值和类型都必须相等
     *  ‘==’: 值相等就可以了
2.  语句和Java一样

### 1.3.4 JS的输出 ###

*  alert() 直接弹框
 *  document.write() 向页面输出
 *  console.log() 向控制台输出
 *  innerHTML: 向页面输出

### 1.3.5 JS声明变量 ###

1.  var 变量的名称 = 变量的值

### 1.3.6 JS声明函数 ###

var 函数的名称 = function(){
        	
    
    }

function 函数的名称(){
        
    
    }

## 1.4 JS事件 ##

1.  获得焦点事件: onfocus
2.  失去焦点事件: onblur
3.  按键抬起事件: onkeyup
4.  鼠标移入: onmouseenter
5.  鼠标移出: onmouseout

## 1.4 DOM 树操作 ##

1.  获取单个页面元素: document.getElementById(“id的名称”)
2.  获取全部页面元素: document.getElementsByName(“元素name”)
3.  创建节点: document.createElement
4.  创建文本节点: document.createTextNode
5.  添加节点: appendChild

## 1.5 JS的开发步骤 ##

1. 确定事件
    2. 通常事件都会出发一个函数
    3. 函数里面通常都会去操作页面元素,做一些交互动作

## 1.6 JS简单案例 ##

### 1.6.1 完成页面定时弹出广告 ###

#### 1.6.1.1 需求分析 ####

一般网页，当我们刚打开的时候，它会3秒之后，显示一个广告，让我们看3秒钟，然后他的广告就自动消失了！

#### 1.6.1.2 技术分析 ####

*  定时器
    
     *  setInterval: 每隔多少毫秒执行一次函数
     *  setTimeout: 多少毫秒之后执行一次函数
     *  clearInterval
     *  clearTimeout
 *  显示广告 img.style.display = “block”
 *  隐藏广告 img.style.display = “none”

#### 1.6.1.3 步骤分析 ####

1.  确定事件: 页面加载完成的事件`onload`
2.  事件要触发函数:`init()`
3.  init函数里面做一件事:
    
    1.  启动一个定时器:`setTimeout()`
    2.  显示一个广告
        
        1.  再去开启一个定时3秒钟之后,关闭广告

#### 1.6.1.4 代码实现 ####