web前端javaScript基础教程

大家好,我是轻风乍起,本人从事前端8年了,总结了很多学习资料,有时间我会普及一些入门和提升建议,思想提升了,路线明确了自然就好了,于是就整理了下这篇学习路线文章,干货福利内容 在文末↓

一,循环语句
1.1 累加器
累加器:我们不想输出所有的可能值,只想输出一个最后满足条件的总数。
累加器:
1累加器是一个变量,必须书写在for循环外面。
2累加器初始值是0,有一个满足条件的结果累加器自加1
3累加器最终结果也是在for外面输出

案例:求一个正整数约数总个数。
1// 获取数字
2var num = parseInt(prompt("请输入数字"));
3// 求num的约数总个数
4// 累加器变量声明,初始值0
5var sum = 0;
6for (var i = 1 ; i <= num ; i ++) {
7 // 有一个约数,sum自加1
8 if (num % i === 0) {
9 sum ++;
10 }
11}
12
13// 将sum结果输出在for外面
14console.log(num + "的约数总个数是:" + sum + "个。");

1.2 累乘器
1声明累乘器,必须书写在for外面
2累乘器初始值1
3累乘器最终在for外面输出

案例:求一个数字阶乘
5! = 54321
1// 获取数字6
2var num = parseInt(prompt("请输入数字"));
3// 累乘器声明 初始值
4var cheng = 1;
5for (var i = num ; i >= 1 ; i --) {
6 cheng *= i;
7}
8// 结果在for外面输出
9console.log(cheng);

案例:判断任何数字是不是质数。
质数:除了1和他本身之外没有其他的约数
比如:5 除了1和5没有其他的约数,5质数
6除了1和6本身之外,还有2,3 6不是质数

1// 获取数字
2var num = parseInt(prompt("请输入数字"));
3// 求num的约数总个数
4// 累加器
5var sum = 0;
6// 穷举思想
7for (var i = 1; i <= num ; i ++) {
8 // 限制 约数
9 if (num % i === 0) {
10 // i是num约数 ,sum自加1
11 sum ++;
12 }
13}
14// sum最终结果
15// 判断Num的约数总个数是不是等于2
16if (sum === 2) {
17 console.log(num + "是质数");
18}else {
19 console.log(num + "不是质数");
20}
1.3 do while
do while语句是后测试循环语句,直接执行循环语句,然后才进行出口判断,如果条件为真,继续执行循环语句;如果条件为假,立即跳出循环语句
do while语句循环变量必须书写在循环语句的外面。
1// do while后测试循环语句 循环变量必须书写在循环语句的外面
2var i = 3;
3do {
4 console.log(i);
5 i += 2;
6}while (i < 10)
7
8
9// 后面的
10console.log(i + "结束");
11
12/
13var i=3;输出3;i+=2;再进行出口判断
14 i=5;i<10真;输出5;i+=2
15 i=7;i<10真;输出7;i+=2
16 i=9;i<10真;输出9;i+=2
17 i=11;i<10假,立即跳出循环语句,执行后面的
18 输出11结束
19
20
/

do while即使第一个条件为假,也会执行一次循环语句。

1.4 while语句
while语句前测试循环语句
循环变量也是和do while一样,书写在外面
1while () {}

1// while前测试循环语句 循环变量必须书写在循环语句的外面
2// 声明循环变量
3var i = 3;
4while (i < 15) {
5 console.log(i);
6 i += 4;
7}
8/
9vari=3;i<15真;输出3;i+=4
10i=7;i<15真;输出7;i+=4
11i=11;i<15真;输出11;i+=4
12i=15;i<15假立即结束
13
/

1.5 break
break:我已经找到满足条件的答案,不再继续向下执行
1for (var i = 1; i < 20 ; i += 2) {
2 if (i % 3 === 0) {
3 console.log(i);
4 break;
5 }
6}
7// 后面的
8console.log(i + "结束");
9/
10vari=1;i<20真;if条件假
11i=3;i<20真,if条件真 {输出3;执行break立即跳出for}
12执行后面的语句
133结束
14
/

break:for语句,do while语句 ,while中,执行break强制结束break所在层的循环,不能控制外层循环
1for (var i = 1; i < 3; i ++) {
2 for (var j = 1; j < 3; j ++) {
3 if (j == 2) {
4 console.log(i,j);
5 // break只能控制j不能控制i
6 break;
7 }
8 }
9}
10
11console.log(j);
12/
13vari=1;i<3真;varj=1;j<3真,判断j==2假
14 j=2;j<3真,判断j==2真{输出1,2;执行break立即跳出j循环}
15i=2;i<3真varj=1;j<3真,判断j==2假
16 j=2;j<3真,判断j==2真{输出2,2;执行break立即跳出j循环}
17i=3;i<3假立即跳出i循环
18执行后面的语句2
19
/

break也可以控制外层循环,通过添加标签绑定。
1// break通过标签绑定也可以控制外层循环
2wai: for (var i = 1; i < 3; i ++) {
3 for (var j = 1; j < 3; j ++) {
4 if (j == 2) {
5 console.log(i,j);
6 // break控制标签所在层的循环i,不能控制j
7 break wai;
8 }
9 }
10}
11// i后面的语句
12console.log(i);
13
14/
15vari=1;i<3真;varj=1;j<3真;j==2假
16 j=2;j<3真;j==2真;输出1,2;执行break wai;立即跳出i循环
17执行后面的语句输出1
18
/

想要学习前端的小伙伴,可以加qq群:728700491 分享你前端资料

