본문 바로가기
Web & Mobile/Javascript

Lecture 7 - Javascript(3)

by Bennyziio 2019. 4. 13.
반응형

html 
css

html + css = 동적(프로그램) 생성 = javascript(언어)

언어
    1. 자료(데이터)
           - 자료형
           - 변수
           - 연산자
            => 자료를 저장하고 연산(계산)하는 방법
    2. 제어(흐름 : 위 -> 아래 : 선언(변수) - 처리(제어) - 출력(console.log) 순으로 많이 진행되어옴)
          - 조건에 의한 분기(2개 : true / false)
               : if
                 switch
                 삼항연산자
                 * 필터, 그룹
          - 조건에 의한 반복
                : for - 유한루프
                  while - 무한루프(조건이 참이면 계속 돌다가 거짓일때 루프를 빠져나옴)
                  - 초기값
                     while(조건문) {
                               증가문;
                     }
                  do while
          * 중첩(중복 사용할 수 있다)
    3. 기타구조

js.37 while문

<!doctype html />
<html lang="ko">
<head>
<meta charset="utf-8"/>
<style type="text/css">
</style>
</head>
<body>
<script type="text/javascript">
/*
for(var i=1; i<=5; i++) {
console.log('for');
}
*/

var i=1;
while(i<=5) {
console.log('for');
i++;
}
</script>
</body>
</html>

js.38 while문을 사용하여 별을 10개까지 순차적으로 늘어나게 

<!doctype html />
<html lang="ko">
<head>
<meta charset="utf-8"/>
<style type="text/css">
</style>
</head>
<body>
<script type="text/javascript">
var i=1;
while(i<=10) {
var j=1;
var result="";
while(j<=i) {
result +="*";
j++;
}
console.log(result);
i++;
}
</script>
</body>
</html>

js.39 Do ~ while 문

<!doctype html />
<html lang="ko">
<head>
<meta charset="utf-8"/>
<style type="text/css">
</style>
</head>
<body>
<script type="text/javascript">

for(var i=1; i<=5; i++) {
console.log('for');
} 

/*
var i = 1;
do {
console.log(i);
i++;
} while(i<=5);
*/
</script>
</body>
</html>


js.40 continue, break 사용 법

제어조절(loop)
continue(한 번 건너뛰기)
break(중지)

<!doctype html />
<html lang="ko">
<head>
<meta charset="utf-8"/>
<style type="text/css">
</style>
</head>
<body>
<script type="text/javascript">
// 제어 조절(loop)
// continue(한 번 건너뛰기)
// break(중지)
/*
for(var i=1; i<=10; i++) {
if(i == 5) {
//break;
continue;
}
console.log(i);
}
*/

// 1~10까지 홀수 출력하는 continue

for(var i=1; i<=10; i++) {
if(i % 2 == 0) {
//break;
continue;
}
console.log(i);
}
</script>
</body>
</html>

 

js.41 label을 사용하여 해당 위치로 break 하기

<!doctype html />
<html lang="ko">
<head>
<meta charset="utf-8"/>
<style type="text/css">
</style>
</head>
<body>
<script type="text/javascript">

aloop : // label
for(var i=1; i<=5; i++) {
for(var j=1; j<=5; j++) {
if(j == 3) {
//break;
break aloop;
}
console.log(i + "/" + j);
}
}
</script>
</body>
</html>



배열(Array) - 여러개의 데이터를 한개의 변수로 묶음

num1 = 10;
num2 = 20;
..
num10 = 100;

// 배열형 변수 arr1 선언
var arr1 = [];

arr1[0] = 10;        // 0, 1 : index * 반드시 0부터 시작
arr1[1] = 20;
..

js.42 배열(Array) 사용 법

<!doctype html />
<html lang="ko">
<head>
<meta charset="utf-8"/>
<style type="text/css">
</style>
</head>
<body>
<script type="text/javascript">

// 배열의 선언
var arr1 = [];

arr1[0] = 10;
arr1[1] = 20;
arr1[2] = 30;
arr1[3] = 40;
arr1[4] = 50;

console.log(arr1);

console.log(arr1[0]); // 0번 방 데이터 출력
console.log(arr1[4]); // 4번 방 데이터 출력

// length = 마지막 방 - 1(0부터 시작하기 때문에)
console.log(arr1.length);

