Language/Java Script

Java Script 기본

원2 2021. 5. 10. 14:30
728x90
반응형

l 자바스크립트

- 웹 문서를 동적으로 제어하기 위해 고안된 프로그래밍 언어

- HTML: 모델 담당

- CSS: 뷰 담당

- 자바스크립트: 제어 담당

 

 

ㅣ자바스크립트의 코드 실행순서

 

<!DOCTYPE>
<head>
    <meta charset="utf-8"/>
    <title>자바 스크립트 예제</title>
    <script>
        var num=0;
        document.write("head 태그 내 실행 순서 : " + num + "<br/>");
    </script>
    <script>
        var num=1;
        document.write("head 태그 내 실행 순서 : " + num + "<br/>");
    </script>
</head>
<body>
    <script>
        var num=2;
        document.write("body 태그 내 실행 순서 :" + num + "<br/>");
    </script>
    <script>
        var num=3;
        document.write("body 태그 내 실행 순서 :" + num + "<br/>");
    </script>
    
</body>

ㅣ자바 스크립트 외부파일 불러오기

 

<!DOCTYPE>
<html>
    <head>
        <meta charset="utf-8"/>
        <script src="ejs.js"> </script>
    </head>
    <body>
        <p>
        <!-- 버튼을 클릭하면 메시지 창 출력 -->
        <button type="button" onclick="alert('외부 자바스크립트 파일')">버튼 클릭</button>
        </p>
    </body>
</html>

ㅣ 여러 개의 외부 자바스크립트 파일 참조하기  

 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
        <script src="ejs1.js"></script>
    </head>
    <body>
        <script src="ejs2.js"></script>
        <script src="ejs3.js"></script>
    </body>
</html>

ㅣ 내포 관계인 자바스크립트 파일 참조하기 

<!DOCTYPE>
<html>
    <head>
        <meta charset="utf-8">
    </head>
    <body>
        <script src="njs1.js"></script>
    </body>
</html>

ㅣ 혼합 방법으로 자바스크립트 파일 포함하기

 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <script src="mjs.js"></script>
    </head>
    <body>
        <script>
            document.write("<div style='color: blue; font-size: 20px;'>내부 자바 스크립트</div>");
        </script>
    </body>
</html>

ㅣ typeof 연산자를 사용하여 데이터 타입 확인

 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
    </head>
    <body>
        <script>
            document.write("typeof 연산자를 사용하여 데이터 타입 확인"+"<br>");
            var num; // 변숫 값이 없음
            var obj=null; // 객체 변숫 값이 없음.
            document.write(typeof 100+"<br>");
            document.write(typeof 10.5+"<br>");
            document.write(typeof "홍길동"+"<br>");
            document.write(typeof true+"<br>");
            document.write(typeof [1,2,3]+"<br>");
            document.write(typeof {name: '홍길동', age:25}+"<br>");
            document.write(typeof num+"<br>");
            document.write(typeof obj+"<br>");
        </script>
    </body>
</html>

ㅣ 변수의 데이터 타입 변경

 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
    </head>
    <body>
        <script>
            var num=10;
            document.write("num 변수 : "+ typeof num + " 타입<p/>");
            document.write("--- 데이터 값 변경 후 ---<p/>");
            var num="홍길동";
            document.write("num 변수 : "+ typeof num + " 타입<p/>");
        </script>
    </body>
</html>

ㅣ변수명 재선언 시 데이터 값 변화

 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
    </head>
    <body>
        <script>
            stdName="홍길동";
            comGrade=96;
            var stdName;
            var comGrade;
            document.write("학생 이름 :" +stdName+"<br>");
            document.write("컴퓨터 점수 : "+ comGrade+"<br>");
        </script>
    </body>
</html>

ㅣ전역 변수와 지역 변수

 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
    </head>
    
        <script>
            function getGrade() {
                var kor=95;
            }
            var kor=100;
            getGrade();
            document.write("국어 점수 : "+kor+"<br>");
        </script>
    
</html>

ㅣ전역 변수와 지역 변수2

 

<!DOCTYPE html>
<html>
    <body>
    <script>
        function getGrade() {
            kor=95;
        }
        var kor =100;
        getGrade();
        document.write("국어 점수 : "+kor+"<br>");
    </script>
    </body>    
</html>

ㅣ 전역 변수와 지역 변수3

 

