복습
- html/css 정리
- Javasript(ECMAScript(표준화)/모던자바립트)
*이론적인 베이스들이 기술 면접 대상이 된다.
프로그램 언어의 구조
자료 (프로그램 언어 제공/ -> 확장 : 자료구조)
- 자료형
기본 형태(bool/boolean~문자열) ~ 객체 형태(사용자 정의 자료형)
변수/상수
let/const (var)
"use strict"(엄격한 선언)
식별자(이름) 규칙(문법적 규칙/ 네이밍 컨벤션)
연산자
단항(증감 : ++,-- ..., 부호: +,- ...)
이항(산술/비교/대입/논리 연산자)
삼항(조건 연산자 - ? :)
연산자 우선순위 : 애매모호하면 ()로 처리
자료형 변환
자동형변환(묵시적 형변환) : 작은 자료형 -> 큰 자료형
강제형변환 : 자료형(바꿀 내용)
제어 = flowchart 머리속으로 그리기
알고리즘(이런 것들을 연구하는 것) - 문제를 해결하기 위해 정해진 일련의 절차
제어 => 잔머리(프로그램 속도가 빠른 것이 좋다)
flowchart 예
조건에 의한 분기
-
if
단순 조건(if / if ~ else)
선택 조건(if ~ else if ... ~ else) -
switch
선택 조건
switch(변수) {
case 값: 실행문;
break;
defalut: 실행문;
} -
삼항 연산자(조건 연산자)
단순 조건 -
중첩 : 조건문 중첩해서 사용 가능
조건에 의한 반복 = 반복 횟수
for
for(초기값; 조건식; 증감식;) { 실행문; }
- 중첩 : 반복문 중첩해서 사용 가능
1개 - 1차원(행)
2개 - 2차원(행/열) - 사무 처리에 많이 쓰이는 것
3개 - 3차원 ...
<-- 여기까지 복습
표 반복하여 별 만들기
<body>
<script type="text/javascript">
document.write('<table border="1" width = "600" align = "center">');
for(let i = 0; i < 10; i++) {
document.write('<tr align="center">')
for(let j = 0; j < 10 ; j++) {
document.write('<td>*</td>');
}
document.write('</tr>');
}
document.write('</table>');
</script>
</body>
css와 결합하여 변형된 표 만들기
<head>
<style type="text/css">
table {
/* table 위치 조정은 margin으로(auto쓰면 창 작아져도 따라감) */
margin-left: auto;
margin-right: auto;
width:300px;
border: 1px solid black;
border-collapse: collapse;
}
td {
text-align:center;
border: 1px solid black;
}
</style>
</head>
<body>
<script type="text/javascript">
document.write('<table>');
for(let i = 0; i < 10; i++) {
document.write('<tr>')
for(let j = 0; j < 10 ; j++) {
if(j <= i) {
document.write('<td>*</td>');
}
else document.write('<td></td>');
}
document.write('</tr>');
}
document.write('</table>');
</script>
</body>
변수에 누적해서 저장하여(코드별 분할) document부분을 대신할 수 있다.
위와 똑같은 코드에 document.write 부분을 변수에 저장하는 식으로 바꾼 것
<body>
<script type="text/javascript">
let result = '';
result += '<table>';
document.write('<table>');
for(let i = 0; i < 10; i++) {
result += '<tr>'
for(let j = 0; j < 10 ; j++) {
if(j <= i) result += '<td>*</td>';
else result += '<td></td>';
}
result += '</tr>';
}
result += '</table>';
document.write(result);
</script>
</body>구구단 표로 만들기
<head>
<style type="text/css">
table {
/* table 위치 조정은 margin으로(auto쓰면 창 작아져도 따라감) */
margin-left: auto;
margin-right: auto;
width:900px;
border: 1px solid black;
border-collapse: collapse;
}
td {
text-align:center;
border: 1px solid black;
}
</style>
</head>
<body>
<script type="text/javascript">
document.write('<table>');
for(let col = 0; col < 10; col++) {
document.write('<tr>');
for(let dan = 0; dan < 10 ; dan++) {
if(col == 0 && dan == 0) document.write('<td>' + '' + '</td>');
else if(col==0) document.write('<td>' +'X'+ dan + '</td>');
else if(dan==0) document.write('<td>' + col +'단'+ '</td>');
else document.write('<td>' + col + ' X ' + dan + ' = '
+( col * dan ) + '</td>');
}
document.write('</tr>');
}
document.write('</table>');
</script>
마찬가지로 result 변수를 선언해서(누적) 제어구문과 출력문을 분리할 수 있다.
while -->조건 false면 실행 아예 안된다.
구조
초기값;
while(조건식) {
실행문;
증감식;
}
<script type="text/javascript">
//while문
let col = 1, dan = 1;
document.write('<table border="1">');
while(col <= 9){
document.write('<tr>');
while(dan <= 9){
document.write('<td>' + col + ' X ' + dan + ' = ' + (col*dan) + '</td>')
dan++;
}
document.write('</tr>');
col++, dan = 1;
}
document.write('<table>');
</script>
-> for문과 조금 다른 구조나 기본 구구단 결과는 같음 (for문과 달리 증감식이 아래에 있어서
변수 초기화를 시켜줘야 할 경우가 있음.do ~ while --> false여도 한 번은 실행 됨.
구조
do {
실행문;
증감식;
}while(조건식);
<script type="text/javascript">
//do while문
let col = 1, dan = 1;
document.write('<table border="1">');
do{
document.write('<tr>');
do{
document.write('<td>' + col + ' X ' + dan + ' = ' + (col*dan) + '</td>')
dan++;
} while(dan <= 9);
document.write('</tr>');
col++, dan = 1;
}while(col <= 9);
document.write('<table>');
</script>continue(한번 건너뛰기) , break(중지)
break
<body>
<script type="text/javascript">
console.log('시작');
for(let i = 0; i < 5; i++) {
console.log(i);
if(i==3) break;
}
console.log('끝');
</script>
</body>
break로 인하여 3에서 반복문이 종료
중첩 for문의 break - 해당 문을 종료함
<body>
<script type="text/javascript">
for(let i = 0; i < 5; i++) {
for(let j = 0; j < 5; j++) {
if(j == 2) {
break;
}
console.log(i + ' : ' + j);
}
}
</script>
</body>
j==2일때 break로 j for문(내부 for문) 종료, 2 이상으론 실행 결과가 나오지 않음
continue
<body>
<script type="text/javascript">
console.log('시작');
for(let i = 0; i < 5; i++) {
if(i==3) continue;
console.log(i);
}
console.log('끝');
</script>
</body>
continue로 인하여 3에서 실행하지 않고 반복문 위(처음으로) 간다.
중첩 for문의 continue - 해당 문 실행하지 않고 처음으로
<body>
<script type="text/javascript">
for(let i = 0; i < 5; i++) {
for(let j = 0; j < 5; j++) {
if(j == 2) {
continue;
}
console.log(i + ' : ' + j);
}
}
</script>
</body>
continue로 인하여 2에서 실행하지 않고 해당 문(내부 반복문) 처음으로 되돌아간다.
(주의 - 외부 반복문으로 가는 거 아님, 자신이 있는 반복문의 처음으로 되돌아간다.
변수를 사용하여 해당 위치에서 continue/break 실행
<body>
<script type="text/javascript">
Aloop : -->continue가 이쪽에서 실행
for(let i = 0; i < 5; i++) {
for(let j = 0; j < 5; j++) {
if(j == 2) {
continue Aloop; --> Aloop라는 곳으로 이동
}
console.log(i + ' : ' + j);
}
}
</script>
</body>
break도 동일하다, break일 경우 해당 곳에서 종료
함수
-
사용자 정의함수 : 개발자가 선언하는 함수
-
내장함수 : 프로그램이 제공하는 함수(양이 더 많다)
-
라이브러리(함수들이 모여있는 곳)
-
함수의 구성 : 변수/상수, 제어문 --> 으로 재활용 모듈 만듦
-
함수는
선언 : 내용 정의
호출 : 실행 로 이뤄진다.
-
함수 이름 : 식별자 규칙, 소문자로 시작, 동사로
<head>
<script type="text/javascript">
//선언 부분
function doFunc1() { --> 함수 선언부
console.log('Hello Function');
// 지역변수 - 해당 함수 안에서만 사용 가능
let num1 = 10;
console.log('Hello Function : ' + num1);
}
//매개변수(parameter/argument)
function doFunc2(data1) {
console.log('func2 : ' + data1);
}
function doFunc3(data1, data2) {
console.log('fun3 : ' + data1, data2);
}
</script>
</head>
<body>
<script type="text/javascript">
//실행 부분
doFunc1(); --> 함수 호출부
doFunc2(10); -->매개변수 보내기
doFunc3(10, 20);
</script>
</body>
선언부와 실행부를 둘 다 실행시켜야 하므로 script를 두 곳에 다 써줌return문
값을 돌려받음
<head>
<script type="text/javascript">
//선언 부분
function doFunc4(data1, data2) {
let sum = data1 + data2;
return sum;
}
</script>
</head>
<body>
<script type="text/javascript">
let result = doFunc4(20,30);
console.log(result);
</script>
</body>
함수로 구구단 단수 입력받아 실행하기
<head>
<script type="text/javascript">
//구구단 단수를 입력받아서 출력
function gugu(data1) {
for(let col =1; col <= 9; col++) {
console.log(data1 + ' X ' + col +
' = ' + ( data1 * col ));
}
}
</script>
</head>
<body>
<script type="text/javascript">
gugu(11); --> 11단 출력
</script>
</body>
응용 문제 - 산술 연산 함수 만들기
<head>
<script type="text/javascript">
//산술연산 함수
//calc(10, '+', 20 -> 덧셈 or calc(10, '-', 20 -> 뺄셈 등등)
//계산 결과 반환하는 함수
function calc(data1, string, data2) {
let result = 0;
switch(string) {
case '+' : result = data1 + data2;
break;
case '-' : result = data1 - data2;
break;
case '*' : result = data1 * data2;
break;
case '/' : result = data1 / data2;
break;
}
return result;
}
</script>
</head>
<body>
<script type="text/javascript">
let result = calc(10, '/', 20);
console.log(result);
</script>
</body>
세 수 중에 더 큰 수 반환하기
<head>
<script type="text/javascript">
//크기비교함수
//두 수를 입력받아서 큰 수를 리턴하는 함수
function maxNumber(data1, data2, data3) {
let value = 0;
if(data2 <= data1 && data3 <= data1) {
value = data1;
}
else if(data1 <= data2 && data3 <= data2) {
value = data2;
}
else if(data1<= data3 && data2 <= data3){
value = data3;
}
return value;
}
</script>
</head>
<body>
<script type="text/javascript">
let max = maxNumber(100, 200, 300);
console.log(max);
</script>
</body>
깔끔한 구구단 표 만들기
방법 1
<head>
<style css="text/css">
#inner {
width:150px;
border: 1px dotted black;
text-align: center;
}
td {
border: 1px dotted pink;
}
</style>
<script type="text/javascript">
function gugu(dansu) {
let html = ('<table id="inner">');
for(let col = 1; col < 10; col++) {
html += ('<tr>');
html += ('<td>' + dansu + ' X ' + col + ' = '
+ (dansu * col) + '</td>' );
}
html += ('</tr>');
html += ('</table>');
return html;
}
</script>
</head>
<body>
<script type="text/javascript">
document.write('<table border ="1">');
let dan = 1;
for(let row = 1; row<=3; row++){
for(let col = 1; col<=3; col++){
document.write('<td>' + gugu(dan) + '</td>');
dan++;
}
document.write('</tr>');
}
document.write('</table>');
</script>
</body>방법2
<head>
<style css="text/css">
#inner {
width:400px;
border: 1px dotted black;
text-align: center;
}
td {
border: 1px dotted pink;
}
</style>
<script type="text/javascript">
function gugu(dansu) {
document.write('<table id="inner">');
for(let col = 1; col < 10; col++) {
document.write('<tr>');
document.write('<td>' + dansu + ' X ' + col + ' = '
+ (dansu * col) + '</td>' );
document.write('<td>' + (dansu+1) + ' X ' + col + ' = '
+ ((dansu+1) * col) + '</td>' );
document.write('<td>' + (dansu+2) + ' X ' + col + ' = '
+ ((dansu+2) * col) + '</td>' );
}
document.write('</tr>');
document.write('</table>');
}
</script>
</head>
<body>
<script type="text/javascript">
for(let i = 1; i<9; i+=3){
gugu(i);
}
</script>
</body>
</html>
<-- 여기까지 선언적 함수
익명 함수
이름이 없는 함수
함수의 선언문을 변수/상수에 할당해서 사용하는 함수
함수를 식 형태로 선언하므로 마지막에 세미콜론 붙임
<head>
<script type="text/javascript">
//익명함수
const doFunc1 = function() {
console.log('Hello Function');
}; <-- 세미콜론 붙인다.
</script>
</head>
<body>
<script type="text/javascript">
doFunc1();
//함수의 정의가 값이다.
console.log(doFunc1);
//익명함수 타입 - 함수타입
console.log(typeof doFunc1);
</script>
</body>
변수에 값을 대입하는 것처럼 함수를 사용 가능하다.
<head>
<script type="text/javascript">
//익명함수
const doFunc1 = function() {
console.log('Hello Function');
};
//변수에 값을 대입
let doFunc2 = doFunc1; --> 함수를 변수처럼 대입할 수 있다.
</script>
</head>
<body>
<script type="text/javascript">
doFunc2(); --> ==doFunc1의 값
</script>
</body>
=>를 사용하여 표현 가능하다.
<head>
<script type="text/javascript">
let sum = (a, b) => a + b;
</script>
</head>
<body>
<script type="text/javascript">
console.log(sum(10,20));
</script>
</body>
--> 30출력콜백함수
다른 함수의 인수로 사용하는 함수
<head>
<script type="text/javascript">
//실행순서 1 callback 함수
const callBack = function() {
console.log('함수 호출');
};
//실행 순서 3 - callFunc 함수에서 callback을 호출하여 사용
const callFunc = function( data ){
data();
}
</script>
</head>
<body>
<script type="text/javascript">
//실행 순서 2 - callback함수에 있는 값을 callFunc함수에 매개변수가 되어 호출
//다른 함수(callFunc)의 인수(callback)가 되는 것이 콜백함수이다.
callFunc( callBack );
</script>
</body>return을 이용한 콜백 함수
반환값으로 함수를 넘김
<head>
<script type="text/javascript">
const rFunc = function() {
return function() { --> 반환값으로 함수를 넘긴다.
console.log('Hello Function');
}
};
</script>
</head>
<body>
<script type="text/javascript">
let result = rFunc();
result();
rFunc()(); --> 위의 것을 한번으로 줄인 것
</script>
</body>
return을 이용한 콜백 함수2
매개 변수 추가하고 조건문이 추가된 것 뿐 다른 건 없다.
<head>
<script type="text/javascript">
const rFunc2 = function(type) {
if(type == 1) {
return function() {
console.log('함수1 형태 호출');
}
}
else {
return function() {
console.log('함수2 형태 호출');
}
}
};
</script>
</head>
<body>
<script type="text/javascript">
rFunc2(1)();
rFunc2(10)();
</script>
</body>
끄적끄적