Day_02_JavaScript学习

繁_
150 阅读10分钟

Day_02_JavaScript学习

JS基础概念

JS定义

JavaScript是什么
JavaScript（简称：JS） 是一门跨平台、面向对象的脚本语言，是用来控制网页行为的，实现人机交互效果
JavaScript的特点
解释性、动态性、基于对象、事件驱动、跨平台性
三个组成部分
ECMAScript
规定了JS基础语法核心知识，包括变量、数据类型、流程控制、函数、对象等
BOM
浏览器对象模型，用于操作浏览器本身，如：页面弹窗、地址栏操作、关闭窗口等
DOM
文档对象模型，用于操作HTML文档，如：改变标签内的内容、改变标签内字体样式等

JS作用

增强用户体验
动态更新网页内容
实现表单验证
提高网页交互性
响应用户操作
实现动画效果

JS引入方式

行内方式
<!-- js写法1：行内方式
    语法：<标签事件属性="js代码">
    onclick点击事件属性，功能是浏览器监听了这个按钮的点击就会触发onclick属性执行js代码
    button是html5的语义化标签，代表按钮
    alert（'数据"）弹出提示框显示数据
-->

<button onclick="alert('行内方式：Hello World!')">按钮</button>

内部方式

<!-- 内部方式 -->
<!-- js写法2：内部方式，可以写在当前页面内任意位置，推荐body标签结束前
    语法：<script>js代码</script> 
-->

<script> alert("内部方式：Hello World!"); </script>

外部方式
<!-- 外部方式 -->
<!-- js写法3：外部方式，写在外部文件中，当前网页需要要引用外部js文件
     语法：创建xxx.js文件，在文件中写js代码
     引用文件<script src="xxx.js"></script>
     注意：不可以在引用外部js文件script标签内部写js代码不会运行 
-->

<script src="js/new.js"></script>

注意点
JavaScript代码必须位于 <script></script> 标签之间
在HTML文档中，可以在任意地方，放置任意数量的 <script>
一般会把脚本置于 <body> 元素的底部，可改善显示速度
书写位置

image.png

JS运行环境

浏览器环境
DOM操作、事件处理、BOM操作
Node.js环境
文件系统操作、网络请求、模块系统

输出语句

image.png

书写规范

image.png

JS数据类型与变量

数据类型

基本数据类型
Number、String、Boolean、Undefined、Null、Symbol(ES6新增)

image.png

引用数据类型
Object、Array、Function
模板字符串
语法
` `（反引号，英文输入模式下按键盘的tab键上方波浪线 ~ 那个键）
内容拼接变量时，使用 ${} 包住变量
用处
拼接字符串和变量

image.png

变量

var、let、const的区别
JavaScript 中用 let 关键字来声明变量，JavaScript 是一门弱类型语言，变量 可以存放不同类型的值
遵循规则
只能用 字母、数字、下划线（_）、美元符号（$）组成，且数字不能开头
变量名严格区分大小写，如 name 和 Name 是不同的变量
不能使用关键字，如：let、var、if、for等

数据类型转换

隐式转换
运算符导致的转换
函数参数传递导致的转换
显式转换
使用Number()、String()、Boolean()函数进行转换

数据类型检测

typeof、instanceof、Object.prototype.toString.call()
原始数据类型
 //原始数据类型
      alert(typeof 3); //number
      alert(typeof 3.14); //number
      alert(typeof "A"); //string
      alert(typeof "Hello"); //string
      alert(typeof `Hello JS`); //string
      alert(typeof true); //boolean
      alert(typeof false); //boolean
      alert(typeof null); //object
      alert(typeof undefined); //undefined
      
      let a;
      alert(typeof a); //undefined
 //模板字符串
      let name = "涛哥";
      let age = 18;
      alert("我是" + name + ",我今年" + age + "岁了");
      alert(`我是${name},我今年${age}岁了`);

常量

JavaScript 中用 const 关键字来声明常量，一旦声明，常量的值就不能改变（不可以重新赋值）

image.png

JS运算符与表达式

算术运算符

加(+)、减(-)、乘(*)、除(/)、取余(%)

image.png

赋值运算符

简单赋值(=)、复合赋值(+=、-=、*=、/=、%=)

image.png

比较运算符

等于(==)、不等于(!=)、全等(===)、不全等(!==);  
大于(>)、小于(<)、大于等于(>=)、小于等于(<=)
= 与 == 与 === 区别
= 是赋值操作
== 在比较时，判断左右两边的值是否相等（会进行类型转换）
=== 全等，在比较时，判断左右两边的类型和值是否都相等（不会进行类型转换）

