010 _ 자바스크립트 함수 선언(사용)하기 (function) [적용] 처리 작업을 하나로 모아 이름을 지정하고 싶을 때 처리 작업을 반복하여 재사용하고 싶을 때 [내용] 함수는 들어온 값을 처리하고 그 결과를 반환하는 구조이다. function으로 함수를 정의하고 함수명을 정의할 수 있으며, { } 블록 안에 처리할 내용을 입력한다. 함수에 전달되는 값을 파라미터(인수)라고 한다. [문법] 구문 의미 function 함수명(파라미터) {처리내용} 함수를 정의 return 값 함수 내부에서 처리한 값을 반환 함수명(); 함수를 실행 [예시1] 입력 a에 대해 a + 2의 결과를 반환하는 함수를 만들어 보자. JavaScript function myFunction(a) { const result = a ..

009 _ 자바스크립트 복합형(축약형) 대입 연산자 사용하기 [적용] 계산식을 간략히 나타내고 싶을 때 [내용] 대입할 때 사용하는 기호인 '='는 대입 연산자라고 한다. 이를 응용하여 좌변과 우변의 연산 결과를 좌변의 변수에 대입하는 것을 복합형 대입 연산자라고 한다. 복합형 대입 연산자는 사칙연산 기호와 '='를 조합하고 축약한 형태로 사용한다. [문법] 구문 의미 x = y x = y x += y x = x + y x -= y x = x - y x *= y x = x * y x **= y x = x ** y x /= y x = x / y x %= y x = x % y [예시] 복합형(축약형) 대입 연산자를 사용하여 코드를 간략하게 표현해보자 JavaScript let a = 10; let b = 2..

008 _ 자바스크립트 두 개의 값 비교하기 (비교 연산자) [적용] 두 개의 값을 비교하고 싶을 때 변수의 값이 동일한지 확인하고 싶을 때 [내용] 두 데이터의 값을 비교하여 동일한 값인지 아닌지를 확인할 때 사용한다. 반환값은 참(True) 또는 거짓(False)으로 반환한다. [문법] 구문 의미 A == B A와 B의 값이 같은가? A === B A와 B의 값과 데이터 타입이 같은가? A != B A와 B의 값이 다른가? A !== B A와 B의 값과 데이터 타입이 다른가? A = B A가 B보다 크거나 같은가? [예시1] 데이터 타입이 같을 경우 JavaScript console.log('사과' == '사과'); // 값이 같으므로 Tr..

007 _ 자바스크립트 주석(코멘트) 삽입(추가)하기 [적용] 프로그램 작동에 영향이 없는 메모를 코드 내부에 남기고 싶을 때 코드 일부분을 무효화 하고 싶을 때 [내용] 프로그램이 복잡해지고 공동으로 작업을 하는 개발인원이 많아지면 다른 개발자의 코드를 이해하고 분석하는데도 많은 시간이 필요하기 때문에 이러한 시간을 단축시키고, 효율을 높이기 위하여 코드 내부에 의도와 용도에 맞는 적절한 주석을 넣어 주는 것이 좋다. 자바스크립트에는 두 가지 주석 기술 방식이 존재한다. '//'는 해당 기호 다음에 오는 한 줄의 내용만 주석 처리하며, '/* 내용 */' 은 여러줄의 내용을 주석 처리한다. [문법] 구문 의미 // 기호 이후 내용을 주석 처리 (한줄) /* 내용 */ 기호 안의 내용 부분을 주석 처리 ..

006 _ 자바스크립트 상수 사용하기 (const) [적용] 데이터 값에 이름을 지정하여 사용하고 싶을 때 데이터 값을 반복해서 사용하고 싶을 때 데이터 값의 수정이 불가능한 상수를 사용하고 싶을 때 [내용] 자바스크립트에서 'const'는 상수를 의미한다. 변하는 값을 의미를 가지고 있는 '변수' let과는 달리 '상수'는 변하지 않는 값을 의미하며, 한번 지정한 값은 변경이 되지 않는다. [문법] 구문 의미 const 상수명 = 데이터값 상수에 데이터 값 대입(값의 변경 불가) [예시1] 상수 myName에 문자열을 대입하는 하고, alert()를 이용하여 값을 출력해본다. JavaScript // 상수 myName에 '홍길동' 대입 const myName = '홍길동'; // myName을 aler..

005 _ 자바스크립트 변수 선언하기 (let) [적용] 데이터 값에 이름을 지정하여 사용하고 싶을 때 데이터 값을 반복하여 사용하고 싶을 때 값 변경이 가능한 변수를 사용하고 싶을 때 [내용] 자바스크립트는 숫자나 문자열 등 다양한 데이터를 사용한다. 이 데이터에 이름을 지정해서 쉽고 반복적으로 사용할 수 있도록 하는 것이 '변수'와 '상수'이다. '변수'는 변하는 값을 의미하고, '상수'는 항상 같은 값 즉, 변하지 않는 값을 의미한다. '변수'와 '상수'에 값을 넣는 것을 '값을 대입한다' 또는 '값을 할당한다'고 표현하며, 'const'는 상수, 'let'은 변수를 의미한다. [문법] 구문 의미 let 변수명 = 데이터값 변수에 값 대입 (반복 대입 가능) [예시] 변수 myName에 문자열을 대..

004 _ 자바스크립트 계산(사칙연산) 프로그램 만들기 [적용] 사칙연산을 사용하여 계산이 필요할 때 [내용] 숫자 데이터 사이에 연산 입력자를 입력하면 해당 계산이 실행된다. 덧셈과 뺼셈의 기호는 일반적인 기호와 같지만, 곱셈은 X가 아닌 *(애스터리스크), 나눗셈은 $\div $ 이 아닌 /(슬래시)가 사용된다. 나머지값을 구하는 연산자는 %(퍼센트)를 사용한다. [문법] 구문 의미 + 더하기 - 빼기 * 곱하기 / 나누기 % 나머지 ** 제곱 [예시] 콘솔로그를 이용하여 사칙연산 코드를 실행해보자 JavaScript console.log(10 + 20); // 30 console.log(20 - 10); // 10 console.log(10 * 3); // 30 console.log(20 / 5);..

003 _ 자바스크립트 콘솔로그(console.log)를 이용하여 출력하기 [적용] 스크립트의 데이터 값을 확인하고 싶을 때 콘솔 패널에 값을 표시하고 싶을 때 [내용] console.log를 사용하면 브라우저의 개발자 도구 콘솔에 메시지 또는 값을 출력할 수 있다. 임의로 출력을 지정하여 데이터 값의 변화를 확인하며 작업하고 싶을 때 유용하다. [문법] 구문 의미 console.log(값1, 값2, ... ) 콘솔에 값 표시하기 [예시] 간단한 합계의 결과값을 콘솔에 출력해보자 JavaScript const a = 10; const b = 20; const sum = a + b; console.log(sum); // 결과값: 30 [실행결과] 브라어저의 개발자 도구 콘솔에 로그가 표시된다. [Appen..

002 _ 다른 파일에서 자바스크립트 파일 불러오기 [적용] HTML로 외부 파일로 존재하는 자바스크립트 파일을 불러올때 [내용] HTML 내부에 자바스크립트를 직접 작성할 경우 코드가 길어지고 추후 수정등에 불편할 수 있다. 또한 기존에 작성 되어있던 자바스크립 파일을 재사용하거나 다른 사람이 작성한 파일을 불러와서 사용하는데 용이하다. 확장자가 '.js'인 자바스크립트 파일은 HTML 에서 다른 파일에서 불러올 수 있다. [문법] 구문 (HTML 코드) 의미 자바스크립트 파일 불러 오기 [예시] example.js 파일을 불러오는 코드를 작성해보자 HTML JavaScript alert('다른 파일에서 불러온 자바스크립트 코드입니다~') 실행결과 여러개의 자바스크립트 파일도 하나의 HTML에서 불러올..

001 _ 자바스크립트의 구현(사용) 방식 [적용] 브라우저 (HTML)에서 자바스크립트를 사용하고자 할 때 [내용] HTML에서 자바스크립트를 사용하기 위한 기본 구현(사용) 방식을 알아보자. HTML에서 HTML에서 자바스크립트 코드 구현(사용) [예시] 자바스크립트의 alert() 기능을 통해 알림창을 만들어 보자. HTML 파일을 열면 브라우저에서 '안녕하세요!'라는 알림 메시지가 표시된다. script 태그의 위치는 어느 곳이든 상관없다. 샘플 코드의 경우 head 태그 안에 넣었지만, body태그 안에 사용해도 무방하다. 세미콜론(;)은 문장의 끝을 나타내는 기호이다. 자바스크립트에서는 세미콜론을 생략해도 적절한 줄바꿈을 넣어주면 에러 없이 기능이 동작한다. 참조 : 실무에 바로 적용하는 자바..