JS原生第一天 (帅哥)

“流程控制语句”:if、for。

1.1 if

选择语句,给程序添加了多种执行路线。


1 if(){

2  语句1

3 }else if(){

4  语句2

5 }else if(){

6  语句3

7 }else{

8  语句4

9 }

有且仅有一条出路。注意跳楼现象。

所以我们发现,计算机的两个基本能力:1)计算能力 2)流程控制能力

1.2 for

循环语句,顾名思义,就是将结构类似的语句重复执行。


1 for(var i = 0 ; i <= 100 ; i++){

2  console.log(i);

3 }

for语句能够简化程序的书写,不用大量的ctrl+C、ctrl+V了;

for语句充分体现计算机的“奴隶性”。

比如题目:寻找1~1000之内,所有能被5整除、或者能被6整除的数字


for(var i = 1 ; i <= 1000 ; i++){

2  if(i % 5 == 0 || i % 6 == 0){

3  console.log(i);

4  }

}

上面这个算法,我们有一个术语“穷举法”

穷:  完整。欲穷千里目,更上一层楼。穷尽。

举:  列举,推举。

穷举法:就是一个一个试。我们现在要寻找1~1000之内,所有能被5整除、或者能被6整除的数字。

我们的思路,就是将1、2、3、4、……998、999、1000依次去试验。看看这个数字,能不能被5或者6整除。

这时候你说,老师,那计算机太辛苦了。你看,13这个数字,为什么还要试呢?打眼一看就不能被5、6整除。

计算机就是一个奴隶。它没有思维,它就是一个不吃饭,有着极强计算力的东西。

二、几道算法练习

2.1 题目1:报7游戏的安全数

大家从小到大,都玩儿过的一个庸俗的游戏:

游戏玩儿法就是,大家轮流报数,如果报到能被7整除的数字,或者尾数是7的数字,都算踩地雷了。就应该罚唱歌。

请在控制台输出1~60之间的所有“安全数”。

比如:

1、2、3、4、5、6、8、9、10、11、12、13、15、16、18、19、20、22、23、24、25、26、29、30……

答案见案例

2.2 题目2:水仙花数

水仙花数是一种特殊的三位数,它的特点就是,每个数位的立方和,等于它本身。

比如153就是水仙花数。因为:

13+53+33 = 153

100~999之内,只有4个水仙花数,请找出来。

特别经典的算法,是每个学习编程的人,都要会做。

答案见案例,我们只列出数值答案: 153、370、371、407


2.3 题目3:求1~100的和

求和的题目,涉及到了新的一种算法思想,叫做“累加器”。

1+2+3+4+5+6……

正确的:


1  var sum = 0; //累加器

2  //遍历1~100,将所有的数字扔到累加器里面

3  for(var i = 1 ; i <= 100 ; i++){

4  sum = sum + i;

5  }

6  console.log(sum);

初学者常见的错误:

错误1:不声明sum,不行的,因为所有的变量都要声明:


1  //遍历1~100,将所有的数字扔到累加器里面

2  for(var i = 1 ; i <= 100 ; i++){

3  sum = sum + i;

4  }

5  console.log(sum);

错误2: sum不能在for里直接声明:


1  //遍历1~100,将所有的数字扔到累加器里面

2  for(var i = 1 ; i <= 100 ; i++){

var sum = sum + i;

4  }

1  console.log(sum);

错误3: 每次for循环都要var一次,是不正确的:


1  //遍历1~100,将所有的数字扔到累加器里面

2  for(var i = 1 ; i <= 100 ; i++){

var sum = 0;//累加器

4  sum = sum + i;

5  }

6  console.log(sum);


2.4 求阶乘

所谓的阶乘,比如6的阶乘,就是1*2*3*4*5*6 = 720。

现在,计算13的阶乘。


1 var result = 1; //累乘器

2

3 for(var i = 1 ; i <= 13 ; i++){

4  result = result * i;

5 }

6 console.log(result);

2.5 用户输入一个数,输出因数的个数

昨天晚上的作业3,就是用户输入一个数,输出所偶遇能够整除它的数字。

比如,

用户输入48,此时输出1、2、3、4、6、8、12、16、24、48 。  共10个数字。

