웹개발 기초/JavaScript

js 기본개념

미미_밍 2024. 3. 6. 02:22


1. 자바스크립트(javascript)
객체 기반의 스크립트 언어
HTML 웹의 내용 작성, CSS 웹 디자인, javascript 웹의 동작을 구현

자바스크립트-----인터프리터------컴퓨터
웹 브라우저에서는 자바스크립트 소스를 읽고 처리하는 해석기(javascript interpreter)

컴파일 과정이 없이 브라우저 내부의 자바스크립트 처리기(인터프리터)에 의해 바로 실행된다

1) 자바 스크립트 역사
1995년 넷스케이프사 브렌던아이크가 개발
모카 -> 라이브 스크립트 -> 자바스크립트

2) 자바스크립트의 특징
퍼즐 조각처럼 코드형태로 html 페이지 내장된다
컴파일 과정이 없이 브라우저 내부의 자바스크립트 처리기(인터프리터)에 의해 실행

[index.html] [웹브라우저]
<script>
자바스크립트코드 -> 인터프리터 -> 결과출력
</script>

3) 자바와 자바스크립트
직접적인 관련은 없음
문법상 비슷한 부분 C언어를 기반으로 만들어졌기 때문

자바 
컴파일언어 
타입검사를 엄격하게함  
클래스기반의 객체지향언어 

 

자바스크립트

인터프리터 언어

타입을 명시하지 않음

프로토 타입기반의 객체지향언어


4) 웹 페이지에서 자바스크립트의 역할
웹페이지는 3가지(HTML, CSS, JS) 코드가 결합되어 작성된다
자바스크립트는 사용자의 입력을 처리하거나 웹 어플리케이션을 작성하는 등의
웹 페이지의 동적 제어에 사용된다

- 사용자의 입력 및 계산
- 웹페이지 내용 및 모양의 동적 제어
- 브라우저 제어
- 웹 서버와의 통신
- 웹 애플리케이션 작성(API)

장점
- 웹페이지의 반응성 향상
- 효율적인 데이터 전송
- 사용자와 상호작용할 수 있는 다양한 기능

2. JS 환경 구축
Node.js : 크롬 V8 JavaScript 엔진으로 빌드된 JavaSript 런타임환경
2009년 라이언 달이 발표
npm(node package manager) : 자바스크립트 패키지 매니저

- Node.js 사용이유
javascript 스크립트 언어, 특정 프로그램 안에서 동작하는 프로그램이기 때문에 웹 브라우저에서 동작한다
자바스크립트를 웹 브라우저에서 독립시켜, Node.js 터미널 프로그램에서 Node.js를 사용하면
웹브라우저 없이 자바스크립트를 실행할 수 있다

- 환경변수 설정(윈도우만, 맥북은 바로 가능)
폴더 경로를 복사(c:\nodejs) ★경로상에 띄어쓰기 있으면 적용되지 않음
환경 변수 -> [속성]-[고급 시스템 설정]-[환경변수]
[시스템 변수]-[새로만들기]
변수이름 :  NODE_HOME
변수값 : 경로
[시스템 변수]-[Path] 더블클릭
[새로만들기]-> %NODE_HOME%


3. 자바스크립트를 작성할 수 있는 있는 위치
1) HTML 태그의 이벤트 리스너 속성에 작성
HTML 태그에는 마우스가 클릭되거나 키보드의 키가 입력되는 등의 이벤트가 발생할 때
처리하는 코드를 등록하는 리스너 속성이 있다
이 속성에 자바스크립트 코드를 작성할 수 있다

2) <script></script> 내에 작성
<head></head>, <body></body>, body태그 밖에 등 어디든 들어갈 수 있다
웹 페이지 내에서 여러번 작성할 수 있다

3) 자바스크립트 파일에 작성
자바스크립트 코드를 확장자 .js인 별도의 파일로 저장하고
<script src ="경로"></script> :  외부 js 파일을 불러서 사용한다

