Tiny Bunny
본문 바로가기
2023-02 몰입형 SW 정규 교육

JavaScript (1)

gxxg 2023. 9. 13. 22:10
728x90

2023-09-13

 

# 자바스크립트란?

  • html 문서에 html이나 css만으로는 표현하기 어렵거나 불가능한 작업을 하기 위해 만들어진 스크립트 언어
  • html 문서에 직접 작성하거나 외부 파일에 작성된 후 불러올 수 있다.

 

* 스크립트 언어? 메모장 등 간단한 텍스트 편집기 프로그램을 이용해서 쉽게 프로그램을 작성할 수 있도록 사용하기 편리하며 실행속도가 빠른 것이 특징

 

 

 

<script>

html 문서에 자바스크립트를 작성하려면 <script> 태그를 사용하여 작성한다.

 

<script languege = “javascript”>
	<!-- JS 작성 -->
</script>

 

 

 

자바스크립트 내장 객체의 예로는 document가 있다.

 

<!DOCTYPE html>
<head>
    <title>간단한 자바스크립트</title>
    <script language="javascript">
        document.write("처음 만드는 자바스크립트");
    </script>
</head>
<body>
</body>
</html>

└ 실행 결과

 

 

 

# 기본 문법

  • 변수
    • 선언
    • var 변수명 = 초기값

 

  • 예
    • var firstName;
    • var lastName = 'man';

 

var, let 둘 다 동작하는 데에는 문제가 없으나 요즘엔 let을 더 많이 사용한다.

왜? let의 경우 JS에서 한 번 더 검사하는 기능을 제공하고 있기 때문! (let 호이스팅)

 

 

 

# 배열

var 배열명 = new array();

배열명.push(1); // 배열의 가장 마지막 공간에 데이터 삽입

배열명[0] = 1;

 

 

 

# 구문과 함수

JavaScript의 경우 잘못 작성한 코드가 있을 때 자바처럼 친절하게 에러를 알려주지 않는다.

그때 사용하는 게 try ~ catch문이다.

 

try ~ catch 미사용

 

<!DOCTYPE html>
<head>
    <title>JS try ~ catch문</title>
    <script language="javascript">
        var firstName = "슈퍼맨";
        document.write("내 이름은" + lastName + "입니다.");
    </script>
</head>
<body>
</body>
</html>

└ 실행 결과

lastName를 선언하지 않았음에도 실행되며 에러사항을 제대로 알려주지 않는다.

 

 

 

try ~ catch 사용

=> 예외가 발생할 수 있는 환경을 try { ... } 안에, 예외가 발생한 경우엔 catch { ... } 안에 삽입

 

<!DOCTYPE html>
<head>
    <title>JS try ~ catch문</title>
    <script language="javascript">
        var firstName = "슈퍼맨";

        try {
            document.write("내 이름은" + lastName + "입니다.");
        }
        catch(ex) {
            document.write(ex.message);
        }
    </script>
</head>
<body>
</body>
</html>

└ 실행 결과

 

try ~ catch를 사용하지 않았을 때보다는 친절하게 무언가가 선언되지 않았다는 걸 알려준다.

 

 

 

# 함수

  • 함수 선언

 

function 함수명 (매개변수) {

함수가 실행될 자바스크립트 코드

}

 

 

 

자바의 경우 return을 써줘야 했으나 JS는 return을 쓰지 않는다.

문법적인 차이로 코드를 작성할 때 return 타입을 안 쓰는 것뿐이지 return 타입이 없는 건 아니다. 주의할 것!

 

<!DOCTYPE html>
<head>
    <title>함수 선언</title>
    <script language="javascript">
        function sayHello() {
            document.write("안녕하세요? 자바스크립트 함수입니다.")
        }
        sayHello();
    </script>
</head>
<body>
</body>
</html>

└ 실행 결과

 

 

 

매개변수 받고 결과값 리턴하는 코드

JS는 함수를 선언할 때 return 타입을 안 쓰고 매개변수 타입 또한 작성하지 않는 것을 알 수 있다.

 

<!DOCTYPE html>
<head>
    <title>자바스크립트 함수</title>
    <script language="javascript">
        function add(num1, num2) {
            document.write(num1 + " + " + num2 + " = " + (num1 + num2) + "입니다.");
        }
        add(1, 3);
    </script>
</head>
<body>
</body>
</html>

└ 실행 결과

 

 

 

함수 외부에서 값을 출력하는 코드

 

<!DOCTYPE html>
<head>
    <title>자바스크립트 함수</title>
    <script language="javascript">
        function add(num1, num2) {
           return num1 + num2;
        }

        var result = add(1, 3);
        document.write("1 + 3 = " + result + "입니다.");
    </script>
</head>
<body>
</body>
</html>

└ 실행 결과

 

 

 

# 웹 브라우저

  • window
    • JS가 제공하는 기본 객체

 

  • 메서드
    • alert
    • prompt // 시각적으로 바로바로 확인이 가능하여 디버깅 할 때 많이 사용
    • comfirm
    • open
    • setTimeout
    • setInterval
    • moveBy, moveTo
    • resizeTo, resizeBy

 

 

  • window.alert(”메시지”);
    • html 문서 작성자가 방문한 사용자에게 메시지를 보여주고자 할 때 사용
  • window.prompt(”사용자에게 보여줄 메시지”, “입력창에 미리 입력 되어 있을 문장”);
    • 사용자에게 어떤 질문을 하고자 할 때 사용
  • window.confirm()
    • 사용자가 [확인] 또는 [취소] 버튼을 클릭하여 질문에 대한 선택을 할 수 있도록 하기 위해 사용
  • window.open(”팝업창 주소”, “이름”, “속성”)
    • 새로운 팝업 창을 나타내기 위해 사용

 

 

728x90
저작자표시 비영리 변경금지

'2023-02 몰입형 SW 정규 교육' 카테고리의 다른 글

[JavaScript] 회원가입 예제 (정규표현식 미사용)  (0) 2023.09.19
[JavaScript] 정규표현식을 사용한 회원가입 예제  (0) 2023.09.18
[JavaScript] 정규표현식  (0) 2023.09.18
[JavaScript] ver, let, const 차이점  (0) 2023.09.18
JavaScript (2)  (0) 2023.09.15

'2023-02 몰입형 SW 정규 교육' Related Articles

티스토리툴바