JavaScript简单学习,看这篇就够了!


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 代码实现

<script>	
	function init() {
		setTimeout("showAD()", 3000);
	}
	function showAD() {
		//首先要获取要操作的img
		var img = document.getElementById("img");
		//显示广告
		img.style.display = "block";
		//再开启定时器,关闭广告
		setTimeout("hideAD()", 3000);
	}
	function hideAD() {
		//首先要获取要操作的img
		var img = document.getElementById("img");
		//隐藏广告
		img.style.display = "none";
	}
</script>
©️2020 CSDN 皮肤主题: 代码科技 设计师: Amelia_0503 返回首页
实付0元
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值