JavaScript简介引入方式（JavaScript基础语法、JavaScript对象、BOM、DOM、事件监听）

在这里插入图片描述

🐌个人主页： 🐌 叶落闲庭
💨我的专栏：💨
c语言
数据结构
javaEE
操作系统
Redis

石可破也，而不可夺坚；丹可磨也，而不可夺赤。

JavaScript简介&引入方式

  • 简介：什么是JavaScript
  • 一、JavaScript的引入方式
  • 二、JavaScript基础语法
    • 2.1 书写语法与输出语句
    • 2.2 变量与数据类型
    • 2.3 运算符
      • 2.3.1 == 与 === 的区别
      • 2.3.2 类型转换
    • 2.4 流程控制语句与函数
  • 三、JavaScript对象
    • 3.1Array
    • 3.2 String
    • 3.3 自定义对象
  • 四、BOM
    • 4.1 Window:浏览器窗口对象
    • 4.4 History:历史记录对象
    • 4.5 Location:地址栏对象
  • 五、DOM
    • 5.1 获取Element对象
    • 5.2 常见HTML Element对象的使用
  • 六、事件监听
    • 6.1 事件绑定
    • 6.2 常见事件

简介：什么是JavaScript

  • JavaScript是一门跨平台、面向对象的脚本语言，来控制网页行为的，它能使网页可交互
  • W3C标准：网页主要由三部分组成
    • 结构：HTML
    • 表现：CSS
    • 行为：JavaScript
  • JavaScript和Java是完全不同的语言，不论是概念还是设计，但是语法基础类似
  • JavaScript（简称JS）在1995年由Brendan Eich发明，并于1997年成为一部ECMA标准
  • ECMAScript 6（ES6）是最新的JavaScript版本（发布于2015年）

一、JavaScript的引入方式

  • 1.内部脚本：将JS代码定义在HTML页面中
    • 在HTML中，JavaScript代码必须位于<script>与</script>标签之间
<script>alert("hello JavaScript!");
</script>
  • 注意：
  • 在HTML文档中可以在任意地方，放置任意数量的<script>
  • 一般把脚本置于<body>元素的底部，可改善显示速度，因为脚本执行会拖慢显示
  • 2.外部脚本：将JS代码定义在外部JS文件中，然后引入到HTML页面中
  • 外部文件：test.js：alert("hello JavaScript!");
  • 引入外部js文件：<script src = "../js/test.js"></script>
  • 注意：
    • 外部脚本不能包含<script>标签
    • <script>标签不能自闭合

二、JavaScript基础语法

2.1 书写语法与输出语句

  • 书写语法：
    • 区分大小写：与Java一样，变量名、函数名以及其他一切东西都是区分大小写的
    • 每行结尾的分号可有可无
    • 注释：
      • 单行注释：//注释内容
      • 多行注释：/* 注释内容 */
    • 大括号表示代码块
  • 输出语句：
    • 使用window.alert()写入警告框
    • 使用document.write()写入HTML输出
    • 使用console.log()写入浏览器控制台

2.2 变量与数据类型

  • 变量：
    • JavaScript中用var关键字（variable的缩写）来声明变量
    • JavaScript是一门弱类型语言，变量可以存放不同类型的值
    • 变量名需要遵循如下规则：
      • 组成字符可以是任何字母、数字】下划线（_）或美元符（$）
      • 数字不能开头
      • 建议使用驼峰命名法
  • ECMScript6新增了let关键字来定义变量，它的用法类似于var，但是所声明的变量只在let关键字所在的代码块内有效，且不允许重复声明
  • ECMScript6新增了const关键字，用来声明一个只读的常量，一旦声明。常量的值就不能改变
  • 数据类型：
  • JavaScript中分为：原始类型和引用类型
  • 5种原始类型：
    • number：数字（整数、小数、NaN（Not a Number））
    • string：字符、字符串、单双引皆可
    • boolean：布尔（true、false）
    • null对象为空
    • undefined：当声明的变量未初始化时，该变量的默认值是undefined
  • 使用typeof运算符可以获取数据类型

2.3 运算符

  • 一元运算符：++，-
  • 算术运算符：+，-，*，/，%
  • 赋值运算符：=，+，
  • 关系运算符：>，<，>=，<=，!=，== ， = ===…
  • 逻辑运算符：&&，||，！
  • 三元运算符：条件表达式？true_value:false_value