用户输入21,此时输出1、3、7、21.共4个数字。

今天的这道题目,和昨天的这个题目非常像,不过不输出完成序列,只输出个数。

也就是说,用户输入48,弹出10

用户输入21,弹出4

用户输入11,弹出2

提示:此题用到累加器。

2.6 判断质数

质数:就是只能被1和自己整除。

翻译过来:它的因数个数是2。

比如:2、3、5、7、11、13、17、19、23、29、31、37……

用户输入一个数字,弹出这个数字是否是质数。

提示,用2.5的思路。

答案见案例。


三、函数

3.1 初步认识函数


1  <script type="text/javascript">

2  console.log("你好");

sayHello(); //调用函数

4

5  //定义函数:

6  function sayHello(){

7  console.log("欢迎");

8  console.log("welcome");

9  }

10  </script>

11 </body>

函数,是一种封装。就是将一些语句,封装到函数里面。通过调用的形式,执行这些语句。

函数的使用,是两个步骤,第一步,函数的定义

语法:


1 function 函数名字(){

2

3 }

function就是英语“函数”、“功能”的意思。顾名思义,将一些功能封装到函数里面。

function是一个关键字,和var、typeof一样,都是关键字,后面要加空格。

函数名字的命名规定,和变量的命名规定一样。只能是字母、数字、下划线、美元符号,不能以数字开头。

后面有一对儿空的小括号,里面是放参数用的,下午介绍。大括号里面,是这个函数的语句。

常见错误:

不能小括号包裹大括号:


1 function sayHello({

2

3 })

不能忘了小括号对儿:


1 function sayHello{

2

3 }


第二步,函数的调用。

函数如果不调用,等于白写。

调用一个函数,太简单了,就是这个函数的名字后面加小括号对儿。

语法:


1 函数名字();

定义函数,可以在调用的后面:这是JS的语法特性,函数声明头的提升。知道就行了。


1  console.log("你好");

2  sayHello(); //调用函数

3

4  //定义函数:

5  function sayHello(){

6  console.log("欢迎");

7  console.log("welcome");

8  }

函数的功能、好处:

1) 将会被大量重复的语句写在函数里面,这样以后需要这些语句的时候,直接调用函数,不用重写那些语句。

2) 简化编程,让编程变的模块化。

3.2 函数的参数

实际参数和形式参数的个数,要相同。


1  qiuhe(3,4);

2  qiuhe("3",4);

3  qiuhe("我爱你","中国");

4

5  function qiuhe(a,b){

6  console.log(a + b);

7  }

3.3 函数的返回值


1  <script type="text/javascript">

2  console.log(qiuhe(3,4));

3

4  function qiuhe(a,b){

return a + b;

6  }

7  </script>

return就是英语“返回”的意思,那么就表示此时这个“函数调用的表达式”(红色部分),值就是这个a+b。

● 函数里面可以没有return,如果有,只能有一个。不能有多个return;

● 函数里面,return后面不允许书写程序了,也就是说写在后面的程序无效;

时间: 2024-10-06 16:20:29

JS原生第一天 (帅哥)的相关文章

图片轮播(左右切换)--js原生和jquery实现

图片轮播(左右切换)--js原生和jquery实现 左右切换的做法基本步骤跟 上一篇文章  淡入淡出 类似,只不过修改了一些特定的部分 (1)首先是页面的结构部分 对于我这种左右切换式 1.首先是个外围部分(其实也就是最外边的整体wrapper) 2.接着就是你设置图片轮播的地方(也就是一个banner吧) 3.然后是一个图片组(可以用新的div 也可以直接使用 ul-->li形式) 4.然后是图片两端的左箭头和右箭头5.然后是一个透明背景层,放在图片底部 6.然后是一个图片描述info层,放在

JS原生Ajax请求

摘录一个JS原生Ajax请求行为,原文地址:http://caibaojian.com/ajax-jsonp.html ajax({ url: "./TestXHR.aspx", //请求地址 type: "POST", //请求方式 data: { name: "super", age: 20 }, //请求参数 dataType: "json", success: function (response, xml) { //

JS(原生)事件委托:为动态创建的节点绑定事件

