스마트 인재개발원/HTML - CSS - JS

(스마트인재개발원) JS 기초 실습.

Javascript

웹 페이지를 동적으로,프로그래밍적으로 제어하기 위해서 고안된 언어

 

 

1. 모든 웹 브라우저에서 동작한다.

2. 웹 브라우저에서 실행 결과를 즉시 확인

3. 다양한 용도의 프로그램 개발

4. 다양한 자바스크립트 공개 API

5. 다양한 라이브러리와 프레임워크

 

 

 

prompt(“출력내용”,”입력내용”)

- 입력창을 통한 입력문

confirm(“출력문작성”)

- 확인 및 취소를 통한 입력문

 

 

* 변수 var 키워드

 - 사전적 의미로는 “변화를 줄 수 있는” 또는 “변할 수 있는 수”

 - 프로그래밍에서는 데이터를 담을 수 있는 공간

 

 

 

 

ECMAScript6 표준안에서 새로운 변수 키워드 등장

자료형 설명
number 정수, 실수 등 산술 연산이 가능한 자료형
string 문자열로 이루어진 자료형
boolean 참/거짓으로 표현되는 논리 형태의 자료형
undefined 값이 할당된 적이 없거나 존재하지않는 속성일 때의 유형
null 아무런 값을 나타내지 않을 때의 자료형

 

 

연산자 종류
산술연산자 + - * / %
증감연산자 ++ --
대입연산자 = += -= *= /= %=
연결연산자 +(문자열 결합)
비교연산자 == != ===(타입과 값을 같이 비교) !== > >= < <=
논리연산자 && || !
조건연산자 조건 ? 실행문1 : 실행문2;

 

 

변수 num 값 중에서 백의 자리 이하를 버리는 코드이다.

만일 변수 num의 값이 456이라면 400이 되고, 111이라면 100이 된다.

 

 

연산자 종류
parseInt() 문자열을 숫자(정수)로 변경
parseFloat() 문자열을 숫자(실수)로 변경
Number() 다른 자료형을 숫자형(정수&실수)으로 변환
toString() 숫자를 문자열로 변경

각각 값이 ‘100’,200인 num1,num2가 있다.

형변환을 하여 아래와 같은 결과를 출력하시오

 

 

* 작성위치에 따라 실행순서와 브라우저 렌더링에 영향을 미친다.

<head> 내 작성

단순한 로직처리(설정값 초기화)

 

</body> 앞 작성

복잡한 로직처리(제어)

 

 

조건문

< 주어진 조건을 비교·판단하여 결과를 얻는 구문 >

 

 

Java, Python, R 점수를 입력하여 평균과 학점을 출력하세요.

( 90점 이상 = A / 80점 이상  = B / 70점 이상 = C / 이외 = F )

 

빨강, 초록, 파랑 중에 원하는 색을 입력했을 때, 웹 브라우저

배경색이 바뀌도록 작성하세요

 

 

 

두 개의 숫자를 입력받아 그 범위에 해당하는 숫자의 합을 구하세요.

 

다음 랜덤하게 뽑인 숫자를 맞추는 프로그램입니다.

아래 결과와 같은 결과를 출력하시오.

 

<!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>
    <style>
        /* div{
            color: blue;
        }
        body{
            background-color: yellow;
        }
        */
    </style>
</head>
<body id ="body1">
    <div>
    <div>
        <h1> 
            <a href="#">Front-end-Deveroper</a>
        </h1>
       
    </div>
    

    <button id = "btn1">DESIGN</button>
    <button id = "btn2">DEFAULT</button>

    <ul>
        <li>HTML</li>
        <li>CSS</li>
        <li>Javascript</li>
    </ul>

    <h1>Javascript</h1>

    <p>Javascript는 웹 페이지를 동적인 페이지로 만들기 위해 고안된 언어입니다. </p>
    <p>차근차근 Javascript에 대해서 배워보도록 합시다.</p>

    <script>
        //자바스크립트 코드를 작성하는 공간
        document.getElementById("btn1").addEventListener("click", function(){
            document.getElementById("body1").style.backgroundColor = "yellow"
            document.getElementById("body1").style.color="blue"

        })
        
    </script>

</div>
</body>
</html>
<!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>
</head>
<body>
    <script>
        //HTML문서에 직접출력
        document.write("<h1>안녕하세요</h1>");

        //콘솔창에 출력하는 문장
        console.log("콘솔창에서 확인하는 부분");

        // alert 알람 팝업창을 출력
        alert("확인되었습니다.");
    </script>
</body>
</html>
<!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>
</head>
<body>
    <script>
        //입력창을 통해서 입력문을 작성한다!
        //return type String
       prompt("이름을 입력해주세요!");

       //확인 및 취소를 통해서 입력문 작성 return type : boolean 
       confirm("삭제 하시겠습니까?");

       var num = {}
    </script>
