HTML,CSS,JS 8일차

자바스크립트 사용법

1. <script> 내부에 작성 </script>
2. 파일명.js 파일을 만들어서 코드 작성 후 src 경로로 연결
3. head 안에도 script 작성가능 (사용시 주의요함!)
4. body 태그 내 가장 하단에 script를 위치시켜 작성 (가장 많이 사용)
5. 마지막 끝처리 ; (필수사항은 아님.)

자바스크립트의 변수

• 값을 담고있는 메모리 공간의 이름
• java => 자료형 변수명 (int, double, float, long .. 8개의 자료형)
• 자바 스크립트는 변수를 선언하는 역할만 함. (자료형이 없음)
• var(비권장), let, const
• var 변수의 중복선언이 가능.
• var a = 10; var a = [10,20,30]; => 가능
• let은 중복선언 불가능, 재할당은 가능 자바에서 사용되는 지역변수의 개념
• let name = '홍길동'; name = '김영이'; => 재할당 가능 let name = '박순이'; => 재정의 불가능
• const : 중복선언 불가능, 재할당도 불가능 const name = "홍길동"; name = "김영이"; => 재할당 불가능
• const : 고정된 값을 사용하는 규칙, 객체, 엘리먼트 정의시 사용
• 스코프(scope) : 변수의 사용범위 { } 안에서만 사용가능. 스코프를 벗어나면 재선언 가능.

데이터 타입: 변수나 상수에 할당할 수 있는 값의 종류

• 숫자 : Number => 정수, 실수, NaN (not a Number : 숫자가 아님)
• 문자 : String => "", '', `` 감싼 데이터
• 불리언 : Boolean => true / flase
• 객체 : Object => 1개 이상의 데이터가 특정 구조를 가지고 있는 형태 {키:값} {} : 아무값이 없어도 1개의 객체로 취급
• 배열 : Array => [1,2,3,4] 형태의 집합 (java/python list와 같은 형태 index(순서) length(길이)가 있음)
• 알수없는 값 : null => 인지가 안된 상태
• 미지정된 값 : undefined => 선언은 되었지만 값이 할당되지 않은 상태

1. 기본자료형 : 값이 메모리에 주소값을 가르키는 곳에 직접 할당이 되어있는 값 number,boolean,string(참조자료형이지만 편의상 기본자료형과 같이 사용)
2. 참조자료형 : 값이 저장되어 있는 주소를 할당 (간접할당) string,array,object,function,null,undifind
3. == 같다(값만 비교) != 같지않다
4. === 같다 (값과 타입이 같은지 비교) !== 같지않다
5. 삼항연산자 => (조건식? true : false)

함수(function) : 특정 기능을 수행하기 위해 작성한 코드

• 함수는 호출되어야만 실행 (자바의 method와 같은 의미)
• 자바는 class => method 생성
• 자바스크립트는 어디서든 function 생성가능

• function 이라는 키워드를 사용하여 정의
• function 함수명(파라미터){ 로직작성; return 값; }
• 함수명 : 기능을 함축하는 의미로 작성
• 파라미터(매개변수) : 선택적으로 작성 (없어도 ()는 있어야 함.)
• 자바스크립트에서는 파라미터의 자유도가 높아 다양한 형태로 사용가능.
• return 함수 종료의 역할과 동시에 특정 값을 호출한 위치로 반환

함수의 파라미터 / 리턴 타입 사용

• 파라미터 : 함수 내부에서 사용될 값을 외부에서 전달 받는 값
• 파라미터의 개수는 제한이 없으나, 많으면 관리가 힘듦
• 파라미터의 타입도 제한이 없음. 전달된 타입을 그대로 사용
• 파라미터의 변수명은 외부 변수명과 같아도 상관없고, 달라도 상관없음. 함수 내부에서 사용될 값이므로 함수 내부의 지역변수와 이름이 다르기만하면 됨.
• return의 유무에 따라 값을 리턴할 수 있고, 종료 시점도 결정

Object : 객체

• Object : 데이터의 구조를 상세 특징으로 표현하려는 형식
• const로 선언하는 것이 일반적 : 객체의 구조를 보호. 지속성있게 유지 확보하기위함.
• {키(속성명) : 값, 키:값, 키:값, ...}
• 속성명 : key, 값 v :value
• 같은 Object 안의 같은 속성명은 불가능 (key는 중복불가능)
• 객체 내부에서 속성값으로 사용될 수 있는 데이터는 제한이 없다
• 객체의 속성값으로 익명함수를 정의 = 메서드라고 부름 메서드의 이름은 속성명이됨

이벤트 객체 : 전역객체로서 모든 태그에 객체를 참조시킬 수 있다.

• a tag / button tag에 이벤트를 참조시켜 사용 클릭에 대한 반응을 기대할 수 있게 만드는 것이 일반적
• a tag는 자체 이동 (href 속성)이 구현 별도로 이동을 막는 코드가 필요
• 객체에 이벤트를 부여하는 방식이 크게 3가지
• 각자 목적과 작동방식이 좀 다름

• 화면에 출력 영역을 document(영역 / 객체) 라고 한다.
• DOM 영역
• tag : html element, 속성은 attribute, 일반텍스트 textNode라고 함
• html 객체를 가져올 때 id 속성으로 가져오기 : getElementById('idName') class 속성으로 가져오기 : querySelector('selector') => . #
• html 화면에 출력할 때 Html elemnet 로 출력 : innerHtml 라는 property를 사용 일반 텍스트로 출력 : innerText라는 property를 사용

연산자

• 산술연산자 : 사칙연산(+ - * /), 나머지 (%), 제곱(**) 등 ...
• 대입연산자 : = += *= -= 자체값을 연산하여 다시 대입 a = b : a 변수에 b 값을 대입하라 a += b : a 변수에 a+b 값을 대입하라 a = a + b
• 비교연산자 : 이상(>=), 이하(<=), 초과(>), 미만(<), 같다(==), 다르다(!=) 비교연산자의 결과는 항상 true/false
• 논리연산자 : and(&&), or(||), not(!)
• 증감연산자 : ++(1씩 증가) --(1씩 감소)
• 비트연산자 : 웹 분야에서는 활용도가 낮음.
• 삼항연산자 : (조건식) ? true : false