1. script 위치
<body> </body>사이에<script> </script>
2. javascript 변수
(1) 변수의 선언과 할당
- 변수의 선언
// num, hello변수 선언
// 변수 타입 없음
var num;
var hello; - 실제 사용하는 변수 선언
let num;
const num; ▪ let(메인)
-> 변수에 재할당 가능
-> 변수 재선언 불가능
▪ const
-> 변수 재할당 불가능
-> 변수 재선언 불가능
-> 재할당이 필요 없는 상수와 객체에는 const를 사용- 변수의 할당
num = 12345;
hello = "안녕하세요";
hello = '안녕';
//홑따옴표 사용가능⭐ typeof -> 데이터 타입 알려줌
(2) 변수의 종류
-
javascript의 변수는 표현하는 값의 종류에 따라서 형식이 구분된다.
- Number(정수, 실수)
-> 숫자를 표현하거나 산술 연산에 사용
- String(문자열)
-> 문자열을 표현하는 데 사용되는 데이터타입.
-> 쌍따옴표(""), 홑따옴표('') 사용 가능 - Boolean(참, 거짓)
-> true, false 값 - Object(객체)
-> 객체를 저장하기 위한 데이터 타입.
-> 브라우저 제어 기능, Form제어, HTML 태그 요소에 대한 제어 등이 가능하다. - Null(값 없음)
-> 개발자가 의도적으로 변수의 공간을 비워 놓은 상태 - undefined(정의되지 않음)
-> 처음부터 변수가 선언만 되고 아무런 값도 할당되지 않은 상태를 의미
-> 어떠한 처리도 불가능하다. (자바의 null과 비슷)
- Number(정수, 실수)
⭐ Null과 undefined의 차이
-
java
-> 변수의 선언시에 자료형이 결정
-> 객체의 경우 null, 숫자형태의 변수는 0, boolean은 false로 기본값이 할당되었다고 간주 -
javascript
-> 변수의 선언시에는 변수의 존재 여부와 스코프(범위)만 결정
-> 자료형은 값을 할당할 때 자동으로 결정
-> 자료형이 결정되지 않은 상태이기 때문에 기본값 할당 x, 무조건 undefined로 할당
-> javascript는 할당되지 않은 변수에 대하여 자동으로 기본값이 적용 x
-> 기본값을 설정하기 위해서는 개발자가 직접 값을 할당해 주어야 함
-> null은 이 때 사용하는 객체 변수에 대한 기본값으로 사용된다.
-> 즉, null은 기능이 부여되지 않은 비어있는 객체 상태를 의미
3. script 출력하기
<body>
<script>
document.write("안녕하세요");
//html 태그 포함
document.write("<h1>안녕하세요</h1>");
</script>
</body> - 자바스크립트에서 HTML페이지의
<body>태그 안 ->document라고 부름 <body>태그 안에 새로운 내용을 출력하고 싶을 경우 -> 자바스크립트에게"쓰다"라는 명령어 전달- HTML태그 안에 출력되는 내용이므로, 다른 HTML태그를 포함하여 출력할 수 있다.
✔ 결과
4. 연산자
- 대부분 java와 같음
- '=' vs '==' vs '==='
- '=' : 대입연산자
- '==' : 단순 비교 연산자
- '===' : 비교 연산자 (자료형까지)
💡 예시
console.log(1 == "1"); //true
console.log(1 === "1"); //false
console.log(null == undefined); //true
console.log(null === undefined); //false
console.log(true == 1); //true
// 1을 true로 0을 false로 인식하는 경우가 있음
console.log(false == 0); //true
console.log(true == '1'); //true
console.log(true === '1'); //false
console.log(1 != 2); //true
console.log(1 != 1); //false5. 함수
(1) 함수의 선언과 호출
- 함수의 정의(선언)방법
function 함수이름(){
... 실행할 구문..
}
let 함수이름 = function(){
... 실행할 구문..
}
- 함수 호출 방법
함수이름();- 일회성 호출 = 익명함수
(function(){
... 실행할 구문..
})();(2) 파라미터(Parameters)
- 파라미터를 기술
function 함수이름(파라미터){
.. 실행할 구문..
}- 파라미터가 있는 함수 호출
함수이름(파라미터);(3) 다중 파라미터
- 자바스크립 함수의 다중 파라미터
function 함수이름(파라미터1, 파라미터2, ..){
... 실행할 구문 ..
}- 다중 파라미터가 있는 함수 호출
함수이름(파라미터1, 파라미터2, ...);(4) 리턴값
- 결과값 되돌려 주는 값
function f(x){
return x + 1;
}- 호출
var y = f(5);⭐ return문
- 자바스크립트 함수는 처리 도중 return 문을 만나게 되면 그 즉시 실행 중단
- 처리 중단을 목적으로 return 문을 사용
- 리턴값 없이 처리를 중단하고자 하는 경우에는 return 키워드만 사용
- 값 없이 리턴 결과를 변수에 대입한 경우, 정의되지 않은 값인 "undefined"가 대입
(5) 화살표 함수
- 함수 표현식보다 단순하고 간결한 문법으로 함수를 만들 수 있다.
1) 매개변수 지정하는 방법
- 매개변수가 없는 경우
() => {...}- 매개변수가 한 개인 경우
x => {...}
// 소괄호 생략가능- 매개변수가 여러개인 경우
(x, y) => {...}
// 소괄호를 생략불가2) 함수 몸체 부분
- 함수 몸체가 한 줄일 때
x => x * x
// 중괄호를 생략 가능 , 암묵적으로 retrun - 함수 몸체가 여러 줄
() => {
const x = 10;
return x;
}
// 중괄호 생략불가(6) 주요 함수
eval : 문자열 계산하여 리턴
💡 예시
<script>
/* 주어진 문자열을 수식으로 변환하여 리턴한다. */
let str = "100+1";
document.write("<h1>" + str + "</h1>")
/* 문자열을 계산하여 리턴 */
let result = eval(str);
document.write("<h1>" + result + "</h1>")
</script>🕜 결과
alert : 경고창 출력
prompt : 경고창에 입력
💡 예시
<script>
let age = prompt("나이를 알려주세요", 18);
/* () 조건 ? 참일경우 : 거짓일경우 => 삼항연산자 */
let welcome = (age < 18) ?
() => alert('안녕') :
() => alert('안녕하세요') ;
welcome();
</script>🕜 결과
**confirm : 확인, 취소 선택 가능한 경고창
💡 예시
let user_id = prompt("아이디를 입력하세요","");
// 빈 문자열이 아닌 경우에만 실행
if( user_id != "" ){
alert("안녕하세요." + user_id + "님");
let result = confirm("정말 로그아웃 하시겠습니까?");
if(result){
alert("로그아웃 되셨습니다.");
} else {
alert("로그아웃이 취소 되셨습니다.")
}
}🕜 결과
isNaN : 숫자형인지 아닌지 검사
- 숫자형 : false, 숫자형 x : true
💡 예시
let v1 = "가나다라";
let v2 = "1235";
let is_num1 = !isNaN(v1);
let is_num2 = !isNaN(v2);
if( is_num1 ){
document.write("<h1>"+ v1 + "는 숫자이다.</h1>");
} else {
document.write("<h1>"+ v1 + "는 숫자가 아니다.</h1>")
}
if( is_num2 ){
document.write("<h1>"+ v2 + "는 숫자이다.</h1>");
} else {
document.write("<h1>"+ v2 + "는 숫자가 아니다.</h1>")
}🕜 결과
Number(), parseInt() : 문자열의 변수가 숫자모양 -> 실제 숫자형으로 변환
- Number() : 주어진 문자열이 "100.6"일 경우 100.6이라는 실수 형태로 변환
- parseInt() : 주어진 문자열이 "100.1"일 경우 정수형태인 100만 리턴 (소수점은 내림)
- 숫자형태가 아닌경우 "NaN"이라는 값을 리턴
💡 예시
let value = "100";
let num1 = Number(value);
let num2 = parseInt(value);
let r1 = value + 1;
let r2 = num1 + 1;
let r3 = num2 + 1;
document.write("<h1>r1 = " + r1 + "</h1>")
document.write("<h1>r2 = " + r2 + "</h1>")
document.write("<h1>r3 = " + r3 + "</h1>")🕜 결과
안녕하세요, 한보람입니다.