for 循环
格式：
for(语句1 ; 语句2; 语句3){
被执行的代码块
}
语句1：最先执行，而且永远只执行一次
语句2：执行完语句1，就执行语句2，当语句2条件为 true 时，执行循环体中的代码，执行完循环体中的代码后执行语句3
语句3执行完之后，那么会再次执行语句2
- 执行顺序
1.先执行变量 var i = 0;（并且只执行一次）
2.然后执行 判断条件
3.当条件成立，执行循环体中的语句
4.执行完循环体中的语句，执行++
5.执行完++，开始循环：2、3、4、2、3、4......直到件为false时候跳出循环
方式1
for(var i = 0; i < 5; i ++){
console.log(i);
}
方式2：
var i = 25;
for(; i > 9; i--){
console.log(i);
}
break 和 continue
break 和 continue 只出现在循环体或者 switch 中
break：遇到 break 立即跳出循环体，结束循环
continue:遇到 continue 跳出本次循环继续下次循环
打印1~100 的整数，排除能被3整出的数
for (var i = 0 ; i <= 100; i++){
if(i % 3 == 0){
continue;
}
console.log(i);
}
函数
- 什么是函数
函数是具有特定功能的代码块 - 语法：
函数名称：遵循标识符命名规范
function 函数名称(){
这里是要执行的代码
}
注意点：
函数想要被执行，必须要手动调用
- 函数如何来调用：
函数名称();
其中()表示立即执行 - 补充：如果将函数直接用变量接收，那么函数名可以不写，调用时直接使用 变量名();来调用
函数的几种类型
- 返回值：什么是返回值
当函数执行完毕的时候，如果向得到一个结果那么用 return 返回，用 return 返回的值就是函数的返回值。
无参无返回值
function printRose(){
console.log(" @");
console.log("\\|/");
console.log(" |");
}
有参无返回值
function printRose(number)
{
for(var i=0; i < number; i++){
console.log(" @");
console.log("\\|/");
console.log(" |");
}
}
有参有返回值
function sum(a,b)
{
return a + b;
}
var result = sum(12,4) + 10;
console.log(result);
无参数有返回值
function test() {
return "123";
}
var result2 = test();
console.log(result2);
企业开发中，一般没有返回值的函数较多，因为编程主要的是注重过程
递归函数
什么是递归函数：
定义：就是自己调用自己
注意点：
1.递归函数有性能问题，开发中几乎不用
2.递归函数必须有结束条件，不然就会进入死循环
变量的作用域
- 变量分为两种
- 局部变量(也叫内部变量)
定义：
就是声明周期在函数内部的变量或者函数的参数
作用域
只有在函数内部能使用
生命周期：
从定义的那一行开始，当函数执行完毕的时候死去。函数遇到 } 执行结束 - 全局变量
定义
声明在函数外面的变量
作用域
可以在整个 JS 文件中使用
声明周期
只有当当前的网页关闭才能释放
注意点
开发中全局变量尽量避免使用，耗内存
函数的提升
- 第一种提升
在函数内部或外部，如果把一个值赋值给未声明的变量，那么这个变量会被提升为全局变量 - 第二种提升
var num = 10;
function test(){
console.log(num);
num = "20"
}
test();
console.log(num);的打印结果为undefinded
这么写相当于
var num = 10;
function test(){
var num;
console.log(num);
num = 20;
}
test()
dom 与 对象
- 什么是 dom
当浏览器被加载时，浏览器会创建
dom 对象模型，被称为dom，比喻成一棵长满标签的树 - 什么是对象
内部封装了很多功能的功能组
JS 控制样式
- 样式
// 1.拿到box这个标签
var dom = document.getElementById("box");
// 2.修改他的样式的width为200
box.style.width = "200px";
//另一种写法 box.style.width = 200 + “px”；
//连接符都变成了驼峰命名法
box.style.backgroundColor = "pink";
- Document 引申为 documen
- 如果一个对象想要调用其方法，通过 . 来调用
- 赋值用 ”“ 引起来
JS 控制结构
- 修改标签里的内容
dom.innerHTML = "随便写";
dom.innerHTML = "<p>随便写</p>"
// innerHTML 就是往标签里添加内容
JS 事件的三要素
- 三要素
- 事件源
- 事件
- 事件处理程序（就是函数）
事件源.事件 = 事件处理程序
dom.ondblclick = function(){
dom.style.backgroundColor = "green";
}
- JS 事件都是以 on 开头
入口函数
- 当整个文档加载完毕才执行
<head>
window.onload = function(){
var box = document.getElementById("box");
console.log(box);
box.onclick = function (){
box.style.backgroundColor = "green";
}
}
</head>
<body>
<div class="box" id="box"></div>
</body>
练习以及练习的抽离
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
padding: 0;
margin: 0;
}
.box{
border: 1px solid #000;
text-align: center;
background-color: deepskyblue;
}
.box img{
width: 80px;
cursor: pointer;
}
body{
background: url(images/huanfu/1.jpg) 0 0 no-repeat;
}
</style>
</head>
<body id="main">
<div class="box">
</div>
<script>
// 1.先得到对应的标签
var img1 = document.getElementById("icon1");
var img2 = document.getElementById("icon2");
var img3 = document.getElementById("icon3");
var img4 = document.getElementById("icon4");
var img5 = document.getElementById("icon5");
var body = document.getElementById("main");
// 2.事件源.事件 = 事件处理程序
img1.onclick = function () {
// 3.更改body的背景图片即可
body.style.background = "url(images/huanfu/1.jpg) 0 0 no-repeat";
}
img2.onclick = function () {
// 3.更改body的背景图片即可
body.style.background = "url(images/huanfu/2.jpg) 0 0 no-repeat";
}
img3.onclick = function () {
// 3.更改body的背景图片即可
body.style.background = "url(images/huanfu/3.jpg) 0 0 no-repeat";
}
img4.onclick = function () {
// 3.更改body的背景图片即可
body.style.background = "url(images/huanfu/4.jpg) 0 0 no-repeat";
}
img5.onclick = function () {
// 3.更改body的背景图片即可
body.style.background = "url(images/huanfu/5.jpg) 0 0 no-repeat";
}
</script>
</body>
</html>
抽离封装
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
padding: 0;
margin: 0;
}
.box{
border: 1px solid #000;
text-align: center;
background-color: deepskyblue;
}
.box img{
width: 80px;
cursor: pointer;
}
body{
background: url(images/huanfu/1.jpg) 0 0 no-repeat;
}
</style>
</head>
<body id="main">
<div class="box">
</div>
<script>
// 1.先得到对应的标签
var body = document.getElementById("main");
// 提供一个函数
function changeImg(tag,url) {
var dom = document.getElementById(tag);
// 事件源.事件 = 函数
dom.onclick = function () {
// 更改body的背景图片图片
body.style.background = url;
}
}
changeImg("icon1","url(images/huanfu/1.jpg) 0 0 no-repeat");
changeImg("icon2","url(images/huanfu/2.jpg) 0 0 no-repeat");
changeImg("icon3","url(images/huanfu/3.jpg) 0 0 no-repeat");
changeImg("icon4","url(images/huanfu/4.jpg) 0 0 no-repeat");
changeImg("icon5","url(images/huanfu/5.jpg) 0 0 no-repeat");
</script>
</body>
</html>
三次封装
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
padding: 0;
margin: 0;
}
.box{
border: 1px solid #000;
text-align: center;
background-color: deepskyblue;
}
.box img{
width: 80px;
cursor: pointer;
}
body{
background: url(images/huanfu/1.jpg) 0 0 no-repeat;
}
</style>
</head>
<body id="main">
<div class="box">
</div>
<script>
// 1.先得到对应的标签
var body = document.getElementById("main");
// 提供一个函数
function changeImg(tag,url) {
var dom = document.getElementById(tag);
// 事件源.事件 = 函数
dom.onclick = function () {
// 更改body的背景图片图片
body.style.background = url;
}
}
for(i = 1; i < 6; i++){
changeImg("icon" + i,"url(images/huanfu/" + i + ".jpg) 0 0 no-repeat");
}
</script>
</body>
</html>
数组的声明
- 什么是数组
数组是一个对象，是一个集合，就是用来存储其他变量的 - 声明数组的方式
- 第一种（几乎没人用）
var myArray = new Array();
- 第二种
var myArr = [];
先定义后初始化
var arr = [];
arr[0] = 12;
arr[1] = 15;
arr[2] = 15;
定义的同时初始化
var arr2 = [12,3,4];
- 数组的 .push 方法
arr2.push(45);
//从数组的最后添加元素
