前端学习笔记 - JS

原创

wx6490252e8ddc6 2023-06-20 11:00:26 博主文章分类：前端 ©著作权

文章标签 数组创建对象字符串 文章分类 Python 后端开发

©著作权归作者所有：来自51CTO博客作者wx6490252e8ddc6的原创作品，请联系作者获取转载授权，否则将追究法律责任

文章目录

JS简介

JS是什么
JS的用途
JS的构成

变量

声明和定义
变量规范

数据类型

基本数据类型
引用数据类型

运算符

赋值运算符
算数运算符
比较运算符
特殊

字符串拼接

数据类型转换

转成字符串
字符串转成数字类型
任意类型转成boolean
序列化

流程控制

if 判断
逻辑与 & 逻辑或
switch
while
do_while
for

常用内置对象

Array - 数组

数组的创建
数组的赋值
常用方法

String - 字符串
Date - 日期
Math - 内置对象

函数和Object

函数的声明和调用

声明方式1
声明方式2
声明方式3
调用

入口函数
创建对象的几种常用方式

使用object创建对象
使用字面量创建对象
工厂模式创建对象
构造函数模式创建对象
原型模式创建对象

定时器

执行一次
周期执行

正则
DOM

获取DOM节点的方法
常用的DOM节点
节点的增删改查
在html页面中增加标签
设置属性

id
类名
标签属性

获取内容

获取元素内所有内容
获取元素节点的标签名
获取文本
获取标签属性

删除

删除属性
删除对象

复制
替换
注意

JS简介

JS是什么

基于对象(object)和事件驱动(Event Driven)的, 安全性好的脚本语言
运行在客户端减轻服务器负担

特点
	向html中添加交互行为
	弱语言类型
	一般用来编写客户端脚本
	解释型语言, 无需另外编译

JS的用途

实现页面交互, 实现页面特效. 即js操作html的dom结构或操作样式
表单验证. 即在提交服务器前检查, 减轻服务器压力

JS的构成

DOM, BOM

变量

声明和定义

先声明后定义

var name;
name = 'yky';

console.log(name)

声明立刻定义

var name = 'yky';

console.log(name)

变量规范

1. 命名规则同python
2. 推荐驼峰命名

数据类型

基本数据类型

number

var num = 123;
console.log(typeof num);

// typeof [变量名] 用来检查变量类型

string

var str = '123';
console.log(typeof str);

boolean

var bool = True;
console.log(typeof bool);

null

var n = null;
console.log(typeof n);

undefined

var a; // 仅声明, 未定义
console.log(typeof a);

引用数据类型

function
object
array
string
date

运算符

赋值运算符

运算符	举例
=	a=1

算数运算符

var a = 5, b = 2
var c

运算符	举例	相当于	结果
=	a=b		a=2

+	c=a+b		c=7
-	c=a-b		c=3
*	c=a*b		c=10
/	c=a/b		c=2
%	c=a%b		c=1

++	a++	a=a+1	a=6
–	a–	a=a-1	a=4

+=	a+=b	a=a+b	a=7
-=	a-=b	a=a-b	a=3
*=	a*=b	a=a*b	a=10
/=	a/=b	a=a/b	a=2
%=	a%=b	a=a%b	a=1

比较运算符

运算符	描述	结果
==	等于, 比数值
===	等同于, 比数值和类型
!=	不等于
!==	不等同于
>	大于
<	小于
>=	大于等于
<=	小于等于

特殊

字符串拼接

1. 只能进行拼接, 不能进行运算
2. 只能+, 不支持*

var a = 'aa';
var b = 'bb';
var c = 3;

var d = a+b;
var e = a*c; 

console.log(d)
console.log(e)

数据类型转换

转成字符串

String()

var a = 123;
var b = String(a);

console.log(typeof b)

toString()

var a = 123;
var b = a.toString();

console.log(typeof b)

字符串转成数字类型

Number()

var a = '33';
var b = Number(a);

console.log(b)

parseInt()
从字符串开头第一位寻找, 直到找到非数字. 若第一位不为数字, 返回NaN

