前端工程师——JavaScript

南栀北夏ii

已于 2024-04-06 20:03:17 修改

阅读量154

点赞数

分类专栏：前端工程师学习文章标签： javascript 前端 vue.js

于 2023-09-12 19:52:42 首次发布

本文链接：https://blog.csdn.net/m0_74421072/article/details/132824731

版权

前端工程师学习专栏收录该内容

9 篇文章 0 订阅

订阅专栏

二.JavaScript输入输出语法

1.输出语法：
document.write('要出的内容')

2.输出语法：
alert('要出的内容')
作用：页面弹出警告对话框

3.输出语法：
console.log('控制台打印')
控制台输出语法，程序员调试使用
4.输入语法：
prompt('请输入你的姓名')

三.变量

变量：就是一个装东西的盒子
变量的使用：
1.声明
语法：
let 变量名
2.赋值

四.数组

let arr = []
let 变量 = 数组字面量
1.声明语法:
let 数组名 = [数据1,数据2,数据3....]
2.使用数组
数组名[索引号]
例:console.log(arr[0])
数组的长度
console.log(arr.length)

1.遍历数组

其中结束条件还可以改成：i <= arr.length - 1;

Array.isArry返回Ture代表是数组，False表示不是

2.数组的增删改查

查：查询数组的数据
数组[下标]
改：重新赋值
数组[下标] = 新值增：数据添加新的数据
数组.push()方法将一个或多个元素添加到数组的末尾，并返回该数组的新长度
语法：arr.push(元素1，元素2...)
arr.push(新增的内容)
arr.unshift(新增的内容)方法将一个或多个元素添加到数组的开头，并返回数组的长度
语法：arr.unshift(元素1，元素2...)
arr.unshift(新增的内容)
数组的筛选

删：删除数组中的数据
数组.pop()方法从数组中删除最后一个元素，并返回该数组的值
语法： arr.pop()
数组.shift()方法删除第一个元素
arr.shift()
arr.splice(操作的下标，删除的个数

join方法

常量：

声明常量：(格式必须这样)
const G = 9.8
输出常量：
console.log(G)

五.js 数据类型

1.基本数据类型: number 数字型, string 字符串型, boolean 布尔型, undefined 未定义型, null 空类型
2.引用数据类型: object 对象
数据类型：字符串的拼接
+ 运算符，可以实现字符串的拼接数字相加，字符相连

数据类型有6种：

typeof判断数据类型

字符串方法

charAt方法返回指定位置的字符，参数是从0开始编号的

concat 方法用于连接两个字符串，返回一个新字符串，不改变原字符串

substring方法：

六.if语句

1.单分支

语法：
if(条件){
满足条件要执行的代码
}

2.双分支语句：

双分支语法：
if (条件) {
满足条件要执行的代码
} else {
不满足条件执行的代码
}

let grade = +prompt('请输入你的成绩：')为什么这里要有加号
在这里，加号（+）的作用是将用户输入的字符串类型转换为数值类型。因为 prompt() 函数返回的是一个字符串类型的值，而在计算成绩时需要使用数值类型，所以需要使用加号将字符串转换为数值。

3.多分支语句

多分支语句
if (条件) {
代码1
} else if (条件) {
代码2
} else if (条件) {
代码3
} else {
代码n
}

三元表达式

语法
条件？满足条件执行的代码：不满足条件执行的代码

七.switch分支语句

语法：
switch (数据) {
case 值1：
代码1
break
case 值2：
代码2
break
default：
代码n
break
}

八.while循环

语法：
while (循环条件) {
要重复执行的代码（循环体）
}

九.for循环

语法：
for(变量起始值；终止条件；变量变化量){
循环体
}

退出循环

continue退出本次循环

break退出循环

循环嵌套 for循环嵌套
for (外部声明记录循环次数的变量；循环条件；变化值){
for (内部声明记录循环次数的变量；循环条件；变化值){
循环体
}
}

十.函数

function,是被设计为执行特定任务的代码块
函数的使用
函数的声明语法：
function 函数名(){
函数体
}

函数的调用语法：函数名()

封装实例
封装一个函数，计算两个数的和

1.函数传参

声明语法：
function 函数名（参数列表）{
函数体
}
调用语法：
函数名（传递的参数列表）

3.函数传参--参数默认值

4.函数返回值

语法：return 数据

作用域 全局作用域：1.在script标签内部
2.有一个独立的js文件
局部作用域：在函数内部的作用域

5.匿名函数

将一个匿名函数赋值给一个变量，并且通过变量名称进行调用，称为函数表达式
语法：let fn = function(){
函数体
}

计算时秒分
小时：h=parseInt总秒数/60/60%24)
分钟：m=parseInt(总秒数/60%60)
秒数：s=parseInt(总秒数%60)
输入秒数，输出时间

转换为Boolean型
0,undefind,null,false,NaN转换为布尔值后都是false,其余则为true

十.对像

由属性和方法组成

对象的声明语法：let 对象名 = {}
let 对象名 = new Object()
对象
let 对象名 = {
属性名: 属性值,
方法名: 函数
}
属性

