一.变量
变量用于存储编程所使用的数据和方法。
声明一般变量关键字: var,let,const。其中let和const是es6语法。
声明其他特殊变量关键字: function,class,import(先了解)等
1.声明变量
变量用于存储数据,因此可以认为变量实际上就是一个容器
存储在变量中的数据,叫做变量的值。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
// 声明变量, var声明(定义), age变量的名称
var age;
var num;
var username;
// 同时声明多个变量
var a,b,c;
</script>
</body>
</html>
2.变量赋值
如何给变量存储数据?
给变量存储数据的过程,叫给变量赋值。符号是 ‘=’。
ps:这里的 = 不是数学上的 =。
// 声明变量
var age;
var username;
// 变量赋值
age = 100;
username = '张三';
// 变量的声明和赋值可以同时进行
var age2 = 80;
// 把一个变量的值赋给另外一个变量
var a = 100;
var b = a;
3.变量必须先声明后使用,否则报错。
例如企图获取一个未声明的变量的值,或者给一个未声明的变量赋值,都会导致错误,声明了没赋值,输出值为undefined。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
var age = 100;
console.log(age);
// 变量没声明就使用, 会报错
var b = a;
</script>
</body>
</html>
二.标识符命名规则
标识符:编程中的各种名字,例如变量名,属性名,函数名,数组名,对象名,等等。
编程中起名字(标识符的命名)的规则;
1:以字母、下划线、$开头, 其它字符可以是字母、下划线、$、数字
2:区分大小写(html不区分)
3:不能和关键字保留字冲突, 比如function, if, continue.......
标识符命名习惯:
-
使用英文单词, 比如:
var username = '张三'; var age = 100;
- 单词+数据类型。例如:
var foodName = '番茄炒蛋'; var foodPrice = 100.00;
3.驼峰命名。多个单词构成一个标识符,则第一个单词首字母小写(小驼峰),后续单词首字母大写。例如:
var foodName = '番茄炒蛋';
var foodPrice = 100.00;
var getEleById;
三.常量(先了解)
常量,意即值不能修改的数据。
常量的值就是常量的本身。
例如10就是一个数据,它的值就是10本身。它的值不能修改。不能把10变成
ES6使用const声明一个常量。
const声明常量是必须同时赋值,并且后续不可再修改。
const x = 100;
x = 111; // 会报错
四.数据类型
[思维导图](【腾讯文档】无标题思维导图 腾讯文档)
1.数字number
<script>
// 整数
var num1 = 100; // -100
// 小数
var num2 = 88.88; // -88.88
// 无穷大
var num3 = Infinity; // -Infinity
// 不是一个数字
var num4 = NaN;
</script>
2.字符串string
用来在编程中描述文字的变量
<script>
// 表达方式1
var str1 = "hi";
// 表达方式2
var str2 = 'hello';
// 表达方式3(es6)
var str3 = `hello web`;
</script>
字符串的拼接
<script>
// 字符串拼接(es5)
var str = 'hello' + 'web';
var str1 = '胡';
var str2 = '儒清';
var str3 = str1 + str2;
console.log(str3);
// 字符串拼接(es6)
var y = '2021';
var m = '12';
var d = '20';
// es5
var today1 = y+'年'+m+'月'+d+'日';
// es6
var today2 = `${y}年${m}月${d}日`;
console.log('today1',today1)
console.log('today2',today2)
</script>
3.布尔bollean
用来表示真假的俩种情况
<script>
// 表示门的开关状态
var isOpen = true;
var opened = false;
// 表示是否已经登录
var isLogin = true;
</script>
4.undefined
<script>
var age;
console.log(age);
</script>
5.null
声明一个变量打算将来存放对象, 可以先给它赋值null
<script>
var obj = null;
</script>
6.object之纯对象
对象用来描述一个人或者一个物体的很多特征的一个组合
<script>
// 声明一个对象
var person = {
name: '张三',
age: 100,
address: '广东深圳'
}
console.log('person', person);
// 获取对象属性
var username = person.name;
var age = person['age'];
console.log('username',username);
console.log('age',age);
// 修改对象属性
person.age = 20;
person.name = '李四';
console.log('修改后的对象',person);
// 删除对象属性
delete person.address;
console.log('删除后的对象',person);
</script>
7.object之数组
数组用来存放一组数据, 对象是无序的, 但数组是有序的, 数组可以存放任意类型, 但通常一个数组只会存放同一种类型的数据
<script>
// 声明一个数组
var arr = ['a','b','c','d','e','f'];
// 获取数组长度
var len = arr.length;
console.log('数组长度',len);
// 第一个成员
var first = arr[0];
var second = arr[1];
var last = arr[len-1];
console.log('第一个',first);
console.log('第二个',second);
console.log('最后一个',last);
</script>
8.object之函数
函数用来实现某个功能, 函数可以"打包"多条语句一起执行, 函数可以重复调用
比如做一顿饭,需要做的事情有:
1. 买菜
2. 洗菜
3. 做饭
4. 炒菜
5. 端上桌子
// function声明函数的关键字
// cooking 函数名称
function cooking() {
// 函数体-需要运行代码
}
// 运行(调用)函数
cooking();
五.检测数据类型
使用typeof
六.用js操作网页
js可以用来跟用户进行交互,具体就是用户发出一个动作,我们根据需要用js去操作网页,操作网页包括:添加事件,修改网页内容,修改网页样式,修改网页属性。
1.选择标签
- querySelector(选择器)选择一个元素节点对象
- querySelectorAll(选择器)选择多个元素节点对象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">box1</div>
<div class="aa">box2</div>
<ul>
<li>1.xxx</li>
<li>2.xxx</li>
<li>3.xxx</li>
</ul>
<script>
// 选择(获取)#pp节点对象,querySelector只能选择一个
var $app = document.querySelector('#app');
console.log('$app',$app);
var $aa = document.querySelector('.aa')
console.log('$aa',$aa);
var $liList = document.querySelectorAll('ul>li');
console.log('$liList',$liList);
</script>
</body>
</html>
2.添加事件
//方式1
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<button onclick="alert('哈哈哈')">按钮1</button>
<button onclick="say()">按钮2</button>
<script>
function say(){
alert('你是牛马,哈哈哈');
}
</script>
</body>
</html>
//方式2
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<button>
按钮
</button>
<script>
//1.获取dom节点对象
var $btn = document.querySelector('button');
console.log($btn);
//2.给dom节点对象添加onclick属性
$btn.onclick = function(){
alert('你是牛马,哈哈哈');
}
</script>
</body>
</html>
//方式3
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<ul>
<li>1.xxxx</li>
<li>2.xxxx</li>
<li>3.xxxx</li>
<li>4.xxxx</li>
<li>5.xxxx</li>
</ul>
<script>
var $li = document.querySelectorAll('ul>li');
console.log('li',$li);
for(var i=0;i<$li.length;i++){
$li[i].onclick=function(){
this.style.background='red';
}
}
// var ul=document.querySelector('ul');
// ul.addEventListener('click',function(e){
// e.target.style.background='red';
// }) 事件监听(目前不懂)
</script>
</body>
</html>
3.操作网页
1.元素的内容
2.元素的样式
3.元素的属性
1.获取和修改元素内容
- innerText 只能获取元素内的文本
- innerHTML获取元素内容包含了标签
- 给上面俩个重新赋值可以修改其内容
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="box1">box1</div>
<div class="box2">
大萨达
<button>按钮</button>
<span>啊啊啊</span>
</div>
<div class="box3"></div>
<script>
var $box1 = document.querySelector('.box1');
console.log($box1);//获取元素节点
var $box2 = document.querySelector('.box2');
console.log('$box2',$box2);//获取元素节点
console.log('$box2.innerText',$box2.innerText);//只获取的元素(包括子元素)里面的文本内容
console.log('$box2.innerHTML',$box2.innerHTML);//获取本元素的文本和子元素的标签和标签内容,
var $box3 = document.querySelector('.box3');
$box3.innerHTML = '<input/> <button>按钮</button>';//会被下一句的设置文本或者
//设置标签文本给覆盖,只能存在一句
$box3.innerHTML = 'niuma';
</script>
</body>
</html>
2.获取和修改元素样式
以下所讲例子仅限于行内样式
1.获取元素节点对象
2.获取节点样式
- dom对象.style.color //获取颜色
- dom对象.style。fontSize //获取字体大小 -符号要去掉,改用大写字母连接
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div style="color:red;font-size:22px;">元素节点样式</div>
<script>
var $sty = document.querySelector('div');
$sty.style.color = 'yellow';//颜色改为黄色
$sty.style.fontSize = '30px';//字体大小改为30px
</script>
</body>
</html>
3.获取和修改元素属性
1.获取dom节点
2.获取元素属性:dom对象.属性名(ps:获取类名是dom对象.className)
3.修改元素属性: dom对象.属性名 = ‘新的值’;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<input id="inp1" type="text" name="username">
<input id="inp2" type="checkbox">
<a href="http://www.baidu.com">百度</a>
<script>
var $inp1 = document.querySelector('#inp1');
$inp1.type = 'password';
var $inp2 = document.querySelector('#inp2');
console.log($inp2.checked);
$inp2.checked = 'true';
var $a = document.querySelector('a');
$a.href = 'http://sina.com';
$a.innerHTML = 'xinlang';
</script>
</body>
</html>