03-JS的变量

1.变量可以保存数据

1.获取的标签元素   数字(不管整数还是小数)

var a = 20//赋值数值
var b = 30
var c = 10.5
var e = "hello"//赋值字符串
var f = document.querySelector(".box")//声明一个变量box1赋值为页面上的元素:.box选择器选中的元素

2.使用数据:(运行代码  交互)

//声明一个变量box1赋值为页面上的元素:.box选择器选中的元素
var box1=document.querySelector(".box")
console.log(box1)
//把box1变量中的元素的style样式中的color设置为"red"
box1.style.color="red"
box1.style.fontSize="40px"
box1.style.width="40px"
box1.style.height="40px"
box1.style.backgroundImage="url(./img/1.png)"
function  fn () {
console.log(123)
//声明一个变量box1赋值为页面上的元素:.box选择器选中的元素
var box1=document.querySelector(".box")
//把box1变量中的元素的style样式中的color设置为"red"
box1.style.color="red"
}

3.有的数据太大了或者是经常变化,不好写出逻辑  需要有一个别名代码(即变量名)来使用这个数据

2.变量名的书写方式

1.区分大小写的

2.变量名常常是 $  _ 字母  数字(不开头) 的混合组合

3.变量名常常要有艺术(见名知意)==>不要缩写 可以使用拼音  单词或者拼音字多时:驼峰命名

4.不能写成官方已经使用了的单词==>关键字和保留字

//小驼峰命名
var topBarBtn=document.querySelector(".box") 
//大驼峰命名
var TopBarBtn=document.querySelector(".box") 
//也可以用下划线分隔开
var top_bar_btn=document.querySelector(".box")

3.变量中能够保存什么数据

1.5种基本数据

var a1=20//数字
var b1="hello"//字符串
var c1=true//布尔值
var d1=null//空值
var e1=undefined//未定义

2.1种引用数据

var f1={}//对象
var g1=document.querySelector(".box")
var arr=[]//数组