// for 문을 이용하여 데이터 전체를 편리하게 가져올 수 있다.
for(var i = 0; i < arr1.length; i++) {
console.log(arr1[i]);
}

// 전통적인 for 문
// 배열을 한 줄로 데이터 입력 하는 방법
var arr2 = ['가', '나', '다', '라'];
for(var i = 0; i < arr2.length; i++) {
console.log(arr2[i]);
}


// 배열을 위한 for 문(length가 없음)
for(var i in arr2) {
console.log(arr2[i]);
}

// 배열 안에 배열: 2차원, 3차원 즉, 배열도 중첩 가능
var arr3 = [
[10, 20, 30],
[40, 50, 60],
[70, 80, 90],
];
//console.log(arr3);
//console.log(arr3[0][0]);
//console.log(arr3[2][2]);
//console.log(arr3.length);
//console.log(arr3[0].length);

for(var i=0; i<arr3.length; i++) {
for(var j=0; j<arr3[i].length; j++) {
console.log(arr3[i][j]);
}
}

var arr4 = [
[10],
[40, 50],
[70, 80, 90],
];

for(var i=0; i<arr4.length; i++) {
for(var j=0; j<arr4[i].length; j++) {
console.log(arr4[i][j]);
}
}



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

 


함수(function : 기능/모듈)

    사용자(개발자) 정의 함수
    내장 함수 - 엔진 개발자(포함되어 있는)
         - 라이브러리 / API(application program interface)

    변수 + 제어문 = 모듈화
     반복사용을 위해서 미리 선언 - 반복문

     선언
         function 함수이름() {
              내용;
              내용;
              ..
              내용;
         }
     호출
          함수이름();
          함수이름();

js.43 함수

<!doctype html />
<html lang="ko">
<head>
<meta charset="utf-8"/>
<style type="text/css">
</style>
<script type="text/javascript">
// 선언(실행 X)
function hello() {
console.log("Hello Function");
}
</script>
</head>
<body>
<script type="text/javascript">
// 호출 (실행)
hello();
hello();
hello();
hello();
</script>
</body>
</html>

 

js.44 지역변수

<!doctype html />
<html lang="ko">
<head>
<meta charset="utf-8"/>
<style type="text/css">
</style>
<script type="text/javascript">
// 선언(실행 X)
function hello() {
console.log("Hello Function");
}

function func1(data1) {
// 지역변수 : {}안에서만 쓰이는 변수 : argument/parameter
// var data1 = 값;
console.log('data1 : ' + data1);
}

function func2(data1, data2) {
console.log('data1 : ' + data1);
console.log('data2 : ' + data2);
}
function sum(num1, num2) {
var sum = num1 + num2;
console.log('합계 : ' + sum);
}

// 두 개의 값을 받아서 합을 구한 함수 sum 선언
</script>
</head>
<body>
<script type="text/javascript">
// 호출 (실행)
hello();
func1(1);
func2(1, '가');
sum(12, 7);
</script>
</body>
</html>

 

js.45 Return

내가 쓴 거

<!doctype html />
<html lang="ko">
<head>
<meta charset="utf-8"/>
<style type="text/css">
</style>
<script type="text/javascript">
// return : 호출한 곳으로 반납
function func3() {
return 1;
}

function sum(num1, num2) {
return num1 + num2;
}

function sort(num3, num4) {
if(num3>num4) {
return num3;
}
else {
return num4;
}
}
</script>
</head>
<body>
<script type="text/javascript">
// 호출 (실행)
var result = func3();
console.log('결과 : ' + result);

var sum = sum(10, 20);
console.log('합계 : ' + sum);

var sort = sort(30, 20);
console.log('큰수 : ' + sort);

// 두 개의 수를 입력받아서 큰 값을 리턴하는 함수 sort 선언
</script>
</body>
</html>



강사님이 쓴거

<!doctype html />
<html lang="ko">
<head>
<meta charset="utf-8"/>
<style type="text/css">
</style>
<script type="text/javascript">
// return : 호출한 곳으로 반납
function func3() {
return 1;
}

function sum(num1, num2) {
return num1 + num2;
}

function sort(value1, value2) {
var value = 0;
if(value1 <= value2) {
value = value2;
}
else {
value = value1;
}
return value;
}
</script>
</head>
<body>
<script type="text/javascript">
// 호출 (실행)
var result = func3();
console.log('결과 : ' + result);

