📕 script 태그
-
<script type="text/javascript"> </script> -
태그를 사용하여 자바스크립트를 작성할 영역을 표시
= 자바스크립트 선언문
-> 태그 내에서 자바스크립트 코드 작성
-
<head>태그 또는<body>태그 어디서든 선언 가능 -
type 속성은 생략 가능
-
HTML 태그와 함께 별도의 함수가 아닌 이상 차레대로 실행됨
<script type="text/javascript">
alert("자바 스크립트 실행됨!");
</script>🔗 참고
자바스크립트 내에서 한 줄 주석과 범위 주석은 자바와 사용법이 동일하다
📕 데이터타입
- 자바와 동일한 데이터 타입을 사용하지 않는다
(동일한 타입도 존재함)
-
문자(String), 숫자(Number), 논리(Boolean), 특수값 Null 등 사용
-
별도의 데이터타입을 저장하지 않고 일반적인 공통 타입으로 변수를 선언하며, 저장되는 데이터에 따라 해당 변수의 데이터 타입이 자동으로 결정됨
->
var또는let또는const중 하나를 타입처럼 사용
-
var str = "자바스크립트";-> 자동으로 String 타입으로 저장됨
(자바스크립트에서는 문자와 문자열의 구분이 없다)
-
var num = 100;num = 3.14;-> 정수와 실수 구분 없이 모두 number 타입으로 취급됨
-
var b = true;-> boolean 타입으로 취급됨
⛔ 자바스크립트의 특수한 데이터타입
1. undefined 타입
var i;
alert(v1);-
변수 안에 데이터를 입력하지 않은 상태
-> 자바에서는 아무 데이터도 저장하지 않고 출력시 오류 발생
-
아무 데이터도 저장하지 않을 경우 값이 정해지지 않았으므로 undefined 값이 저장됨
-
데이터타입 역시 undefined로 취급됨
2. null 타입
var v2 = null;
alert(v2);- 변수에 특수값인 null 값 저장 시 object 타입으로 취급됨 (소문자 null 필수)
🔗 참고
typeof 키워드 : 특정 변수 또는 데이터의 데이터타입 확인
- typeof 변수명 또는 typeof 데이터
- typeof(변수명) 또는 typeof(데이터)
📕 변수
< 자바스크립트 변수 기본 문법 >
데이터타입 변수명;
데이터타입 변수명, 변수명, 변수명;
변수명 = 값;
데이터타입 변수명 = 값;
- 변수명 지정 시 자바의 식별자 작성 규칙과 거의 동일한 규칙이 적용됨
1. var
-
동일한 이름의 변수를 다시 선언하더라도 문제없이 사용 가능
-
다른 데이터로 변경 시에도 문제 발생X
-> 실수로 동일한 이름의 변수를 선언할 경우 오류가 발생하지 않으므로 알기 어려움
⭐ 입력
var num1 = 10; // num1에 10 초기화
var num1 = "홍길동";
// 이미 선언된 num1 변수를 다시 선언하면서 다른 데이터로 변경
document.write(num1);📌 출력
홍길동2. let
-
var와 기본 사용법 동일함
-
동일한 이름의 변수를 다시 선언 불가능
-
변수 값 변경은 가능함
-
중복 발생 시 오류를 표시해주기 때문에 알아차리기 쉽다
let num2 = 10;
let num2 = "홍길동"; // 오류 발생
document.write(num1);
// 변수 중복으로 인한 오류가 발생하므로 해당 코드를 실행할 경우
// 동일한 스크립트 태그 내에 있는 다른 코드도 모두 실행되지 못함3. const
-
constant의 약자로 상수를 의미
-
한 번 저장된 값은 불변이므로, 다른 값으로 변경할 수 없음
const num3 = 99;
num3 = 78; // 오류 발생
// const로 선언된 변수는 상수로 취급되므로 값 변경 불가📕 파일 불러오기
-
<script>태그 내의 src 속성을 사용하여 불러올 자바스크립트 파일을 지정<script src="경로명 / 파일명"></script>
-
외부에서 파일 등을 불러올 때 경로를 지정 방식: 절대경로, 상대경로
1. 절대 경로
-
특정 자원의 위치를 절대적인 경로로 지정
-> 인터넷 주소, 컴퓨터 디스크 내의 위치 등을 직접적으로 지정
-
어느 위치에서라도 접근이 가능한 형식의 경로
= 변하지 않는 경로
절대 경로 방식을 사용하여 javascript1 폴더에 있는 test.js 파일 지정
<script src="http://localhost:8080/Study_Javascript/javascript1/test.js"></script>
<script type="text/javascript">
alert("src 속성이적용되지 않은 스크립트 내의 자바스크립트!");
</script>🔗 참고
http://localhost:8080/Study_Javascript경로에서 프로젝트명에 해당하는 Study_Javascript까지만 지정하면 이클립스 프로젝트 상의 webapp 폴더와 동일한 위치로 취급된다
- src 속성을 사용하여 외부 자바스크립트 파일을 불러올 경우 해당 script 태그 사이에 자바스크립트 코드를 작성해도 실행되지 않기 때문에 별도의 script 태그를 사용하여 코드를 작성해야 한다
2. 상대경로
-
특정 자원의 위치를 어떤 대상을 기준으로 지정한 경로
-> 기준이 되는 위치에 따라 경로가 변할 수 있음
-
./: 현재 파일이 위치한 폴더를 기준으로 지정(./ 생략해도 동일)<script src="test.js"></script><script src="./test.js"></script> -
./하위폴더명/: 현재 파일이 위치한 폴더 내의 하위폴더를 기준으로 지정(./ 생략해도 동일)<script src="./inside_js/test.js"></script><script src="inside_js/test.js"></script> -
../: 현재 자신의 위치에서 1단계 상위 폴더를 기준으로 지정<script src="../js/test3_1.js></script> -
/: 현재 자신의 위치를 기준으로 최상위 폴더 지정-> 기본적으로 웹프로젝트의 최상위 폴더는
http://주소/
📕 내장 함수
- 자바스크립트에 내장된 함수
-
자바스크립트 언어 자체에서 구현하여 제공하므로 내장 함수 호출을 통해 구현된 기능을 사용
-
함수(function)와 메서드(method)는 거의 동일
-
대표적인 내장 함수
alert( )prompt( )confirm( )
< 내장 함수 호출 기본 문법 >
함수명([전달인자...]);
1. alert( ) 함수
-
전달되는 데이터를 웹브라우저 다이얼로그(팝업창)을 통해 출력하는 함수
-
alert( ) 함수 소괄호 사이에 출력할 데이터 또는 변수 등을 전달
-
이스케이프문자 \n을 활용하여 줄바꿈 처리도 가능함
⭐ 입력
alert("안녕하세요!");📌 출력
2. prompt( ) 함수
-
웹브라우저 팝업창을 통해 입력 다이얼로그를 생성하여 사용자로부터 입력받을 수 있는 함수
-
함수 실행 후 입력되는 값을 리턴하므로, 리턴값을 저장할 변수 필요
-
입력되는 모든 데이터는 무조건 문자열(String) 형태로 취급됨
-> 정수 등의 수치 데이터 등으로 활용하기 위해서는 별도의 변환이 필요
-
데이터를 아무것도 입력하지 않고 확인 버튼 클릭 시 널스트링 값이 입력됨
-> 아무 데이터도 없지만 String 타입으로 취급되는 빈문자열이 입력됨
-
취소 버튼 클릭 시에도 null 값이 입력되며, 이 경우 데이터타입은 object 타입으로 취급됨
-
입력값을 변수에 저장하지 않고 출력문에 직접 활용도 가능
-> 입력된 값은 재사용 불가
alert(prompt("이름을 입력하세요."));
⭐ 입력
prompt("이름을 입력하세요.");📌 출력
3. confirm( ) 함수
-
사용자로부터 확인 및 취소 버튼을 통해 확인 작업을 수행하는다이얼로그 표시
-
확인 클릭 시 true, 취소 클릭 시 false 값 리턴
