写程序的思路
- 首先要了解需求，分析需求
- 将需求以注释的形式写出来
- 根据需求解决问题（列出每一步要做什么），同时写出注释
- 根据注释写出代码
- 验证代码，查看是否存在问题
注：
在写代码的过程中没有把握的变量，可以打印出来，看看是否获取到了这个元素
javaScript循环
- for循环
- while循环
for循环
格式如下：
// for(语句1;语句2;语句3){
// 执行的代码
// }
// 语句1：变量的初始值
// 语句2：循环的条件
// 语句3：执行代码执行过后再执行（通常是自增或自减）
案例：
// 打印10行*，每行有5个
for(var i = 1 ; i <= 10; i++){
document.write('<br>'); // 外层循环负责打印10行
for(var j = 1 ; j <= 5 ; j++){
document.write('*'); // 里层循环负责打印5个*
}
}
for…in循环
用来遍历对象中的属性
// 用法
// for(prop in object){
// console.log(prop);// 对象的属性
// console.log(object[prop]);// 对象的属性值
// }
// 案例
var obj = {
name:'对象';
age:'18'
}
for ( x in obj){
console.log(x);// name,age
console.log(obj[x]);// 对象，18
}
补充
- break语句
- continue语句
break语句
用于跳出循环，终止循环
for(var i = 1; i < 11; i++){
if(i == 5){
break; // 当i等于5时结束整个循环，所以结果是打印出了4个*
}
document.write('*');
}
continue语句
用于跳出循环中的某一轮，继续进行其他的循环
for(var i = 1; i < 11; i++){
if(i == 5){
continue; // 当i等于5时，跳过这一轮循环，不会打印*，然后继续后面的循环，所以最后的结果是打印了九个*
}
document.write('*');
}
while循环
只要指定的条件为ture，那么就会一直执行代码
格式
while(条件){
// 条件成立时进行的代码
// 自增或自减
}
注意：
要谨防循环变成死循环，所以后面的自增或者自减不能忘掉
以下是一个经典的死循环，不要轻易尝试
while(true){
console.log('不要尝试');
}
案例：
var i = 1;
while(i<11){
document.write('*');
i++;
}
do…while
格式
do{
执行代码
自增或自减
}while(条件)
案例：
var i = 1;
do{
document.write('*');
i++;
}while(i<11)
while循环和do…while循环的区别
- while循环是先判断条件再去执行代码
- do…while循环先执行一次代码之后再去判断条件，所以do…while循环最少能执行一次
补充小技巧：打断点
在页面检查中，找到Sources，可以通过它来检查循环的每一步
函数 function
函数是由事件驱动（触发）或者当它被调用时执行的可重复使用的代码块
函数function的组成部分
- 函数名
- 参数
- 函数体
- 返回值（包含在函数体之内）
函数的使用方法：
声明函数： function 函数名（参数）{
函数体
返回值
}
调用函数：函数名（参数） // **加上括号，表示立刻执行代码**
注意
函数是通过function关键字声明的，它同样是具有声明提升的
函数的分类
- 根据有无函数名
- 命名函数
- 匿名函数
- 根据有无参数
- 传参函数
- 无参函数
- 带有返回值的函数 return
根据有无函数名
- 命名函数：
function func(){ // 命名函数
console.log('这是一个命名函数')；
}
func();// 调用函数
document.onclick=func;// 通过事件来触发，这里函数名后面如果加上了（）那么代码就会立刻执行
- 匿名函数
document.onclick=function(){
console.log('这是一个匿名函数');
}
提示：我们还可以使用变量来储存一个匿名函数
var func =function(){ // 我认为这里就相当于给这个命名函数进行了命名的操作
console.log(' 这是一个函数‘)
}
func() // 调用函数
根据有无参数
参数：在调用函数时根据传入的参数的不同，返回不同的结果
参数呢又分为了形参和实参，我们可以通过案例来直观地感受一下
function func(x){ // 声明函数
console.log(x)
};
func('123')；// 调用函数 输出结果为 123
我们把上述案例中的x称为形参（形式上参与的变量），把调用函数时输入的123称为实参（实际上参与的变量）
- 传参函数
有参数的参与
function func(x){ // 声明函数
console.log(x)
};
func('123')；// 调用函数 输出结果为 123
- 无参函数
没有参数参与
function func (){
console.log("这是一个无参函数");
}
func();
##总结
- 今天学习的内容中，循环方面还是比较头疼的。我在使用for循环答应正方形、三角形、平行四边形时是没有遇到什么问题的，但是用while循环时出现的问题，以下是我打印三角形刚开始写的代码
var a = 1;
var b = 1;
while (a <= 10) {
while (b <= a) {
document.write('@');
b++;
}
document.write('<br>');
a++;
}
一开始我是这样写的，但是呈现出来的结果是不对的，后面我将b的声明放到了第一层循环里面，便成功了
var a = 1;
while (a <= 10) {
var b = 1;
while (b <= a) {
document.write('@');
b++;
}
document.write('<br>');
a++;
}
我认为应该是把b的声明放在循环里的原因是，每次循环都会让b从1开始，这样才能打印出相应的@，如果将b的声明放在循环外面，那么他的值便会固定住了，也正是这个原因才导致出现了错误
2. 今天还有一个收获是：也可以通过js代码在页面中打印一个表格出来，下面是一个乘法表的表格
// 思路
// 首先我们用外层循环打印九行
// 里层循环第一行循环1次，第二层循环2次，所以总结得出里层循环i次
document.write("<h2>" + '九九乘法表' + '</h2>')
document.write('<hr>')
document.write('<table>'); // 打印表格
for (var i = 1; i < 10; i++) { // 外层循环9次
document.write('<tr>');
for (var j = 1; j <= i; j++) { // 里层循环i次
document.write('<td>');
document.write(j + '*' + i + '=' + j * i); // 输出结果
document.write('</td>'); // 还有一种写法 document.write('<td>' + j + '*' + i + '=' + j * i + '</td>');
}
document.write('</tr>');
}
document.write('</table>')
我们使用js打印出表格以后，就可以通过css控制表格的样式
3. 今天有一个作业是鸡兔同笼的问题，我使用了for循环以及if语句做了出来，应该还有可以改进的地方吧
// 思路：
// 一共有100只脚，求鸡和兔分别有多少只
// 鸡有两只脚，兔子有四只脚
// 我们可以拿鸡当参照物，鸡有一只时，兔子有多少只，只要把所有的情况打印出来就可以了
var i ; // 这是鸡的数量
document.write('<ul>');
for(i = 0 ; i <= 50 ; i++){ // 因为一共只有100只脚，鸡最多有五十只，所以i<=50
var j = (100 - i*2)/4; // j是兔子的数量，求当鸡有i只时，兔子有几只
if(j%1==0){ // j%1==0时说明j是整数，那这样的情况就是我们需要取的
document.write('<li>'+'鸡有'+ i +'只，兔有' + j +'只' + '</li>');
}
}
document.write('</ul>');
- 学无止境，坚持加油，加油坚持
