JavaScript快速入门-基础

JavaScript介绍

JavaScript 是一种客户端脚本语言,不需要编译,就可以直接被浏览器解析运行
核心功能:增强用户和 HTML 页面的交互过程，让页面有一些动态效果。以此来增强用户的体验！

快速入门

创建一个 HTML
在<body>标签下面编写一个<script>标签
在<script>标签中编写代码。

通过浏览器查看。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>HelloWorld</title>
</head>
<body><h1>HelloWorld</h1>
</body>
<script>alert("HelloWorld");
</script>
</html>

引入方式

内部方式
- 在<body>标签下通过<script>标签编写代码
外部方式
- 定义独立的 js 文件，将代码编写在文件中，在 HTML文件的<body>标签下通过<script src=文件路径>来引入 js 文件。
- 注意:<script>标签不能写成自闭和标签

JavaScript基本语法

注释
- 单行注释: // 注释的内容
- 多行注释: /*注释内容*/
输入输出语句
- 输入框:prompt(“提示内容”);
- 弹出警告框:alert(“提示内容”);
- 控制台输出:console.log(“显示内容”);
- 页面内容输出:document.write(“显示内容”);
变量和常量
- JavaScript 属于弱类型的语言，定义变量时不区分具体的数据类型
- 定义局部变量:let 变量名 = 值;
- 定义全局变量:变量名 = 值; 或者使用var
- 定义常量:const 常量名 = 值;

数据类型

数据类型	说明
boolean	布尔类型，true或false
null	声明null值的特殊关键字
undefined	代表变量未定义
number	整数或浮点数
string	字符串
bigint	大整数，例如：let num = 10n

typeof 关键字
- typeof 用于判断变量的数据类型
- 例如:let age = 18;document.write(typeof(age)); // number
运算符
- 其他运算符正常使用,特殊的有
- ==:判断值是否相等
- ===:判断数据类型和值是否相等
- &&:逻辑与，并且的功能
- ||:逻辑或，或者的功能
流程控制和循环语句
- if 语句
- switch 语句
- for 循环
- while 循环
- 正常使用

数组

用法与java大致相同,但是在 JavaScript 中的数组更加灵活，数据类型和长度都没有限制
定义格式: let 数组名 = [元素1,元素2,…];
索引范围:从 0 开始，最大到数组长度-1
数组长度: 数组名.length

数组高级运算符…

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>数组</title>
</head>
<body></body>
<script>//定义数组let arr = [10,20,30];//arr[3] = 40;  js中的数组长度可变//遍历数组for(let i = 0; i < arr.length; i++) {document.write(arr[i] + "<br>");}document.write("==============<br>");// 数组高级运算符 ...//复制数组let arr2 = [...arr];//遍历数组for(let i = 0; i < arr2.length; i++) {document.write(arr2[i] + "<br>");}document.write("==============<br>");//合并数组let arr3 = [40,50,60];let arr4 = [...arr2 , ...arr3];//遍历数组for(let i = 0; i < arr4.length; i++) {document.write(arr4[i] + "<br>");}document.write("==============<br>");//将字符串转成数组let arr5 = [..."heima"];//遍历数组for(let i = 0; i < arr5.length; i++) {document.write(arr5[i] + "<br>");}
</script>
</html>

函数
- 函数类似于 java 中的方法，可以将一些代码进行抽取，达到复用的效果
- 定义格式
  function 方法名(参数列表) {
  方法体;
  return 返回值;
  }
  
  匿名函数
  function(参数列表) {
  方法体;
  }
  
  参数也可以是可变参数

JavaScript DOM

DOM介绍

DOM(Document Object Model)：文档对象模型
将 HTML 文档的各个组成部分，封装为对象。借助这些对象，可以对 HTML 文档进行增删改查的动态操作。

DOM树

Element 元素的操作

DOM(Document Object Model)：文档对象模型
Document：文档对象、Element：元素对象、Attribute：属性对象、Text：文本对象
元素的操作
- 根据id获得一个元素:getElementById(id属性值)
- 根据标签名称获得多个元素:getElementsByTagName(标签名称)
- 根据name属性获得多个元素:getElementsByName(name属性值)
- 根据class属性获得多个元素:getElementsByClassName(class属性值)
- 获取当前元素的父元素:.parentElement属性
- 根据class属性获得多个元素:createElement(标签名)
- 将指定子元素添加到父元素中:appendChild(子元素)
- 用父元素删除指定子元素:removeChild(子元素)
- 用新元素替换子元素:replaceChild(新元素,旧元素)
属性的操作
- 设置属性:setAtrribute(属性名, 属性值)
- 根据属性名获取属性值:getAtrribute(属性名)
- 根据属性名移除指定的属性:removeAtrribute(属性名)
- 为元素添加样式:style属性
文本的操作
- innerText
- innerHTML:可以解析标签

JavaScript 事件

事件

事件指的就是当某些组件执行了某些操作后，会触发某些代码的执行

常用事件
- onload :某个页面或图像被完成加载
- onsubmit:当表单提交时触发该事件
- onclick :鼠标单击事件
- ondblclick :鼠标双击事件
- onblur :元素失去焦点
- onfocus :元素得到焦点
- onchange:用户改变域的内容

事件的绑定

方式一

通过标签中的事件属性进行绑定。