项目开发中经常需要为动态创建的节点绑定事件, 比如需要创建一个动态列表:在li的数量非常少的时候,为每一个li绑定事件不会存在太多性能方面的问题,但是当列表非常的长,长到上百上千甚至上万的时候(假设),为每个li绑定事件就会对页面性能产生很大的影响.当有大量元素需要绑定相同事件的时候可采用事件委托,将在目标元素上要处理的事件委托给父元素或者祖先元素 优点    事件委托对于web应用程序的性能有如下几个优点:    1.需要管理的函数变少了    2.占用的内存少了    3.javascrip

一步步教你js原生瀑布流效果实现

一步步教你js原生瀑布流效果实现 什么是瀑布流效果 首先,让我们先看一段动画: 在动画中,我们不难发现,这个动画有以下特点: 1.所有的图片的宽度都是一样的 2.所有的图片的高度是不一样的 3.图片一张挨着一张竖直排列 4.鼠标向下滚动,一直不停的加载图片 5.浏览器的宽度改变,图片的列数会进行相应的更改 那么这种效果类似现实生活中的瀑布,所以我们叫它瀑布流的效果. Js原生瀑布流效果的实现 从上述分析中,我们可以把整个效果分为以下四个部分: html+css界面搭建 瀑布流效果 浏览器向下滚动

JS原生轮播图

哈喽!我的朋友们,最近有一个新项目.所以一直没更新!有没有想我啊!! 今天咱们来说一下JS原生轮播图! 话不多说: 直接来代码吧:下面是CSS部分: 1 *{ 2 padding: 0px; 3 margin: 0px; 4 } 5 img{ 6 width: 500px; 7 height: 300px; 8 } 9 li{ 10 float: left; 11 } 12 ul{ 13 width: 2000px; 14 list-style: none; 15 position: absol

Java节点操作(JS原生+JQuery)

Java节点操作(JS原生+JQuery) 节点关系与类型 任何HTML元素,都有nodeType属性.值有1~12,常用的有: 1.元素节点 2.文本节点 8.注释节点 9.document节点(HTML文档对象) 10.DTD(文档类型定义) box.nodeType       //返回值1,获得nodeType属性 box.childNodes            //获得全部子元素 //兼容性问题 注意:在chrome,IE9 IE10高版本的浏览器里面的回车都认为是节点,IE6,7

Js原生Ajax和Jquery的Ajax

一.Ajax概述 1.什么是同步,什么是异步 同步现象:客户端发送请求到服务器端,当服务器返回响应之前,客户端都处于等待卡死状态 异步现象:客户端发送请求到服务器端,无论服务器是否返回响应,客户端都可以随意做其他事情,不会被卡死 2.Ajax的运行原理 页面发起请求,会将请求发送给浏览器内核中的Ajax引擎,Ajax引擎会提交请求到服务器端,在这段时间里,客户端可以任意进行任意操作,直到服务器端将数据返回给Ajax引擎后,会触发你设置的事件,从而执行自定义的js逻辑代码完成某种页面1 功能. 二

认识JQuery,JQuery的优势、语法、多库冲突、JS原生对象和JQuery对象之间相互转换和DOM操作,常用的方法

(一)认识JQuery  JQuery是一个JavaScript库,它通过封装原生的JavaScript函数得到一套定义好的方法    JQuery的主旨:以更少的代码,实现更多的功能 (二)JQuery的优势 1)可以像CSS一样访问和操作DOM 2)修改CSS控制页面外观 3)简化JS代码操作 4)事件代理更加容易 5)动画效果使用方便 6) Ajax技术更加完美 7)大量的基于Jquery的插件 8)可以自定义扩展功能插件 (三)JQuery的语法 格式:$(selector).actio

仿jQuery的siblings效果的js原生代码

仿jQuery的siblings效果的js原生代码 <previousSibling> 属性返回选定节点的上一个同级节点(在相同树层级中的前一个节点). <nextSibling> 属性返回被选节点的下一个同级节点(在相同树层级中的下一个节点). 如果不存在这样的节点,则该属性返回 null.//元素节点的节点类型是 1  obj.previousSibling.nodeType ==1; reverse() 方法用于颠倒数组中元素的顺序. push() 方法可向数组的末尾添加一个