2.3.1 == 与 === 的区别

  • == ：等于
    • 1.判断类型是否一样，如果不一样，则进行类型转换
    • 2.比较其值
  • ===：全等于
    • 1.判断类型是否一样，如果不一样，直接返回fa1se
    • 2.再去比较其值

2.3.2 类型转换

  • 其它类型转为number：
    • 1.string转为number：按照字符串的字面值，转为数字.如果字面值不是数字，则转为NaN,一般使用parseInt()进行转换。
    • 2.boolean转为number：true转为1，false转为0。
  • 其它类型转为boolean：
  • 1.number：0和NaN转为false,其他的数字转为true
  • 2.string：空字符串转为false,其他的字符串转为true
  • 3.null：false
  • 4.undefined：false

2.4 流程控制语句与函数

  • 流程控制语句
  • if：
var count 3;
if(count == 3){alert(count);
}
  • switch:
var num 3;
switch (num){case 1:{alert("星期一")；break;}case 2:{alert("星期二")；break;}case 3:{alert("星期三")；break;}case 4:{alert("星期四")；break;}case 5:{alert("星期五")；break;}case 6:{alert("星期六")；break;}case 7:{alert("星期日")；break;}default:{alert("输入错误！");break;}
}
  • for：
var sum = 0;
for(1et i = 1;i <= 100;1++){sum += i;
}
alert(sum);
  • while：
var sum = 0;
var i = 1;
while (i <= 100){sum += i;i++;
}
alert(sum);
  • do.…while：
var sum = 0;
var i = 1;
do {sum += 1:i++;
}
while (i <= 100);
alert(sum);
  • 函数（方法）
  • 方式一：
  • 是被设计为执行特定任务的代码块
  • 定义：JavaScript函数通过function关键词进行定义，语法为：
function functionName(参数1，参数2...) {//要执行的代码
}
  • 注意：
  • 形式参数不需要类型。因为JavaScript是弱类型语言
  • 返回值也不需要定义类型，可以在函数内部直接使用returni返回即可
function add(a,b) {return a b;
}
  • 调用：函数名称（实际参数列表）；
let result add(1,2);
  • 方式二：
var functionName = function(参敛列表){//要执行的代码
}

var add = function (a,b){return a + b;
}
  • 调用：JS中，函数调用可以传递任意个数参数
let result add(1,2,3);

三、JavaScript对象

3.1Array

  • JavaScript Array对象用于定义数组
    • 定义:
var 变量名 = new Array(元素列表);//方式一
var arr new Array(1,2,3);

var 变量名 = [元素列表]；//方式二
var arr = [1,2,3];
    • 访问：
arr[索引] = 值；
arr[0]= 1;
  • 注意：JS数组类似Java集合，长度，类型都可变（变长变类型）
    • 属性：
      • length：数组中元素的个数
var arr4 = [1,2,3];
for (let i = 0;i <= arr4.length;i++){alert(arr4[i]);
}
    • 方法：
      • push：添加
var arr5 = [1,2,3];
arr5.push(10);
alert(arr5);
      • splice：删除
var arr6 = [1,2,3];
arr6.splice(0，1);//表示从0下标开始删，删除1个元素
alert(arr6);

在这里插入图片描述

在这里插入图片描述

3.2 String

  • 定义：
var 变量名 = new String(s);//方式一
var str = new String("hello");
var 变量名 = s;//方式二
var str = "hello";

在这里插入图片描述

3.3 自定义对象

  • 格式：
var 对象名称 = {属性名称1：属性值1属性名称2：属性值2，...函数名称：function(形参列表){}...};

var person = {name:"zhangsan",age:23,eat:function {alert("干饭~")；}
};

四、BOM

  • Browser Object Model浏览器对象模型
  • JavaScript将浏览器的各个组成部分封装为对象
  • 组成：

4.1 Window:浏览器窗口对象

      • 获取：直接使用window,其中window.可以省略
window.alert("abc");
      • 属性：获取其他BOM对象

在这里插入图片描述

在这里插入图片描述

  • confirm：点击确定按纽，返回true,点击取消按钮，返回false
var flag=confirm("确认别除？")；
alert(flag);
if(flag){//删除逻辑
}
  • setTimeout(function,毫秒值)：在一定的时间间隔后执行一个function,只执行一次
setTimeout(function()alert("hehe");
},3000);
  • setInterval(function,毫秒值)：在一定的时间间隔后执行一个function,循环执行
setInterval(function()alert("hehe");
},3000);

