JavaScript学习2
1、变量
1）关键字：var
2）声明变量：var a
3）赋值：=
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
//定义变量方式一
var a;
a = 10;
//定义变量方式二
var b = 20;
//在控制台打印
console.log(a,b);
//如果想给已知的声明变量修改值，不需要再次声明
a = 30;
console.log(a,b);
//如果只声明不赋值，默认为undefined(没有定义值)
var c;
console.log(c);
</script>
</body>
</html>
2、变量名命名规则
1）不可以数字开头。
2）不可使用关键字和保留字。https://www.runoob.com/js/js-reserved.html
3）字母，数字，下划线(_)，美元符$组合。
不符合变量名命名规范的出现报错信息：
Uncaught SyntaxError: Invalid or unexpected token
语法错误：标记无效或意外
示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
//变量命名规则
//1、数字不能开通
// var 1bianling = 'a';
// console.log(1bianling);
//2、不能是关键字和保留字
// var this = 10;
// console.log(this);
// 在JavaScript中区分大小写
var This = 40;
console.log(This);
//3、字母数字下划线混合
var _this = 20;
var $var = 30;
var $_1this = 50
console.log(_this);
console.log($var);
console.log($_1this);
// 可以使用中文，但是不推荐。
var 中文 = '变量可以使用中文命名';
console.log(中文);
</script>
</body>
</html>
结果如下：
3、变量的命名风格
1）见名知义。
2）驼峰命名法：
大驼峰：JavaScript 每个单词首字母大写。
小驼峰：javaScript 首个单词首字母小写，第二个单词后每个首字母大写。
4、函数
1）什么是函数？
可以重复使用的代码块。
2）如何使用函数？
使用之前，创建函数
3）函数的声明：function
有名函数
匿名函数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
/*
* 函数声明
* 有名函数
* 匿名函数：不可以直接定义，否则报错：Uncaught SyntaxError: Function statements require a function name
* */
// function fn(){
// //代码块
// }
function () {
//代码块
}
</script>
</body>
</html>
4）函数的调用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#box{
width: 200px;
height: 200px;
background-color: red;
}
</style>
</head>
<body>
<div id="box" ></div>
<script>
//定义函数
function fn(){
alert(1);
}
//调用函数
fn();
// console.log(fn())
//匿名函数调用-事件调用
var box = document.getElementById('box');
// console.log(box);
box.onclick = function(){
//放置代码块
alert(2);
}
</script>
</body>
</html>
5、标识符
1）变量名和函数名的命名规则相同。
2）标识符分类：变量名、函数名 （函数参数）、属性名
6、JS属性操作
两种操作属性的方法：
1）点 .
元素.属性
2）方括号[ ]
元素['属性'] 方括号中可以填入需要计算的东西，或者不符合标识符规范的！！
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#box{
width: 200px;
height: 200px;
background: red;
}
</style>
</head>
<body>
<div id="box">这是文字</div>
<script>
var box = document.getElementById('box');
// //点属性.
// box.onclick = function () {
// box.style.width = '300px';
// };
// //方括号
// box['onclick'] = function () {
// box['style']['height'] = '300px';
// };
// //[]刚括号内的运算
// box['on'+'click'] = function () {
// box['style']['height'] = '300px';
// };
// //点+方括号一起混合使用
// box.onclick = function () {
// box['style'].width = '300px';
// };
box.onclick = function () {
// box.style.fontSize = '30px';
box.style['font-size'] = '30px';
}
</script>
</body>
</html>
7、JS属性的读与写操作
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JS属性的读与写操作</title>
<style>
#box{
width: 200px;
height: 200px;
background: red;
}
</style>
</head>
<body>
<div id="box" style="width: 600px;">这是文字</div>
<script>
var box = document.getElementById('box');
box.style.fontSize = '30px';
box.style.width = '400';
console.log(box.style.fontSize);
console.log(box.style.width);
</script>
</body>
</html>
8、常用属性
id：div
className：class是关键字，改成的className。div
value：form、input
style : 行间属性一般写在<head>里
background
color
width
height
cssText：会替换掉当前所有的行间属性
innerHTML ： 网页内容，可以替换掉行间属性的所有内容。
href：链接：值获取到的时绝对路径。
src：连接图片、文件或者资源：值获取到的时绝对路径。
tagName：当前元素使用的什么标签，获取到的是大写字母。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JS属性的读与写操作</title>
<style>
#box{
width: 200px;
height: 200px;
background: red;
}
a{
font-size: 20px;
}
img{
display: block;
width:400px;
}
</style>
</head>
<body>
<div id="box" class="active">这是文字</div>
<input id="input1" type="text" value="请输入密码：" />
<p id="txt">
这是文字内容
<span>
span内置容器
</span>
</p>
<a id="link" href="D:\project-pycharm\JavaScript\day02\10JS属性读与写操作.html">href常用属性的连接作用</a>
<img id="img" src="img/1.png" alt="">
<script>
var box = document.getElementById('box');
// console.log(box.id);
// console.log(box.className);
var input1 = document.getElementById('input1');
// console.log(input1.value)
box.onclick = function () {
// box.style.width = '300px';
// box.style.height = '300px';
// box.style.background = 'green'
// 使用cssText解决上面三句话
box.style.cssText = 'width:300px;height:300px;background: blue';
}
var txt = document.getElementById('txt');
//获取HTML的内容
console.log(txt.innerHTML);
//修改HTML内容
txt.innerHTML = '123456';
var link = document.getElementById('link');
console.log(link.href);
var img = document.getElementById('img');
console.log(img.src);
//tagName:当前元素使用的标签名称
console.log(link.tagName);
console.log(img.tagName);
</script>
</body>
</html>
9、揉捏DIV
代码实现如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body {
background: rgb(223, 231, 231);
}
.wrap button {
width: 120px;
height: 40px;
font: bold 16px/40px "宋体";
text-align: center;
color: #fff;
background: red;
border: none;
padding: 0;
margin: 0;
margin-left: 20px;
}
#box {
width: 100px;
height: 100px;
background: #fff;
border: 4px solid #000;
}
.mask {
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
background: rgba(0, 0, 0, .5);
display: none;
}
.select {
width: 400px;
height: 260px;
background: #fff;
border: 20px solid #999;
position: absolute;
left: 50%;
top: 50%;
margin-left: -200px;
margin-top: -130px;
}
ul {
list-style: none;
margin: 0;
padding: 10%;
}
.setList li {
height: 30px;
font: 14px / 30px "宋体";
margin-top: 10px;
}
.setList span {
float: left;
}
.setList span:not(.title) {
width: 40px;
height: 30px;
border: 1px solid #000;
margin: 0 5px;
text-align: center;
background: #e7e2e286;
color: #333;
}
#red {
background: red;
}
#yellow {
background: orange;
}
#blue {
background: skyblue;
}
.setList li:first-of-type span:not(.title) {
color: #fff;
}
.select button {
width: 80px;
height: 30px;
font: 14px / 30px "宋体";
color: #fff;
text-align: center;
background: rgb(63, 47, 153);
border: none;
}
.select button:first-of-type {
margin-left: 28%;
}
</style>
</head>
<body>
<div class="wrap">
<h2>请为下面的div设置样式:
<button id="btn">点击设置</button>
</h2>
<div id="box">
</div>
</div>
<div class="mask">
<div class="select">
<ul class="setList">
<li>
<span class="title">请选择颜色：</span>
<span id="red">红</span>
<span id="yellow">黄</span>
<span id="blue">蓝</span>
</li>
<li>
<span class="title">请选择宽（px）:</span>
<span id="w200">200</span>
<span id="w300">300</span>
<span id="w400">400</span>
</li>
<li>
<span class="title">请选择高（px）:</span>
<span id="h200">200</span>
<span id="h300">300</span>
<span id="h400">400</span>
</li>
</ul>
<button id="reset">恢复</button>
<button id="sub">确认</button>
</div>
</div>
<script>
/*
功能分析：
1.点击按钮，然后显示设置页面。
1)获取按钮：通过id或者选择器
2)绑定点击事件
3)显示设置页面：display
2.弹出层上的按钮添加事件修改div样式。
3.设置恢复按钮事件，点击之后将div样式变为初始化状态。
4.点击确定让弹出层消失，div样式保持修改后的状态。
* */
//1获取元素
var btn = document.getElementById('btn');
var mask = document.querySelector('.mask');
var box = document.getElementById('box');
var red = document.getElementById('red');
var yellow = document.getElementById('yellow');
var blue = document.getElementById('blue');
var w200 = document.getElementById('w200');
var w300 = document.getElementById('w300');
var w400 = document.getElementById('w400');
var h200 = document.getElementById('h200');
var h300 = document.getElementById('h300');
var h400 = document.getElementById('h400');
var reset = document.getElementById('reset');
var sub = document.getElementById('sub');
// console.log(red);
// console.log(btn);
//2给元素加事件
btn.onclick = function () {
//显示弹出层
mask.style.display = 'block';
};
//选择红后改变背景色
red.onclick = function () {
box.style.background = 'red';
};
yellow.onclick = function () {
box.style.background = 'yellow';
};
blue.onclick = function () {
box.style.background = 'blue';
};
w200.onclick = function () {
box.style.width = '200px';
};
w300.onclick = function () {
box.style.width = '300px';
};
w400.onclick = function () {
box.style.width = '400px';
};
h200.onclick = function () {
box.style.height = '200px';
};
h300.onclick = function () {
box.style.height = '300px';
};
h400.onclick = function () {
box.style.height = '400px';
};
//恢复
reset.onclick = function () {
// box.style.width = '100px';
// box.style.height = '100px';
// box.style.background = '#FFF';
// 上三行代码可以简化如下代码
box.style.cssText = 'wieth: 100px;height: 100px;background: #FFF'
};
//确定
sub.onclick = function () {
//隐藏弹出层
mask.style.display = 'none';
};
</script>
</body>
</html>
