Renewal·서른의 생활코딩

Sample Source 2) JavaScript Basics (Loops)

normalstory

April 8, 2011·4 min read

cover image

Loop 1.

Computers are tools built for repetitive chores, grunt work, and automation.

Maybe the for statement is a very fitting... um... ah...

what should I call it... maybe... syntax?

(That really shows the beginner vibes..)

For the first example, I will assign a sequence of values to a variable called i and print them out.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

</head>

<body>

//<!CDATA[

for(i=1;i<5;i++){

document.write("반복" + i + "<br />");

}

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

document.write("<p>"+i+"</p>");

}

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

document.write("<p>"+i+"</p>");

}

//]]]]>

</script>

</body>

</html>반복문 2.두번째 예제는 사용자로부터 옵션을 선택받아 그에 맞는 결과를 도출하는 코드이다.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

</head>

<body>

//<!CDATA[

From 1 to 100, print only odd numbers or only even numbers

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

if(i%2==0){

document.write("짝수만 나열"+i+"<br />");

}

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

if(i%2!=0){

document.write("홀수만 나열"+i+"<br />");

}

var bl=prompt("Enter a for odd numbers, b for even numbers");

switch(bl){

case "a":aaa(); // odd

break;

case "b":bbb(); // even

break;

}

function aaa(){

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

if(i%2!=0){

document.write("홀수만 나열"+i+"<br />");

}

function bbb(){

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

if(i%2==0){

document.write("짝수만 나열"+i+"<br />");

}

//]]]]>

</script>

</body>

</html>반복문 3.이번엔 뿌려주는 숫자를 3,6,9,에서 박수라는 문자를 출력해주는 소스로 응용해보자

	<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
	<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ko" lang="ko">

	<head>
	<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=UTF-8" />
	<title> 반복문 for _3 </title>
	</head>

	<body>

	<script type="text/javascript">
	//<!CDATA[
	/*
	Print 1 to 50, but for multiples of 3 print "Clap" instead of the number

	for(i=1;i<=50;i++){
	if(i%3!=0){
	document.write(i + "<br />");
	}
	if(i%3==0){
	document.write("손벽짝" + "<br />");
	}
	}

	*/
	for(i=1;i<=50;i++){
	if(i%3==0){
	document.write("손벽" + "<br />");
	}
	else{
	document.write(i + "<br />");
	}
	}
	//]]]]>
	</script>

	</body>
	</html>

Loop 4. The previous examples simply printed values, but from this example onward I will mix in calculations based on certain conditions.


	<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
	<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ko" lang="ko">

	<head>
	<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=UTF-8" />
	<title> 반복문 for _4 </title>
	</head>

	<body>

	<script type="text/javascript">
	//<!CDATA[
	/*
	Sum from 1 to 10


	for(i=1;i<=10;i++){
	i += i
	document.write("합계" + i + "<br />");
	}
	*/

	var sum=0;

	for(i=1;i<=10;i++){
	sum=sum+i;
	//sum += i;
	}
	document.write("합계" + sum + "<br />");


	//]]]]>
	</script>

	</body>
	</html>

Loop 5. Building on example 4, this time let us look at an example that shows several operations instead of just one. Let us make the 2-times table.

	<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
	<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ko" lang="ko">

	<head>
	<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=UTF-8" />
	<title> 반복문 for _5 </title>
	</head>

	<body>

	<script type="text/javascript">
	//<!CDATA[
	/*
	2-times multiplication table using a for statement


	for (i=1;i<10 ;i++ )
	{
	var num=0;
	num = 2 * i
	document.write( "2" + "*" + i + "=" num + "<br />");
	}

	*/
	for (i=1;i<10 ;i++ )
	{
	var num1=2;
	var num2=num1*i;
	document.write(num1 + "*" + i + "=" + num2 + "<br />");
	}


	//]]]]>
	</script>
	</body>
	</html>반복문 6.이번에는 구구단을 모두 뿌려보자.단, 여기에 한가지 옵션을 추가한다.구구단이 시작하기 전에 몇단을 안내하는지 제목을 같이 뿌려보자.

	<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
	<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ko" lang="ko">

	<head>
	<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=UTF-8" />
	<title> 반복문 for _6 </title>
	</head>

	<body>

	<script type="text/javascript">
	//<!CDATA[
	/*
	Printing multiplication tables with a for statement

	for (j=1;j<10 ;j++ ){
	for (i=1;i<10 ;i++ )
	{
	var num=j;
	var sum=num*i;
	document.write(num + "*" + i + "=" + sum + "<br />");

	if(i==9){
	var title=num+1
	document.write("구구단 연습" + title +"단 입니다." + "<br />");
	}
	}
	}
	*/

	for (j=1;j<10 ;j++ ){
	for (i=1;i<10 ;i++ )
	{
	var num=j;
	var sum=num*i;

	if(i==1){
	var title=j;
	document.write("구구단 연습" + title +"단 입니다." + "<br />");
	}
	document.write(num + "*" + i + "=" + sum + "<br />");
	}
	}

	//]]]]>
	</script>
	</body>
	</html>

This English version was translated by Claude.

#//#CDATA #JavaScript #Noscript #소스공개 #자바스크립트 #자바스크립트 공부 #자바스크립트 기초 #자바스크립트 기초강의 #자바스크립트 스터디 #자바스크립트 예제

Written by

친절한 찰쓰씨

Pleasant Charles — UI/UX researcher at AIT. Keeping notes on design, planning, and slow days here since 2010.

Keep reading

Renewal

Sample Source 2) JavaScript Basics (Loops)

Keep reading

Steadily, for the long haul, without burning out

Tech-life balance

Humanality, by Park Jeong-ryeol