4.4 History:历史记录对象

  • History：历史记录
  • 获取：使用window.history获取，其中window可省略
window.history.方法();
history.方法();
  • 方法：
    在这里插入图片描述

4.5 Location:地址栏对象

  • History：历史记录
  • 获取：使用window.location获取，其中window可省略
window.location.方法();
location.方法();
  • 属性：
    在这里插入图片描述

五、DOM

  • Document Object Model文档对象模型
  • 将标记语言的各个组成部分封装为对象
    • Document:整个文档对象
    • Element:元素对象
    • Attribute:属性对象
    • Text:文本对象
    • Comment:注释对象
      在这里插入图片描述
  • JavaScript通过DOM，就能够对HTML进行操作了
    • 改变HTML元素的内容
    • 改变HTML元素的样式(CSS)
    • 对HTML DOM事件作出反应
    • 添加和删除HTML元素
  • DOM是W3C(万维网联盟)的标准
  • DOM定义了访问HTML和XML文档的标准：
  • W3CDOM标准被分为3个不同的部分：
    • 1.核心DOM:针对任何结构化文档的标准模型
      • Document:整个文档对象
      • Element:元素对象
      • Attribute:属性对象
      • Text:文本对象
      • Comment:注释对象
    • 2.XML DOM:针对XML文档的标准模型
    • 3.HTML DOM:针对HTML文档的标准模型
      • Image:<img>
      • Button <input type=button'>

5.1 获取Element对象

  • Element:元素对象
  • 获取：使用Document对象的方法来获取
    • 1.getElementByld:根据id属性值获取，返回一个Element对象
var img = document.getElementById("Light");
alert(img);
    • 2.getElementsByTagName:根据标签名称获取，返回Element对象数组
var divs = document.getElementsByTagName("div");
alert(divs.length);
    • 3.getElementsByName:根据name属性值获取，返回Element对象数组
var hobbys = document.getELementsByName("hobby");
for (let i = 0;i < hobbys.length;i++){alert(hobbys[i]);
}
    • 4.getElementsByClassName:根据class属性值获取，返回Element对象数组
var clss = document.getElementsByelassName("cls");
for (let i = 0;i < clss.length;i++){alert(clss[i]);
}

5.2 常见HTML Element对象的使用

  • <img>标签的src属性：
var img = document.getElementById("Light");
img.src = "../imgs/on.gif"
  • style:设置元素css样式
var divs = document.getElementsByTagName("div");
for (let i = 0;i < divs.length;i++){divs[i].style.color = 'red';
}
  • innerHTML:设置元素内容
var divs = document.getElementsByTagName("div");
for (let i = 0;i < divs.length;i++){divs[i].innerHTML = "hello!";
}
  • checked:选中对象
var hobbys = document.getELementsByName("hobby");
for (let i = 0;i < hobbys.length;i++){hobbys[i].checked = true;
}

六、事件监听

  • 事件：HTML事件是发生在HTML元素上的“事情”。比如：
    • 按钮被点击
    • 鼠标移动到元素之上
    • 按下键盘按键
  • 事件监听：JavaScript可以在事件被侦测到时执行代码

6.1 事件绑定

  • 事件绑定有两种方式：
    • 方式一：通过HTML标签中的事件属性进行绑定
<input type="button"onclick='on()'>
function on(){alert("我被点了")：
}
    • 方式二：通过DOM元素属性绑定（推荐）
<input type="button"id="btn">
document.getElementByld("btn").onclick function(){alert("我被点了");
}

6.2 常见事件

  • 参考HTML教程：https://www.w3school.com.cn/jsref/dom_obj_event.asp

在这里插入图片描述

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/85940.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

智能生活从这里开始：数字孪生驱动的社区

智能生活从这里开始：数字孪生驱动的社区

数字孪生技术&#xff0c;这个近年来备受瞩目的名词&#xff0c;正迅速渗透到社区发展领域&#xff0c;改变着我们居住的方式、管理的方式以及与周围环境互动的方式。它不仅仅是一种概念&#xff0c;更是一种变革&#xff0c;下面我们将探讨数字孪生技术如何推动社区智能化发展…
阅读更多...
基于微服务的第二课堂管理系统（素质拓展学分管理平台）SpringCloud、SpringBoot 分布式，微服务

基于微服务的第二课堂管理系统（素质拓展学分管理平台）SpringCloud、SpringBoot 分布式，微服务

