玩转js之03-js变量

一、JS用什么声明变量？

js用关键字var声明变量

var a=20  //在内存中声明一个变量叫a，赋初始值为20
  console.log(a);
// var box1=document.querySelector(".box")  //声明一个变量box1，赋值为页面上的元素：.box选择器选中的元素
    //   console.log(box1);
        // box1.style.color="red"   //把box1变量中的元素的style样式中的color设置为“red”
        // box1.style.fontSize="56px"

提问：点击按钮，有一块区域滑出来
解析：buttom标签内部用一个onclick属性，连接一个函数，只要点击按钮就滑出区域
完整代码：

<!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>
        .box{
            width: 40px;
            height: 30px;
            background-color: pink;
        }
    </style>
</head>
<body>
    <button onclick="fn()">点击</button>
    <div class="box">666</div>
    <script>
        function fn(){
            console.log(123)
            //声明一个变量box1，赋值为页面上的元素：.box选择器选中的元素
            var box1=document.querySelector(".box")  
            //把box1变量中的元素的style样式中的color设置为“red”
            // box1.style.color="red"
            box1.style.height="300px" 
            box1.style.width="80px"
            box1.style.backgroundColor="yellowgreen"   
        }
    </script>
</body>
</html>

页面效果：

点击之前

js 变量放入session_javascript


点击之后

js 变量放入session_javascript_02

二、 关于变量

1、变量可以保存数据

为什么保存数据？
使用数据进行运行代码和交互
有点数据太大了或者经常变化，不好写逻辑，

<script>
var a；
consloe.log(a)
</script>

2、变量名的书写方式

1.区分大小写
标签不区分大写
2. 变量名常常以$ _ 字母 数字（不开头）的混合组合

var mybook="bookname"
   var my_$book="bookname1"

3.变量名常常要有实际意义==》不要用中文命名，尽量不缩写，可以用驼峰命名法

// 驼峰命名法
var topBarBth=document.querySelector(".box")
var Topbaebth=document.querySelector(".box")
// 个人喜欢
var top_bar_bth=document.querySelector(".box")

4、不能写官方已经使用的关键字和保留字

关键字保留字有以下：不用记忆

js 变量放入session_前端_03

js 变量放入session_赋值_04

3、变量的存值和取值

var person="karen"
     person1="jack"   //隐式声明
    console.log(person);
    console.log(person1);
    console.log(123);
(1) 如果一个变量在存值时，变量还没有声明（var） 系统会自动帮我们声明这个变量并赋值
(2) 如果一个变量在存值时，变量已经声明了  这时就会被覆盖之前值
(3) 如果一个变量在取值时， 这个变量已经声明了并赋值，就会取出最近一次保存的数据
(4) 如果一个变量在取值时，这个变量没有声明过 ，就会报错

总结

1、用var声明变量，点击事件用οnclick="fn()"连接函数。
2、变量名的书写方式（面试题）
3、变量的存值和取值