image.png

逻辑运算符

与(&&)、或(||)、非(!)

image.png

表达式与语句

表达式的定义与计算:
    语句的定义与执行;
表达式的返回值:
    语句的结束符(;)

三元或三目运算符

格式
条件 ? 表达式1 ：表达式2
判断逻辑
条件为true返回表达式1，否则返回表达式2

let age = 20;  
let $age = 20;  
let flag = age === $age ? 1 : 0;   //flag = 1

image.png

JS流程控制

条件判断

if语句
单分支、多分支、嵌套if
switch语句
case语句、break语句、default语句

循环结构

for循环
基本for循环、for-in循环、for-of循环
      流程控制语句：for循环，用于循环多次执行  
      使用方式1：for...i次数循环  
                let i = 0 定义一个循环变量并设置初始值  
                i<5 循环运行的条件，条件成立继续循环，不成立循环结束  
                i++ 每次循环递增变量  
                输出5遍hello world
遍历hobbies数组，并打印数组数据
方法一

image.png

方法二

image.png

while循环
基本while循环、do-while循环

跳转语句

break语句
跳出循环、跳出switch语句
continue语句
跳过当前循环迭代、与标签配合使用
return语句
结束函数执行、返回函数值

image.png

案例

1、函数let score = prompt("输入数据的提示信息") 作用：弹框获取用户输入的数据，score是获取到的用户输入数据  
2、案例：弹框让用户输入成绩，根据得到成绩弹出：90分以上：优秀，80~89：良好，70~79：中上，60~69：及格，其他：不及格  
3、定义函数，递归调用

image.png

image.png

1、函数let day = prompt("输入数据的提示信息") 作用：弹框获取用户输入的数字，day是获取到的用户输入数据  
2、案例：弹框让用户输入数字，根据得到数字弹出：星期一、星期二、星期三、星期四、星期五、星期六、星期日  
3、定义函数，递归调用

image.png

image.png

JS对象

数组对象

介绍
    JavaScript中的Array对象用于定义数组
    定义数组，可以存储多个数据
    数组可以存储不同类型的元素
    
定义数组

image.png

修改值

image.png

属性
    数组属性 - length

image.png

方法
    (1) forEach循环遍历，参数是函数，遍历数组的每个元素都会运行这个函数  
    (2) item代表是数组array2遍历的每个元素  
    (3) i是循环索引，索引从0开始，i是可以省略

image.png

image.png

image.png

String字符串对象

创建方式
通过new关键字创建
直接赋值

image.png

属性
字符串属性 - length:
 let str1 = new String("abc");  
 let length = str1.length;  
 document.write(`str1的长度:${length}<br>`); //3
方法
charAt , indexOf , trim , substring

//charAt,根据指定位置返回字符
let str1 = new String("abc");  
let c = str1.charAt(1); //b  
document.write(`str1中下标1的字符:${c}<br>`);

//indexOf,根据字符获取从左到右第一次出现的位置
let str1 = "abcb";  
let number = str1.indexOf("b"); //1  
document.write(`str1中字符b第一次出现的位置:${number}<br>`);

//trim去掉字符串两边的空格
let str1 = "  abcb  ";  
document.write(`str1去掉两边空格前长度:${str1.length}<br>`); //8  
str1 = str1.trim();  
document.write(`str1去掉两边空格后长度:${str1.length}<br>`); //4

//substring(start,end)，截取字符串,从start位置开始截取，到end结束，不包含end位置
let str1 = new String("abc");  
let str = str1.substring(1, 2);  
document.write(`str1截取第一个b的结果:${str}<br>`); //b

image.png

JS自定义对象

定义格式

image.png

调用格式
对象名.属性名;  
对象名.方法名( );

image.png

JSON对象

介绍
是js对象格式的文本字符串，JavaScript Object Notation，JavaScript对象标记法，JSON是通过JavaScript对象标记法书写的文本
作用
由于其语法简单，层次结构鲜明，现多用于作为数据载体，在网络中进行数据传输
定义json字符串
let jsonStr = '{"name":"播仔","age":18,"addrs":["广州","南宁","柳州"]}';
alert(jsonStr.name); //这是错误的,字符串不能这么访问
json字符串 -> js对象,便于解析数据
let userObj = JSON.parse(jsonStr);  
alert(userObj.name);
js对象 -> json字符串,便于传输数据给后端
jsonStr = JSON.stringify(userObj);  
alert(jsonStr);

image.png

image.png

事件监听

介绍

HTML事件是发生在HTML元素上的 "事情"

