언어/HTML,CSS,JS

JavaScript관련 기본개념 : DOM, 함수선언 및 실행(alert, confirm, prompt )등

Iam_im2 2022. 5. 31. 20:23
728x90

JavaScript관련 기본개념

컴파일
소스코드를 기계가 이해할 수 있도록 기계어로 번역하는 과정
모든 언어는 컴파일 과정을 거치게 되어 있다.


인터프리터 언어 (interpreter)
실시간으로 실행되는 언어 → 컴파일 언어보다 빠름. 단순하기 때문 (컴파일 언어는 해석하는 컴파일러 과정필요)
예) Javascript , PHP , ASP , Python

반대: 컴파일 언어 등등.. 
예) C, C++ , Java , Go


DOM
Document Object Model
문서 객체 모델
화면의 엘리먼트를 나타내는 것.

 



log
프로그램 흐름 확인위해 남기는 기록


함수
function
method, procedure등으로도 불림.
특정 동작을 수행하는 코드


native Java Script
네이티브 자바스크립트 = Vanilla JS
다른 라이브러리나 프레임워크 사용하지 않은 순수 자바스크립트



1. 변수선언
➢var
▪ 재선언 가능,
▪ scope : 전역변수로 선언되서 되도록 안쓰는 게 좋다.

➢let
 재선언 불가
 scopre : 지역변수 → 최근에 많이 사용하는 언어

➢const
 상수 → java final 같은 개념.

 


2. 주석처리

➢ script 태그 안에서는 // 사용





3. 문자열 병합
▪ 문자열끼리의 결합은 한 문장으로 출력한다는 의미
▪ 방법1
let result = name + '는' + age + '살입니다';

▪ 방법2
result = `${name}는 ${age}살입니다`;

 

 


 

4. 함수 선언 및 실행

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>function</title>
</head>
<body>
  <script>
    //경고창
    function alertF(){
      alert('첫번째 경고창');
      alert('두번째 경고창');
    }

    //확인창
    function confirmF(){
      confirm("confirm창입니다.");
    }

    //외부입력창
    function promptF(){
      var text = prompt('prompt창입니다.','기본값');
      console.log(text);
    }
  </script>
  
  <button id="alert" onclick="alertF()">alert</button>
  <button id="confirm" onclick="confirmF()">confirm</button>
  <button id="alert" onclick="promptF()">prompt</button>

</body>
</html>

▪ alert : 경고창
▪ confirm : 확인창
▪ prompt : 외부 입력창 (사용자로부터 입력을 받는다.)



<출력예시>

 

 

 

참고자료

w3schools



 



728x90