21.12.20

binary·2021년 12월 20일

일팔공

목록 보기

6/20

자바스크립트 코드의 위치

HTML 태그의 이벤트 리스너 속성에 작성 (onclick, onmouseover, onmouseout ...)
<script> </script> 태그에 작성
- 웹 페이지 내에 여러 번 삽입 가능
- <head></head>나 <body></body> 내 어디든 가능
자바스크립트 파일에 작성
- 확장자 .js 파일에 저장
- 여러 웹 페이지에서 불러와 사용할 수 있음
- <script src="index.js/ >
URL 부분에 작성

<a href="javascript:alert('클릭됨')">클릭해보세요</a>

| 실행화면

자바스크립트로 HTML 콘텐츠 출력

document.write("<h3>Hello, world!</h3>")
Hello, world!

자바스크립트 프롬프트 다이얼로그

prompt("메시지", "디폴트 입력값") 함수

사용자로부터 문자열을 입력 받아 리턴

| 실행화면

자바스크립트 확인 다이얼로그

comfirm("메시지") 함수

"메시지"를 출력하고 '취소/확인' 버튼을 가진 다이얼로그 출력

'확인' 버튼을 누르면 true, '취소' 버튼이나 간제로 다이얼로그를 닫으면 false 리턴

| 실행화면

자바스크립트 경고 다이얼로그

alert("메시지") 함수

"메시지"와 '확인' 버튼을 가진 다이얼로그 출력, 메시지 전달

자바스크립트 식별자

자바스크립트 프로그램의 변수, 상수, 함수의 이름
식별자 만드는 규칙
1. 첫 번째 문자: 알파벳, 언더스코어 _ , $ 문자만 사용 가능
2. 두 번째 이상 문자: 알파벳, 언더스코어 _ , $, 0-9 사용 가능
3. 대소문자는 구분된다.
4. 자바스크립트 예약어 사용 불가

자바스크립트 문장

문장과 문장을 구분하기 위해 세미콜론 ; 사용

데이터 타입

숫자 타입 : 정수, 실수 (예: 2, 3.14)
논리 타입 : 참, 거짓 (true, false)
문자열 타입 : (예: "안녕하세요", "1", "3-5")
객체 레퍼런스 타입 : 객체를 가리킴
null : 값이 없음을 표시하는 특수 키워드. Null과 NULL과는 다름

자바스크립트에는 문자(char) 타입이 없음. 문자열로 표현

변수

자바스크립트 데이터 저장 공간

변수 선언
- var
- let
- const

위 키워드를 이용하여 선언할 수 있다.

키워드 없이 선언
- c = 22;
변수에 저장되는 값에 대한 제약없음
- const c = "안녕하세요";
- let b = "hi";
- var a = 2;

지역 변수와 전역 변수

여기서 x는 전역변수, y는 지역변수이다.
이때 z는 전역변수일까, 지역변수일까?

let x;
function f() {
  x = 10;
  let y = 10;
  z = 10;
  console.log("x의 값은", x);
  console.log("y의 값은", y);
  console.log("z의 값은", z);
}
f();
console.log("전역변수 x", x);
console.log("전역변수 z", z);
console.log("지역변수 y", y);

함수 안에서 정의되었으니 지역변수라고 생각했는데 사실 z는 전역변수 였다. (y는 지역변수라서 정의되지 않았다고 뜬다.)
함수 안에서 어떤 키워드 없이 변수를 선언하면 자동 전역 변수가 된다.

this로 전역변수 접근

지역 변수와 전역 변수의 이름이 같은데 전역 변수에 접근하고 싶을 때 this.x

// 전역변수
var x = 100;
function f() {
  // 지역변수 
  var x = 1;
  document.write(`지역변수 x = ${x} <br>`);
  document.write(`전역변수 x = ${this.x}`);
  
}
f();

| 실행화면

// 전역변수
var x = 100;
function f() {
  // 지역변수 
  var x = 1;
  document.write(`지역변수 x = ${x} <br>`);
  document.write(`전역변수 x = ${this.x}`);
  console.log(x);
  console.log(window.x);
}
f();