🐷전동준(Jeon DongJun)

Go with the flow

[web]JavaScript 정리1

[Noitce] 고쳐야하거나 틀린 것이 있으면 말씀해주세요!

강의를 들으며 배웠던 점들을 복습하며 내 나름대로 정리해봤다. 솔직히 내가 정리하는 것들은 정말 기초에 불과하며 너무나 다양한 속성들과 요소들은 사이트를 참조해서 보는게 맞는 것 같다 :)

그리고 요새 너무너무 배우는 양이 많아 공부한 것들을 요약하고 있지만 시간이 너무 훌쩍 지나간다.

코딩을 더 많이 해야하는데, 어쩌다 보니 기록을 더 많이 하고 있게 되었다. 흑.. 😥

그래도 좀 더 파이팅하고 코딩을 많이 많이 하는 습관을 들이자, 아잣!


JavaScript

  • Script란?

    소프트웨어에 실행시키는 처리 절차를 문자(텍스트)로 기술한 것

  • Script Language(from wikipedia)

    응용 소프트웨어를 제어하는 컴퓨터 프로그래밍 언어

  • 자바스크립트는 일반적으로 Camel표기법으로 작성
  • 주석처리: //


기본 문법

  • 자바 스크립트는 인라인, 내부, 외부에서 적용할 수 있다.

  1. 인라인 방식

    • <li onclick="alert('inline 방식!!!');">inline 방식</li>

    • 이런 식으로 요소들 안에 적용할 수 있다.

    • 여기서 TIP ! JS 언어의 속성 중 앞에 on 이 붙으면 이벤트라고 생각하면 된다.(onclick은 클릭시 생기는 이벤트)

  2. 내부 처리 방식

    • <head>
	<script type='text/javascript'>
        function hellojs(){
        var = js
        }
</head>

    • 이렇게 head태그 안에 <script>태그를 작성해 적용시킬 수 있다.

    • type='text/javascript'는 안적어도 무방하지만 적는 습관을 기르도록 하자.

  3. 외부 처리 방식

    • 외부의 js파일을 불러와서 적용시킬 수 있다.

    • <head>
	<script type='text/javascript' src='resources/js/js01.js'>
    </script>
</head>
    • 이렇게 type과 src로 경로를 지정해서 js를 적용시킬 수 있다.


타입, 변수

  • JS에서는 가장 기본적으로 변수를 지정할 때 var를 사용한다.
    • var 변수명 - 값;

변수 선언 규칙

  1. JS에서는 대소문자를 구분한다.
  2. 영문, $, _로 변수명을 시작할 수 있다.(숫자는 안된다.)
  3. 시작을 제외하고는 숫자도 변수명에 들어갈 수 있다.
  4. 키워드(예약어)를 사용할 수 없다. (내가 아는 파이썬의 개념으로는 내장함수나 지정어 등과 같은?)

변수의 범위

1) 전역 변수

  • 전역 변수는 말 그대로 그 문서 내에서 영향을 행사하는 변수다. 다른 함수나 변수에서도 사용이 가능하다.

2) 지역 변수

  • 함수나 객체 내부에 선언되는 언어로 그 밖의 다른 객체나 변수나 함수에서는 적용되지 않는다.

예시

<head>
    <script type='text/javascript'>
        // 주석
        // 전역변수
        var variable = 10;

        function val01(){
            variable = variable + 5;
            document.getElementById("value01").innerHTML = "<b style='color:red; background:yellow;'>"+variable+"</b>";
        }

        function val02(){
            // 지역 변수
            var innerVal = variable + 10;
            document.getElementById('value02').innerHTML="<b style='color:red; background:yellow;'>"+innerVal+"</b>";
        }
    </script>
</head>
<body>
	<dl>
        <dt>변수의 범위</dt>
        <dd>전역 변수 : window 객체에 포함됨
            <button onclick='val01();'>확인</button>
            <p id='value01'></p>
        </dd>
        <dd>지역 변수 : 함수나 객체 내부에 선언
            <button onclick='val02();'>확인</button>
            <p id='value02'></p>
        </dd>
    </dl>
