js基础学习（1）

最新推荐文章于 2024-05-17 13:52:13 发布

猿小白v1

最新推荐文章于 2024-05-17 13:52:13 发布

阅读量40

点赞数

分类专栏： web前端 # javascript 文章标签： javascript 学习前端

本文链接：https://blog.csdn.net/qq_42038461/article/details/130693230

版权

web前端同时被 2 个专栏收录

1 篇文章 0 订阅

订阅专栏

javascript

1 篇文章 0 订阅

订阅专栏

js运行方式两种方式

代码嵌入页面运行
引入单独的.js文件运行

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>主文件</title>
        <script>
        	//嵌入式代码
            console.log("嵌入式js");  //打印语句 
        </script>
        //引用js文件
        <script src="./js/syntax.js"></script>
    </head>
    <body>
    	//末尾引用js文件(推荐方式)
        <script src="./js/syntax.js"></script>
    </body>
</html>

syntax.js:

console.log("js文件");

在这里插入图片描述

注释

单行注释使用双斜杠标识。
多行注释使用/**/标识。

//这是单行注释
/*
这是多行注释
解释器会忽略注释，注释只起到备注，提醒功能
*/

变量

变量名允许包含字母，数字，美元符号和下划线，但是不可以用数字开头。
变量名通常用小驼峰和大驼峰命名法命名

//小驼峰
userName = "bxy"
//大驼峰
UserName = "bxy"

js是弱类型的语言，同一个变量可以被赋予不同类型的值，解释器不会检查变量的类型，所以初始化变量时并不需要指定变量类型。

//数值
mod = 1.0
console.log(mod)

//字符串
mod = "234"
console.log(mod)

//布尔
mod = true
console.log(mod)

//数组
mod = Array()
// 通过下标填充数据，数组中数据类型可以不一致
mod[0] = "123"
mod[1] = "345"
mod[2] = 678
console.log(mod)
//下标区数据
console.log(mod[0])

//对象
mod = Object()
mod.Name = "bxy"
mod.sex = "男"
mod.age = 100
// 打印对象数据
console.log(mod)
//打印对象名称
console.log(mod.Name)
//打印对象没有的字段不会报错，打印默认值undefined
console.log(mod.lastName)

在这里插入图片描述

在使用变量前，变量可以没有初始化，但是变量必须已经声明，使用var关键字对变量进行声明。

//使用未声明变量
console.log(mod)

在这里插入图片描述

//使用前声明变量
var mod;
//可以同时声明多个变量
var mod1, mod2;
console.log(mod)

在这里插入图片描述

运算符

// 算数运算符：+，-，*，/，++，--，+=，-=，*=，/=
a = (1 + 2) * 3 / 2  //不需要背优先级，使用括号自己控制即可
console.log(a)  

a++  //自增
console.log(a)
++a //自增
console.log(a)

a--
console.log(a)
--a
console.log(a)

a+=1  //加1之后赋值给自己
console.log(a)

c = "hello"
d = "world"
res = c + " " + d + a  //字符串使用+号时拼接字符串，如果+号后跟的是数字，会将数字转为字符串拼接在一起
console.log(res)

在这里插入图片描述

比较运算符

// 比较运算符 >, >=, <, <=, ==, ===, !=, !==
console.log(1>1)
console.log(1>=1)
console.log(1<2)
console.log(1<=2)
console.log(1==1)
console.log(1==="1") //全等， 会判断类型
console.log(1=="1")
console.log(""!=false)  //就是判断空串和false意义相同
console.log(""!==false) //全不等，会判断类型

在这里插入图片描述

逻辑运算符

// &&, ||, !
a=1
b=2
console.log((a++)>0&&(b++)>0) //两者为真才为真，与操作符
console.log(a)
console.log(b)
console.log("----------------------")
a=1
b=2
console.log((a++)>2&&(b++)>0) //如果第一个条件判断为假，则不会执行第二个判断语句
console.log(a)
console.log(b)
console.log("*************************************")
a=1
b=2
console.log((a++)>0||(b++)>0) //只要有一个为真则为真：或操作符
console.log(a)
console.log(b)
console.log("----------------------")
a=1
b=2
console.log((a++)>2||(b++)>0) //第一个为真则后面的语句不会在执行
console.log(a)
console.log(b)

console.log("--------------------********-------------")
a = true
console.log(!a) //对结果取反

在这里插入图片描述

条件语句

//依次判断if,else if的条件是否成立，成立则执行对应的语句，然后结束整体语句，否则执行else语句
//else if可以写多个，且if中可以嵌套if
if(1<2) {
    console.log("a")
}else if (2>3){
    console.log("b")
}else{
    console.log("c")
}

在这里插入图片描述

循环语句

a = 0
// while循环，满足条件则执行一次大括号中的语句，直到不满足条件
while(a<5) {  
    console.log(a)
    a++
}
console.log("---------------------------------")
// for循环，先执行第一个分号的语句，然后判断第二个分号的条件语句，最后执行第三个分号的语句
// 从第二次循环开始，第一个分号的语句不再执行，直到第二个分号条件语句判定失败则循环结束
for (i=0; i<5; i++) {
    console.log(i)
}

在这里插入图片描述

函数

函数就是对一段代码的封装，可以让外部进行多次调用

function test(a) {
    if (a>0) {
        console.log("a>0")
    }else{
        console.log("a<=0")
    }
}

test(1)

在这里插入图片描述

函数使用return语句可以返回值，同时return可以跳过函数内剩余语句

function test(a) {
    console.log("执行test")
    console.log(a)
    b = a + 1
    return b
    console.log("打印不到")
}

b = test(1)
console.log(b)

在这里插入图片描述

变量作用域

全局变量可以在脚本的任何地方引用
局部变量只能在声明的函数内部使用

var a = 1 //全局变量
function test() {
    console.log(a)
    a++  //修改全局变量，全局有效
    console.log(a)
    var b = 0 //局部变量
    console.log(b)
}
test()
console.log(a)
console.log(b) //报错 超出作用域

在这里插入图片描述

对象

对象是自包含的数据集合，对象中的数据可以通过属性和方法拿到,熟悉和方法都有点(.)操作符访问


a = {name: "bxy", age: "100", fullAge: function(){ return this.age}}
console.log(a)
console.log(a.name)  //调用属性
console.log(a.fullAge())  //调用方法

在这里插入图片描述

猿小白v1

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js基础学习（1）

了解javascript基础语法
复制链接

扫一扫

专栏目录

js基础学习（1）

js运行方式两种方式

注释

变量

运算符

比较运算符

逻辑运算符

条件语句

循环语句

函数

变量作用域

对象

“相关推荐”对你有帮助么？