JavaScript（JS基础）
| 阿里云国内75折 回扣 微信号：monov8 |
| 阿里云国际，腾讯云国际，低至75折。AWS 93折 免费开户实名账号 代冲值 优惠多多 微信号：monov8 飞机：@monov6 |
提示JS的重点是让静态的页面产生一些变化
文章目录
JS编写方式
提示JavaScript是弱类型语言行尾分号可写可不写
嵌入编写
JS编写在script(脚本)标记中script标记可以出现在html中的任意位置也就是说JS代码可以嵌入在HTML中任意部分从上到下依次执行
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<!-- 嵌入编写 编写在script(脚本)标记中script标记可以出现在html中的任意位置 -->
<script>
// 输出语句
console.log('hello world')
</script>
</body>
</html>
外部编写
script引入外部js文件那么标记中间的代码运行时会被浏览器忽略掉不再执行
js代码取名hello.js
console.log('Hello 世界');
html代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<!-- 引入外部js文件 -->
<script src="./hello.js">
// script引入外部js文件那么标记中间的代码运行时会被浏览器忽略掉不再执行
console.log('1234');
</script>
</body>
</html>
JS基本语法
JavaScript 变量的命名规范可以总结为以下几个方面
- 使用有意义的、描述性的变量名
- 变量名应该与变量所代表的值或含义相关联能够表达变量的用途。例如firstName, lastName, totalAmount 等。
- 变量命名应该符合标识符命名规则
- 变量名必须以字母、下划线_或美元符号$开头并且可以包含字母、数字、下划线或美元符号。变量名不能以数字开头。同时要注意保留字的使用如if、else、for等关键字不能用作变量名。
- 使用驼峰命名法
- 一般情况下建议使用驼峰式命名法即第一个单词的首字母小写其他单词的首字母大写。例如totalAmount, firstName, lastName。
-
不能使用JavaScript关键词与JavaScript保留字。
-
使用有意义的缩写
- 在变量名中可以使用缩写但是要确保缩写是大家都能理解的。例如qty(数量), str(字符串)。
- 避免使用单个字符的变量名
- 比如 i, j, k 等单字符变量名一般只在循环中使用其他情况应该尽量避免使用。
遵循良好的变量命名规范有助于程序的可读性和可维护性。
使用let声明变量
❗ js中定义变量使用let关键字
js是弱类型语言定义时不需要指定数据类型变量的类型是由赋值的数据决定
【示例代码】
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<script>
let Tom
Tom = 200
console.log(Tom);
Tom = '你好世界'
console.log(Tom);
</script>
</body>
</html>
使用var声明变量
用的比较少
❗ 定义变量也可以使用var关键字新标准js语法建议使用let
【示例代码】
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<script>
Tom = 200
var Tom
Tom = true
console.log(Tom);
</script>
</body>
</html>
JS中的数据类型
typeof获取当前变量的数据类型
JavaScript 中有 7 种数据类型其中 5 种是基本数据类型另外两种是引用数据类型。
- 基本数据类型
- 未定义Undefined表示未定义的值。
- 数字Number整数和浮点数都属于数字类型例如 1、3.14 等。
- 布尔值Booleantrue 和 false 两个值。
- 字符串String例如 “hello”、‘world’ 等用单引号或双引号包裹起来。
- 符号Symbol表示独一无二的值用于对象属性的键。
- 引用数据类型
- 对象Object例如数组、函数、正则表达式、空Null空值等对象。
- function-函数类型function函数
【示例代码】
这里没有写符号Symbol数据类型
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<script>
//js六种数据类型
let x
console.log(typeof x); //1.undefined 未定义
x = 100.3
console.log(typeof x); //2.number 数字类型不区分整数小数
x = false
console.log(typeof x); //3.boolean 布尔类型 true/false
x = 'abc'
console.log(typeof x); //4.String 字符串类型 数据使用引号括起来单引号双引号通用
x = []
console.log(typeof x); //5.object 对象类型 有属性和方法可以使用
x = function(){}
console.log(typeof x); //6.function 函数类型 就是方法
//特殊的number类型 NaNNot a Nnumber非数 Infinity无限大
x = parseInt('abc')
console.log( x , typeof x);
x = 3/0
console.log( x , typeof x);
</script>
</body>
</html>
JS中运算符
JavaScript中的运算符可以分为以下几类||
| 运算符 | 优先级 |
|---|---|
| 算术运算符 | 加号+减号-乘号*除号/取模%++-- |
| 逻辑运算符 | 与&&、或ll、 非! |
| 比较运算符 | 等于==不等于!=全等于===不全等于!==大于>小于<大于等于>=小于等于<= |
| 赋值运算符 | 等号=加等+=减等-=乘等*=除等/=取模等%= |
| 位运算符 | 与&或l异或^非~左移<<右移>>无符号右移>>> |
| 条件运算符 | 三元操作符:根据表达式的结果返回一个值。例如a>b?a:b |
除此之外JavaScript还支持一些其他的运算符例如typeof运算符用于检测变量的数据类型
instanceof运算符用于检测对象是否是某个类的实例等。
还有反引号 `
【示例代码】
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<script>
//1. / 除法 不同于Java的除法规则
console.log(3/2);
//2. + 与Java相同
let name = '汤姆'
let nick = '抓杰瑞'
console.log('大家好我是' + name + ',AKA' + nick );
//3.js最新版本引入了模版字符串的语法 替代+字符串连接符 使用反引号``
console.log( `大家好我是${name},AKA${nick}` );
</script>
</body>
</html>
❗== 和 ===
== 和 === 的区别
==比较时会将比较的数据先转换成相同类型再去比较数据值===严格比较类型和数据值都相同结果才是true
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<script>
console.log(11=='11');
console.log(11==='11');
</script>
</body>
</html>
JS中的数据类型转换
字符串类型加减乘除
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<script>
let num1 = '10'
let num2 = '5'
console.log(num1+num2);
console.log(num1-num2);
console.log(num1*num2);
console.log(num1/num2);
</script>
</body>
</html>
输出结果
字符串类型数据 在做 - * / 运算时js默认会把它转换成number类型
布尔类型加减乘除
给num1和num2重新赋值一个true一个false
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<script>
num1 = true
num2 = false
console.log(num1+num2);
</script>
</body>
</html>
输出1
布尔类型数据在做 + - * / 运算时js默认会把true转换成1false转换成0再去运算
字符串与整数、小数之间的转换
parseInt()将字符串转换为整数
pareFloat()将字符串转换成小数
【示例代码1】
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<script>
//pareFloat将字符串转换成小数
let s1 = '10'
let s2 = '10.5'
s1 = parseInt(s1)
s2 = parseFloat(s2)
console.log(s1+s2);
</script>
</body>
</html>
输出结果
【示例代码2】
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<script>
//pareFloat将字符串转换成小数
let s1 = '10'
let s2 = '52.1'
s1 = parseInt(s1)
s2 = parseInt(s2)
console.log(s1+s2);
</script>
</body>
</html>
输出结果
JS流程控制语句
JS流程控制语句指的是用于控制程序执行流程的语句包括条件语句和循环语句。
- 条件语句
- if语句通过判断一个条件决定是否执行后面的代码块。
if (condition) {
// 如果condition为true则执行这里的语句块
}
- if…else语句根据先前判断的条件分别执行不同的代码块。
if (condition) {
// 如果condition为true则执行这里的语句块
} else {
// 如果condition为false则执行这里的语句块
}
- if…else if…else语句根据多个条件依次判断分别执行不同的代码块。
if (condition1) {
// 如果condition1为true则执行这里的语句块
} else if (condition2) {
// 如果condition2为true则执行这里的语句块
} else {
// 如果既不是condition1也不是condition2则执行这里的语句块
}
- switch语句根据一个表达式的值依次执行不同的代码块。
switch(expression) {
case value1:
// 如果expression的值和value1相等则执行这里的语句块
break;
case value2:
// 如果expression的值和value2相等则执行这里的语句块
break;
default:
// 如果expression的值既不是value1也不是value2则执行这里的语句块
}
- 循环语句
- while循环只要指定的条件为true就不断地执行循环体中的代码块。
while (condition) {
// 如果condition为true则执行这里的语句块
}
- do…while循环先执行一次循环体中的代码块然后只要指定的条件为true就不断地执行循环体中的代码块。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<script>
let num = 3452
do {
console.log( num%10 ); //2 5 4 3
num = Math.trunc( num/10 ) //345 34 3 0
} while (num!=0);
</script>
</body>
</html>
这段代码实现了一个反向输出一个整数的各个位数的功能。代码执行步骤如下
- 定义一个变量num并赋值为3452。
- 进入do…while循环先执行循环体内的代码块。
- 执行console.log(num%10)语句输出num除以10的余数即num的个位数。此时输出为2。
- 执行Math.trunc(num/10)语句将num除以10并向下取整得到num去掉个位数后的整数部分。此时num变为345。
- 判断num是否为0。由于num不为0继续进行下一次循环。
- 重复步骤3~5输出num的十位数5、百位数4和千位数3直到num为0时循环结束。
- 整数的每个位数依次反向输出2、5、4、3。
- for循环设定一个计数器并设置循环的终止条件每次循环时更新计数器的值。
for (initialization; condition; increment) {
// initialization初始化变量
// condition设置循环的终止条件
// increment计数器增加的量
// 执行这里的语句块
}
【示例代码】
使用for循环输出100-999之间所有的水仙花数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<script>
//使用for循环输出100-999之间所有的水仙花数
//153=1*1*1 + 5*5*5 + 3*3*3
for (let num = 100; num < 1000; num++) {
let b = Math.trunc(num/100)
let s = Math.trunc(num/10%10)
let g = Math.trunc(num%10)
if(num == b*b*b + s*s*s + g*g*g)
console.log(`水花仙数:${num}`)
}
</script>
</body>
</html>
输出结果
- for…in循环用于遍历对象的所有可枚举属性。
for (var prop in object) {
// prop枚举属性名
// object要枚举属性的对象
// 执行这里的语句块
}
- for…of循环用于遍历可迭代对象如数组、字符串等的所有元素。
for (var element of iterable) {
// element当前遍历到的元素
// iterable要遍历的可迭代对象
// 执行这里的语句块
}
| 阿里云国内75折 回扣 微信号：monov8 |
| 阿里云国际，腾讯云国际，低至75折。AWS 93折 免费开户实名账号 代冲值 优惠多多 微信号：monov8 飞机：@monov6 |