</body>
</html>

  • 해당 코드를 보면 내부 스크립트 안에 var variable = 10; 이렇게 variable이라는 변수에 10을 지정해 줬다.

  • val01()이라는 함수를 생성해 버튼을 만들어 블록요소에 적용시켰고, 해당 버튼을 클릭할 때 마다 숫자가 5가 추가되서 출력하게 만들었다.

  • 한번 해당 문서에 가서 클릭해보니 15가 출력될 것이다. 이로써 variable이 전역변수라는 점을 알 수 있다.

    image-20220121005929115

  • 지역변수의 특성도 확인하기 위해 var innerval = variable + 10라고 적어 innerval 변수를 만들어 줬다.

  • val02()라는 함수를 만들어 버튼을 만들어 블록요소에 출력하도록 만들었다. 해당 버튼을 클릭할 때 마다 전역변수에 10이 추가된 값을 출력해준다.

  • 한번 클릭하자 25가 출력될 것이다. 하지만 여러번 계속 클릭해도 여전히 25다. 전역 변수를 한번 클릭하고 다시 눌러봤다. 그러자 30이 되는 것을 확인 했다. 이렇듯, innerval은 val02()내에서 만든 그 안에서만 작동하는 지역 변수라는 점을 알 수 있다.

    image

타입의 종류

  • JS에서는 다음과 같은 Type을 지원한다.
  • string : 문자열
  • number : 숫자
  • boolean : 논리형(참, 거짓)
  • null : 널 값
  • object : 객체
  • function : 함수(이것은 함수를 변수에 저장할 수 있다는 힌트?)

예시를 통해 더 자세히 알아보자.