</body>
</html>
<!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>
</head>
<body>
    <script>
        //기본 변수 선언 var
        //데이터의 재할당 ok 변수명의 재선언 ok
        var age = 20;
        console.log(age);
        age = 30;
        console.log(age);
        var age = 100;
        console.log(age);

        //조금 강력한 변수선언 let 
        let name = '정형';
        name = '정선일';
        let name = "임명진";

        //상수선언 const 상수명의 재선언 no 
        const maxLavel = 100;


    </script>
</body>
</html>
<!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>
</head>
<body>
    <script>
        result = prompt("이름을 입력하세요")
        console.log("어서오세요\n"+result+"님, 환영합니다.")

        
    </script>
</body>
</html>
<!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>
</head>
<body>
    <script>
        //문자를 정수로 형변환
        let num = "3.14" 
        console.log(num);
        console.log(parseInt(num));

        let num2 = "3.01"
        console.log(parseFloat(num2));
        console.log("----------------------")

        //숫자형 형변환
        console.log(Number(num));
        console.log(Number(num2));

        //숫자를 문자로 형변환
        let num3 = 5;
        console.log(num3.toString());

    </script>
</body>
</html>
<!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>
    
</head>
<body>
    <!--인라인 방식 = 태그내에 직접 코드를 작설-->
    <button onclick="alert('클릭했습니다!')">클릭</button>
    <br>
    <button id="btn">두번째 클릭</button>
    <script src = "외부.js"></script>
</body>
</html>
<!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>
</head>
<body id = "body1">
    <!--
        1. 사용자에게 색 입력받기(빨강 초록 파랑)
        2. 조건문(빨강일때는 배경색을 빨강색으로 --/--)
        
    -->
   

    <script>
          input_data = prompt("색을 입력해주세요>>");
   
        if(input_data=="빨강"){
            document.getElementById("body1").style.background = "red"
        }

        if(input_data=="초록"){
            document.getElementById("body1").style.background = "green"
        }

        if(input_data=="파랑"){
            document.getElementById("body1").style.background = "blue"
        }
   
    </script>

</body>
</html>
<!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>
</head>
<body>
    
    <script>
        let num1 = Number(prompt("시작할 숫자를 입력해주세요"))
        let num2 = Number(prompt("마지막 숫자를 입력해주세요"))
        let result = 0;
        result = parseInt(result)
        for(let i=num1; i<=num2; i++){
            result = result+i
        }

        console.log(result)
    </script>
</body>
</html>
<!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>
</head>
<body>

    <script>
        //배열 선언방식 
        let list = [];
        let list2 = new Array(5);

        //배열 생성
        let list3 = [1,"가나다",true];

        //데이터 추가방법
        list[3] = 10;

        list[0] = "더워요";

        //배열의 길이 구하기
        list3.length
        
    </script>
    
</body>
</html>
<!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>
</head>
<body>

    <script>

        let arr = [1,2,3,4,5,7]

        let list_hol = []

        for(let i=0; i<arr.length; i++){

            if((arr[i]%2) !=0){
               list_hol.push(arr[i])
            }

        }

        alert("list에 들어있는 홀수는" + list_hol + "이며," + "총 " +  list_hol.length +"개 입니다."  )

    </script>
    
</body>
</html>
<!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>
</head>
<body>
    <script>

        let list = []
        //배열에 마지막 인덱스의 데이터 추가
        list.push(1);
        console.log(list)
        list.push(2);
        console.log(list)

        //배열의 마지막 인덱스의 데이터를 삭제
        list.pop()
        console.log(list)
        //배열의 첫번째 인덱스의 데이터를 추가
        list.unshift(0)
        console.log(list)

        //배열의 첫번째 인덱스 요소를 제거

        list.shift()
        console.log(list)
    </script>
</body>
</html>
<!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>
</head>
<body>
    
    <script>
        function add(num1, num2){
            alert("두 수의 합은 " + (num1+num2))

        }
        add(5,10)

        function minus(num1, num2){
          
            return num1-num2
        }

        minus(10,5)

        
    </script>
</body>
</html>
<!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>
</head>
<body>
    <script>
        let person = {
            name : "정형",
            age : 20,
            skill : function(){
                alert("에어컨 틀어주세요!")
            }
        }
        document.write(person.name);
        person.skill()
        
        person.gender = "남자";

    </script>

</body>
</html>
<!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>
</head>
<body>
    <p id = "txt">
        날씨가 더워유~
    </p>

    <button onclick="data()">클릭</button>

    <script>
        function data(){


            //innerText>> 안에있는 글자를 가져오는 경우
            //innerHTML>> 태그를 지원해서 수정하는 경우 사용
            
            let str = document.getElementById('txt')
            str.innerHTML = "<h1>아이스크림 주세유 사랑이 담겨있는</h1>"

        }

    </script>
