JS

[JavaScript]스크립트언어란?

로돌씨 2024. 7. 1. 21:22

스크립트언어란?

기본프로그램의 동작을 사용자의 요구에 맞게 수행되도록 해주는 용도로 사용 .

빠르게 학습가능 , 짧은 소스코드로 상호작용하도록 고안됨

 

자바스크립트

웹 브라우저에서 사용하는 인터프리터 방식의 객체지향 프로그래밍언어이며 표준을 따르는 웹기술이다.

<!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>
    <!-- 2. embedded-->
    <script type="text/javascript">
        function embeddedTest(){
           let doc= document.getElementsByTagName("li")[4];
           doc.style.color="red";
           doc.innerHTML="<strong>글자가 바뀝니다.</strong>"; 
        }
        
    </script>
    <!-- 3. 외부 -->
    <script type="text/javascript" src="./js/test.js"></script>
<body>
    <dl>
        <dt>스크립트 언어란?</dt>
        <dd>
            기본프로그램의 동작을 사용자의 요구에 맞게 수행되도록 해주는 용도로 사용.<br>
            빠르게 학습가능 , 짧은 소스코드로 상호작용하도록 고안됨
        </dd>
    </dl>
    <d1>
        <dt>자바 스크립트</dt>
        <dd>
            웹 브라우저에서 사용하는 인터프리터 방식의 객체지향 프로그래밍 언어다.<br>
            표준을 따르는 웹 기술.
        </dd>
    </d1>
    <d1>
        <dt>자바 스크립트 사용법</dt>
        <dd>
            <ol>
                <li>태그에 직접 간단코드를 작성하여 실행되게 하는 방법</li>
                <li>script 태그 영역에 작성해서 실행되게 하는 방법</li>
                <li>외부의 js파일로 작성해서 가져다 사용하는 방법</li>
            </ol>
        </dd>
    </d1>
    <hr>
    <ol>
             <!-- 1. inline -->
        <li onclick="window.alert('inline');">inline 방식</li> 
             <!-- 클릭했을때 정보를 띄워줌 -->
        <li onclick="embeddedTest()">내부 작성 방식(embedded)</li>
        <!-- 기능을 만들고 -> 여기에 추가 -->
        <li onclick="test();">외부 작성 방식(*.js)</li>
    </ol>
</body>
</html>

외부 js 파일
function test(){
    alert("외부 작성방식");
}

 

var / let / const

<!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>변수</title>
    <script type="text/javascript">
        console.log(test);
        var test=1;
        console.log(test);

        //console.log(test2);
        let test2=2;
        console.log(test2);
        test2= 22;
        console.log(test2);

        const test3=3;
        console.log(test3);
        //test3= 33;
        //console.log(test3);
        // const = 값이 불변한다.

        {
            var no=10;
            let no2=20;
            const no3=30;
        }
        console.log(no);
        // -> var 는 어디서든 땡겨서 사용가능함(자유도가 높음)
        //console.log(no2);
        //console.log(no3);

        window.onload=function(){
            //alert("윈도우 로딩 후!");
            //alert -> 페이지에 메세지 띄워주는 기능
        }
        // onload -> 로드가 되면 펑션을실행하자.
        // -------------------------------------------------
        let variable = 10; // 전역변수 : 공용으로 사용 가능 , 값이 유지됨
        function test01(){
            variable = variable+5;
            document.getElementById("v01").innerHTML=
            "<b style='color:red;background:yellow;'>"+variable+"</b>";
            //문서에서 ("v01")이라는 id요소를 찾아 html을 넣어주겠다.
            //"<넣으려는 html>"+ ~ +</> 
        }

        function test02(){
            const variable2 = variable+100; //지역변수 (함수안에 선언)
            document.getElementById("v02").innerHTML=
            "<b>"+variable2+"</b>";
        }
        function test03(){
            let variable3 = "문자";
            console.log(variable3 + ':' +typeof variable3);
            console.log(`${variable3}, : ads ${typeof variable3}`);
            // ` 백틱

            //숫자
            variable3 = 5.5;
            console.log(`${variable3} : ${typeof variable3}`);
            //논리
            variable3 = true;
            console.log(`${variable3} : ${typeof variable3}`);
            //null
            variable3 = null;
            console.log(`${variable3} : ${typeof variable3}`);
            //객체
            variable3 = [1,2,3,4,5,6,7]; // 배열
            console.log(`${variable3} : ${typeof variable3}`);
            variable3 = {name:'박영석' , age:25}; // 객체
            console.log(variable3 + " : " + typeof variable3);
            console.log(variable3); // 배열의 내용 출력
            //함수
            variable3 =  () => alert("변수의 타입");
                
            console.log(variable3);

            console.log(`${variable3} : ${typeof variable3}`);
            
            variable3(); 
            //함수를 실행시켜줌
        }   
        
    </script>
