JS基础
js引入方式
- 内部引入
<body>
<script>
//内部引入
</script>
</body>
- 外部引入
<body>
<script src="./js2.js"></script>
</body>
//js2.js
prompt('年龄: ')
输入输出语句
prompt('年龄: ') //提示用户输入年龄
document.write('hello!') //直接在网页输出语句"hello!"
console.log('hello!') //在控制台输出语句
- 输出语句是可以识别标签的。
document.write('<strong>hello!</strong') //输出语句"hello!"
console.log('')
示例:
document.write(`<br/>`) //输出换行符
document.write(`<strong>hello!</strong>`) //使用标签输出加粗文本
document.write(`I am ` + age + ` years old`) /*混合变量的输出*/ document.write(`I am ${age} years old`) //使用模板字符串
document.write(age) //直接输出单个变量的值
注:prompt()
获取到的实际上是字符串:
let age
age = prompt(`how old are you?`)
console.log(typeof age)
所以如果要读取用户输入的数字,要先将字符串转换为数字,然后再赋给变量:
age = +prompt(`how old are you?`) //使用 '+' 来完成由字符串到数字的转换
变量
变量是用来存储用户输入的数据的。可以将他理解为一个存储数据的容器。
let 变量名 //声明一个变量
let age
age = prompt('请输入您的年龄') //赋值
let age = prompt('请输入年龄')
document.write(age)
此外,还有另一个关键字:
var //可以多次声明同一个变量
变量命名规范
与C类似。
常量
const PI = 3.14 //常量是不可以更改的
基本数据类型
js是弱数据类型语言。
在js中,无须使用诸如int的关键字来标识变量的数据类型,赋值之后会自动匹配数据类型。
let uname //数据类型尚未知晓
let uname = 21 //数据类型为数字
let uname = 21 //声明变量并赋值
console.log(typeof uname) //显示数据类型
let a = 21
let b = 33
console.log(a)
console.log(a + b)
console.log(a - b)
console.log(a / b) //变量之间可以进行简单的运算
- 字符串类型
let uname = 'string'
console.log(typeof uname)
let uname = "str'str'ing" //嵌套字符串
示例:打印用户输入的值的类型
let uname
uname = prompt('请输入内容')
console.log(typeof uname)
- 使用 ‘+’ 来完成字符串的拼接。如果是数字与字符串相加,则会自动将数字转换为字符串
let a = 's' + 2
document.write(a)
let uname
let age
age = prompt('请输入年龄')
uname = prompt('请输入姓名')
doucument.write('你叫'+uname',今年' +age+'岁了')
模板字符串
document.write(`你叫${uname},今年${age}岁了`)
布尔类型
console.log(3 < 5)
console.log(typeof (3 < 5))
undefined //声明但未赋值
console.log(undefined + 1)
console.log(typeof(undefined + 1))
显式类型转换
let a = prompt('number1')
let b = prompt('number2') //获取到的实际上是字符串
console.log(Number(a) + Number(b)) //使用Number进行类型转换
let a = +prompt('number1')
let b = +prompt('number2') //前缀 '+' 直接将字符串转换为数字
因为:
console.log(typeof (+a)) //显示结果为数字类型
let c = '200.34sdojfijosijaoidjofj'
console.log(parseInt(c)) //将c的值转换为int
console.log(parseFloat(c)) //将c的值转换为float
alert()
let a = 2;
alert(a) //直接在窗口显示a的值
比较运算符
== //只比较值
=== //既比较值又比较类型
let a = 2;
let b = '2'
alert(a == b) // ==只比较数值(==存在隐式转换,将字符转换为数字)
alert(a === b) // ===既比较数字业比较类型
多分支语句
let age = +prompt('age:')
if (age < 18)
alert('未成年')
else if(age >= 18 && age < 25)
alert('青春年华')
else
alert('好汉不提当年勇')
示例:
let a = +prompt('enter a')
a < 10 ? alert(`0${a}`) : alert(`${a}`)
JS与标签
for (let a = 2; a > 0; a--)
document.write('hello!<br>')
示例:打印九九乘法表
for (let i =1; i < 10; i++)
{
for(let j = 1; j <= i; j++)
document.write(`<span>${j} * ${i} = ${i * j}, </span>`)
document.write(`<br>`)
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
span {
display: inline-block;
background-color: aqua;
}
</style>
</head>
<body>
<script src="./js2.js"></script>
</body>
</html>
注:
如下的代码使用了<span>
标签:
document.write(`<span>${j} * ${i} = ${i * j}, </span>`)
这样的话就可以使用css样式了:
span {
display: inline-block;
background-color: aqua;
}
数组
let arr = [1,2,3,44,55]
let k of arr //k将会获得数组的元素
let i in arr //i将获得数组的索引下标
let arr = [1,2,3,44,55]
for (let i in arr)
{
document.write(arr[i])
document.write(`<br>`)
}
let arr = [1,2,3,44,55]
for (let k in arr)
{
document.write(k)
document.write(`<br>`)
}
let arr = [2,44,66,23,76]
for (let i in arr)
{
document.write(i)
document.write(`<br>`)
}
let arr = ['li', 'wang', 'ma', 12, true] //一个数组的元素可以是多种类型的值。
let arr = ['li', 'wang', 'ma', 12, true]
for (let i in arr)
{
document.write(arr[i])
document.write('<br>')
}
arr.length //该值代表数组的长度
console.log(arr instanceof Array) //判断变量arr是否是数组
concat() //合并数组
arr3 = arr.concat(arr2) //合并arr和arr2数组并将结果赋给数组arr3
arr.push() //在数组末尾添加内容
arr.unshift //在数组首部添加内容
arr.shift() //删除首元素
arr.pop() //删除尾元
arr.splice(3,1) //第一个参数是起始下标,第二个参数是删除的个数
arr.length //该值代表数组的长度
console.log(arr instanceof Array) //判断变量arr是否是数组
concat() //合并数组
arr3 = arr.concat(arr2) //合并arr和arr2数组并将结果赋给数组arr3
arr.push() //在数组末尾添加内容
arr.unshift //在数组首部添加内容
arr.shift() //删除首元素
arr.pop() //删除尾元
arr.splice(3,1) //第一个参数是起始下标,第二个参数是删除的个数