var a = '33aa3';
var b = parseInt(a);

console.log(b)

任意类型转成boolean

非0即真

序列化

var o1 = {"name": "Tim", "age": 9000}
var s1 = JSON.stringify(o1)
typeof(s1)

var o2 = JSON.parse(s1)
typeof(o2)

流程控制

if 判断

var score = 90;

if(score >= 90){
	//执行操作
	console.log('优秀')
}else if(60 <= score < 90){
	//执行操作
	console.log('合格')
}else{
	//执行操作
	console.log('不合格')
}

逻辑与 & 逻辑或

var chinese_score = 90;
var math_score = 90;

// 如果有一个小于60 则判定重考
if(chinese_score < 60 || math_score < 60){
	console.log('重考')
}

// 如果两个都小于60 则判定重修
if(chinese_score < 60 && math_score < 60){
	console.log('重修')
}

switch

var score = 'good';

switch(score){
	case 'good':
	console.log('good');
	// break 表示退出循环
	break;
	case 'better':
	console.log('better');
	break;
	case 'best':
	console.log('best');
	break;

	default:
	console.log('exit');
}

while

1. 设定循环变量
2. 判断是否成立
3. 更新循环变量

// 设定循环条件
var i = 1;

// 判断是否成立
while(i<10){
	console.log(i);
	// 更新循环变量
	i++;
}

do_while

var i = 3;

do{
	console.log(i);
	i++;
}while(i<10)

for

for(var i = 1; i<10; i++){
	console.log(i)
}

常用内置对象

Array - 数组

数组的创建

var colors = ['red','yellow','green']

数组的赋值

var arr = []
// 通过下标赋值
arr[0] = 'red'
arr[1] = 'yellow'
arr[2] = 'green'

常用方法

方法	描述
concat()	把几个数组合并成一个
join()	把数组内元素按指定分隔符拼接, 并返回
pop()	移除数组最后一个元素
shift()	移除数组第一个元素
unshift()	开头添加一个新的元素, 返回长度
push()	末尾添加一个新的元素, 返回长度
slice(start,end)	返回一段数组
sort()	排序
reverse()	反转数组
length()	返回长度

String - 字符串

方法	描述
charAt()	返回指定索引位置的字符
replace(a,b)	使用b替换a
search()	如果找到, 返回索引位置, 如果没找到, 返回-1
split(‘a’,x)	以’a’分割, 返回数组, 第二个参数表示数组的前x个元素, 如果第一个元素为分隔符, 则返回的数组第一个元素为""
substr(start,end)	按索引截取, 左闭右开
toUpperCase()	返回新字符串, 字母变大写
toLowerCase()	返回新字符串, 字母变小写

Date - 日期

语法	含义

Math - 内置对象

方法	含义
Math.floor()	向下取整
Math.ceil()	向上取整
Math.max(a,b)	最大值
Math.min(a,b)	最小值
Math.random()	随机数, 默认0-1之前的随机数

函数和Object

函数的声明和调用

声明方式1

function funcA(x,y){
	// do sth.
}

声明方式2

var funcA = function(x,y){
	//do sth.
}

声明方式3

var add = (x,y)=>{
	//do sth.
}

调用

funcA(x,y)

入口函数

等待页面加载完成后执行

window.onload = function(){
	// do sth.
}

创建对象的几种常用方式

使用object创建对象

var student = new Object();
student.name = 'Tom';
student.age = 12;

使用字面量创建对象

适用于创建单个对象

var student = {
	name : 'Tom',
	age : 12,
}

工厂模式创建对象

批量创建同一类对象, 类似python中的class
关键字new写在函数内部
函数内部有return

function createStudent(name, age){
	var obj = new Object();
	obj.name = name;
	obj.age = age;
	return obj;
}
var student1 = createStudent('Tom',12);
var student2 = createStudent('Tim',13);
var student3 = createStudent('Jim',14);

构造函数模式创建对象

批量创建同一类对象
使用new关键字, 就是构造函数
函数内部不new Object()
函数内部没有return