原文地址:https://blog.51cto.com/12864747/2421818

时间: 2024-10-27 11:38:16

web前端javaScript基础教程的相关文章

web前端javaScript基础第六天

目前在从事前端工作,特别总结javaScript基础知识供大家学习,本人特总结一下使用方法献给目前正在学习web前端的小伙伴们,希望你们在前端领域闯出属于自己的一片天空来,需要sublime软件安装包的或者前端资料的,可以加我创建的前端群 937268047 函数:变量作用域:js只有函数能够关住变量的作用域全局变量局部变量:在函数内部声明的变量,只能在函数内部使用 函数的形参是局部变量,形参只能在函数内部使用全局变量作用:一个变量可以被多个函数改变,这个变量一定是全局变量(信号量) 函数作用域

[10]Web前端JavaScript基础及面试技巧视频讲解[2.3G]

视频试看链接:https://pan.baidu.com/s/1mieNx5A 淘宝购买链接:https://item.taobao.com/item.htm?spm=0.7095261.0.0.4f399318UV8kDW&id=561820132065   总目录: 子文件目录1: 子文件目录2: 视频:

Web前端开发基础:HTML、CSS、JavaScript分别实现什么功能?

相信正在学习Web前端知识的小伙伴们都知道,学习Web前端开发基础技术需要掌握:HTML.CSS.JavaScript,那么这三个都是分别实现什么功能的呢?下面和小编一起来看看吧! 一.HTML是网页内容的载体 内容就是网页制作者放在页面上想要让用户浏览的信息,可以包含文字.图片.视频等. 在这里小编建了一个前端学习交流扣扣群:132667127,我自己整理的最新的前端资料和高级开发教程,如果有想需要的,可以加群一起学习交流 二.CSS样式是表现 就像网页的外衣,比如:标题字体.颜色变化.为标题

web前端开发基础班课程大纲

前端开发是创建Web页面或app等前端界面呈现给用户的过程.前端开发通过HTML,CSS及JavaScript以及衍生出来的各种技术.框架.解决方案,来实现互联网产品的用户界面交互.Web前端工程师,他是伴随着web兴起而细分进去的行业.Web前端的岗位职责是利用HTML.CSS.JavaScript.DOM.Flash等各种Web技能结合产品的界面开发.web前端开发入门教程要学哪些内容呢? 首先第一阶段就是基础学习, 1.HTML基础 内容包括:(HTML简介与历史版本.常用开发软件.常见标

nodejs 和web前端JavaScript什么区别

web前端javascript组成: ECMAScript,(是js的标准,js是它的具体实现和扩展,它描述语言的语法和基本对象,如:语法,运算符,语句,继承机制,数据结构以及一些内置对象) DOM(文档对象模型),描述处理网页内容的方法和接口,将整个文档document解析成dom树供用户使用js对文档进行处理. BOM(浏览器对象模型),描述可以和浏览器窗口交互的方法和接口(对象结构),如:window对象,history.location.navigator等. nodejs除了语言基础E

Web前端之基础知识

学习web前端开发基础技术需要掌握:HTML.CSS.Javascript 1.HTML是网页内容的载体 内容就是网页制作者放在页面上想要让用户浏览的信息,可以包含文字.图片.视频等. 2.CSS样式是表现 就像网页的外衣,比如:标题字体.颜色变化.为标题加入背景图片.边框等. 所有这些用来改变内容外观的东西称之为表现. 3.JavaScript是用来实现网页上的特效效果 比如:鼠标滑过弹出下拉菜单.鼠标滑过表格的背景颜色改变.焦点新闻的轮换. 可以理解为:有动画的.有交互的一般都用JavaSc

web前端——html基础笔记 NO.1

HTML+CSS基础课程 Html和CSS的关系 学习web前端开发基础技术需要掌握:HTML.CSS.JavaScript语言.下面我们就来了解下这三门技术都是用来实现什么的: 1. HTML是网页内容的载体.内容就是网页制作者放在页面上想要让用户浏览的信息,可以包含文字.图片.视频等. 2. CSS样式是表现.就像网页的外衣.比如,标题字体.颜色变化,或为标题加入背景图片.边框等.所有这些用来改变内容外观的东西称之为表现. 3. JavaScript是用来实现网页上的特效效果.如:鼠标滑过弹

Web前端开发基础 第一天(Html和CSS)

学习web前端开发基础技术需要掌握:HTML.CSS.JavaScript语言.下面我们就来了解下这三门技术都是用来实现什么的: 1. HTML是网页内容的载体.内容就是网页制作者放在页面上想要让用户浏览的信息,可以包含文字.图片.视频等. 2. CSS样式是表现.就像网页的外衣.比如,标题字体.颜色变化,或为标题加入背景图片.边框等.所有这些用来改变内容外观的东西称之为表现. 3. JavaScript是用来实现网页上的特效效果.如:鼠标滑过弹出下拉菜单.或鼠标滑过表格的背景颜色改变.还有焦点

《JavaScript基础教程(第8版)》PDF

简介:JavaScript基础教程(第8版)循序渐进地讲述了JavaScript及相关的CSS.DOM.Ajax.jQuery等技术.书中从JavaScript语言基础开始,分别讨论了图像.框架.浏览器窗口.表单.正则表达式.用户事件和cookie,并在上一版的基础上新增了两章,讲述jQuery框架的基础知识.本书不仅介绍了基础知识和使用方法,也深入探讨了JavaScript应用示例. 封面: 目录:第1章 了解JavaScript 11.1 JavaScript是什么 11.2 JavaScr