4) url 부분 작성
<a> 태그의 href 속성 등에서 자바스크립트 코드를 작성할 수 있다
href 속성에서 자바스크립트 코드를 쓸때는 javascript 라는 키워드를 작성해야한다


4. 자바스크립트 문법
실행문은 세미콜론(;)으로 구분
대소문자를 구분

1) 자바스크립트의 식별자(이름)
식별자(identifier) : 자바스크립트 개발자가 변수, 상수, 함수에 붙이는 이름이다
식별자를 만들 때의 규칙
- 첫번째 문자 : 알파벳, 언더바, $문자만 사용가능
- 두번째 이상 문자 : 알파벳, 언더바, 0-9, $ 사용가능
- 대소문자 구분 : data, dAta는 다른 식별자이다
- 키워드 사용 불가

6variable(x)
student_id (o)
_code(o)
if (x)
calc(o)

2) 문장 구분
세미콜론으로 문장과 문장을 구분한다
한줄에 한 문장만 있는 경우 세미콜론을 생략할 수 있다
ex) i = i + 1
    j = j + 1;
    k = k + 1; m = m + 1;
    n = n + 1  p = p + 1 (x)

3) 주석
한줄 주석 : //
범위 주석 : /* ~ */

4) 데이터 타입(typeof())
숫자타입(number) : 42, 3.41, ..
논리타입 : true, false
문자열타입 : "안녕하세요", 'javascript', "42", ...
undefined : 타입이 정해지지 않은 것을 의미한다
null : 값이 정해지지 않다는 값이다

5) 변수
java > 자료형 변수명 = 값;
javascript > var 변수명 = 값;
                     let 변수명 = 값;


- var 키워드 : 함수의 영역만 영역으로 판단한다
- let 키워드 : 모든 영역을 영역으로 판단한다

* 호이스팅(var, let 키워드의 차이)
자바스크립트 함수가 실행되기 전에 함수 내부에 필요한 변수값들을 모아
유효 범위에 최상단에 선언하는 것을 말한다
함수가 실행되기 전에 자바스크립트 Paser가 해당 함수를 훑는 과정에서
함수 내(함수 블록 "{....}")에서 존재하는 내용 중 함수가 실행에 필요한 값들을
끌어올리는 것이다

 

 var로 선언한 변수의 경우 호이스팅 시 undefined로 변수를 초기화한다.

let과 const로 선언한 변수의 경우 호이스팅 시 변수를 초기화하지 않는다.

 

=> let으로 선언한 변수는 선언 전에 호출하게 되면 참조 오류가 발생하지만 var로 선언한 변수는 undefined로 할당값을 초기화한 상태로 출력된다.

6) 상수
const 키워드 : 값을 변경시킬 수 없다

7) 지역변수와 전역변수
변수의 사용범위(scope)에 따라서 전역변수(global)와 지역변수(local)로 나뉜다
전역변수 : 영역 밖에서 선언된 변수
지역변수 : 영역 안에서 선언된 변수

8) with 
객체의 속성을 짧게 참조하기 위해서 사용됨
주어진 객체의 속성을 현재 스코프의 일부처럼 다룰 수 있다
with(document) document 객체의 속성들을 직접 참조하고 있음을 의미한다
write() 메소드를 호출할 때 document.write()대신 write()메소드만으로도 호출가능하다

 

const data = 10; //const 키워드로 선언된 변수는 한번 선언되면 다시 선언할 수 없다.  
//  data = 20; 재할당 불가능
var data = 10; 
var data = 20; 
console.log(data); 

//control + option + n 

let data1 = 10; 
// let data1 = 120; 

data1 = 20; 

console.log(data1);

var = 재선언 가능

let = 재선언 불가능,재할당은 가능

consol.log(변수) 로 출력한다. (print) 문과 같다고 보면 된다. 

//동적 바인딩: 컴파일시 값에 따라 자료형이 동적으로 결정된다. 

var data = 10; 
console.log(data); 
console.log(typeof data);

var age; 

console.log(age); //undifined