function Student(name, age){
	// python中class静态属性
	this.name = name;
	this.age = age;
	// python中class动态属性
	this.alertname = alertName;
}

function alertName(){
	alert(this.name);
}

var student1 = new Student('Jim',14);

student1.alertname

原型模式创建对象

解决多个类公用方法的问题

function Student(name, age){
	this.name = name;
	this.age = age;
}

Student.prototype.alertName = function(){
	alert(this.name);
};

var stu1 = new Student('Tom',12);
var stu2 = new Student('Tim',13);

stu1.alertName();
stu2.alertName();

alert(stu1.alertName == stu2.alertName); 
// 结果为True, 两者共享一个函数

定时器

执行一次

setTimeOut()

周期执行

setInterval()
clearInetval()

function refresh(){
	console.log('调用1次')
}

setInterval('refresh()',5)

正则

js 正则脑图

DOM

在JS中, 所有的事物都是节点. 元素, 文本等都是节点
操作DOM的三步
	1. 事件源
	2. 事件
	3. 事件处理程序

获取DOM节点的方法

// 通过id获得
var oDiv = document.getElementById('box');

// 通过类名获得
var oDiv = document.getElementByClassName('box')[0];

// 通过标签名获得
var oDiv = document.getElementByTagName('div')[0];

常用的DOM节点

语法	含义
childNodes	获取所有子节点, 包括元素,文本
children	获取所有子节点, 不包括文本
parentNode	获取父节点
previousSiblint	获取上一个兄弟节点, 包含文本
previousElementSibling	获取上一个兄弟节点, 不包含文本
nextSibling	获取下一个兄弟节点, 包含文本
nextElementSibling	获取下一个兄弟节点, 不包含文本
firstchild	获取第一个兄弟节点, 包含文本
firstElementChild	获取第一个兄弟节点, 不包含文本
lastChild	获取最后一个兄弟节点, 包含文本
lastElementChild	获取最后一个兄弟节点, 不包含文本

节点的增删改查

<html>
	<body>
		<div>
			<h1> 标题1 </h1>
		</div>
		<div id='box'>
			<p>a</p>
			<p>b</p>
			<p>c</p>
			<p>d</p>
			<a>e</a>
		</div>
		<div>
			<h2> 标题2 </h2>
		</div>
	</body>

	<script type='text/javascript'>
		// 获取标签
		oDiv1 = document.getDlementById('box');
		oDiv2 = document.getElementByClassName('box')[0];
		oDiv3 = document.getElementByTagName('div')[0];
	</script>
</html>

在html页面中增加标签

// 创建元素节点
var obj = document.createElement('p')

// 设置obj的内容
	// 会渲染
	obj.innerHTML = "<p>新添加</p>";
	// 不会渲染
	obj.innerText = "<p>新添加</p>";

// 将建好的元素节点添加到指定元素的所有内容的后边
oDiv.appendChild(obj)

设置属性

id

obj.id = 'id_name'

类名

obj.className = 'classname1';
obj.className = 'classname2';

标签属性

obj.setAttribute('href','https://www.baidu.com');

获取内容

获取元素内所有内容

// 包括标签和文本
console.log(oDiv.innerHTML);

获取元素节点的标签名

// 只获取标签名, 返回值为大写
console.log(odiv.tagName);

获取文本

// 只获取文本, 不获取标签
console.log(oDiv.innerText);

获取标签属性

console.log(obj.getAttribute('class'));

删除

删除属性

obj.removeAttribute('href');

删除对象

oDiv.removeChild(obj);

复制

// 如果为true, 复制当前节点及其所有子节点

替换

// 使用新节点替换旧节点
父节点.replaceChild(new_node, old_node)

注意

一般情况下, 如果css样式中出现'-'号, 则对应的style属性是去掉'-', 改为驼峰命名

BOM

上一篇：Django 之配置文件记录

下一篇：前端学习笔记 - css

提问和评论都可以，用心的回复会被更多人看到评论

发布评论

相关文章

官方博客	全部文章	热门标签	班级博客
了解我们	网站地图	意见反馈

鸿蒙开发者社区	51CTO学堂
51CTO	软考资讯