var sum = sum(10, 20);
console.log('합계 : ' + sum);

var sort = sort(30, 20);
console.log('큰수 : ' + sort);

// 두 개의 수를 입력받아서 큰 값을 리턴하는 함수 sort 선언
</script>
</body>
</html>

* 삼항연산자로 작성

<!doctype html />
<html lang="ko">
<head>
<meta charset="utf-8"/>
<style type="text/css">
</style>
<script type="text/javascript"> 
function sort(value1, value2) {
return (value1 <= value2) ? value2 : value1;
}

</script>
</head>
<body>
<script type="text/javascript">

result = sort(30, 20);
console.log(result);

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

js.46 익명 함수 - 일급 함수

<!doctype html />
<html lang="ko">
<head>
<meta charset="utf-8"/>
<style type="text/css">
</style>
<script type="text/javascript">
// 선언적 함수
function func1() {
console.log("Hello Function 1");
}

// 익명 함수 - 일급함수
var func2 = function() {
console.log("Hello Function 2");
}; 
</script>
</head>
<body>
<script type="text/javascript">
func1();
func2();
console.log(func2);
// typeof는 자료형을 판단하는 연산자
console.log(typeof(func2));
</script>
</body>
</html>

 

js.47 익명 함수 - 일급 함수 심화

<!doctype html />
<html lang="ko">
<head>
<meta charset="utf-8"/>
<style type="text/css">
</style>
<script type="text/javascript">
var func1 = function(data1, data2) {
console.log('data1 : ' + data1);
console.log('data2 : ' + data2);
}

var sum = function(num1, num2) {
return num1 + num2;
}
</script>
</head>
<body>
<script type="text/javascript">
func1(10, 20);
console.log('sum : ' + sum(10, 20));
</script>
</body>
</html>

 

js. 48 3 x 3 구구단

<!doctype html />
<html lang="ko">
<head>
<meta charset="utf-8"/>
<style type="text/css">
#outer td { text-align: center; width: 150px; border: 1px solid #ff0000; }
#inner td { text-align: center; width: 150px; border: 1px dotted #ff00ff; }
</style>
<script type="text/javascript">
// 부분 소스 : 모듈
// 단 수를 입력 받으면 구구단을 출력하는 함수
var gugudan = function(dan) {
var str = ""
str += "<table id='inner'>";
for(var i=1; i<=9; i++) {
str += "<tr>";
str += " <td>" + dan + " x " + i + " = " + (dan*i) + "</td>";
str += "</tr>";
}
str += "</table>";
return str;
};
</script>
</head>
<body>
<script type="text/javascript">
document.write("<table id='outer'>");
var dan = 1;
// 3 x 3 테이블 형식 출력하는 for 문
for(var i=1; i<=3; i++) {
document.write("<tr>");
for(var j=1; j<=3; j++) {
// 구구단 출력부분
document.write("<td>" + gugudan(dan) + "</td>");
++dan;
}
document.write("</tr>");
}
document.write("</table>");
</script>
</body>
</html>

js.49 함수에 함수를 할당

<!doctype html />
<html lang="ko">
<head>
<meta charset="utf-8"/>
<style type="text/css">
</style>
<script type="text/javascript">
var func1 = function() {
console.log('Hello JS');
};
// 일급 함수
var func3 = function(callback) {
// 매개변수로 전달된 함수를 호출합니다
callback();
};
</script>
</head>
<body>
<script type="text/javascript">
func1();
// 함수의 선언을 변수처럼 사용가능
var func2 = func1;
func2();
func3(func2);
</script>
</body>
</html>



js.50 변수에 함수를 할당

<!doctype html />
<html lang="ko">
<head>
<meta charset="utf-8"/>
<style type="text/css">
</style>
<script type="text/javascript">
var rFunc1 = function(data) {
//return function() {
// console.log('Hello Function');
//}

if(data == 1) {
return function() {
console.log('함수 1 호출');
};
}
else {
return function() {
console.log('함수 2 호출');
};
}
};
</script>
</head>
<body>
<script type="text/javascript">
//var result = rFunc1();
//result();

//rFunc1()();

rFunc1(1)();
rFunc1(2)();
</script>
</body>
</html>

 

js.51 내부 함수 - 함수 내부의 모듈화