// hoisting(호이스팅) : 선언의 위치에 상관없이 존재하면 메모리에 할당된다. 
// 초기화 작업은 호이스팅 되지 않고 선언만 호이스팅 된다. 

console.log(data2);
var data2 = 10; 
console.log(data2); 

var data3 = "절대 수정 금지";
//되도록 var 변수 (오래된 javaScript 버전에서 사용된다.)
//let, const를 사용하는 것이 권장된다. (변수의 스코프와 호이스팅 동작)
data3 = "안녕"
console.log(data3);

var 은 호이스팅시 초기화된다.

let 은 호이스팅시 선언만 된다. 

*동적바인딩 

if (10>1){
    var data = 100; //지역변수 같지만 함수의 scope 가 아니기 때문에 영역 밖에서 사용 가능 (var 이라서)
    console.log(data);
}

console.log(data); 

//지역변수

for(let i=0; i<10; i++){
    console.log(i); 
}
// console.log(i);  i 는 for 문 안에서 사용된 지역변수이기 때문에 영역 밖에서 출력 불가능하다. 

//전역변수
let i=0; 

for(i=0; i<10; i++){
    console.log(i); 
}
console.log(i); 

//node.js에서는 전역변수들을 모두 global 객체에서 관리한다.
//브라우저에서는 window 객체에서 전역변수를 관리한다. 
//따라서 어디에서 사용될지 모를때에는 globalThis 객체를 사용하면 된다. 

globalThis.x = 10; 

function f(){
    let x = 20; 
    globalThis.x = 30; 
    console.log(x); 
}

console.log(globalThis.x); //전역변수의 값
f();  //함수호출 (x가 우선적)
console.log(globalThis.x); //함수호출 이후 바뀐 전역변수 값

var, let 의 함수 스코프 안에서의 차이 , var 은 함수가 아닌 다른 스코프 안에서는 전역으로 사용된다. 

globalThis : 전역변수 , 이식성이 높다. 

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>확인 대화 상자</title>
</head>
<body>
    
</body>
<script>
    if(confirm("다음으로 넘어가시겠습니까?")){
        alert("다음으로 진행 ")
    }
    else{
        alert("취소")
    }
</script>
</html>

confirm : 확인 취소 알림창을 띄워준다 

alert : 알림창을 띄워준다. 확인 밖에 없다. 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>입력 대화 상자</title>
</head>
<body>
    
</body>
<script>
    var name = prompt("이름을 입력하세요");
    document.write("<h1>" + name + "</h1>");
    console.log(name);
</script>
</html>

prompt : 입력상자 , 알림창처럼 띄워진다. 

document.write : 화면에 써주기 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>입력 대화 상자</title>
</head>
<body>
    
</body>
<script>
    document.write(`<h3>${prompt("이름을 입력하세요")}님 환영합니다.</h3>`);
</script>
</html>

백틱을 이용해 함수, 변수, 문자열 ,태그까지 표현할 수 있다. 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>document.wite 사용</title>
</head>
<body>
    
</body>
<script>
    // document.write("<h3>안녕! 자바 스크립트 1일차 </h3>");
    //  document.write(1+1+"번이야");
    //  document.write("<span>자바스크립트</span>");
    //  document.write("<span>재밋다</span>");

    with(document){
       write("<h3>안녕! 자바 스크립트 1일차 </h3>");
       write(1+1+"번이야");
       write("<span>자바스크립트</span>");
       write("<span>재밋다</span>");

    }
    consol.log("콘솔에 출력");
    
</script>
</html>

with 사용하기 , document 속성을 참조하여 사용한다. 앞의 document 생략 가능

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
<script>
    with(document){
        write("<h2>실습</h2>");
        write("<hr>");
        // write("<h3>나의 이름은 강민정이고 만 나이는 24살 입니다.");
        write(`나이는 20살 만 나이는 ${20-1}살 입니다.`)
    }

    
</script>
</html>

${} 안에서 계산도 가능하다. 

 

댓글수1