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태그 안에 사용해도 무방하다. 세미콜론(;)은 문장의 끝을 나타내는 기호이다. 자바스크립트에서는 세미콜론을 생략해도 적절한 줄바꿈을 넣어주면 에러 없이 기능이 동작한다. 참조 : 실무에 바로 적용하는 자바..

HTML+CSS+JS 메가박스 영화사이트 클론코딩 무료강의 강사: WEBSTORYBOY 사이트(출처) : wtss.tistory.com/301 강의내용 : 메가박스 영화사이트를 클론코딩하면서 배우는 HTML+CSS+JS 난이도 : 중급 강의편수 : 총 46강 강의제작년도 : 2019년 비고 : - 참고이미지 강의링크 (링크를 클릭하시면 강의페이지로 이동합니다.) 디자인 만들기 기본 셋팅 그리드 시스템 이해하기 360 그리드 만들기 600 그리드 만들기 768, 1280 그리드 만들기 960 그리드 만들기 레이아웃 만들기 헤더 헤더 반응형 배너 배너 반응형 컨텐츠1 컨텐츠1 반응형 컨텐츠1 반응형 수정 컨텐츠 2 컨텐츠 2 반응형 컨텐츠 3 컨텐츠 3 반응형 컨텐츠4 컨텐츠4 반응형 컨텐츠5..

바닐라 자바스크립트로 크롬 앱 만들기 무료강의 강사: nomadcoders 사이트(출처) : nomadcoders.co/javascript-for-beginners/lectures/1705 강의내용 : 바닐라 자바스크립트를 이용하여 크롬 앱 (시계, 투두리스트, 날씨) 만들기 난이도 : 초급 강의편수 : 총 32강 참고이미지 (강의 완료예시 이미지) 강의링크 (링크를 클릭하시면 강의페이지로 이동합니다.) #0 INTRODUCTION 0.1. Read this First 0.2. Requirements (01:56) 0.3. What are we building (03:24) #1 THEORY 1.0. Why JS? (04:00) 1.1. Super Powers of JS (08:38) 1.2. ES5, ..