JavaScript的基本使用

绥彼岸

已于 2022-02-26 11:35:47 修改

阅读量1.2k

点赞数 7

分类专栏：笔记文章标签： javascript 前端 html

于 2022-02-26 11:35:13 首次发布

本文链接：https://blog.csdn.net/qq_62217605/article/details/123145342

版权

笔记专栏收录该内容

50 篇文章 0 订阅

订阅专栏

JavaScript的基本使用

JavaScript的简介
JavaScript的基本使用
- 基本变量与数据类型
- 基本语句

JavaScript的简介

JavaScript简称为js，其中的部分语句和Java中是相同的，但js是一门弱类型的语言，所以两者还是有一点微小的区别，js的主要作用是用于给HTML页面页面上添加动态效果与交互操作，ECMA相当于JS的语言标准，目前最高是ES6。

JavaScript的基本使用

js代码必须在script标签中（一般放在head标签中）编写，
也可以先写成js文件，然后使用script标签中的src属性直接调用，
js的编写严格区分大小写。

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src=".js">//src中放js文件的路径
         // 编写js代码
    </script>
</head>

js文件编写建议：在项目目录下新建js文件夹，将写好的js文件存放在js文件夹中，这样方便调用js文件，也方便查询。

基本变量与数据类型

js中的基本数据类型有五种：number（数字）、string（字符）、boolean（true和false）、object（数组和对象）、underfined（未定义的变量）；

var：js中唯一的定义变量的关键字，结尾可以不加分号（;）但是得跨行，可以使用单引号，也可以使用双引号，但是不可以一单一双。

var num=1//number
var str="string"//string
var boo="true"//boolean
var obj_01=[1,2,3,4,5]//object
var obj_02={//object
	"name":"xx",
	"sex":"xx",
	"age":18,
}

typeof：查看数据类型

console.log(typeof x)//x为你需要查看的变量

console：控制台，有 .log（打印信息）和 .dir（打印一个对象的所有属性和方法）两个方法，打印出来的数据会出现在控制台中，不会直接显示到网页页面当中，控制台需要在网页中查看。

console.log(1)
console.log(typeof 1)

效果如下（包括打开控制台的方法）：
在这里插入图片描述

控制台还可能输出的值：
NaN(not a number)：表示不是数字；
Infinity：表示无穷大
-Infinity：表示无穷小

number类型的方法：
parseInt：转换为整数
parseFloat：转换为小数
toFixed：取整数和小数的几位

console.log(parseInt("1.2345"))//转换为整数
console.log(typeof parseInt("1.2345"))

console.log(parseFloat("1.2345"))//转换为小数
console.log(typeof parseFloat("1.2345"))

console.log(1.2345.toFixed(2))//取整数和小数的几位
console.log(typeof 1.2345.toFixed(2))

效果如下：
在这里插入图片描述

boolean类型的一些判断：

！！（使用英文符号）是将变量变成boolean类型；
“”（空字符串）为false；
0为false；
null（空值）为false；
underfined为false；
NaN为false；
NaN要使用isNaN判断

boolean中的短路现象：
js中运用||符号或者&&符号时会碰到短路现象，
当||碰到true后会直接返回（||有真则真）
当&&碰到false后会直接返回（&&有假则假）

//短路现象
console.log(""||0) //0
console.log(1||0) //1
console.log("2"||"1"||1) //"2"
console.log("2"&&"1"&&1) //"2"
console.log("2"&&0&&1) //0

效果如下：
在这里插入图片描述

=为赋值
==为比较无视类型
===为比较先比较类型，再比较值

console.log(1=="1") //true
console.log(1==="1") //false

效果如下：
在这里插入图片描述

js中的数组没有类型限制（下标从0开始）
数组可以读取任意下标的值（如果所查询的位置没有值，返回underfined）
长度可以任意变化（可动态增加数组）
js中的对象属性可以动态增加的

var as=[1,2,3,4,5]
var obj={
            "name":"xx",
            "sex":"xx",
            "age":18,
        }
//数组
console.log(as)
console.log(as[0])
console.log(as[100])
as[10]=10
console.log(as)
//对象
console.log(obj)
obj.address="长沙"
console.log(obj)

效果如下（如果数组显示的是Array，刷新一下）：
在这里插入图片描述

基本语句

js中的大部分语句和Java当中是相同的

js中的弹窗：
alert：提示框
confirm：询问框
prompt：输入框

alert("提示框")
confirm("询问框")
prompt("输入框")

document.write：用js在页面上进行html输出

document.write("测试")
document.write("<p>测试</p>")

效果如下（页面放大200%）：
在这里插入图片描述

If、while、switch、for和java中用法一致

//if语句
if (true){
 	 console.log("测试")
}
//while语句
var i=0
while(i<5){
    i++
    document.write("测试")
}
//switch语句
switch (1+1){
    case 1:console.log("false")
        break
    case 2:console.log("true")
        break
    default:console.log("???")
}
//for语句
for (var j=0;j<5;j++){
    console.log("测试")
}