🎁 자바스크립트 활용하기
- 코드에 주석남기기 :
//한줄 주석,/* 여러줄 주석 */- 콘솔창에 로그 남기기 :
console.log();
📎 콘솔
- 웹 브라우저에서 화면에 표시되는 것과 관계없이 어떠한 내용을 출력하기 위한 공간
- 각 브라우저마다 콘솔기능 지원하고 프로그램의 중간 단계의 변화상태 출력하여 프로그램 실행 과정을 추적할 수 있다.
- 크롬 브라우저창에서는 [F12] 키를 누르면 "개발자도구"메뉴를 열수 있는데 콘솔창에서 간이 렌더링 테스트가 가능하다.
- 개발자도구에서는 "강력새로고침"으로 모든 캐시를 지우고 새롭게 실행가능
1. JavaScript
1-1. 자바스크립트
- "브라우저" 내장 자바 스크립트 엔진을 이용해 실행
- "자바"와 전혀 관련없는 별개의 프론트엔드 언어
🍌 바닐라 스크립트 (Vanilla JS)란?
- 바닐라 스크립트란 플러그인이나, 라이브러리를 사용하지 않은 "순수" 자바스크립트
- 바닐라 스크립트 = 자바 스크립트
- 바닐라 = 일반(Plain)
📌 바닐라 스크립트의 장점과 중요성
- 아무 것도 다운받지 않아도 되니 가볍고 빠르다.
1-2. javascript 에 영향을 준 언어
- java : 기본적인 문법
- Scheme
- Self
1-3. javascript버전
- ECMAScript : 자바스크립트의 언어의 표준
2. 변수의 사용방법
2-1 변수의 사용
- 변수를 사용하기 위해서는 "선언"과 "할당"의 두 영역으로 구분해야 한다.
1. 변수의 선언
: 선언은 var 키워드 뒤에 사용하고자 하는 변수의 이름을 지정하고 세미콜론(;)으로 한 라인을 종료한다.
var num;
var hello;2. 변수의 할당
- 선언된 변수에 원하는 값을 대입하는 과정을 의미한다
- 숫자형식이나 문자열 등을 사용할 수있다
num = 123456;
hello= "안녕하세요";3. 선언과 할당의 통합
- 위의 두 과정을 한줄로 표현가능하다.
var num = 1234569;
var hello = "안녕하세요";2-2. 변수 이름을 정하는 규칙
- 변수이름은 영문, 숫자, "_"만 사용 가능하다
- 변수의 이름의 첫 글자는 숫자 불가능
- 대소문자 구별 오타주의
myName,my_name
2-3. 변수의 종류
- 데이터형 (dataType)
- javascript의 변수는 표현하는 값의 종류에 따라 형식이 구분된다.
변수의 종류
1. Number 정수, 실수
- 숫자를 표현하거나 산술 연산을 하는데 사용되는 데이터 타입이다.
2. String 문자열
- 문자열을 표현하는데 하는 데이터 타입으로, 쌍따옴표(" ") 나 홑따옴표(' ')로 감싸진 문장을 의미한다.
3. Boolean 참(true), 거짓(false)
- 논리 데이터 타입이다.
4. Object
- 객체를 저장하기 위한 데이터 타입이다.
- 브라우저 제어기능,
<form>제어,HTML태그요소에 대한 제어 등이 가능하다.5. Null 값 없음
- 개발자가 "의도적으로" 변수의 공간을 비워놓은 상태를 의미한다.
6. undefined 정의되지 않음
- 자바에서의 nullpointException을 의미
- 아무런 값도 할당되지 않은 상태를 의미한다.
- 이 상태의 변수는 어떠한 처리도 불가능
- 그렇다면, 변수는 종류는 어떻게 구분하냐면
typeof()라는 함수를 이용하면 변수의 종류를 알 수 있다.
3. 연산자
3-1. 연산자 종류
- 대입연산자 : =
- 사칙연산자 : +, -,*, /(몫), %(나머지)
- 단항연산자 : 변수에 대한 연산결과를 다시 자기자신에게 적용하는 경우
- 증감연산자 : 특정 변수에 저장되어 있는 값을 1씩 증가, 감소 시킬 경우
// 증감연산자 x++과 ++x의 차이
var a1 = 100;
var x1 = 1;
var y1 = a1 + x1++;
// 먼저 연산을 한 후 증감연산자 적용
console.log(x1); // 2
console.log(y1); // 101
var a2= 100;
var x2 = 1;
var y2 = a2 + ++x2;
// 먼저 1씩 증가한 후, 연산
console.log(x2); // 2
console.log(y2); // 102- 비교연산자 : 두 개 변수값간의 관계를 비교해서 true나 false의 결과 반환 (
==나!=)📌 일치연산자
===- 일치 연산자로 좌항과 우항이 엄격, 정확하게 같을 때 True, 다르면 false
- javascript, php는 비슷한 것을 같은 것으로 간주하기도 한다.
따라서===를 사용할 것을 권장 - 참고로,
!==: '정확'하게 같지 않다는 의미이다.
- 논리연산자 : 좌변과 우변을 논리연산하고, 참일때는 true, 거짓일때는 false 반환
3-2. 문자열간의 연산
- 문자열간의 연산은 "문자열"끼리의 나열로 표현 (자바언어와 유사)
var msg1 = "안녕하세요. ";
var msg2 = "자바스크립트";
var msg3 = msg1 + msg2;
// 안녕하세요. 자바스크립트- 문자열과 숫자값의 연산은 "문자열"의 값이 된다.
var msg4 = "안녕하세요.";
var num = 1234;
var result = msg4 + num;
// 안녕하세요.1234- 템플릿 문자열 (template literals)
- 백틱(``)을 활용해서 문자열을 연산할 수 있다.
var name1 = "홍길동";
var name2 = `HGD : ${name1}`;
// HGD : 홍길동4. HTML에 결과 출력하기
document.write(출력내용);
- HTML 페이지의
<body>태그 안을 자바스크립트에서는 document(=문서)라고 부른다. <body>태그 안에 새로운 내용을 출력하고자 할 경우 자바스크립트에게 "쓰다(write)"라는 명령어를 전달한다.
document.write("<h1>출력내용</h1>");- HTML 태그안에 출력되는 내용이므로, HTML 태그를 포함하여 출력할 수 있다.
Quantum Jump to class for java….