变量和基本操作（基础篇）

最新推荐文章于 2022-10-29 20:00:21 发布

不想秃头的小崽子

最新推荐文章于 2022-10-29 20:00:21 发布

阅读量122

点赞数 1

分类专栏： JavaScript基础学习

本文链接：https://blog.csdn.net/m0_48178238/article/details/119535409

版权

JavaScript基础学习专栏收录该内容

2 篇文章 0 订阅

订阅专栏

JavaScript目录

第一章 JavaScript变量和基础操作

前言

简单的介绍JavaScript变量和基本操作

交互操作和状态完成操作

1. 交互操作：

告诉浏览器用户在进行什么操作的时候我去做什么~~

点击操作：点击盒子变色

函数：代码的打包，指定代码的范围

函数写法：

 function (){
          //放入你需要打包的代码
                   }

页面的变量对应了js中的变量

思维一：

1.修改状态

2.渲染状态

自增1的操作：

num = num + 1 / num += 1 / num++ , ++num

        <style>
            .box{
            width:100px;
            height:100px;
            background-color:red;
            font-size:30px;
            text-align:center;
            line-height:100px;
            }
        </style>
        
        <body>
        <div class="box">0</div>
        
        <script>
         //声明变量box  把box盒子赋值给变量box
         var box = document.querySelector(".box");
         //box正在被点击的时候执行后面的函数
         box.onclik=function (){
              box.style.backgroundColor = "blue";
              box.innerHTML="hi"；
         }
        </script>
        
        </body>

思考练习1：

页面中左右两边有两个盒子左边红色右边黑色

点击左边黑红

点击右边红黑

//拓展：点击盒子，盒子里面的数字加1

    <script>
     //声明变量box  把box盒子赋值给变量box
     var box = document.querySelector(".box");
     //用变量num表示当前的数字是多少
     var num=0;
     //box正在被点击的时候执行后面的函数
     box.onclik=function (){
        //修改盒子里面的数字
        //1.修改num
        num = num + 1; //自增的操作
        //2.将最新的num 渲染到页面中
        box.innerHTML = num;
     }
    
    </script>

思考练习2：

页面中有一排5个元素

初始第一个为红色其他为黑色

点哪个，只有那个变红
/*

2. 状态完成操作：

加载完成 onload ==>window.onload / img.onload

修改类名：

元素.className

通常用于快速切换样式

<script>
var box = document.querySelector(".box");
box.className = "box1";//修改
//box.className += "box1";//添加类名
</script>

解决script 标签书写位置错误问题。

1.将script标签移动到body 标签后面

2.不移动位置，借助一个工具·········浏览器加载完成事件（某件事情发生的时候）

window.onload

<script>
    //浏览器加载完成之后
 window.onload=function(){
     var box = document.querySelector(".box");
     consloe.log(box);//测试  显示box
     box.innerHTML = "hi";//打印hi
 }
</script>

<body>   
<div class="box"></div>  
<img src="图片链接">
    /*
    请求资源会让页面卡住吗？
    不会， 
    是因为图片没有加载好，下面的js就执行了
    */
    
<script>
var img = document.querySelector("img")
console.log(img.width)//0 代码跑完 图片还没加载完成
</script>

</body>

加载未完成问题
解决：

<script>
var img = document.querySelector("img")
//加载完成事件
img.onload=function(){
    console.log(img.width)//宽度
}
</script>

变量

概念：变化的量，是JS中自定义的一个容器，可以存放数据，元素，文本…内容等。

自己定义变量含义

如 var pocket=100
其中 pocket 是变量
100 是变量的值

变量值具有时效性即问变量的值就是当前变量的值

变量的值也可=“喵喵” 即变量相当于一个容器,自己去定义它的涵义；通过含义表示结果

var pocket=100
pocket = pocket - 10 //pocket -= 10
pocket += 5
//...
console.log(pocket);

举个栗子~

计算 a和b的和


var a = 95

var b = 80

console.log(95+80);//错误 

console.log(a+b);//正确

注：


let a = 100 //ES5

var b = 100 //ES6

推荐：今后都使用let,在任何情况下都优于var

let 也是声明变量的一个单词目前和var一样

相同名字变量不能重复声明

常量 const

常量：

不会变的量是常量
不能变的量是常量，一旦尝试修改，直接报错

意义：

保证正确性
确保不会被误操作

健壮：

常量命名规范：所有字母大写，尽量使用英文单词

const NUM = 100

const C = 100

console.log( C )//100

c = c+100 //尝试修改，直接报错不能运行

//代码报错 停止执行

console.log ( c )//  空

let box = document.querySelector(".box")

box.innerHTML // innerHTML是box的一个属性


let innnerHTML ="nihao"//innerHTML他是变量



let innerHTML = document.querySelector(".box")

innerHTML.innerHTML = "nihaoma "//河里,但是不推荐

关键字/保留字:JS代码中具有自己语义的字，不能作为变量声明的字叫做关键字，保留字一共有40多个

蓝色的字
保留关键字

如 const const = 30 //错误

总结

提示：记得完成文章中的练习呦~
这里对文章进行总结：
以上就是今天要讲的内容，本文简单介绍了javascript的一些基础操作（状态操作和交互完成操作）和变量常量概念。

不想秃头的小崽子

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
变量和基本操作（基础篇）

变量和基本操作第二小节交互操作和状态完成操作/*1. 交互操作：告诉浏览器用户在进行什么操作的时候我去做什么~~ 点击操作：点击盒子变色函数：代码的打包，指定代码的范围函数写法： function (){ //放入你需要打包的代码 } 页面的变量对应了js中的变量思维一：
复制链接

扫一扫