<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>자바스크립트 개요</title>
<script>
// alert('Hello, World!!, twice' )
</script>
<script src="js/01javascript.js"></script>
</head>
<body>
<h1>자바 스크립트 작성 방법</h1>
<h2>개요</h2>
<p>자바 스크립트 코드를 실행하는 방법은 크게 3가지가 있음
- 인라인, 내부, 외부 </p>
<h2>인라인 방식</h2>
<p>특정 html 요소에 이벤트 속성으로 자바스크립트 코드가
언제 실행할지를 지정함</p>
<div>
<button type="button"
onclick="alert('Hello, World!!')">인사말 출력</button>
</div>
<h2>내부 방식</h2>
<p>head나 body에 script라는 태그안에 실행할 자바스크립트 코드를 작성함 </p>
<p>head안에 스크립트를 작성하면, 브라우저가 body의 html코드를 읽기전에 스크립트를 먼저 실행함 </p>
<p>따라서, 브라우저의 화면은 늦게 뜨므로 ui가 썰렁할 수 있음</p>
<p>반면, body 끝에 스크립트를 작성하면, 브라우저가 body의 html코드를 모두 읽은 후
스크립트를 먼저 실행함.</p>
<p> > 화면 다 뜬 체로 스크립트 실행되므로, 페이지 로딩속도 빨라짐 (추천) </p>
<script>
document.write('Hello, World!!, twice' )
</script>
<h2>내부 방식</h2>
<p>자바스크립트 코드가 포함한 파일을 작성하고 이것을 head나 body에서 참조하도록 하는 방식</p>
<p>이것 역시, 특별한 경우 제외하고는 body에서 참조하는 것 추천!</p>
<h2>콘솔에서 자바스크립트 실행 및 디버깅</h2>
<p>작성한 자바스크립트 코드를 html에 삽입하기 전에
확인 및 오류체크를 목적으로 브라우저 내 콘솔에서
테스트 해볼 수 있음</p>
<p>브라우저 내 콘솔은 개발자 도구에 있음</p>
<script>
// alert('Hello, World!!, twice' )
</script>
<script src="js/01javascript.js"></script>
</body>
</html>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>자바스크립트 자료형</title>
</head>
<body>
<h1>자바 스크립트 자료형</h1>
<h2>변수와 상수</h2>
<p>변수는 데이터를 담는 그릇 - var, let(최신) 으로 선언</p>
<p>상수는 변하지 않는 값을 가진 변수 - const 로 선언</p>
<p>변수/ 상수 선언시 자료형을 기술할 필요 없음</p>
<script>
let k; // 변수 선언, 값 초기화 x
document.write(a); //html문서에 변수를 출력
</script>
<h2>네이밍 컨벤션 (naming convention)</h2>
<p>변수명을 짓는 규칙은 크게 4가지가 존재</p>
<p>CamelCase: 첫 단어 소문자, 다음 단어부터는 첫글자 대문자, 나머지 글자는 소문자로 작성
ex) processJoin </p>
<p>snakeCase: 모든 단어 소문자, 단어 사이는 _ 로 연결
ex) process_join </p>
<p>PascalCase: CamelCase와 유사. 단, 첫단어의 첫글자 역시 대문자로 표기
ex) ProcessJoin </p>
<p>HungarianCase: CamelCase와 유사. 단, 첫단어는 변수의 자료형을 표기
ex) intProcessJoin, strName, intAge </p>
<p>ECMAScript 규격에 따르면, 변수/함수명은 camelCase로,
클래스/생성자명은 PascalCase를 추천한다고 함 </p>
<h2>변수 선언</h2>
<p>변수 선언시 var이나 let(ES6에서 추가)을 사용</p>
<p>실무에서는 오류를 최소화하기 위해 let사용을 추천!</p>
<p>자바스크립트에서는 각 문장이 끝나면 ; 세미콜론으로 마무리 </p>
<script>
var x=5;
var y=6;
var z=x+y;
document.write('5 + 6 = ' + z);
// var x=7; //위에서 선언한 x 변수를 다시 선언
//예상치 못한 오류가 발생할 수도 있지만, 아무런 반응이 없음
var z = x+y;
document.write('<br>5 + 7 = ' + z);
</script>
<hr>
<script>
let a=5;
let b=6;
let c=p+b;
document.write('5 + 6 = ' + c)
// let a=7; //위에서 선언한 x 변수를 다시 선언
//예상치 못한 오류를 방지하기 위해 오류 캐치, 따라서 let이 좋음
// let c = a+b;
document.write('<br>5 + 7 = ' + c);
</script>
<hr>
<script>
const S=6; //(상수를 선언할 때는 대문자로 이름 작성)
const T=7;
const U=S+T;
document.write('5 + 7 = ' + U);
//s= 10; //상수는 값 변경 불가! - 오류발생
</script>
<h2>자료형</h2>
<p>javascript는 6가지의 자료형 지원 -
String, Number, Boolean, Undefined, Null, Symbol </p>
<p> 변수에는 하나의 값만 저장 - 기본 자료형(primitive) </p>
<p>문자열은 " 또는 '로 선언된 값</p>
<script>
let name = "혜교";
let phone = '123-4567-8912';
document.write(name, ' ' , phone);
</script>
<p>또한, ‵ (backtick)을 이용하면 문자열 템플릿을 사용할 수 있음</p>
<script>
document.write(`${name} / ${phone} `);
</script>
<p>숫자는 정수 또는 실수로 선언된 값</p>
<script>
let age = 35;
let weight = 85.7;
document.write(age, ' ' , weight);
</script>
<p>또한, Infinity, -Infinity, NaN 등과 같은 특수 숫자값을 사용할 수도 있음</p>
<script>
document.write('1/0 = ', 1/0); //무한대
document.write('<br>0/1 = ', 0/1);
document.write('<br>"a"/1 = ', "a"/1); // Not a Number
</script>
<p>엄청나게 큰 숫자(bigInt : 2^54)를 다룰려면 변수의 값 끝에 n이라는 접미사를 추가함</p>
<script>
const BIG = 123456789123456789123456789123456789123456789123456789n;
document.write('BIGINT = ', BIG);
</script>
<p>boolean은 참/거짓을 나타내는 자료형.
참은 true, 거짓은 false로 표현</p>
<script>
let ismarrid = false;
document.write('결혼여부:', ismarrid);
</script>
<p>undefined는 자료형이자 값이기도 함. 아무것도 존재하지 않는다는 의미.
변수 선언 후 값을 지정하지 않으면 실행시점에 브라우저 엔진이 undefined로 자동으로 할당</p>
<script>
let addr;
document.write('우리집주소', addr)
</script>
<p>Null 도 자료형이자 값이기도 함. 아무것도 존재하지 않는다는 의미.
변수 선언 후 값을 지정하고 싶지 않으면 '개발자가' 명시하여 사용 </p>
<script>
let email=null;
document.write('우리집주소', email)
</script>
<hr>
<h2>type of 연산자</h2>
<p>현재 변수의 자료형을 알아낼 수 있음</p>
<script>
document.write(`'혜교'의 자료형은 ${typeof '혜교'}<br>`);
document.write(`'123'의 자료형은 ${typeof 123}<br>`);
document.write(`'456.78'의 자료형은 ${typeof 456.78}<br>`);
document.write(`'true'의 자료형은 ${typeof true}<br>`);
</script>
<hr>
<h2>객체</h2>
<p>자바스크립트의 모든것은 객체로 취급</p>
<p>그 중에서 대표적인 객체는 Object와 배열임 </p>
<p>데이터 컬렉션이나 복잡한 개체를 표현하는데 사용</p>
<h2>Array</h2>
<p>하나 이상의 다중 데이터를 저장할 수 있는 객체</p>
<p>여러개의 값을 단일 참조할 수 있게 해줌</p>
<script>
const COFFEES = ['americano','caffe latte','mocha gold'];
document.write(`${COFFEES[0]}, ${COFFEES[2]}`);
</script>
<h2>Object</h2>
<p>키와 값 형태로 데이터를 저장하는 자료구조</p>
<script>
let person = {userid: 'abc123', passwd:'abc123', name:'혜교'};
document.write(`이름은 '${person.name}'이고, 아이디는 '${person.userid}'입니다. `)
</script>
</body>
</html>