Contents
접기
자바스크립트란
- <script> </script>사이에 코드를 입력해야 한다.
- head 태그 사이나 bady 태그 사이 어느 곳에 있어도 괜찮다.
- 단, script 에서 dom에 접근하려면 dom이 완성된 이후에 접근해야 한다.
alert() : 경고창
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>자바스크립트 시작</title>
<script>
alert("경고창1");
//DOM 을 모른다. (DOM 조작을 직접 못하기 때문에 이벤트 처리를 해야한다.)
</script>
</head>
<body>
<h2>자바스크립트 시작</h2>
<p>
<script> 와 </script> 사이에 코드를 입력해야 한다. <br>
head 태그 사이나 bady 태그 사이 어느 곳에 있어도 괜찮다. <br>
단, script 에서 dom에 접근하려면 dom이 완성된 이후에 접근해야 한다.
</p>
<script>
alert("경고창2");
//DOM 을 알고 있다. (DOM 조작을 할 수 있다)
</script>
</body>
</html>
데이터 타입
자료형
| 종류 | 내용 |
| 문자열 | 대한민국", '대한민국' |
| 숫자형 | 정수, 실수, 모두포함된 숫자 |
| boolean 형 | true, false (0을 제외한 모든 숫자가 true) |
| 함수형 |
- 선언 함수 : 일반 변수이지만 함수인 것 처럼 실행시킬 수 있다. - 표현 함수 |
| 객체형 |
- Object 타입 - JSON : 주로 비동기 통신을 위한 데이터 타입 - array : 배열 (2차원 배열도 가능하지만 잘 사용하지는 않는다.) - html 객체 (닫힌 태그 경우 다른값으로 바꿀 수 있다) - null 객체(오류) : 변수가 아무 객체도 가리키지 않고 있음을 나타낸다 (JS V1 부터 나온 오류) - undefined 타입 : 변수에 값이 존재하지 않음을 나타낸다. (변수를 만들고 초기화하지 않으면 undefined 이다. - 오류 아님) |
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>데이터 타입과 변수</title>
</head>
<body>
<h2 id="header">자바스크립트 결과는 콘솔창으로</h2>
<script>
//자료형
// 1) 문자열 : "대한민국", '대한민국',
let str = "대한민국"; // 변수 선언
console.log(str);
console.log(typeof str);
console.log(`철수는 ${str} 사람입니다.`);
// 2) 숫자형 : 정수, 실수, 모두포함된 숫자
let number = 12;
console.log(number);
console.log('나이는:' + number); // + : 문자열 결합으로 사용
console.log(number/5); // 연산은 실수형으로
// 3) boolean 형 :true, false (0을 제외한 모든 숫자가 true)
let bool = true;
console.log(typeof bool);
console.log(10 > 20);
if(1) console.log('1은 true와 같다.');
// 4) 함수형
// 선언적 함수
function add(a,b) {
return a+b;
}
let sum = add; // 일반 변수이지만 함수인 것 처럼 실행시킬 수 있다.
console.log('sum의 결과 : ' + sum(21,11));
// 표현 함수
let minus = function(a,b) {
return a - b;
}
console.log(typeof add);
console.log(typeof minus);
console.log(`더하기 결과 : ${add(10,20)}`); // back-tick 만 가능 하다.
console.log(`빼기 결과 : ${minus(10,20)}`) ;
// 결과를 브라우저에 출력 : 사용하지 마세요.
document.write(typeof bool);
// 5) 객체형 :객체의 종류가 여러가지 있음
// 5-1) Object 타입
let obj = {name : '홍길동', age : 25};
console.log(typeof obj);
console.log('이름은 ' + obj['name']); //사용방법 1)
console.log('나이는 ' + obj.age); // 사용방법 2)
console.log(obj);
// 5-2) JSON : 주로 비동기 통신을 위한 데이터 타입
let data = {"name":'홍길동', "age":25};
// 클라이언트 - 서버 간의 데이터를 주고받게 되면 데이터는 직렬화가 되어있다
console.log('----------------');
// 5-3) array : 배열
let ary = [2,4,6,8];
console.log(typeof ary);
console.log(ary);
console.log(ary[1]);
// 2차원 배열도 가능하지만 잘 사용하지는 않는다.
console.log('----------------');
// 5-4) html 객체
let html = document.getElementById('header');
console.log(typeof html) // object
console.log(html)
// 값을 가져오기
let a = html.innerHTML;
console.log(a)
// 닫힌 태그 경우 다른값으로 바꿀 수 있다.
html.innerHTML = "바꿨습니다.";
// alert(html); : [object HTMLHeadingElement]
// 5-5) null 객체 - 오류
// 변수가 아무 객체도 가리키지 않고 있음을 나타낸다 - JS V1 부터 나온 오류
let temp = null;
console.log(typeof temp);
// 6) undefined 타입
// 변수에 값이 존재하지 않음을 나타냄
// 변수를 만들고 초기화하지 않으면 undefined 이다. - 오류 아님
let noInit;
console.log(noInit);
console.log(typeof noInit);
// 7) Symbol
// 데이터의 유일성을 보장하기 위해 사용
let b = Symbol();
</script>
</body>
</html>
Javascript Scope ( global, local )
| - 지역공간에서는 글로벌 공간의 접근 가능하다. 그러나 반대는 불가능하다. |
| - 지역변수는 전역변수보다 우선순위가 높다. |
| - arrow function (화살표 함수) : scope 의 개념이 없다. |
| 자바 | 자바스크립트 |
| Strongly typed 언어 -> 문법이 엄격한 언어 | Weakly typed 언어 -> 변수를 선언한 후 다른 타입을 대입해도 상관없음 |
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>변수의 선언과 Scope</title>
</head>
<body>
<h2>변수의 선언과 Scope</h2>
<p>출력결과는 콘솔창에서 확인</p>
<p>자바스크립트 : Weakly typed 언어 -> 변수를 선언한 후 다른 타입을 대입해도 상관없음</p>
<p>자바 : Strongly typed 언어 -> 문법이 엄격한 언어</p>
<script>
// var
// let
// const
var a = "스물";
var a =20; // 에러가 나지 않는다.
let b = "서른";
// let b = 30; // 오류
b = 30; // 재선언은 되지 않지만 값 변경은 가능하다
const c = "마흔";
// c = 40; //오류
// alert("이것은 경고");
function add(a,b) {
let result = a+b;
console.log("합계: " + result);
}
add(10,20);
// console.log(result); // 오류
let total = 0;
for(let i=1; i<=10; ++i){ // i 는 지역변수
total += i;
}
console.log("1~10까지의 합계:" + total);
// console.log("마지막 i값 : " + i);
console.log('--------------------------');
let x = 20; // 전역 변수
{ // 새로운 지역 생성
let x = 10; // 지역공간에 x 변수를 * 새롭게 * 생성하는 것이다.
console.log(x);
}
console.log(x);
console.log('--------------------------');
let y = 20; // 전역 변수
{
y = 10; // 전역 공간의 y 변수를 사용하는 것이다.
console.log(y);
}
console.log(y); // 63 라인에서 값이 바뀌기 때문에 10이 출력된다.
console.log('---------------- const -----------------');
const k = 20; // 단일데이터 : 값 변경 못함
const l = {x:10, y:20};
// l = {x:100, y:200}; // 에러 -> 다른 데이터를 가질 수 없다.
l['x'] = 100;
console.log(l); // l 이 가리키는 변수는 변경 가능하다.
</script>
</body>
</html>
자바스크립트 엔진 : https://ko.wikipedia.org/wiki/%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8_%EC%97%94%EC%A7%84
자바스크립트 엔진 - 위키백과, 우리 모두의 백과사전
위키백과, 우리 모두의 백과사전. 자바스크립트 엔진(JavaScript engine)은 자바스크립트 코드를 실행하는 프로그램 또는 인터프리터이다. 자바스크립트 엔진은 전통적인 인터프리터일 수도 있고,
ko.wikipedia.org
'풀스택 개발 학습 과정 > 프론트엔드' 카테고리의 다른 글
| [자바스크립트] 연산자, 반복문과 제어문, defer (0) | 2024.03.02 |
|---|---|
| [HTML + CSS] CSS 4 - float / flex 를 이용한 콘텐츠 배치 (0) | 2024.02.25 |
| [HTML + CSS]CSS 3 - Position (0) | 2024.02.25 |
| [HTML + CSS] CSS 2 - 텍스트 스타일, 배경색과 이미지, Display, Float (0) | 2024.02.25 |