image.png

JavaScript可以在事件触发时，就立即调用一个函数做出响应，也称为事件绑定或注册事件

语法

image.png

三要素

(1) 事件源：哪个dom元素触发了事件，要获取dom元素
(2) 事件类型：用什么方式触发，比如：鼠标单击 click，鼠标经过  mouseover
(3) 事件触发执行的函数：要做什么事

image.png

常见事件

鼠标事件
click：鼠标点击
mouseenter: 鼠标移入
mouseleave: 鼠标移出
键盘事件
keydown：键盘按下触发
keyup: 键盘抬起触发
焦点事件
focus：获得焦点触发
blur: 失去焦点触发
表单事件
input：用户输入时触发
submit: 表单提交时触发

image.png

image.png

image.png

类型转换

介绍

在某些运算被执行时，系统内部自动将数据类型进行转换，这种转换称为隐式转换

转换类型

字符串 <-> 数字
+ 号两边只要有一个是字符串，都会把另外一个转成字符串
除了+外的算术运算符，比如：- * / 都会把字符串转为数字类型
将字符串转为数字类型，还可以使用parseInt("12")这样的函数

image.png

其他类型 -> 布尔类型
number：0 和 NaN为false，其他均转为true
string：空字符串('')为false，其他均转为true
null 和 undefined ：均转为false

image.png

image.png

parseInt
介绍
（'字符串'）js库提供的函数，将字符串转为整型数据，不带有小数点
特点
将字符串从左往右一个一个转换，转换到非数字结束

image.png

函数

介绍

函数（ function ）是被设计用来执行特定任务的代码块，方便程序的封装复用

类型

具名函数
JavaScript中的函数通过function关键字进行定义
语法

image.png

image.png

image.png

匿名函数
匿名函数是指一种没有名称的函数，由于它们没有名称，因此无法直接通过函数名来调用，而是通过变量或表达式来调用
定义方式
函数表达式

image.png

箭头函数

image.png

立即执行函数

立即执行函数只是一种函数的调用方式

image.png

BOM

介绍

浏览器对象模型(Browser Object Model)，允许JS与浏览器对话，JS将浏览器的各个组成部分封装为对象

组成

Window：浏览器窗口对象
介绍
    浏览器窗口对象
获取
    直接使用window，其中 window. 可以省略
属性
    (1)history：对 History 对象的只读引用。请参阅 History 对象
    (2)location：用于窗口或框架的 Location 对象。请参阅 Location 对象

image.png

方法

//alert()：显示带有一段消息和一个确认按钮的警告框
//window对象方法confirm("确认消息"),弹出确认取消提示框,返回true代表点击了确认按钮,返回false代表点击了取消按钮
if (confirm("您确认要删除当前数据吗?")) {
        alert("您点击了确认按钮");
      } else {
        alert("您点击了取消按钮");
      }
//window对象方法setInterval(函数,毫秒数):每隔指定毫秒数会周期性运行函数代码块
setInterval(() => {
        alert("Hello World");
      }, 3000);
//window对象方法setTimeout(函数,毫秒数):在指定毫秒数后调用一次代码块
setTimeout(() => {
        alert("Hello World");
      }, 3000);

Navigator：浏览器对象
Screen：屏幕对象
History：历史记录对象
Location：地址栏对象

image.png

image.png

DOM

概念

Document Object Model，文档对象模型

介绍

将标记语言的各个组成部分封装为对应的对象
JavaScript 通过DOM，就能够对HTML进行操作

image.png

作用

改变 HTML 元素的内容
改变 HTML 元素的样式（CSS）
对 HTML DOM 事件作出反应
添加和删除 HTML 元素

DOM树

image.png

DOM对象

介绍
DOM对象：浏览器根据HTML标签生成的JS对象
所有的标签属性都可以在这个对象上面找到
修改这个对象的属性，就会自动映射到标签身上
核心思想
将网页的内容当做对象来处理
document对象
网页中所有内容都封装在document对象中
它提供的属性和方法都是用来访问和操作网页内容的，如：document.write(…)
操作步骤
获取DOM元素对象
    (1)根据CSS选择器来获取DOM元素，获取匹配到的第一个元素：document.querySelector('选择器')
    (2)根据CSS选择器来获取DOM元素，获取匹配到的所有元素： document.querySelectorAll('选择器')
操作DOM对象的属性或方法 （查阅文档）

image.png

image.png

学习网址

菜鸟教程

https://www.runoob.com/

w3school

https://www.w3school.com.cn/jsref/jsref_obj_array.asp
avatar
文章
阅读
粉丝