Javascript基础

最新推荐文章于 2024-08-22 14:32:34 发布

Cmaningyuan

最新推荐文章于 2024-08-22 14:32:34 发布

阅读量42

点赞数

文章标签： javascript 开发语言

本文链接：https://blog.csdn.net/Cmaningyuan/article/details/131689666

版权

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)  //第一个参数是起始下标，第二个参数是删除的个数

Cmaningyuan

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Javascript基础

/内部引入</</</</
复制链接

扫一扫