(一) 变量
变量用于存储编程所使用的数据和方法。
声明一般变量关键字：var， let， const。其中let和const是es6的语法。
声明其他特殊变量关键字：function，class，import (先了解)等
01 声明变量
变量用于存储数据，因此可以把变量实际上就是一个容器
存储在变量中的数据，叫做变量的值
<!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>
02 变量赋值
如何给变量存储数据？
给变量存储数据的过程，叫给变量赋值，符号是 =
注意：这里的 = 不是数学上的 = 。
// 声明变量
var age;
var username;
// 变量赋值
age = 100;
username = '张三';
// 变量的声明和赋值可以同时进行
var age2 = 80;
// 把一个变量的值赋给另外一个变量
var a = 100;
var b = a;
03 变量必须先声明后使用，否则报错。
例如企图获取一个未声明的变量的值，或者给一个未声明的变量赋值，都会导致错误。
<!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; -
驼峰命名。多个单词构成一个标识符，则第一个单词首字母小写(小驼峰)，后续单词首字母大写。例如：
var foodName = '番茄炒蛋'; var foodPrice = 100.00; var getEleById;
(三) 常量(先了解)
常量，意即值不能修改的数据。
常量的值就是常量本身。
例如10就是一个数据，它的值就是10本身。它的值不能修改。不能把10变成11.
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>
2. 字符串拼接
<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) 布尔boolean
用来表示真假的两种情况
<script>
// 表示门的开关状态
var isOpen = true;
var opened = false;
// 表示是否已经登录
var isLogin = true;
</script>
(4) undefined
变量声明了但没赋值, 它的值就是undefined
<script>
var age;
console.log(age);
</script>
(5) null
声明一个变量打算将来存放对象, 可以先给它赋值null
<script>
var obj = null;
</script>
object类型
(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之函数
函数用来实现某个功能, 函数可以"打包"多条语句一起执行, 函数可以重复调用
01 声明和调用函数#
比如做一顿饭,需要做的事情有:
1. 买菜
2. 洗菜
3. 做饭
4. 炒菜
5. 端上桌子
// function声明函数的关键字
// cooking 函数名称
function cooking() {
// 函数体-需要运行代码
}
// 运行(调用)函数
cooking();
<script>
// 声明函数,就是"打包"若干语句, 可以重复运行
function cooking() {
console.log('买菜');
console.log('洗菜');
console.log('做饭');
console.log('炒菜');
console.log('端上桌子');
}
// 调用函数(运行函数)
console.log('中午到了');
cooking();
console.log('晚上到了');
cooking();
</script>
02 对象里的函数
也可以把函数放进对象里, 这时候函数有了新的名称, 叫做对象的方法
<script>
// 定义在对象里的函数我们把它叫做对象的方法
var obj = {
username: '张三',
age: 20,
// 属性的值可以是任意类型
hobby: ['篮球','足球','羽毛球'],
say: function() {
console.log('我叫张三');
}
}
// 调用对象里的方法
obj.say();
</script>
(五) 检测数据类型
使用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">
<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">
<title>Document</title>
</head>
<body>
<button>按钮</button>
<script>
// 1. 获取dom节点对象
var $btn = document.querySelector('button');
// 2. 给dom节点对象添加onlcick属性
$btn.onclick = function() {
alert('我是老胡,哈哈哈哈');
}
</script>
</body>
</html>
<!-- 给所有li添加事件 -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<ul>
<li>xxxx</li>
<li>xxxx</li>
<li>xxxx</li>
<li>xxxx</li>
<li>xxxx</li>
</ul>
<script>
// 给所有li添加事件
$liList[0].onclick = function() { alert('li'); }
$liList[1].onclick = function() { alert('li'); }
$liList[2].onclick = function() { alert('li'); }
$liList[3].onclick = function() { alert('li'); }
$liList[4].onclick = function() { alert('li'); }
</script>
</body>
</html>
(3) 操作网页
-
元素的内容
-
元素的样式
-
元素的属性
1. 获取和修改元素内容#
- innerText 只能获取元素内的文本
- innerHTML 获取元素内容包含了标签
- 给上面两个重新赋值可以修改其内容
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<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.innerText);
// 获取元素内容
var $box2 = document.querySelector('.box2');
console.log($box2.innerText);
console.log($box2.innerHTML);
// 给元素添加内容
var $box3 = document.querySelector('.box3');
$box3.innerText = 'hello web'; // 会被下一句覆盖
debugger;
$box3.innerHTML = '<input/> <button>按钮</button>';
</script>
</body>
</html>
2. 获取和修改元素样式
本文所讲例子仅限于行内样式
-
获取元素节点对象
-
获取节点样式
- dom对象.style.color // 获取颜色
- dom对象.style.fontSize // 获取字体大小
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <div style="color:red;font-size:22px;">元素节点样式</div> <script> var $div = document.querySelector('div'); console.log('颜色',$div.style.color); console.log('字体大小', $div.style.fontSize); // 修改样式 $div.style.color = 'yellow'; $div.style.fontSize = '30px'; $div.style.border = '1px solid red'; </script> </body> </html>
3. 获取和修改元素属性
- 获取dom节点
- 获取元素属性: dom对象.属性名(注意: 获取类名是dom对象.className)
- 修改元素属性: dom对象.属性名 = '新的值';
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<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');
console.log('类型',$inp1.type);
$inp1.type = 'password';
var $inp2 = document.querySelector('#inp2');
console.log('checked',$inp2.checked);
$inp2.checked = true;
var $a = document.querySelector('a');
$a.href = 'http://sina.com';
$a.innerText = '新浪';
</script>
</body>
</html>
扫一扫
483
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
