JavaScript简单学习,看这篇就够了!
发布日期:2021-07-01 00:12:42
浏览次数:2
分类:技术文章
本文共 1488 字,大约阅读时间需要 4 分钟。
文章目录
1 JavaScript
1.1 JavaScript概述
- 什么是javascript: JavaScript一种直译式脚本语言,
- 什么是脚本语言? Java源代码 —> 编译成.class文件 —> Java虚拟机中才能执行 脚本语言: 源码 —> 解释执行 js由我们的浏览器来解释执行
- HTML: 决定了页面的框架 CSS: 用来美化我们的页面 JS: 提供用户的交互的
1.2 JS的组成
ECMAScript: 核心部分,定义js的语法规范
DOM: document Object Model 文档对象模型 , 主要是用来管理页面的 BOM: Browser Object Model 浏览器对象模型, 前进,后退,页面刷新, 地址栏, 历史记录, 屏幕宽高1.3 JS语言基础
1.3.1 JS的语法
- 变量弱类型: var i = true
- 区分大小写
- 语句结束之后的分号 ,可以有,也可以没有
- 写在script标签
- JS引入外部文件: script
1.3.2 JS的数据类型
- 基本类型
- string
- number
- boolean
- undefine
- null
- 引用类型
- 对象, 内置对象
- 类型转换
- js内部自动转换
1.3.3 JS的运算符和语句
- 运算符和Java一样
- ‘===’: 全等号, 值和类型都必须相等
- ‘==’: 值相等就可以了
- 语句和Java一样
1.3.4 JS的输出
- alert() 直接弹框
- document.write() 向页面输出
- console.log() 向控制台输出
- innerHTML: 向页面输出
1.3.5 JS声明变量
- var 变量的名称 = 变量的值
1.3.6 JS声明函数
var 函数的名称 = function(){ }
function 函数的名称(){ }
1.4 JS事件
- 获得焦点事件: onfocus
- 失去焦点事件: onblur
- 按键抬起事件: onkeyup
- 鼠标移入: onmouseenter
- 鼠标移出: onmouseout
1.4 DOM 树操作
- 获取单个页面元素: document.getElementById(“id的名称”)
- 获取全部页面元素: document.getElementsByName(“元素name”)
- 创建节点: document.createElement
- 创建文本节点: document.createTextNode
- 添加节点: 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 步骤分析
- 确定事件: 页面加载完成的事件
onload
- 事件要触发函数:
init()
- init函数里面做一件事:
- 启动一个定时器:
setTimeout()
- 显示一个广告
- 再去开启一个定时3秒钟之后,关闭广告
- 启动一个定时器:
1.6.1.4 代码实现
转载地址:https://lzyws739307453.blog.csdn.net/article/details/104551314 如侵犯您的版权,请留言回复原文章的地址,我们会给您删除此文章,给您带来不便请您谅解!
发表评论
最新留言
关注你微信了!
[***.104.42.241]2024年04月28日 20时39分57秒
关于作者
喝酒易醉,品茶养心,人生如梦,品茶悟道,何以解忧?唯有杜康!
-- 愿君每日到此一游!
推荐文章
Maven继承和聚合
2019-05-01
Apache Kafka:优化部署的 10 种最佳实践
2019-05-01
Leetcode 35. 搜索插入位置 c#
2019-05-01
LeetCode62. 不同路径
2019-05-01
记gdb调试一次报错:Missing separate debuginfos, use: zypper install glibc-32bit-debuginfo-2.22-15.3.x86_64
2019-05-01
LeetCode242. 有效的字母异位词
2019-05-01
LeetCode83. 删除排序链表中的重复元素
2019-05-01
关于301和302重定向的理解
2019-05-01
使用java代码和jmeter脚本批量造数
2019-05-01
[9] JMeter-常用函数的使用
2019-05-01
[10] JMeter-察看结果树,你知道都有哪些功能吗?
2019-05-01
[11] JMeter-结果分析之聚合报告
2019-05-01
[12] JMeter-结果分析之图形图表
2019-05-01
[13] JMeter-详解JMeter参数化之CSV Data Set Config
2019-05-01
[14] JMeter关联-详解JMeter正则表达式提取器
2019-05-01
优化jmeter脚本
2019-05-01
Gradle基础使用总结1
2019-05-01
性能测试场景设置---不同场景下对应的jmeter脚本【不定时补充】
2019-05-01