JS (1)

코드 위치

• HTML 태그의 이벤트 리스너 속성에 작성
• 내에 작성
• 자바스크립트 파일에 작성
• URL부분에 작성

1.banana.png"
3. <script src="name.js">추가 작성</script>
4. <a href="javascript:자바스크립트 코드">링크</a>

자바스크립트로 HTML 콘텐츠 출력

document.write("<h3>Welcome!<h3>");

자바스크립트 다이얼로그: 사용자 입력 및 메시지 출력

• prompt(”메시지”,”디폴트 입력값”); - return var
• confirm(”메시지”) - return true|false
• alert(”메시지”);

전역변수와 지역변수

• 전역 변수: 함수 밖에서 선언되거나 함수내에서 var키워드 없이 선언
• 지역 변수: 함수 안에서 var키워드로 선언

this로 전역 변수 접근 → this.x(전역 변수) / x(지역 변수) [함수 내]

상수의 종류 :

8진수 : 0으로 시작 16진수 : 0x로 시작. 문자열 : “” | ‘’ 으로 묶음. NaN==수가 아님을 뜻함(ex.parseInt(”abc”))

<!DOCTYPE html>
<html>
    <head>
        <title>함수 만들기</title>
        <script>
            function ggd(n){
                var m=parseInt(n);
                if(isNaN5(m)||m<1||m>9){
                    alert("잘못입력하셨습니다");
                    return;
                }
                for(var i=1;i<=9;i++){
                    document.write(m+'x'+i+'='+m*i+'<br>');
                }
            }
        </script>
    </head>
    <body>
        <h3>구구단 출력 함수 만들기</h3>
        <hr>
        <script>
            var n=prompt("구구단 몇 단을 원하세요","");
            ggd(n);
        </script>
    </body>
</html>

== vs === 핵심 차이

연산자	이름	비교방식
==	동등 연산자	타입이 달라도 자동 형변환에서 값만 비교
===	일치 연산자	타입까지 같아야 true, 형변환 없음

예시로 확인

console.log(5=="5"); //true
console.log(5==="5"); //false

console.log(0==false); //true
console.log(0===false); //false

console.log(null == underfined); //true
console.log(null === underfined); //false

console.log("313" == 313); //true
console.log("313" === 313); //false

자바스크립트 객체의 유형

• 코어 객체
  • Array
  • Date
  • String
  • Math
• HTML DOM 객체
• 브라우저 관련 객체(BOM)

Array

var plots=[1,2,3,4,5]; 형식으로 만들거나 new Array()로도 만들 수 있음

• Array에서는 현재 크기의 +1에 해당하는 공간에 변수를 대입하는 경우, 오류가 아닌 공간을 늘려 할당해줌.
• 여러 타입의 데이터가 섞여 저장 가능
• 주요 메서드
  • concat(arr) 현재 배열에 arr원소를 덧붙여 만듦
  • join([separator]) 모든 원소를 string화 (공백이면 ,로 구분 but, separator로 인자구분)
  • reverse() 역순
  • slice(idxA[,dixB]) : A~B직전까지 부분집합 추출
  • sort()
  • toString() ,로 구분

Math

• Math.abs()
• Math.sqrt();
• Math.PI
• Math.random()

사용자 객체 만들기

<!DOCTYPE html>
<html>
    <head>
        <title>new Object()로 사용자 객체 만들기</title>
        <script>
            function inquiry(){return this.balance;}
            function deposit(money){this.balance+=money;}
            function withdraw(money){this.balance-=money;return money;}

            var account=new Object();
            account.owner="황기태";
            account.code="111";
            account.balance=35000;
            account.inquiry=inquiry;
            account.deposit=deposit;
            account.withdraw=withdraw;
        </script>
    </head>
    <body>
        <h3>new Object()로 사용자 객체 만들기</h3>
        <hr>
        <script>
            document.write("account : ");
            document.write(account.owner+",");
            document.write(account.code+",");
            document.write(account.balance+"<br>");

            account.deposit(10000); document.write(account.inquiry()+"<br>");
            account.withdraw(5000); document.write(account.inquiry()+"<br>");
        </script>
    </body>
    
</html>

• 리터럴 표기법으로 만들기

<!DOCTYPE html>
<html>
    <head>
        <title>new Object()로 사용자 객체 만들기</title>
        <script>
            var account={
                owner:"황기태",
                code:"111",
                balance:35000,

                inquiry:function(){return this.balance;},
                deposit:function(money){this.balance+=money;},
                withdraw:function(money){this.balance-=money;return money;}
            };
            
        </script>
    </head>
    <body>
        <h3>new Object()로 사용자 객체 만들기</h3>
        <hr>
        <script>
            document.write("account : ");
            document.write(account.owner+",");
            document.write(account.code+",");
            document.write(account.balance+"<br>");

            account.deposit(10000); document.write(account.inquiry()+"<br>");
            account.withdraw(5000); document.write(account.inquiry()+"<br>");
        </script>
    </body>
    
</html>