<!doctype html />
<html lang="ko">
<head>
<meta charset="utf-8"/>
<style type="text/css">
</style>
<script type="text/javascript">
// 내부 함수(임시 함수) - 함수 안에 함수 선언
// 함수 내부의 모듈화
var outer = function() {
var inner1 = function() {
console.log('내부 함수 1');
}
var inner2 = function() {
console.log('내부 함수 2');
}

inner1();
inner2();
};
</script>
</head>
<body>
<script type="text/javascript">
outer();
</script>
</body>
</html>

 

js.52 가변 인자 함수

<!doctype html />
<html lang="ko">
<head>
<meta charset="utf-8"/>
<style type="text/css">
</style>
<script type="text/javascript">
// 가변 인자 함수 = 파라미터의 갯수 미확정
var func1 = function() {
};
var func2 = function(data1) {
};

var func = function() {
// Arguments - 내부에서 선언된 변수
// Arguments - 데이터를 가진 내부 배열
//console.log(arguments.length);
//console.log(arguments[0]);
//console.log(arguments[1]);
//console.log(arguments[2]);

for(var i=0; i<arguments.length ; i++) {
console.log(arguments[i]);
}
}
</script>
</head>
<body>
<script type="text/javascript">
func(1);
func(1, 2);
func(1, 2, 3);
</script>
</body>
</html>

 

내장 함수
1. 형변환 함수
     Number() - 문자열 -> 숫자
          parseInt()
                - Int : Interger(정수)
          parseFloat
                - Float- Floating Point(실수)
     String() - 숫자 -> 문자열
     Boolean() - 진리값으로 만들어 줌

js.53 형변환

<!doctype html />
<html lang="ko">
<head>
<meta charset="utf-8"/>
<style type="text/css">
</style>
<script type="text/javascript">

</script>
</head>
<body>
<script type="text/javascript">
var won = "1000원";
//var won = "원1000";

console.log(Number(won)); // 형변환
console.log(parseInt(won));
console.log(parseFloat(won));

var dollar = "1.5$";

console.log(parseInt(dollar)); // 정수(버림)
console.log(parseFloat(dollar)); // 실수

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

 


js.54 알람, 확인창

<!doctype html />
<html lang="ko">
<head>
<meta charset="utf-8"/>
<style type="text/css">
</style>
<script type="text/javascript">

</script>
</head>
<body>
<script type="text/javascript">
//alert('Hello 알림창');

if(confirm('Hello 확인창')) {
console.log('확인');
}
else {
console.log('취소');
}
</script>
</body>
</html>

 

js.55 타이머 함수

<!doctype html />
<html lang="ko">
<head>
<meta charset="utf-8"/>
<style type="text/css">
</style>
<script type="text/javascript">

</script>
</head>
<body>
<script type="text/javascript">
// 실행 내용
var cmd = function() {
console.log('cmd 함수 실행');
}

//setTimeout(cmd, 2000);
// 무한 루프 포함
//setInterval(cmd, 2000);

// callback 기법(함수 -> 함수)
setTimeout(function() {
console.log('함수 실행');
}, 2000)
</script>
</body>
</html>

 

js.56 - 인코딩, 디코딩

<!doctype html />
<html lang="ko">
<head>
<meta charset="utf-8"/>
<style type="text/css">
</style>
<script type="text/javascript">

</script>
</head>
<body>
<script type="text/javascript">
var str = '어벤져스';
var enStr = encodeURIComponent(str);

console.log(enStr);
console.log(decodeURIComponent(enStr));
</script>
</body>
</html>

 

js.57 eval - 문자열 => 프로그램

<!doctype html />
<html lang="ko">
<head>
<meta charset="utf-8"/>
<style type="text/css">
</style>
<script type="text/javascript">

</script>
</head>
<body>
<script type="text/javascript">
// eval - 문자열 => 프로그램
var str = '1 + 1';
console.log(str);
console.log(eval(str));

eval('var num = 2 + 2;');
console.log(num);
</script>
</body>
</html>

 

 

반응형
저작자표시 동일조건

'Web & Mobile > Javascript' 카테고리의 다른 글

Lecture 10 - Javascript(6)  (0) 2019.04.14
Lecture 9 - Javascript(5)  (0) 2019.04.14
Lecture 8 - Javascript(4)  (2) 2019.04.13
Lecture 6 - Javascript(2)  (0) 2019.04.13
Lecture 5 - Javascript(1)  (0) 2019.04.13

관련글

댓글

티스토리툴바