예시

  • 내부 스크립트 안에 inferVal이라는 변수를 만들어 여러 타입의 리터럴을 저장해 줄 것이다. 한번 var로 선언을 해놓고 변수명만 호출에 다른 값을 지정해 줄 수 있다.

  • jsType이라는 함수를 만들어 alert(알림창)에 해당 리터럴과 타입을 확인할 수 있게 만들었다.

  • 타입의 확인은 typeof()메소드를 사용한다.

  • function jsType(){
  
            var inferVal = "문자"; // var를 사용해 함수 첫 지정
            alert(inferVal + "의 타입은 : " + typeof(inferVal));
  
            inferVal = 33; // 이후부턴 var 사용 안해도됨 :)
            alert(inferVal + "의 타입은 : " + typeof(inferVal));
  
            inferVal = true;
            alert(inferVal + "의 타입은 : " + typeof(inferVal));
  
            inferVal = null;
            alert(inferVal + "의 타입은 : " + typeof(inferVal));
  
            inferVal = new val01();
            alert(inferVal + "의 타입은 : " + typeof(inferVal));
  
            inferVal = function(){
                alert("타입 추론!");
            }
            alert(inferVal + "의 타입은 : " + typeof(inferVal));

  • body 안에는 다음 코드가 들어간다.

    <dl> 
	<dt>타입의 종류
           <button onclick="jsType();">확인</button> 
        <!-- jsType() 함수를 호출해 클릭으로 이벤트를 만듦 -->
    </dt>
    <dd>string</dd>
    <dd>number</dd>
    <dd>boolean</dd>
    <dd>Null</dd>
    <dd>object</dd>
    <dd>function</dd>
</dl>
  • 해당 문서에 가면 다음과같이 나올 것이다. 클릭해 알림창들을 확인해보자.
  • image
  • image
  • image
  • image
  • image
  • image
  • image
  • 여기서 마지막 출력을 보면, 함수가 작동이 된 후를 출력하는 것이 아닌 함수 자체의 값을 출력하는 것을 볼 수 있다. 이것은 JS에서는 변수에 함수 값을 저장할 수 있다는 말이다!😮


대화창

  • 대화창은 window 객체의 대화형 메서드다.
  • 앞으로 JS 공부를 하면서 출력 상태를 alert로 많이 확인할 것 같다.(python에서 print()로 결과 확인하듯)
  • alert : 경고메시지로, 코드 디버깅용으로 사용한다.
  • confirm : 확인/취소 버튼이 있는 대화창을 생성하며 확인을 누를경우 true, 취소를 누를경우 false 값을 리턴한다.
  • prompt : 텍스트 박스만들어준다. 확인/취소버튼이 생기며 텍스트의 값을 적고 확인을 누르면 그 텍스트의 값을, 취소버튼을 누르면 null값을 리턴한다.

예시

  • 각 대화형 메서드를 호출하는 함수를 생성해준다.

  • 설명은 코드내에 주석으로 적어놨다.

  • <!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>Document</title>
  
    <script> // js 스크립트 내부호출
        function alertFunc(){ // alert 대화창을 호출하는 함수
            alert("내용 출력 (단순 대화창)");
        }
  
        function confirmFunc(){ // confirm 대화창을 호출하는 함수
            if(confirm("배경을 파란색으로 변환?")){ // 만약 확인버튼을 누르면
                alert("파란색으로 변환합니다."); // body태그의 배경색을 파란색으로 전환
                document.body.style.backgroundColor='blue';  
            } else {
                alert("배경색을 없앱니다."); // 취소를 누르면 배경색 복구
                document.body.style.backgroundColor='';
            }
        }
  
        function promptFunc(){ // prompt 대화창을 호출하는 함수
            var txt = prompt('좋아하는 과목을 선택해 주세요\n[1:python 2:html/css 3:javascript]', '3'); // 파이썬의 인풋함수처럼 대화창에 설명을 넣을 수 있다.
  
            if (txt == 1) {
                alert('python 재밌죠~ㅋ.ㅋ'); // 1을 작성하고 확인 버튼을 누르면 해당 문장을
            } else if (txt == 2) {
                alert('문서 구조화 하고 스타일 지정 재밌죠ㅎㅎ'); // 2을 작성하고 확인 버튼을 누르면 해당 문장을
            } else if (txt == 3) {
                alert('아직 몇개 안해봤는데 벌써 재밌죠~'); // 3을 작성하고 확인 버튼을 누르면 해당 문장을
            } else if (txt == null) {
                alert('하나라도 좋아해주세요 ㅠㅠ'); // 취소 버튼을 누르면 해당 문장을
            } else {
                alert('1이나 2나 3만 입력해 주세요..'); // 1,2,3 외의 값을 적고 확인 버튼을 누르면 해당 문장을 출력
            }
        }   
    </script>
</head>
<body>
      
    <h1>window 객체의 대화형 메서드</h1>
  
    <p>
        alert() : 경고, 코드 디버깅용
        <button onclick='alertFunc();'>확인</button> <!-- 버튼 생성 -->
    </p>
    <p>
        confirm() : 확인 / 취소 버튼 (true / false 리턴)
        <button onclick='confirmFunc();'>확인</button> <!-- 버튼 생성 -->
    </p>
    <p>
        prompt() : 텍스트박스, 확인 / 취소 버튼(텍스트 / null 리턴)
        <button onclick="promptFunc();">확인</button> <!-- 버튼 생성 -->
    </p>
</body>
</html>

  • 이제 문서를 확인해보면 다음과 같이 나와있다.

    image

  • alert 버튼부터 눌러보자.

    image

  • confirm 확인 버튼 누른 후

    image-20220121013017490

  • prompt 확인 누르고 3 입력

    image-20220121013050658


함수

  • 함수는 기본적인 구성 블록 중 하나로, 작업을 수행하거나 값을 계산하는 문장 집합 같은 JS의 절차다. 함수를 호출하려면 함수를 정의해야 한다.
  • 파이썬은 def로 함수를 정의하지만, JS는 function으로 함수를 정의한다.(매우 직관적이다..;;;)
  • 파이썬에서는 :와 들여쓰기로 실행문 등을 적어주지만 JS는 중괄호 { } 안에 적어준다.
  • name : 함수 이름. 이름 없는 함수일 경우 생략 가능. 함수 이름은 함수의 몸통 내에서만 사용 가능
  • paramN : 함수로 전달되는 인수의 이름
  • statements : 함수 몸통을 구성하는 문

함수의 종류

1. 명시적 함수

  • 함수 선언하는 방식중 이름을 함수의 이름을 명시해서 사용한다 해서 명시적 함수

  • <head>
    <script>
   	 	function func01(){
            alert('명시적 함수');}
    </script>
</head>
  • image

2. 익명 함수

  • 함수의 이름을 명시하지 않고 변수에 저장해주는 이름이 없는(익명) 함수

  • <head>
    <script>
        var func02 = function(){ // 익명함수 : 함수가 값으로 저장
            alert('함수의 이름이 없어요...')
        }
    </script>
</head>
  • image

3. 즉시 실행 함수

  • 함수표현식 과정을 생략하고 즉시 실행하는 함수다. 함수를 괄호()로 랩핑해주고 함수 정의 끝에 괄호()만 붙이는 것으로도 즉시 실행할 수 있다.

  •  <head>
    <script>
        function func03(){
            (function(){
                alert('즉시 실행 함수');
            })();
    </script>
</head>
  • image

4. 함수 리터럴

  • 익명함수를 만드는 방법과 같으나 매개변수가 들어간다는 것이 차이점

  • 코드를 보잣!

  • <head>
    <script>
		function literalPrn(literal){
            literal('안녕하세요. 함수 형태의 값!! 입니다.');
        }
  
        function func04(){
            literalPrn(function(msg){alert(msg);});
        }
	</script>
</head>

  • 다음과 같이 literal을 매개변수로 하는 literalPrn함수를 만든다. 그 함수의 문장을 포함하고 있는 literal이 내재되어 있다.

  • func04()함수를 생성. literalPrn함수를 포함하고 있으며 literalPrn함수의 매개변수 자리에는 function(msg){alert(msg);}가 들어간다. 따라서, 문장이 msg로 들어가 대화창에 문장이 출력되는 함수가 작동된다.

  • image

5. 클로저 함수

  • 외부함수의 실행이 끝나더라도 외부 함수 내의 변수를 사용할 수 있다. 특정 데이터를 스코프 안에 가둬두고 계속 사용할 수 있는 폐쇄성을 갖는다고 한다.

  • <head>
    <script>
        function closureFunc(val){
            var suffix = '님, 안녕하세요~';
            function innerFunc(){
                alert(val + suffix + '잘 부탁 드립니다.')
            }
            return innerFunc;
        }
        var closureTest01 = closureFunc('굿전')    	
    </script>
</head>

  • closureFunc(val)이라는 함수를 지정해 함수 내부에 '님, 안녕하세요~'를 담고있는 suffix변수를 지정해준다. 다음을 보면 그 안에서 innerFunc()라는 함수가 생성된다. 이 함수는 대화창에 val인수 님, 안녕하세요~ 잘 부탁 드립니다.를 출력하게 하는 기능을 갖고 있으며, 이것이 innerFunc 형태로 return된다.

  • 여기서 중요하다. innerFunc는 함수가 아닌 함수 값이다. 결론적으로 closureFunc 함수를 실행 시키면 변수에 저장할 수 있는 함수 값이 생성 되는 것이다.

  • closureTest01이라는 변수에 suffix가 굿전인 함수 값 innerFunc이 저장되는 것을 이제 이해할 수 있다.

  • image

제어문

  • 전반적으로 보았을 때 파이썬의 제어문과 큰 차이가 없다. 단지 조건을 입력하는 형태 등 표현식의 차이가 조금 있는 것이다.

  • if문을 예로 들면 이렇다.

    • 파이썬

      if i == 1:
    print('1입니다.')
elif: i == 2:
    print('2입니다.')
else:
    print('다른 숫자 입니다.')

    • 자바스크립트

      // 물론 alert와 print는 차이가 분명합니다. 하지만, 코드를 적는데에 있어 가시성을 위해 이렇게
// 설명합니다..
if (i == 1) {
    alert('1입니다.') 
} else if (i == 2) {   // elif == else if
    alert('2입니다.')
} else {
    alert('다른 숫자 입니다.')
}

  • 하지만 자바스크립트에는 If, elif, else 말고도 switch, case, deafult를 활용할 수 있다.

    • 예시

      • function switchTest(){
            var season = prompt('봄 여름 가을 겨울 중 좋아하는 계절을 입력해 주세요');
            switch(season){
                case "봄":
                    alert('봄에는 벚꽃엔딩');
                    break;
                case "여름":
                    alert('여름아 부탁해');
                    break;
                case "가을":
                    alert('시간의 낙엽');
                    break;
                case "겨울":
                    alert('Must Have Love');
                    break
                default:
                    alert('봄, 여름, 가을, 겨울 중 하나만 입력해 주쇼~')
            }

      • JS의 switch문은 변수 x의 값과 일치하는 값을 찾으면 case문 아래의 코드가 실행된다.

      • case문에 해당하는 경우가 없으면 default문 아래의 코드가 실행되는 형식이다.

      • 위 코드는 프롬프트형 대화창에 season값을 적어 적은 값을 찾아 그에 걸맞는 코드를 출력하는 코드다.

      • 현재 2022년 01월 21일 이니까 겨울을 넣어보겠다.

        image

      • 나랑 비슷한 연배면 알수 있는 겨울 띵곡 Must Have Love가 대화창에 출력된다.

        image

  • for문과 while문도 작동 방식은 파이썬과 비슷하다.
  • 허나 조금의 차이가 있다. 그게 무엇이냐면..
    • 파이썬에서는 반복문에서 i에 1씩 추가하려면
      • i = i + 1 혹은 i += 1를 사용한다.
    • JS에서는 저위의 두 가지 증감연산자 뿐만 아니라,
      • i++ 도 같은 기능을 한다.
  • i++ 말고도 ++i와 같은 형태도 사용 가능한다.
  • 이것은 변수의 값을 먼저 리턴한 뒤 연산하냐

  • 연산 먼저하고 변수의 값을 리턴하냐 의 차이다.

  • 참고 : js에서는 console.log()명령을 통해 HTML 문서에 로그를 남길 수 있다.

    • 위 기능을 활용해서 구구단을 출력할 수 있다.

    • <head>
    <script>
		function forTest(){
            for (var i=2 ; i < 10 ; i++){
                for (var j=1 ; j < 10 ; j++) {
                    console.log(i,'*',j,'=',i*j);}
            }
}
     </script>
</head>

    • forTest라는 함수를 정의하자.

    • for문 사용도 비슷 하다 var를 사용해 i에 값 2를 넣어준다. 그리고 2부터 시작해 9까지 1씩 증가시킨다.(i++)

    • 이중 반복문을 사용해 똑같이 만들어주고

    • 두 번째 반복문에 콘솔에 로그를 남기는 코드를 작성

    • HTML 문서에 가서 F12 키를 눌러 개발자 도구 켜서 콘솔에 태그에 들어가 보면 이대로 출력이 되어 있을 것이다!!!!

    • image

2022

[web]jQuery 복습 3

2 분 소요

[Noitce] 고쳐야하거나 틀린 것이 있으면 말씀해주세요!

[web]jQuery 복습 2

11 분 소요

[Noitce] 고쳐야하거나 틀린 것이 있으면 말씀해주세요!

[web]jQuery 복습 1

16 분 소요

[Noitce] 고쳐야하거나 틀린 것이 있으면 말씀해주세요!

[web]JavaScript 정리4

6 분 소요

[Noitce] 고쳐야하거나 틀린 것이 있으면 말씀해주세요!

[web]JavaScript 정리3

6 분 소요

[Noitce] 고쳐야하거나 틀린 것이 있으면 말씀해주세요!

[web]JavaScript 정리2

6 분 소요

[Noitce] 고쳐야하거나 틀린 것이 있으면 말씀해주세요!

[web]JavaScript 정리1

8 분 소요

[Noitce] 고쳐야하거나 틀린 것이 있으면 말씀해주세요!

[web]CSS 기초 정리

11 분 소요

[Noitce] 고쳐야하거나 틀린 것이 있으면 말씀해주세요!

[web]HTML 기초 정리

8 분 소요

[Noitce] 고쳐야하거나 틀린 것이 있으면 말씀해주세요!

[Pandas]pandas 연습

3 분 소요

[Noitce] 고쳐야하거나 틀린 것이 있으면 말씀해주세요!

맨 위로 이동 ↑

2021

[Python기초]module

1 분 소요

[Noitce] 고쳐야하거나 틀린 것이 있으면 말씀해주세요!

맨 위로 이동 ↑