2024-08-12 :: 016 Java Script 기초 ①

데이터 출력 방식	설명
innerHTML 속성	HTML문자열을 속성값으로 선택한 요소의 자식에 덮어 씌움
document.write()	document(body에 해당함)에 HTML로 작성하는 방식
window.alert()	경고창을 띄워주는 방식 (window.은 생략해도 작동하는데 상관이 없다)
console.log()	콘솔 브라우저(F12 개발자 모드에서 확인 가능)에 표시하는 방식
confirm()	사용자에게 확인 대화 상자를 표시함 (확인/취소 버튼이 존재, 확인=True / 취소=false)

 

데이터 입력 방식	설명
prompt()	사용자에게 입력을 요구하는 대화 상자를 표기하는 방식 ex) prompt("질문 텍스트", "예시 텍스트") 입력된 데이터는 문자열로 인식함
요소의 value	document.querySelector("CSS선택자(id/class)")로 요소 선택 후 value 속성에 값 입력 ex) document.querySelector("#demo").value = "입력 값"

 

---

 

See the Pen Untitled by 무기미도 (@gfifvcbf-the-typescripter) on CodePen.

 

 

   document.querySelector('#demo') CSS선택자로 p태그를 선택한 후, .innerHTML='Hello JavaScript!' 를 입력해 HTML문자열을 해당 속성값에 덮어씌우는 스크립트를 작성했다. 해당 버튼을 누르면 글자가 바뀌는 것을 볼 수 있다. 

 

 

See the Pen Untitled by 무기미도 (@gfifvcbf-the-typescripter) on CodePen.

 

   비슷한 방식으로 보이지 않았던 p태그의 글자를 보일 수 있도록 속성을 바꿀 수 있다. display값을 none으로 지정했던 p태그를 선택하고 반대로 보일 수 있도록 block 값을 주게되면 버튼이 작동함과 동시에 숨겨져 있던 p태그가 나타난다.

 

   자바스크립트에서 사용할 변수 선언 규칙에 관해서는 다음과 같다.

변수명 (예시)	설명	사용여부
20Variable	숫자로 시작되는 변수	변수 이름은 문자로 시작해야하기 때문에 숫자가 먼저 오면 안된다
%var	특수문자로 시작되는 변수	특수문자로 시작되어선 아니되나 $와 '_' 는 사용할 수 있다
multi class	문자 사이에 공백이 있는 변수	사용 불가 (대소문자를 구분할 수 있기 때문에 multiClass 와 같은 카멜표기법을 추천한다.)
import	예약어 그대로 쓴 변수	예약어는 변수로 사용할 수 없다
이름	한글로 이루어진 변수	사용 가능
$start	허용된 특수문자로 시작되는 변수	허용된 특수문자로 시작되는 것은 사용할 수 있다

 

 

   이렇게 선언된 변수에는 각 데이터가 담기게 되는데, 그 안에 담길 데이터의 유형을 결정하는 선언을 작성할 수 있다.

자료형		의미	내용
기본 자료형	Number	숫자형	정수 혹은 실수 (따옴표 없이 작성)
	String	문자열형	문자열 (따옴표 내에서 작성)
	Boolean	부울형	참 혹은 거짓의 결과값을 갖는 데이터나 수식
복합 자료형	Symbol	심볼형	유일하고 변경 불가능한 기본 값
	Object	객체형	객체를 정의
	Array	배열형	값들의 집합체
	Function	함수	실행 가능한 코드의 집합체
특수 자료형	undefined	정의되지 않은 값	값을 할당받지 못한 유형
	null	공백 값	값이 없음