-
JavaScript基础
✨ JavaScript基础
📃个人主页:不断前进的皮卡丘
🌞博客描述:梦想也许遥不可及，但重要的是追梦的过程，用博客记录自己的成长，记录自己一步一步向上攀登的印记
📖博主主要想从事后端开发，前端方面作为了解
JavaScript基础
JavaScript简称js,是对象和事件的脚本语言，是对ECMAScript(一种由Ecma通过标准化的脚本程序设计语言)的实现和补充
1.JavaScript基础语法
1.1JavaScript的引入方式
1.1.1内部引入
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <!-- 内部引入： - javascript 代码可以在head或者body中的任意位置 - 页面中可以由多个js代码 - 从上到下依次执行 --> <script type="text/javascript"> // js代码 // 弹窗显示helloworld alert('helloworld') // 获得id为test的标签的内容 </script> </head> <body> <h2 id="test">哈哈哈哈</h2> <script type="text/javascript"> // 弹窗显示helloworld alert('helloworld2222222222') // 获得id为test的标签的内容 </script> </body> </html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
按顺序执行
1.1.2外部引入
我们在外部创建一个文件夹js，在里面写js代码
然后把js代码引入当前代码中
1.1.3事件响应
点击按钮的时候，触发事件
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <!-- 事件响应 onclick="javascript:alert('客服电话6688') --> <input type="button" value="客服" onclick="javascript:alert('客服电话6688')"/> <input type="button" value="客服" onclick="alert('客服电话6688')"/> </body> </html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
1.1.4重定向
可以在超链接的href属性，表单的action属性等位置重定向的时候使用
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <a href="javascript:alert('hahah')">百度</a> <!-- 重定向时，不能省略前缀 javascript: --> <a href="alert('hahah')">百度</a> </body> </html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
1.2注释
- //单行注释
- /多行注释/
1.3JavaScript的输出
- alert():弹出会以文本的原格式输出
- document.write():输出到页面，会以html的语法解析
- console.log():把文本输出到控制台
1.4JavaScript语法的结束
当换行的时候，或者js代码末尾加上分号则认为语法结束
2.变量和数据类型
2.1命名规范
命名规范和Java一样
- 由数字，字母，下划线，美元符号$组成
- 不能以数字开头
- 区分大小写
2.2变量的声明和赋值
- 使用var或者let关键字来声明变量
var name let num- 1
- 2
- JavaScript的弱类型语言，所有类型变量都可以用var声明
var name="tom" var num=101- 1
- 2
- JavaScript是动态类型语言，相同的变量可以用作不同的类型
var str='abc' str=11- 1
- 2
- 测试
// 1. js 是弱类型语言，所有的数据类型的变量都使用var关键字来声明 // 只声明未赋值是没有数据类型，undefinded var num; var str; console.log(typeof num, typeof str) // 变量只有被赋值后，才具备相应的数据类型 num = 10; // 数据类型是数值类型 str = 'abc'; console.log(typeof num, typeof str) // 2. js 是动态类型语言，数据类型可以随着赋值不同数据而改变 var x = 10; console.log(typeof x) x = 'abc' console.log(typeof x) // 3. ES6中增强了代码的规范行，变量let，常量const- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
2.3JavaScript的数据类型
JavaScript的数据类型分成原始类型(undefined、number、string、boolean)和引用类型(object)
- typeof运算符:可以用来检测数据类型
var num=10 alert(typeof num)- 1
- 2
- undefined:未定义类型，声明以后没有赋值
- number:数值类型，可以是32整数，也可以是64位浮点数
- string:字符串，可以用单引号或双引号但是不能嵌套使用
- boolean:布尔类型，只有true，false
- object:对象，包含属性和方法集合
let data1; console.log(typeof data1) let data2 = 10; let data3 = 10.6; console.log(typeof data2, typeof data3) let data4 = 'abc' let data5 = "abc" console.log(typeof data4, typeof data5) let data6 = 1>2 let data7 = 1<2 console.log(data6,data7) console.log(typeof data6, typeof data7) let data8 = new String('xyz') console.log(typeof data8)- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
3.运算符
- 算术运算符 +、-、*、/、%、++、–
- 赋值运算符 =、+=、-=*=、/=、%=
- 逻辑运算符 &&、||、！
- 三元运算符 ?:
- 关系运算符/比较运算符 、=、!=、!===、>、>=、<、<=
==和!=仅仅判断数据的值
===和!===不仅要判断数据的值，还得判断数据类型// 关系运算符/比较运算符 ：`== === != !== > >= < <=` console.log(2 == 3, 2!=3, 2>3) //false,true,false // ==和===， !=和!== // == 只判断字面量的值，===除了判断字面量的值外还会判断数据类型 // 距离， ‘123’的字面量值就是123 console.log(123 == '123') //true console.log(123 === '123') //false console.log('123' === '123') //true- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
4.流程控制语句
- if、for、while等，用法和Java类似，这里就不介绍了
5.函数
5.1函数的声明
使用function来声明函数，函数没有返回值类型
function add(x,y){ return x+y; }- 1
- 2
- 3
5.2函数的调用
- 手动调用
var num=add(1,2)- 1
- 事件触发
<input type="button" value="点击触发事件" onclick="add(1,2)"/>- 1
5.3函数的参数
- 实参多的时候，多余的参数会被省略
- 实参不足的时候，没有对应的参数则默认值是undefined
5.4函数的返回值
- 使用return语句的时候，函数会停止执行并返回指定的值。返回值可以任意数据类型
- 如果函数没有返回值，系统自动赋值undefined
6.对象
6.1对象概述
JavaScript中的所有事物都是对象，对象是带有属性和函数的特殊数据类型，JavaScript提供了多个内置对象，比如Number、String、Array等，JavaScript害允许自定义对象
6.2对象的创建和使用
6.2.1对象构造器
JavaScript中使用函数来构造对象，该函数称为对象构造器，属性和行为使用this关键字引导。
// 需求：创建学生，学生姓名小张，年龄22，有吃饭和睡觉的行为 // 对象构造器：定义对象 function Student(name, age) { // 所有的属性和行为的声明，需要通过this关键字 this.name = name; this.age = age; // 吃饭 this.eat = function() { console.log('吃饭了....') } // 学习 this.study = function(time) { console.log('学习了...' + time + '小时') } }- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
6.2.2对象的创建
使用new关键字来创建对象
let stu = new Student('小张', 22);- 1
6.2.3对象调用属性和方法
使用.来调用属性和方法
stu.name stu.eat()- 1
- 2
6.3对象赋值定义对象
/* 对象赋值的形式创建对象 1. js中对象是使用大括号表示的 2. 属性和行为定义方式是键值对，中间使用冒号分割 不同属性和行为之间使用逗号分割 */ let stu = { name: '小张', age: 22, eat: function() { console.log('吃饭了...') }, study: function(time) { console.log('学习了' + time) } } console.log(stu.name, stu.age) stu.eat() stu.study(2)- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
6.4Number
6.4.1数字对象的创建
可以使用数字直接赋值，也可以用Numer创建，两种创建方式对象类型不一样
var num1=10//number var num2=new Number(1)//object- 1
- 2
6.4.2常用属性
属性 描述 MAX_VALUE 可以表示的最大的数 MIN_VALUE 可以表示的最小的数 NaN 非数值 NEGATIVE_INFINITY 负无穷大，溢出时返回该值 POSITIVE_INFINITY 正无穷大，溢出时返回该值 6.4.3判断是否是非数字
- isNaN()判断是不是数字，只是判断字面的数值
//Number的常量 console.log(Number.MAX_VALUE, Number.MIN_VALUE) console.log(Number.POSITIVE_INFINITY, Number.NEGATIVE_INFINITY) // NaN: not a number 非数字 // isNaN(数据)： 判断数据的字面量是否是非数字 console.log(isNaN(1), isNaN('a'), isNaN('1')) // string转Number console.log('123' + 123) let num = Number.parseInt('123') console.log(num + 123) let num2 = Number.parseFloat('123.2') console.log(num2 + 123) console.log(isNaN(11))//false console.log(isNaN('abc'))//true console.log(isNaN('20'))//false- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
6.4.4字符串和Number转换
// string转Number // console.log('123' + 123) // let num = Number.parseInt('123') // console.log(num + 123) // let num2 = Number.parseFloat('123.2') // console.log(num2 + 123) // Numer转字符串 let num = 10 console.log(num + 10) console.log(num.toString() + 10)- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
6.5String对象
JavaScript中，字符串可以用单引号也可以用双引号
6.5.1字符串对象的创建
var str1="a";//string var str=new String("a")//object- 1
- 2
6.5.2常用属性
- length属性:字符串的长度
6.5.3常用方法
6.6Array对象
6.6.1数组创建
方式一:
var arr1=[]; var arr2=['a','b','c'];- 1
- 2
方式二:
var arr=new Array(); var arr1=new Array('a','b','c');- 1
- 2
数组长度:
- length属性:在JavaScript中，数组的长度可变
js中数组长度是可变的 var arr1=['a','b','c']; arr1[3] = 4 console.log(arr1.length)- 1
- 2
- 3
- 4
6.6.2数组的遍历
//-----------数组遍历-------------- let arr = ['a', 'b', 'c'] //普通for循环 for (let i=0; i<arr.length; i++) { let item = arr[i] console.log(item) } // for in 循环 for (i in arr) { // i表示元素下标 console.log(arr[i]) } // for of 循环 for(item of arr) { // item表示元素 console.log(item) }- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
6.6.4数组常用方法
// ------------数组常用方法---------------- // 注意：数组的方法是否属于变异方法（变异方法，方法会引起原数组的改变）, 因为后期Vue，数据驱动视图 // let arr = ['a', 'b', 'c'] // let arr2 = ['d', 'e'] // let newArr = arr.concat(arr2) // 非变异 // let str = arr.join('#') // let str = arr.join('') // console.log(str) // arr.reverse() // 变异 // console.log(arr) // arr.sort() // 变异 // console.log(arr) // arr.pop() // 出栈，删除数组的最后一个元素，变异 // arr.push('d') // 入栈，向数组尾部添加，变异 // arr.push('d', 'e') // arr.shift() // 删除数组第一个元素，变异 // arr.unshift('x') // 向数组首部添加，变异 // arr.unshift('y', 'z') let arr = ['a', 'b', 'c', 'd', 'e', 'f'] // 参数1=起始位置, 参数2=删除个数 // arr.splice(1, 3) // 参数1=起始位置, 参数2=删除个数, 参数3=新插入的数据 // arr.splice(1, 3, 'x', 'y') // 案例：插入/添加， 向下标为1的位置，添加'x' // arr.splice(1, 0, 'x') // 案例：删除， 删除下标为1的元素 // arr.splice(1, 1) // 案例：修改， 将下标为1的元素，改为'x' arr.splice(1, 1, 'x') console.log(arr)- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
-
相关阅读:
第12章Linux实操篇-网络配置
基于51单片机烟雾浓度检测超限报警Proteus仿真
第六届“中国法研杯”司法人工智能挑战赛
【Linux】进程_7
速卖通平台的API支持哪些开发语言和工具？
JSD-2204-WebServer(项目终章)-Day18
师哥带你每天三道蓝桥杯题[冲刺省一]~建议收藏
科技赋能，MTW400A为农村饮水安全打通“最后一公里”
C语言中的指针常量的常量指针
OpenGL ES学习（2）——顶点着色器和片元着色器
- 原文地址：https://blog.csdn.net/qq_52797170/article/details/126444264