<button id="btn" onclick="执行的功能"> </button>

方式二

通过 DOM 元素属性绑定。

document.getElementById("btn").onclick = 执行的功能

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><button onclick="up()">进入</button><button id = "down">退出</button><button id="zg">正规按钮</button>
</body>
<script>//绑定事件方式1function up(){alert("我来了!!!")}//绑定事件方式2let downbtn = document.getElementById("down");downbtn.onclick = function(){alert("xxx")}document.getElementById("zg").onclick = function(){while(true){alert("xxx")}}
</script>
</html>

JavaScript 面向对象

类的定义和使用

//定义Person类class 类名{//构造方法constructor(变量列表){变量赋值;}//方法方法名(参数列表){方法体;return 返回值;}}//使用Person类let 对象名 = new 类名(实际变量值);对象名.方法名();

字面量定义类和使用

定义

  let 对象名 = {变量名:变量值,变量名:变量值,...//方法方法名(参数列表){方法体;return 返回值;},...}

使用格式

对象名.方法名(参数);
对象名.变量名;

继承

继承：让类与类产生子父类的关系，子类可以使用父类有权限的成员。
继承关键字：extends
顶级父类：Object

JavaScript 内置对象

Number
Math
Date
构造方法

成员方法
JSON

JavaScript BOM

BOM(Browser Object Model)：浏览器对象模型。

Window 窗口对象

定时器

唯一标识 setTimeout(功能，毫秒值)：设置一次性定时器。
clearTimeout(标识)：需要拿到定时器的唯一标识才能取消一次性定时器。
唯一标识 setInterval(功能，毫秒值)：设置循环定时器。
clearInterval(标识)：同上
加载事件

window.onload：在页面加载完毕后触发此事件的功能

Location 地址栏对象

就是浏览器的地址栏。我们可以通过为该属性设置新的 URL，使浏览器读取并显示新的 URL 的内容
//跳转
location.href = "目标资源路径";

JavaScript 封装

封装思想

封装：将复杂的操作进行封装隐藏，对外提供更加简单的操作。
简单封装

//将复杂的操作进行封装隐藏，对外提供更加简单的操作
//引入该js文件就可以使用,
function getById(id){return document.getElementById(id);
}function getByName(name) {return document.getElementsByName(name);
}function getByTag(tag) {return document.getElementsByTagName(tag);
}
...

JavaScript快速入门-基础相关推荐

JavaScript快速入门（四）——JavaScript函数
函数声明之前说的三种函数声明中(参见JavaScript快速入门(二)--JavaScript变量),使用Function构造函数的声明方法比较少见,我们暂时不提.function func() { ...
JavaScript快速入门(1)
JavaScript快速入门详情百度百科 1. 什么是javaScript 2.快速入门 2.1.js引入方法 2.2. javaScript 的基本语法入门 2.3.数据类型 2.4.严格检查模式 ...
前端三大技术 HTML、CSS、JavaScript 快速入门手册
听到前端技术,不少朋友一定会感到有些陌生.但其实,前端,你每天都在接触. 你正在使用的APP,你正在浏览的网页,这些你能看到的界面,都属于前端. 而前端最重要的三大技术,HTML,CSS,JavaSc ...
3.JavaScript快速入门
1.什么是JavaScript 1.概述是一门世界上最流行的脚本语言 Java和 JavaScript 一个合格的后端人员必须精通JavaScript 2.历史 ECMAScript是JavaSc ...
PHP快速入门-基础语法及面向对象
配置sublime {"cmd": ["php", "$file"],"file_regex": "php$& ...
DELPHI快速入门基础教程
第一章 Delphi快速入门 Delphi快速入门(一) Delphi是全新的可视化编程环境,为我们提供了一种方便.快捷的Windows应用程序开发工具.它使用了Microsoft Windows图形 ...
狂神JavaScript快速入门学习笔记
狂神视频地址 1什么是JavaScript JavaScript是一门世界上最流行的脚本语言 2快速入门 2.1 引入JavaScript 1 内部标签 <script>alert('he ...
javaScript快速入门(仅需一天)
js入门 OneDay 最近学习了一些简单的js入门知识,拿出来分享一下,不喜勿喷! js的特点: ①主要用来向htnl页面添加动态效果 ②直接嵌套再html界面中,建议写在js文件中,有利于结构和行 ...
达芬奇调色技术：调色快速入门基础
达芬奇作为一款视频后期工具,今天来主要分享达芬奇调色面板快速入门的教程. 第一步:首先拖入视频素材,Alt+s迅速创建4个节点.四个节点分别命名为调整影调.还原色彩.风格化.整体调整. 第二步:若是使 ...
JavaScript快速入门（一）
1. JavaScript简介 1.1. JavaScript由来 Netscape 发明了 JavaScript JavaScript由Netscape 在1995年发明.早期的主要目的是处理一些用 ...

JavaScript快速入门-基础

JavaScript介绍

快速入门

JavaScript基本语法

JavaScript DOM

JavaScript 事件

JavaScript 面向对象

类的定义和使用

字面量定义类和使用

继承

JavaScript 内置对象

JavaScript BOM

Window 窗口对象

Location 地址栏对象

JavaScript 封装

JavaScript快速入门-基础相关推荐

最新文章

热门文章