</head>
<body>
    <h1>변수의 사용</h1>
    <dl>
        <dt>변수의 선언 규칙</dt>
            <dd>1. 대소문자 구분한다.</dd>
            <dd>2. 영문,$,_로 시작한다.</dd>
            <dd>3. 영문,$,_를 포함할 수 있다.</dd>
            <dd>4. 키워드나 예약어 사용할 수 없다.</dd>

            <dt>변수의 범위</dt>
            <dd>1.전역변수 : window 객체에 포함되는 변수로
                다른 함수들에서 공용으로 사용할 수 있다.( 값 유지 )
                <button onclick="test01();">확인</button>
            </dd>
            <dd id="v01"></dd>

            <dd>2.지역변수 : 함수나 객체 내부에 선언되고
                실행이 종료되면 사라짐
                <button onclick="test02();">확인</button>
            </dd>
            <dd id="v02"></dd>

            <dt>변수의 선언과 저장</dt>
            <dd>1. let , var , const 키워드 사용하여 변수 선언</dd>
            <dd>2. 변수의 타입은 저장되는 데이터의 타입에 따라 결정된다.</dd>
            <button onclick="test03();">확인</button>
            </dd>
            
            <dt>타입의 종류</dt>
            <dd>1.문자(String)</dd>
            <dd>2.숫자(number)</dd>
            <dd>3.논리(boolean)</dd>
            <dd>4.널(null)</dd>
            <dd>5.객체(Object)</dd>
            <dd>6.함수(Function)</dd>


            
    </dl>
</body>
</html>

var → 자유도가 높음 ( 어디서든 땡겨서 사용 가능)

let → 자유도가 높지않지만 값을 변경해서 사용가능

const → 값이 고정됨

 

 

변수의 타입은 자동으로 지정됨

 

function

<!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>대화형 함수</title>
    <script>
        //alert() : 단순 경고나 코드 디버깅용으로 주로 사용.
        function alertTest(){
            alert("내용 출력(단순 대화창)");
        }
        //confirm : 확인 / 취소 제공(true / false 반환)
        function confirmTest(){
            //console.log(confirm("확인/취소"));
            if(confirm("배경을 분홍으로 바꿀까요?")){
                document.body.style.backgroundColor="pink";
            }else{
                console.log("기존색상 유지");
            }
        }
        //prompt : 텍스트 박스 , 확인/취소 버튼 제공
        // 입력한 텍스트 반환 (취소 : null)
        function promptTest(){
            const txt = prompt("좋아하는 과목 번호를 선택해 주세요. \n[1:java 2:db 3:ui]");
            //console.log(txt);
            
            switch(txt){
                case "1":
                    console.log("역시 자바!")
                    break;
                case "2":
                    console.log("역시 db!")
                    break;
                case "3":
                    console.log("역시 ui!")
                    break;
                default:
                    console.log("1,2,3 번중 하나를 입력해주세요.")
            }
            // 입력받은 값이 string 값이기 때문에 case 1-> case "1" 로 바꿔주어야함

        }
    </script>
</head>
<body>
    <h1>window객체에서 제공하는 대화형 함수</h1>
    <small>
        종류에는 <strong>alert(), confirm(), prompt()</strong> 가 있다.
    </small>

    <p>alert():<button onclick="alertTest();">클릭!</button></p>
    <p>confirm():<button onclick="confirmTest();">클릭!</button></p>
    <p>prompt():<button onclick="promptTest();">클릭!</button></p>
</body>
</html>

alert : 텍스트를 팝업으로 출력해줌

confirm : 취소 확인 박스로 출력해줌 → 취소 = false 값 , 확인 = true값

prompt : 값 입력가능한 창 출력

 

closer

함수안의 함수를 이용하여 값을 부모의 함수에게 전달

<!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 type="text/javascript">
        function func01(){
            alert("명시적 함수");
        }
        const func02 = function(){
            alert("익명 함수");
        }
        
        function literalPrn(literal){
            literal("안녕하세요. 리터럴 입니다.");
        }
        function literalPrn2(literal){
            literal();
        }
        function func03(){
            literalPrn(function(msg){
                alert(msg);
            });
            literalPrn(function(){
                alert("어렵노...");});
        }
        function valTest(msg){
            //alguments : 인자값 갯수만큼 배열형태로 저장이된다.
            let val="";
            for(let i=0; i<arguments.length; i++){
                val += arguments[i]+" ";
            }
            alert(val);
        }
        //클로저
        function closureTest(val){
            const msg ="였군요?";
            function addVal(){
                alert(val+" "+msg);
            }
            return addVal;
        }

        let javaClass = closureTest("javascript");
        //console.log(javaClass);

        function multiClass(val){
            closureTest(val)(); //리턴해준걸 또실행해주는 괄호();붙혀주어야함
            //let tmp = closureTest(val);
            //tmp(); ->풀어서 쓰면 이런모양
        }
        
    </script>
</head>
<body>
    <h1>Function!! 함수!!</h1>
    <h2>함수의 종류</h2>
    <p onclick="func01();">1.명시적 함수</p>
    <p onclick="func02();">2.익명 함수</p>
    <p onclick="func03();">3.리터럴 함수</p>

    <h2 onclick="valTest('multi' , '캠퍼스' ,'세종대','6F','603호');">args() 속성</h2>
    
    <h2>클로저 (함수 리턴)</h2>
    자바수업 <input type ="text" id="day" value=" "/>&nbsp;
            <input type="button" value="click!" onclick="javaClass();">
    <br>
    muli수업 <input type ="text" id="multi" value=" "/>&nbsp;
            <input type="button" value="click!" onclick="multiClass(multi.value);"> <!-- 아이디 멀티인 값의 밸류를 클로저한테 넘겨줌-->

</body>
</html>

 

'JS' 카테고리의 다른 글

[JS]rolling / dom / Object / numberObject / transObject  (2) 2024.07.03
[JS] 자주 쓰는 함수 모음  (0) 2024.05.10

'JS'의 다른글

  • 현재글[JavaScript]스크립트언어란?

관련글

티스토리툴바