Hey James, wasn't it kind of annoying that you had to type out
the same if statement twice?
>> Yeah. I think I broke one of the cardinal rules of programming: don't
repeat yourself.
>> Mm-hm.
Yeah.
And with that in mind,
I think it's probably time that we should talk about loops.
>> So is that why we're looking at an animated GIF?
>> Okay. That's one reason.
The second is because that is an awesome GIF.
But really, I think the important part here is that a GIF repeats itself
automatically.
We don't have to tell a GIF to play itself again, it just does it.
And in fact, JavaScript gives us a few tools to do this as well.
And we're going to go ahead and start with a while loop.
>> A while loop lets us repeat a piece of code so
long as some condition evaluates to true.
Once it doesn't evaluate to true, we exit the while loop.
The syntax is while condition.
And then in curly braces, some sort of code here.
So for this one we have doSomething();.
>> Hey let's let's show an example.
>> Okay. While(cameron.job ==="course dev") should make courses.
>> I like that example.
Notice how this is similar to python, but it includes conditions in parentheses,
and actions and curly braces, just like with if statements.
Remember, if the condition evaluates to true,
we'll do the action, then ask ourselves again, is the condition true?
We'll continue following this loop.
Until the condition is no longer true, at which point will exit the loop.
Over here, so long as my job is course developer, I'll keep making courses.
The while loop will ask itself again, is Cameron still a course developer?
If so, make courses.
Until at some point,
when my job is no longer course developer, at which point will exit the loop.
>> How might that happen?
>> Hm.
Perhaps there's a limit on how many courses I can make.
10 courses maximum.
You know what?
Let's see what this looks like in code.
Outside of the loop,
I'll create an iterator called courses, which is going to start at 0.
This is going to keep track of how many courses I've made.
After making a course,
I'm going to add 1 to the number of courses that I've made.
Let's add an if statement to our loop that checks if the number of courses I've
made is 10.
And if so, changes my job to learning specialist.
Afterwards, the loop exits.
>> Interesting.
Let's check to see if that works.
Here's the make course function that console logs Made a course every time
it's run.
And lets console.log,(cameron.job) when we're finished running the loop.
So, when we run it,
we can see that it's printed made a course to the counsel log 10 times.
And then when it finished,
it printed out learning specialist, Cameron's new job.
مهلاً يا جيمس، ألم يزعجك إلى حد ما أن تضطر إلى كتابة
العبارة الشرطية نفسها مرتين؟
>> نعم. أعتقد أني خرقت إحدى القواعد الأساسية للبرمجة: لا
.تكرر نفسك
.>> امم-همم
.نعم
،مع وضع هذا في الحسبان
.أعتقد أنه ربما حان الوقت الذي ينبغي أن نتحدث فيه عن التكرار الحلقي
>> إذًا هل هذا هو السبب في أننا ننظر الآن إلى صورة GIF متحركة؟
.>> Okay. هذا أحد الأسباب
.السبب الثاني هو أنها صورة GIF رائعة
لكن حقًا، أعتقد أن الجزء الهام هنا هو أن صور GIF تكرر نفسها
.بشكل تلقائي
.لا يتعين علينا أن نطلب من أي صورة GIF تشغيل نفسها مرة أخرى، فهي تفعل ذلك من تلقاء نفسها
.وفي الواقع يمنحنا JavaScript أيضًا بضعة أدوات للقيام بذلك
.وسنمضي قدمًا ونبدأ مع تكرار حلقي while
>> يسمح لنا التكرار الحلقي while بتكرار التعليمات البرمجية
.طالما كانت بعض الشروط صحيحة
.وبمجرد عدم توافر الشروط الصحيحة، نخرج من التكرار الحلقي while
.الصيغة هي شرط while
.ثم سنجد بعض التعليمات البرمجية هنا في أقواس متعرجة
.;()ولهذه الحالة لدينا doSomething
.>> مهلاً، دعنا نعرض مثالاً
.>>حسنًا. While(cameron.job ==="مطور دورات تدريبية") يجب أن تصمم دورات تدريبية
.>> يعجبني هذا المثال
،لاحظوا كيف يتشابه هذا مع python، إلا أنه يحتوي على شروط ما بين الأقواس
.وعلى الأفعال والأقواس المتعرجة، مثل ما تحتوي عليه العبارات الشرطية بالضبط
،تذكروا أنه إذا كان الشرط صحيحًا
فسنقوم بالفعل بهذا الإجراء، ثم نسأل أنفسنا ثانية، هل الشرط صحيح؟
.وسنواصل متابعة هذا التكرار الحلقي
.في اللحظة التي لا يعد الشرط فيها صحيحًا، سنخرج من التكرار الحلقي
.هنا، طالما أن وظيفتي هي مطور دورات تدريبية، فسأستمر في تصميم الدورات التدريبية
سيسأل التكرار الحلقي while نفسه مرة أخرى، هل لا زالت Cameron تعمل كمطور دورات تدريبية؟
.إذا كانت الإجابة بنعم، فلتصممي الدورات التدريبية
وفي مرحلة ما، عندما
.أتوقف عن العمل كمطور دورات تدريبية، سأخرج من التكرار الحلقي عند هذه النقطة
>> كيف لهذا أن يحدث؟
.>> همم
.ربما يوجد حد لعدد الدورات التدريبية التي يمكنني تصميمها
.10 دورات تدريبية بحد أقصى
أتعلمون؟
.لنرى كيف يبدو هذا بالتعليمات البرمجية
،بخلاف التكرار الحلقي
.سأنشئ مكررًا اسمه courses، والذي سيبدأ من 0
.سيقوم هذا بتتبع عدد الدورات التي أقوم بتصميمها
،وبعد تصميم أي دورة
.سأضيف 1 إلى عدد الدورات التدريبية التي قمت بتصميمها
لنضيف عبارة شرطية إلى حلقتنا التي تتحقق مما إذا كان عدد الدورات التي قمت
.بتصميمها قد بلغ 10
.وإذا بلغ 10، ستغير وظيفتي إلى أخصائي تعليمي
.وبعد ذلك، ينتهي التكرار الحلقي
.>> مثير للاهتمام
.لنتحقق من نجاح ذلك
هذه هي دالة make course التي تسجلها وحدة التحكم Made a course في كل مرة
.تقوم فيها بالتشغيل
.وهي تترك console.log،(وظيفة.كاميرون) عندما ننتهي من تشغيل التكرار الحلقي
،لذا عندما نقوم بتشغيلها
.يمكننا أن نرى أنها طبعت عبارة made a course على سجل وحدة التحكم 10 مرات
،وعندما انتهت بعد ذلك
.قامت بطبع عبارة أخصائي تعليمي، وظيفة كاميرون الجديدة
제임스, 똑같은 if문을 2번이나 입력하는 게
귀찮지 않았나요?
>>귀찮았습니다 일을 반복하지 말라는
프로그래밍의 기본적인 규칙을 어긴 것 같군요
그렇습니다
그것을 생각하면서
루프에 대해 배워볼게요
>>그래서 우리가 애니메이티드 GIF를 보고 있는 건가요?
>>네 첫 번째 이유입니다
두 번째 이유는 멋진 GIF이기 때문이죠
여기서 중요한 점은
GIF는 자동으로 반복된다는 것이죠
반복 재생하라고 말하지 않아도 스스로 반복합니다
자바스크립트에도 스스로 반복하게 만드는 몇 가지 도구가 있는데요
while 루프부터 시작해보도록 하겠습니다
>>while 루프는 어떤 조건이 참인 경우에
계속 코드를 반복하게 합니다
참이 아닐 때 while 루프에서 빠져나오게 됩니다
문법은 while(조건) 다음에 중괄호를 입력하고
그 사이에 코드를 입력하면 됩니다
여기서는 doSomething(); 코드군요
>>예시를 보여줍시다
>> 알겠습니다 While(cameron.job ==="course dev")가 참일 때
카메론은 강의를 만들어야 합니다(MakeCourse)
>>이 예시 마음에 드네요
파이썬과 비슷하다는 것 알아두세요
하지만 자바스크립트의 while문은 if문처럼
조건을 소괄호 안에, 명령은 중괄호 안에 입력해야 합니다
조건이 참일 때 명령이 실행됩니다
그리고 조건이 참인지 다시 확인합니다
이렇게 루프가 반복되고
조건이 더 이상 참이 아닐 때 루프를 벗어납니다
제 직업이 강의 개발자이므로 저는 강의를 계속 만들 겁니다
while 루프는 카메론이 아직도 강의 개발자인지 스스로 다시 물어보겠죠
참이라면, 강의를 만들고
어떤 지점에서
제 직업이 강의 개발자가 아니게 될 때 루프를 빠져나갈 겁니다
>>어떻게 그런 일이 있을 수 있죠?
제가 만들 수 있는 강의의 한계가
10개라고 해봅시다
코드를 함께 볼까요
루프 바깥에
0부터 시작하는 courses라는 반복자를 만들어볼게요
제가 몇 개의 강의를 만들었는지 알아낼 겁니다
강의를 만든 후
course에 1을 더할 거예요
제 강의가 10개가 되는지 확인하기 위해
루프 안에 if문을 넣어보겠습니다
if문이 참이면 제 직업은 학습 전문가로 바뀔 거예요
그리고 루프를 탈출할 것입니다
>>재미있네요
제대로 실행되는지 볼까요?
Made a course를 console.log하는
makeCourse라는 함수가 있어요
루프가 끝났을 때 cameron.job을 console.log 합니다
실행 시킬 때
Made a course가 console.log로 10번 출력된 것이 보이네요
10번이 지나서
카메론의 새 직업인 학습 전문가를 출력했군요
Ei, James, não era esse tipo de aborrecimento que você tinha para digitar
a mesma instrução if duas vezes?
Sim! Acho que quebrei uma das principais regras
da programação: não se repita.
É! E com isso em mente,
acho que essa é a hora de falarmos sobre loops.
É por isso que estamos olhando um GIF animado?
Certo. Esse é um motivo.
O segundo é porque esse é um GIF incrível.
Mas acho mesmo que o importante aqui é que um GIF
se repete automaticamente.
Não precisamos dizer a um GIF para se reproduzir novamente.
Ele já faz isso.
Na verdade, o JavaScript também nos dá algumas ferramentas para isso.
Vamos em frente e começar com um loop while.
Um loop while nos permite repetir parte do código,
contanto que alguma condição seja avaliada como verdadeira.
Se ela não for avaliada como verdadeira, encerramos o loop while.
A sintaxe é while, condition
e, entre chaves, algum tipo de código aqui.
Para este, temos doSomething();.
Ei, vamos mostrar um exemplo.
OK. While(cameron.job ==="course dev"),
cuja condição deve ser makeCourse.
Gosto desse exemplo.
Observe como isso é semelhante ao python, mas inclui
condições entre parênteses,
ações em chaves, como as instruções if.
Lembre-se de que, se a condição for avaliada como verdadeira,
executaremos a ação. Perguntamos novamente,
é verdadeira?
Continuaremos seguindo este loop.
Até que a condição não seja mais verdadeira,
ponto em que encerraremos o loop.
Aqui, como meu trabalho é desenvolvedor de cursos,
manterei makeCourse.
O loop while se perguntará novamente "Cameron
ainda é desenvolvedor de cursos?"
Se sim, makeCourse.
Até algum ponto, quando meu trabalho não for mais
desenvolvedor de cursos e eu encerrarei o loop.
Como isso pode acontecer?
Talvez haja um limite de quantidade de cursos que posso fazer.
Dez cursos no máximo.
Sabe de uma coisa?
Vamos ver como é isso em código.
Fora do loop,
criarei um iterador chamado courses, que vai começar em 0.
Isso vai rastrear quantos cursos eu fiz.
Depois de fazer um curso,
vou adicionar 1 ao número de cursos que fiz.
Vamos adicionar uma instrução if ao loop que verifica
se o número de cursos que fiz é 10.
Se sim, meu trabalho mudará para "learning specialist".
Depois disso, o loop é encerrado.
Interessante. Vamos ver se isso funciona.
Aqui está a função makeCourse em que o console registra
"Made a course" sempre que é executada.
E usamos "console.log(cameron.job)"
quando terminamos de executar o loop.
Quando o executamos,
podemos ver que é impresso "Made a course"
no log do console 10 vezes.
Quando ele termina,
é impresso "learning specialist", o novo trabalho de Cameron.
嘿 James！打印相同的 if 语句两次
你不觉得有点烦人吗？
>> 是啊 我想我违反了编程的一个核心规则：
不要重复自身
>> 嗯 是的
对
考虑到这点
我想是时候讨论一下循环了
>> 所以这就是我们看着这个动态 GIF 的原因？
>> 是的 这是其中一个原因
第二是因为这是一个超赞的 GIF
不过说真的 我觉得最重要的是
这个 GIF 是自动地重复本身的
我们不需要告知 GIF 再重复播放一次 它自己就可以完成
实际上 JavaScript 也给我们提供了一些工具来做到这点
现在我们继续 从一个 while 循环开始
>> 一个 while 循环使我们可以重复一段代码
只要某个条件判定为真
一旦条件评估不为真 我们就退出 while 循环
这个语法是 while 条件
然后在大括号里 这里是一些代码 .
在这个例子里 我们有 doSomething();
>> 嘿 我们来举个例子吧
>> 好的 While(cameron.job ==="course dev") 应该可以作为例子
>> 我喜欢这个例子
注意这和 python 是相似的 不过这里将条件写在了圆括号内
执行动作在大括号里 就像 if 语句那样
注意 如果条件判定为真
我们就执行动作 然后我们再问自己一遍 条件是否为真？
我们会继续遵照这个循环
直到这个条件不再为真 这时将退出循环
这里 只要我是课程开发者 我就会继续制作课程
while 循环将再询问自己一遍 Cameron 还是课程开发者吗？
如果是 那就制作课程
直到某个时间点
当我的工作不再是课程开发者 这时将退出循环
>> 这是怎么发生的呢？
>> 嗯
也许我能制作的课程数量是有限制的
最多10门课程
你知道吗？
让我们来看看这在代码里是什么样的
在循环之外
我会创建一个名字叫课程的迭代器 从0开始计数
这被用来记录我已经制作的课程数量
当我制作了一个课程后
我会对我已经制作的课程数加一
我们来给循环添加一个 if 语句
用来检查已制作课程数是否为10
如果是 那就将我的工作改为学习专家
之后就退出循环
>> 有意思
我们来检查一下这是否有用
这是制作课程的方法 这个方法每次在控制台记录 制作了一个课程
这在运行
当循环结束时 执行 console.log,(cameron.job)
所以 当我们运行程序时
我们看到 程序向控制台打印制作了一个课程的日志10次
之后当循环结束时
程序打印出了学习专家 Cameron的新工作