Java Script 방식

 

 

• 스크립트 (Script) 언어

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

-- 별도로 컴파일을 진행하지 않고

   인터프리터 (interpreter)를 이용하여 소스코드를 한 줄씩 읽어 바로 실행.

   --> 컴파일에 소요되는 시간이 없음 , 대신 프로그램 실행 시간이 느림.

 

• Javascript 란?

-- 웹 브라우저에서 많이 사용하는 인터프리터 방식의 객체 지향 프로그래밍 언어.

-- ECMA Script 표준을 따르는 대표적인 웹 기술이다 .

 

• 자바스크립트 작성 방법 

1. 브라우저 콘솔에 직접 작성 

2. 태그에 직접 JS 코드를 작성 ( inline )

3. html 내부에 script 태그를 이용하여 작성 ( internal )

4. html 외부에 파일 ( .js ) 를 이용하여 작성 (  external )

 

 

 

 

 

 

 

EX ))   inline 

 <button type="button" onclick="alert('inline 버튼이 클릭되었습니다')">inline 방식</button>
 
-- inline누르세요

  

 

 

 

 

 

 

 

 

EX ))  internal  

    <button type="button" onclick="btnClick1()">internal 방식</button>
    <button type="button" id="btn2">internal 방식 2</button>


    <script>
        function btnClick1(){
            alert("internal 버튼이 클릭되었습니다");
        }

        // 2-1.  id가 " btn2 " 인 요소가 클릭되었을 때 기능 수행
        document.getElementById("btn2").onclick=function(){
            alert("internal 2 버튼이 클릭되었습니다 ");
        }
    </script>

 

 

 

 

 

 

 

 

 

 EX ))))  external   ( 외부 .js 파일 사용 )

 

    <button type="button" onclick="btnClick3()">external 방식</button>
    
    <script src="/example1.js"></script>

function btnClick3(){
    alert("external 버튼이 클릭되었습니다"); 
}

 

 

 

 

 

 

 

 

 

 

EX ))   버튼활용

 

    <div id="box"></div>
    <button type="button" onclick="changeColor1()">red</button>
    <button type="button" onclick="changeColor2()">yellow</button>
    
    <script src="/example1.js"></script>

function changeColor1(){
    document.getElementById("box").style.backgroundColor='red';
}
function changeColor2(){
    document.getElementById("box").style.backgroundColor='yellow';
}

 

 

 

 

 

 

 

 

 

 

 

• inner HTML

-- 자바스크립트에서 요소 전체를 읽어들이거나 변경하는 속성

-- 내용을 읽어올 때 태그 + 속성 + 내용을 모두 포함함.

-- 내용을 변경할 때 태그는 HTML 요소로 해석됨.

 

    <button onclick="getInnerHTML1()">innerHTML 로 읽어오기</button>
    <button onclick="setInnerHTML1()">innerHTML 로 변경하기</button>
    
    <p id="test1" class="box">
        테스트1 입니다. <br>
        <b class="red">안녕하세요</b>
    </p>

// innerHTML 로 읽어오기 
// 요소내부내용 ( 속성,태그,내용 )을 읽어와
// 문자열로 반환.
function getInnerHTML1(){
    //HTML 문서 내에서 id 속성값이 "test1" 인 요소를 얻어오기
    // 상수형 변수 t1에 저장
    const t1 = document.getElementById("test1");
}

// innerHTML 로 변경하기
// 태그,속성이 해석됨 (HTML Converter)
function setInnerHTML1(){
    const t1 = document.getElementById("test1");
    t1.innerHTML = "<b class='red'> 변경된<br><br>내용임 </b>";
}

    

테스트1 입니다.
안녕하세요

 

 

 

 

 

 

 

 

 

• inner HTML 2

   <button type="button" onclick="add()">추가하기</button>
   
    <div id="area1">
        <div class="area1-box"></div>
    </div>

function add(){
    // 1) id 속성값이 "area1"인 요소를얻어 변수저장
    const area1=document.getElementById("area1");
    // 2) area1 요소의 이전내용에
    //    새로운 내용을 누적.
    area1.innerHTML +="<div class='area1-box'></div>";
}

 

 

 

 

 

 

 

 

• innerText

-- 자바스크립에서 요소에 작성된 내용만을 읽어들이거나 변경하는 속성

-- 내용을 읽어올 때 요소의 태그, 속성은 무시함

-- 내용을 변경할 때 대입되는 태그는 모두 문자열로 해석됨. 

    ( HTML 태그로 해석 X )

 

    <button onclick="getInnerText1()">innerText 로 읽어오기</button>
    <button onclick="setInnerText1()">innerText 로 변경하기</button>

    <p id="test2" class="box">
        테스트2 입니다. <br>
        <b class="red">자바스크립트</b>
    </p>

const t2 = document.getElementById("test2");
//innerText로 읽어오기 (내용만)
function getInnerText1(){
    console.log(t2.innerText);         //콘솔에 출력

}
//innerText로 변경하기
function setInnerText1(){
    t2.innerText="<b class='red'> 변경된<br><br>내용임 </b>";
}

         

테스트2 입니다.
자바스크립트

 

 

 

 

 

 

 

 

 

 

• confirm ("내용")

-- 질문에 대한 "확인" / "취소" 결과를 얻고자 할 때 사용하는 대화 상자.

  -- 확인 : true 반환

  -- 취소 : false 반환.

 

    <div id="confirmTest" class="area1-box"></div>
    <button onclick="fnConfirm()">confirm확인</button>

function fnConfirm(){
    if( confirm("배경색 바꾸실?")){
        document.getElementById("confirmTest").style.backgroundColor="pink";
    }else{
        console.log("취소함");
    }
}

 

 

 

 

 

 

 

 

 

 

• prompt ("내용")

-- 텍스트를 작성할 수 있는 대화 상자

-- 확인 : 입력한 값을 반환

-- 취소 : null 반환 .

 

 <button id="promptTest" onclick="fnPrompt()">버튼</button>

function fnPrompt(){
    const input = prompt("변경할버튼명 입력하셔");

    if(input != null){
        document.getElementById("promptTest").innerText=input;
    }else{
        alert("취소됨")
    }
}