基于微服务的第二课堂管理系统 一款真正的企业级开发项目&#xff0c;采用标准的企业规范开发&#xff0c;有项目介绍视频和源码&#xff0c;需要学习的同学可以拿去学习&#xff0c;这是一款真正可以写在简历上的校招项目&#xff0c;能够真正学到东西的一个项目&#xff0c;话…
阅读更多...
基于springboot高校场馆预订系统

基于springboot高校场馆预订系统

博主主页&#xff1a;猫头鹰源码 博主简介&#xff1a;Java领域优质创作者、CSDN博客专家、公司架构师、全网粉丝5万、专注Java技术领域和毕业设计项目实战 主要内容&#xff1a;毕业设计(Javaweb项目|小程序等)、简历模板、学习资料、面试题库、技术咨询 文末联系获取 项目介绍…
阅读更多...
重新认识架构—不只是软件设计

重新认识架构—不只是软件设计

前言 什么是架构&#xff1f; 通常情况下&#xff0c;人们对架构的认知仅限于在软件工程中的定义&#xff1a;架构主要指软件系统的结构设计&#xff0c;比如常见的SOLID准则、DDD架构。一个良好的软件架构可以帮助团队更有效地进行软件开发&#xff0c;降低维护成本&#xff0…
阅读更多...
Leetcode171. Excel 表列序号

Leetcode171. Excel 表列序号

给你一个字符串 columnTitle &#xff0c;表示 Excel 表格中的列名称。返回 该列名称对应的列序号 。 例如&#xff1a; A -> 1 B -> 2 C -> 3 ... Z -> 26 AA -> 27 AB -> 28 ... 题解&#xff1a;力扣&#xff08;LeetCode&#xff09;官网 - 全球极客挚爱…
阅读更多...
mysqld_exporter监控MySQL服务

mysqld_exporter监控MySQL服务

一、MySQL授权 1、登录MySQL服务器对监控使用的账号授权 CREATE USER exporterlocalhost IDENTIFIED BY 123456 WITH MAX_USER_CONNECTIONS 3; GRANT PROCESS, REPLICATION CLIENT, SELECT ON *.* TO exporterlocalhost; flush privileges;2、上传mysqld_exporter安装包&#…
阅读更多...
Spring boot原理

Spring boot原理

起步依赖 Maven的传递依赖 自动配置 Springboot的自动配置就是当spring容器启动后&#xff0c;一些配置类、bean对象就自动存入到IOC容器中&#xff0c;不需要我们手动去声明&#xff0c;从而简化了开发&#xff0c;省去了繁琐的配置操作。 自动配置原理&#xff1a; 方案一…
阅读更多...
MongoDB（一） windows 和 linux 之 Ubuntu 安装

MongoDB（一） windows 和 linux 之 Ubuntu 安装

数据库分类 一、关系型数据库&#xff08;RDBMS&#xff09; mysql 、Oracle、DB2、SQL Server 关系数据库中全都是表 二、非关系型数据库&#xff08;NO SQL&#xff09; MongoDB、Redis 键值对数据库 文档数据库MongoDB 下载 mongoDB https://www.mongodb.com/try/downloa…
阅读更多...
获取文件最后修改时间

获取文件最后修改时间

版权声明 本文原创作者&#xff1a;谷哥的小弟作者博客地址&#xff1a;http://blog.csdn.net/lfdfhl Java源码 public void testGetFileTime() {try {String string "E://test.txt";File file new File(string);Path path file.toPath();BasicFileAttributes ba…
阅读更多...
【视觉SLAM入门】8. 回环检测，词袋模型，字典，感知，召回，机器学习

【视觉SLAM入门】8. 回环检测，词袋模型，字典，感知，召回，机器学习

"见人细过 掩匿盖覆” 1. 意义2. 做法2.1 词袋模型和字典2.1.2 感知偏差和感知变异2.1.2 词袋2.1.3 字典 2.2 匹配(相似度)计算 3. 提升 前言&#xff1a; 前端提取数据&#xff0c;后端优化数据&#xff0c;但误差会累计&#xff0c;需要回环检测构建全局一致的地图&…
阅读更多...
Go 语言学习总结（9）—— Go 与 Java 全面对比总结

Go 语言学习总结（9）—— Go 与 Java 全面对比总结