</body>
</html>
<!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>
</head>
<body>
    <div id = "div1">클릭 한 번 해볼까요?</div>
    <button onclick="H1()">h1태그생성</button>
    <button onclick="A()">a태그생성</button>
    <button onclick="UL()">ul태그생성</button>
</body>
 
<script>

    function H1(){

        let h1_change = document.getElementById('div1')
        h1_change.innerHTML += "<h1>DOM 활용해보기</h1>"
         

    }

    function A(){

        let a_change = document.getElementById('div1')
        a_change.innerHTML +="<a href='https://www.google.com'>Google로 가보자!</a>"
        
    }

    function UL(){

        let ul_change = document.getElementById('div1')
        ul_change.innerHTML += "<ul><li>HTML</li><li>CSS</li><li>Javascript</li></ul>"
    }



</script>
</html>
<!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>
</head>
<body>
    <input type="text", id = "txt">
    <button onclick="data()">인풋데이터 가져오기</button>

    <script>
        function data(){
        //클릭 했을 때 input 테이터를 가져오기
        let txt =  document.getElementById("txt").value
        alert(txt)
        }

    </script>
</body>
</html>
<!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>
</head>
<body>
    <ul>
        <li>HTML</li>
        <li>CSS</li>
        <li>JS</li>
    </ul>

    <script>
        let li = document.getElementsByTagName('li')
        for(let i =0; i < li.length; i++){
           console.log(li[i].innerText)
        }

    </script>
</body>
</html>
<!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>
</head>
<body>
    <p id="p1">아래 버튼을 클릭하면 이텍스트의 색깔과 크기가 변해요!</p>
    <button onclick="sty()">디자인 변경</button>

    <script>
        function sty(){

            s = document.getElementById('p1').style
            s.color = "tomato"
            s.fontSize="25px"
            s.fontWeight = "bold"
        }

    </script>
</body>
</html>
<!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>
</head>
<style>
    #div1{
        width: 200px;
        height: 200px;
        background-color: blue;
    }
</style>
<body>
    <div id = "div1"></div>
    <br>
    <button onclick="circle()">원만들기</button>
    <button onclick="rec()">직사각형만들기</button>

</body>

    <script>

        function circle(){

           document.getElementById('div1').style.background ='yellow'     
           document.getElementById('div1').style.width = "200px"   
           document.getElementById('div1').style.borderRadius = "50%"


        }

        function rec(){

            document.getElementById('div1').style.background ='tomato'
            document.getElementById('div1').style.borderRadius = "0%"
           document.getElementById('div1').style.width = "500px"
            
        }


    </script>

</html>
<!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>
</head>
<body>
    <img id = "img" src="https://item.kakaocdn.net/do/7f552a5d038cc7b0b6f99339bbc330baf43ad912ad8dd55b04db6a64cddaf76d" alt="">
    <br>
    <button onclick="img()">이미지변경</button>

    <script>
        function img(){
            let img = document.getElementById("img")

            if (img.src =="https://item.kakaocdn.net/do/7f552a5d038cc7b0b6f99339bbc330baf43ad912ad8dd55b04db6a64cddaf76d"){

                img.src = "https://item.kakaocdn.net/do/1b0c02d12a3c5893ed5afc8492f5aebbf43ad912ad8dd55b04db6a64cddaf76d"
            }

            if (img.src =="https://item.kakaocdn.net/do/1b0c02d12a3c5893ed5afc8492f5aebbf43ad912ad8dd55b04db6a64cddaf76d"){

                img.src = "https://item.kakaocdn.net/do/7f552a5d038cc7b0b6f99339bbc330baf43ad912ad8dd55b04db6a64cddaf76d"
}
            

        }

    </script>

</body>

</html>

"스마트인재개발원에서 진행된 수업내용입니다"

https://www.smhrd.or.kr/

 

스마트인재개발원

4차산업혁명시대를 선도하는 빅데이터, 인공지능, 사물인터넷 전문 '0원' 취업연계교육기관

www.smhrd.or.kr

 

저작자표시

'스마트 인재개발원 > HTML - CSS - JS' 카테고리의 다른 글

(스마트인재개발원) JSP 기초  (0) 2021.06.20
(스마트인재개발원) Ajax 기초수업  (0) 2021.06.13
(스마트인재개발원) HTML-CSS NCS 시험 예상문제  (0) 2021.05.28
(스마트인재개발원) CSS 기초 flexbox, holy grail, wrap, float  (0) 2021.05.28
(스마트인재개발원) CSS 기초 이미지 띄우기, float  (0) 2021.05.28

    티스토리툴바