<!DOCTYPE html>
<html>
    <script>
        function getGrade(){
            var kor=95;
        }
        getGrade();
        document.write("지역 변수 값은 함수 외부에서 사용할 수 없습니다.<br>");
        document.write("국어 점수 : " + kor+ "<br>");
    </script>
</html>

ㅣ전역 변수와 지역 변수4

 

<!DOCTYPE html>
<html>
    <script>
        function getGrade(){
            var kor=95;
            return kor;
        }
        getkor=getGrade();
        document.write("국어 점수 : " +getkor+"<br>");
    </script>
</html>

ㅣ다양한 산술 연산자

 

<!DOCTYPE html>
<html>
    <script>
        var incData=1;
        var decData=5;
        var r1=r2=0;
        
        r1=15%6;
        document.write("15%3 = "+r1+"<br>");
        document.write("incData++ = "+ incData++ + "<br>");
        document.write("++incData = "+ ++incData + "<br>")
        document.write("decData-- = "+ decData-- + "<br>");
        document.write("--decData = "+ --decData + "<br>");
        r2=incData*decData;
        document.write("incData*decData = "+ r2 + "<br>");
    </script>
</html>

ㅣ 비교 연산자

<!DOCTYPE>
<html>
    <script>
        var x=5;
        var y="5";
        var result;     // 비교 연산
        result=(x>y);
        document.write(" x > y : " + result + "<br>");
        result=(x==y); // 두 값이 같은지 비교
        document.write(" x == y : " + result + "<br>");
        result=(x===y); // 두 값과 타입이 같은지 비교
        document.write(" x === y : " + result + "<br>");
        result=(x!=y); // 두 값이 다른지 비교
        document.write(" x != y : " + result + "<br>");
        result=(x!==y); // 두 값이 다르거나 또는 타입이 다른지 비교
        document.write(" x !== y : " + result + "<br>");
    </script>
</html>

ㅣ일반 논리 연산자

 

<!DOCTYPE>
<html>
    <script>
        var x=5;
        var y=7;
        var result;
        result=(x<10 && y>10); // 논리곱
        document.write("(x<10 && y>10) : "+ result + "<br>");
        result=(x<10 || y>10); // 논리합
        document.write("(x<10 || y>0) : " + result + "<br>");
        result=!(x<10 && y>10); // 논리 부정
        document.write("!(x<10 && y>10) : " + result +"<br>");
    </script>
</html>

ㅣ비트 논리 연산자

<!DOCTYPE html>
<html>
    <script>
        var x=5;
        var y=7;
        var result;
        result=(x & y);
        document.write("x & y = " +result+"<br>");
        result=(x | y);
        document.write("x | y = "+result +"<br>");
        result=(x^y);
        document.write("x ^ y = "+ result+"<br>");
        result=(~x);
        document.write("~x = "+result + "<br>");
    </script>
</html>

ㅣ조건 연산자

<!DOCTYPE>
<html>
   <script>
    var x=5;   
    var y=7;   
    var result;
    result=(x > y)? x : y;        // 조건 연산
    document.write("큰 값 : " + result + "<br>");
    result=(x > y)? x-y : y-x;    // 조건 연산
    document.write("큰 값-작은 값 : " + result + "<br>");
</script>
</html>

ㅣ복합 대입 연산자

<!DOCTYPE html>
<html>
    <script>
        var x1=x2=x3=x4=x5=10;
        var st="Hello ";
        x1+=1;
        document.write("x1 : " + x1 + "<br>");
        x2-=2;
        document.write("x2 : " + x2 + "<br>");
        x3*=3;
        document.write("x3 : " + x3 + "<br>");
        x4/=4;
        document.write("x4 : " + x4 + "<br>");
        x5%=5;
        document.write("x5 : " + x5 + "<br>");
        st+="Javascript";
        document.write("st : " + st + "<br>");
        
    </script>
</html>
728x90
반응형
저작자표시 (새창열림)

'Language > Java Script' 카테고리의 다른 글

JavaScript - JSON  (0) 2021.12.14
시계만들기  (0) 2021.05.14
Java Script 객체  (0) 2021.05.12
Java Script 배열 2  (0) 2021.05.12
Java Script 함수와 배열  (0) 2021.05.11
Java Script 기본2  (0) 2021.05.11

'Language/Java Script'의 다른글

  • 현재글Java Script 기본

관련글

티스토리툴바