基本语法格式 Golang: 编码风格相对统一&#xff0c;简单&#xff0c;没有太多的语法糖等&#xff0c;Java层次清晰&#xff0c;全面面向对象。 变量相关 变量的声明及使用 在Java或者PHP、Python中&#xff0c;声明了变量&#xff0c;可以不使用&#xff0c;也不报错。 p…
阅读更多...
JavaWeb开发-06-SpringBootWeb-MySQL

JavaWeb开发-06-SpringBootWeb-MySQL

一.MySQL概述 1.安装、配置 官网下载地址&#xff1a;https://dev.mysql.com/downloads/mysql/ 2.数据模型 3.SQL简介 二.数据库设计-DDL 1.数据库 官网&#xff1a;http:// https://www.jetbrains.com/zh-cn/datagrip/ 2.表&#xff08;创建、查询、修改、删除&#xff09; #…
阅读更多...
【完全二叉树魔法：顺序结构实现堆的奇象】

【完全二叉树魔法：顺序结构实现堆的奇象】

本章重点 二叉树的顺序结构堆的概念及结构堆的实现堆的调整算法堆的创建堆排序TOP-K问题 1.二叉树的顺序结构 普通的二叉树是不适合用数组来存储的&#xff0c;因为可能会存在大量的空间浪费。而完全二叉树更适合使用顺序结构存储。现实中我们通常把堆(一种二叉树)使用顺序结构…
阅读更多...
HTML常用基本元素总结

HTML常用基本元素总结

<!DOCTYPE html> <html> <head> <meta charset"utf-8"> <title> biao qian</title> </head> <body><h1>这是标题1</h1> <h2>这是标题2</h2> <h3>这是标题3</h3><p> 这…
阅读更多...
机器学习笔记 - 维度诅咒的数学表达

机器学习笔记 - 维度诅咒的数学表达

1、点之间的距离 kNN分类器假设相似的点也可能有相同的标签。但是，在高维空间中，从概率分布中得出的点往往不会始终靠近在一起。 我们可以用一个简单的例子来说明这一点。 我们将在单位立方体内均匀地随机绘制点（如图所示），并研究该立方体内测试点的 k 个最近邻将占用多少…
阅读更多...
APM32F0XX/STM32F0XX停机模式功耗测试

APM32F0XX/STM32F0XX停机模式功耗测试

打开Geehy-APM32F030x4x6x8手册看功耗描述。 下面进行代码配置&#xff0c;8M主频&#xff0c;进入停机模式。 STOP mode void Enter_Low_Power_Mode(void) {__HAL_RCC_PWR_CLK_ENABLE(); HAL_PWR_EnterSTOPMode(PWR_LOWPOWERREGULATOR_ON, PWR_STOPENTRY_WFI); SystemClock…
阅读更多...
【51单片机实验笔记】LED篇（二）多色LED的基本控制

【51单片机实验笔记】LED篇（二）多色LED的基本控制

目录 前言硬件介绍双色LED三色LED七彩自动闪烁LED 接线图面包板介绍直插电阻介绍色环解析 双色LED实际接线图三色LED实际接线图七彩自动闪烁LED实际接线图 软件实现双色LED交替闪烁三色LED灯交替闪烁 总结 前言 本节内容我们学习了解一些多色LED的显示原理及驱动方式。 本节涉…
阅读更多...
python+requests接口自动化测试框架实例详解教程

python+requests接口自动化测试框架实例详解教程

1、首先&#xff0c;我们先来理一下思路。 正常的接口测试流程是什么&#xff1f; 脑海里的反应是不是这样的&#xff1a; 确定测试接口的工具 —> 配置需要的接口参数 —> 进行测试 —> 检查测试结果&#xff08;有的需要数据库辅助&#xff09; —> 生成测试报…
阅读更多...
【Java 基础篇】Java Consumer 接口详解

【Java 基础篇】Java Consumer 接口详解

在Java编程中&#xff0c;有时需要对某个对象进行操作或者处理&#xff0c;而这个操作可能是非常灵活的。Java 8引入了函数式编程的特性&#xff0c;其中的一个重要接口就是Consumer接口。本文将详细介绍Consumer接口&#xff0c;包括它的定义、用法以及示例。 什么是 Consume…
阅读更多...
Java基础（六）

Java基础（六）

前言&#xff1a;本篇博客学习Junit单元测试框架的使用以及常见的注解。 目录 单元测试 Junit单元测试框架 常见注解 单元测试 什么是单元测试&#xff1f; 针对最小的功能单元&#xff08;方法&#xff09;&#xff0c;编写测试代码对其进行正确性测试。 Junit单元测试框…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023