1.对象的使用

查询对象：对象.属性
查询对象：对象名['属性名']

2.重新赋值：对象.属性 = 值

3.对象添加新的数据

对象名.新属性名 = 新值

4.删除对象的属性

delete 对象名.属性名

5.方法

访问对象属性可以通过两种方式:
对象名.属性
对象名[‘属性’]

访问对象方法同样也可以通过两种方式:

对象名 . 方法名 ()

对象名 [‘ 方法名 ’]()

使用字面量创建对象

var stu = new Object();
stu.name = "zhangsan";
stu.year = 19;
stu.gender = "m";
//添加方法
stu.sayHi = function(){
    console.log("hello");
}
// 调用
console.log(stu.sayHi());   //hello
console.log(stu.name);  //zhangsan

var obj = {
    name : "zhangsan",
    year : 19,
    sayH : function(){
        console.log("你好")
    }
}

obj.sayH()   //你好
console.log(obj['name']);  //zhangsan

6.对象的遍历

使用 for … in 语法可以遍历指定对象中的所有属性和方法,基本语法格式如下:

for(var key in obj)

var arr = [1,2,3,4,5,6];
for(var i = 0;i < arr.length;i++){
    console.log(arr[i])  //遍历
}
//
// 1
// 2
// 3
// 4
// 5
// 6
// 

var obj = {name: "tom",year:18,sex:"m",sayHi:function(){console.log("你好")}}
for(var i in obj){
    if(typeof(obj[i]) == 'function'){
        console.log(obj[i]())   //tom 18 m  你好
    }
    console.log(obj[i])  //[Function: sayHi]
    
}

7.利用构造函数创建对象

实例化对象：

var Car = function() {
this.price = 180000;
};
var myCar=new Car();
console.log(myCar.price);

带参数的构造函数

function Student(name, height) {
this.name = name;
this.height = height;
}
var boy = new Student('小信', 182);
console.log(boy.name); //小信
console.log(boy.height); //182
var girl = new Student('小息', 163);
console.log(girl.name); //'小息' console.log(girl.height); //163

使用静态成员方式添加属性和方法

function Student(){
};
Student.Name = '小信';
Student.Gender = 'boy';
Student.sayHello = function(){
console.log('Hello');
}
console.log(Student.Name + ',' + Student.Gender);//小信,boy
delete Student.Name;//删除属性
console.log(Student.Name);//undefined
Student.sayHello(); //Hello

构造函数名.prototype.新属性或者新方法

var Student = function(){
};
Student.prototype.Name = '小息';
Student.prototype.Gender = 'girl';
Student.prototype.sayHello = function(){
console.log('Hello');
}
var student1 = new Student();
console.log(student1.Name+','+student1.Gender);//小息,girl
console.log(student1['Name']+','+student1['Gender']);//小息,girl
student1.sayHello(); //Hello
var student2 = new Student();
console.log(student2.Name+','+student2.Gender);//小息,girl
student2.sayHello(); //Hello

8.内置对象

Math
Math对象包含的方法有：
random:生成0-1之间的随机数
cell:向上取整
floor:向下取整
max:找最大值
min:找最小值
pow:幂运算
abs:绝对值

string对象

字符串对象实例化：字符串对象可以使用 new String() 的方式来创建。

var mytxt = new String("string"); //创建 mytxt 字符串对象
console.log(mytxt); //string

十一.根据CSS选择器来获取DOM元素

语法：document.querySelector('css选择器')

选择匹配的多个选择器，包含一个或多个CSS选择器字符串
语法：document.querySelectorAll('css选择器')
返回值：一个对象的集合

1.修改DOM元素内容的方式

1.元素.innerText属性
2.元素.innerHTML属性
3.修改属性的方法：
对象.属性 = 值
区别：innerText属性，只能识别文本，不能解析标签;元素innerHTML属性，能识别文本，也能解析标签

随机更换图片

2.操作元素样式属性

通过style属性操作CSS
增加属性亦如此
语法：对象.style.样式属性 = 值

通过类名操作CSS
语法：元素.className = '类名'

十二.间歇函数

1.开启定时器

setInterval(函数，间隔时间)

2.关闭定时器

let 变量名 = setInterval(函数，间隔时间)
clearInterval(变量名)

十三.事件监听

语法：元素对象.addEventListener('事件类型',要执行的函数)
事件监听三要素：
1.事件源：那个dom元素被事件触发了，要获取dom元素
2.事件类型：用什么方式触发，比如鼠标单击click，鼠标经过mouseenter,鼠标离开mouseleave.焦点事件，表单获得光标，focus获得焦点，blur失去焦点；键盘事件，keydown 键盘按下触发，keyup键盘抬起触发；文本事件，input用户输入事件
3.时间调用函数：要做什么事

1.事件对象event以及常见属性

获取对象
元素.addEventListener('click',function(e){})
部分常用属性：
type:获取当前的事件类型
clientX/clientY:获取光标相对于浏览器可见窗口左上角的位置
offsetX/offsetY:获取光标相对于当前位置DOM元素左上角的位置
key:用户按下的键盘键的值