컴퓨터는 잘못이 없다..

[JavaScript]자바 스크립트 시작하기 본문

공부/JavaScript

[JavaScript]자바 스크립트 시작하기

도토리까꿍v 2020. 11. 4. 20:16
Contents 접기

[javascript 영역과 javascript 함수의 의미]

<!--
#javascript영역
    1. 크롬 - 우클릭 - 검사 - console : enter를 누르는 순간 자바 스크립트 코드 실행
    2. p태그 안의 onclick 속성값으로 자바 스크립트가 올 수 있다. 
    3. 실행 예정인 자바 스크립트를 모아놓고 일괄적으로 수행시킬 수 있다.(2번의 속성값에 함수를 호출하면 된다.)
    4. body태그 안의 <javascript> 영역은 페이지가 로딩되는 시점에 실행된다.

#함수의 의미
	특정시점에 실행 예정인 자바 스크립트를 모아놓고 일괄적으로 수행시킬 수 있으며 모아놓는 곳을 함수라고 한다.
	
-->

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>hello.html</title>
</head>
<body>

    <!--안녕하세요를 클릭했을 때 (직접 자바스크립트 코드 집어넣기)--> 
    <!--onclick=”(안의 명령어는 작은따옴표로 밖이 큰따옴표이기 때문!)”-->
    <p id="one" onclick="document.querySelector('#one').innerText='안녕히 가세요.';">안녕하세요</p>

    <!--어쩌구 위에 마우스를 갖다 댔을 때(직접도 넣어보고 함수로도 넣어보기)-->
    <p id="two" onmouseover="document.querySelector('#two').innerText='김구라';">어쩌구</p>
    <p id="three" onmouseover="change();">저쩌구</p>

    <!--아래 버튼을 클릭하면 id가 result로 지정된 p요소에 버튼을 클릭했네?가 나오게 하기-->
    <button id="btn" onclick="change2();">눌러보셈</button>
    <p id="result"></p>

    <script>
        
        //함수 : 특정시점에 실행 예정인 자바 스크립트를 모아놓고 
        //일괄적으로 수행시킬 수 있으며 모아놓는 곳을 함수라고 한다.
        function change(){
            document.querySelector("#three").innerText="해골";
            document.querySelector("#three").style.color="red";
            document.querySelector("#three").style.fontSize="100px";
        }

        function change2(){
            document.querySelector("#result").innerText="버튼을 클릭했네?";
            document.querySelector("#btn").style.color="blue";
            document.sele
        }

    </script>

</body>
</html>

-> 위 코드의 결과

 

 

[각종 javaScript 함수 보기]

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <p id="one" onmouseover="onOver();" onmouseout="onOut();">마우스를 올려보셈</p>

    <img id="two" src="images/kim1.png" onclick="clicked()">

    <div>
        <img id="four" onclick = "a();" src="images/rabbit_1.png">
        <button id="three" style="display: none;" onclick="b();">가즈아~</button>
    </div>
    
    <script>
        function onOver(){
            document.querySelector("#one").style.color="yellow";
        }

        function onOut(){
            document.querySelector("#one").style.color="black";
        }

        function clicked(){
            document.querySelector("#two").setAttribute("src","images/1.jpg");
        
        }

        function a(){
            //버튼이 보이게 하기
            document.querySelector("#three").style.display="inline";

            //이미지가 안보이게 하기
            //document.querySelector("#four").style.display="none";

            //이미지가 다른 이미지로 바뀌기
            document.querySelector("#four").setAttribute("src","images/1.jpg")
        }

        function b(){
            location.href="https://www.google.com";
        }


      
    </script>
</body>
</html>

-> 위 코드의 결과

 

 

 

'공부 > JavaScript' 카테고리의 다른 글

[JavaScript]document.querySelector() 사용해보기 document.querySeletor()의 value와 innerText 사용해서 산술연산 예제(계산기) 풀어보기  (0) 2020.11.04
[JavaScript]number type, 대입연산자, 산술연산자, 연결연산자  (0) 2020.11.04
[JavaScript]자바스크립트 7가지 데이터타입  (0) 2020.11.04
'공부/JavaScript' Related Articles more
Comments