111일차_JavaScript

서창민·2023년 8월 21일

JavaScript

목록 보기

1/4

23.08.21 111일차

JavaScript

-- VisualStudioCode 사용
-- Live Server(view 확인)

input 값의 value로 보이기

<!DOCTYPE html>
<html>
  <head>
    <script>
        function funK1(){ 
            document.getElementById("demo").innerHTML = "Hello JavaScript";
            // input태그 값으로 표현하려면 Value를 사용 (NAME 값 대입)
            f1.demo2.value = "Hello JavaScript";
            // input태그 값으로 표현하려면 Value를 사용 (ID값 대입)
            document.getElementById("demo3").value = "Hello JavaScript";
        }
       
    </script>
  </head>
  <body>
    <form name="f1">
        <input type="text" name="demo2" id="demo2"> <br>
        <input type="text" name="demo3" id="demo3"> <br>
        <input type="button" value="버튼" onClick="funK1()">
    </form>
    <p id="demo">
        demo Test !!
    </p>
  </body>
</html>

name 과 id의 값을 불러와 사용하는 스크립트이다.
input text태그의 값으로 받아오기위해 별칭으로 받아 value를 사용해 값을 선언했다.

이미지 띄우고 수정하기

<!DOCTYPE html>
<html>
  <head>

  </head>
  <body>
    <p id="demo">이미지를 출력합니다.</p>
    <img src="./img/gladiator.png" id="mainImg" width="250" height="250"/>
    <form name="f1">
        <input type="button" value="지프" onClick="funK1()">
        <input type="button" value="SUV" onClick="funK2()">
    </form>
  </body>

  <script>
    function funK1(){ 
        document.getElementById("demo").innerHTML="600마력의 강한 SUV 글레디에이터."
        document.getElementById("demo").style.color="#329574"
        document.getElementById("demo").style.fontSize="35px"
        mainImg.src="./img/지프.png"
        document.getElementById("mainImg").width="350";
        document.getElementById("mainImg").height="350";
    }

    function funK2(){ 
        document.getElementById("demo").innerHTML="4륜구동의 강력한 SUV."
        document.getElementById("demo").style.color="#69a8b2"
        document.getElementById("demo").style.fontSize="20px"
        mainImg.src="./img/SUV.png"
        document.getElementById("mainImg").width="150";
        document.getElementById("mainImg").height="150";
    }
</script>
</html>

이미지를 출력하고 ID를 선언하여 CSS 를 간단하게 구현할 수 있다.

내부 스크립트

<!DOCTYPE html>
<html>
  <head>
    <script src="./js/main.js"></script>
  </head>
  <body>
    <p id="demo">이미지를 출력합니다.</p>
    <img src="./img/gladiator.png" id="mainImg" width="250" height="250"/>
    <form name="f1">
        <input type="button" value="지프" onClick="funK1()">
        <input type="button" value="SUV" onClick="funK2()">
        <input type="button" value="내부경고창" onClick="funK3()">
    </form>
  </body>
  <script>
    function funK3(){
        alert("내부 스크립트 확인")
    }
</script>
</html>

## main.js
    function funK1(){ 
        document.getElementById("demo").innerHTML="600마력의 강한 SUV 글레디에이터."
        document.getElementById("demo").style.color="#329574"
        document.getElementById("demo").style.fontSize="35px"
        mainImg.src="./img/지프.png"
        document.getElementById("mainImg").width="350";
        document.getElementById("mainImg").height="350";
    }

    function funK2(){ 
        document.getElementById("demo").innerHTML="4륜구동의 강력한 SUV."
        document.getElementById("demo").style.color="#69a8b2"
        document.getElementById("demo").style.fontSize="20px"
        mainImg.src="./img/SUV.png"
        document.getElementById("mainImg").width="150";
        document.getElementById("mainImg").height="150";
    }

.js 파일을 선언하여 외부의 스크립트를 불러와 사용할 수 있다.

스크립트로 input 값 알림 띄우기

<!DOCTYPE html>
<html>
  <head>
    <script src="./js/main.js"></script>
  </head>
  <body>
    <form name="f1">
        이름1: <input type="text" name="n1" id="n1"><br>
        이름2: <input type="text" name="n2" id="n2"><br>
        이름3: <input type="text" name="n3" id="n3"><br>
        <input type="button" value="확인" onClick="funK3()"> 
    </form>
  </body>
  <script>
    function funK3(){
        n1 = document.getElementById("n1").value
        alert(n1 + " 확인")

        n2 = document.getElementsByName("n2")[0].value
        alert(n2 + " 확인")

        n3 = f1.n3.value
        alert(n3 + " 확인")
    }
  </script>
</html>

값을 가져와 알림을 띄우는 3가지 방법이다.
id와 name을 이용해 getElement를 사용하고,
form에 별칭을 지어 불러와 사용할 수 있다.

값을 받아와 콘솔에서 확인하기

<!DOCTYPE html>
<html>
  <head>
    <script src="./js/main.js"></script>
  </head>
  <body>    
    <form name="f1">
        이름1: <input type="text" name="n1" id="n1"><br>
        <input type="button" value="확인" onClick="funK3()"> 
    </form>
    <br>[확인]
    <p id="demo"></p>
  </body>
  <script>
    function funK3(){
        n1 = document.getElementById("n1").value
        console.log("콘솔에서 확인하기: " + n1)
        document.getElementById("demo").innerHTML= n1
    }
  </script>
</html>

input의 n1값을 받아와서 페이지에 입력되도록 하고, 그 값을 콘솔에서 확인 할 수있도록 추가했다.

var와 let

<!DOCTYPE html>
<html>
  <script>
    var a = 100;
    var a = 200;
    console.log(a)

    let b = 100;
    if(b == 100){
        let b = 200;
        console.log(b)
    }
    console.log(a)
    console.log(b)
  </script>
</html>

공통적으로 var와 let은 초기값이 없어도 선언이 가능하다.
하지만 const는 초기값이 필수로 있어야 한다.
var는 변수값의 재정의가 가능하지만
let은 지역변수와 전역변수가 다를때만 변수값의 재정의가 가능하다.
const는 상수의 역할을 하기때문에 값 변경을 할 수없다.

<!DOCTYPE html>
<html>
  <script>
    var a = 200
    function hello(){
        var a = 100
        console.log(a)
    }
    hello()
    console.log(a)    
  </script>
</html>

var의 경우 function 안에서 정의한 변수값은 지역변수로 정의된다.

const를 최우선적으로 사용하고
let은 변수값을 재 할당할 필요가 있을때만 사용한다.
var는 ES6 이후부터 특별한 경우를 제외하곤 쓸 필요성이 떨어진다.

<!DOCTYPE html>
<html>
  <script>
    const cars = ["jeep", "McLaren", "Dodge"]
    cars[0] = "Jeep"
    document.writeln(cars[0] + "<br>")
    document.writeln("확인(1): " + cars + "<br>")

    cars.push("Nissan")
    document.writeln("Push 확인: " + cars + "<br>")

    const car = {type:"Fiat", model:"500", color:"Gray"}
    car.color = "red"
    car.owner = "SCM"
    document.writeln("car 확인(1): " + car.color + "<br>")
    document.writeln("car 확인(2): " + car.model + "<br>")
  </script>
</html>

const는 배열값으로는 주소값에있는 변수의 값을 재정의 할 수 있다.

개체의 속성과 값을 가져오기

<!DOCTYPE html>
<html>
  <script>
    const car = {type:"Fiat", model:"500", color:"white"}

    car.color = "red"
    car.owner = "SCM"
    
    for( prop in car ){
        document.writeln(prop + ":" + car[prop] + "<br>")    
    }    
    document.write("<hr>")    
    for(let i=0; i<Object.keys(car).length; i++){
        document.write(Object.keys(car)[i] + ":" + Object.values(key)[i])     
    }
  </script>
</html>

prop을 사용해서 car의 배열값을 하나씩 받아올수 있다.

함수

<!DOCTYPE html>
<html>
  <script>
    function myFunc(p1, p2){
        return p1 + p2
    }
    f1 = myFunc(2, 4)
    console.log("console확인:" + f1)
    document.write(f1)
  </script>
</html>

return으로 변수의 값을 반환하여 새로운 변수에 값을 넣고 출력하는 스크립트이다.

<!DOCTYPE html>
<html>
<head>
  <script>
    function plus(){
        let p1 = document.getElementById("p1").value
        let p2 = document.getElementById("p2").value
        // 웹에서는 모든 값이 문자형 (숫자형 변환 필요)
        p3 = Number(p1) + Number(p2)
        alert(p3)
    }
  </script>
</head>
<body>
    첫번째 수 : <input type="text" id="p1">
    두번째 수 : <input type="text" id="p2">
    <input type="button" value="더하기" onClick="plus()">
</body>
</html>

추가적으로 웹에서의 변수값을 입력받아 올때 그 변수값의 형은 문자형이기 때문에
Number를 이용하여 숫자형의 형변환이 필요하다.

<!DOCTYPE html>
<html>
<head>
  <script>
    function plus(){
        let p1 = document.getElementById("p1").value
        let p2 = document.getElementById("p2").value
        // 웹에서는 모든 값이 문자형 (숫자형 변환 필요)
        p3 = Number(p1) + Number(p2)
        document.write("더하기" + p3 + "<br>")

        p3 = Number(p1) - Number(p2)
        document.write("빼기" + p3 + "<br>")

        p3 = Number(p1) * Number(p2)
        document.write("곱하기" + p3 + "<br>")

        p3 = Number(p1) / Number(p2)
        document.write("나누기" + p3 + "<br>")
    
        p3 = Math.floor(Number(p1) / Number(p2))
        document.write("몫" + p3 + "<br>")
    
        p3 = Number(p1) % Number(p2)
        document.write("나머지" + p3 + "<br>")

    }
  </script>
</head>
<body>
    첫번째 수 : <input type="text" id="p1"><br>
    두번째 수 : <input type="text" id="p2"><br>
    <input type="button" value="더하기" onClick="plus()">
</body>
</html>

두수의 입력을 받아 사칙연산과 몫, 나머지를 표기하는 방법이다.

오브젝트 값 받아오기

<!DOCTYPE html>
<html>
<head>
  <script>
    function plus(){
        const man = {firstName:"Seo", lastName:"ChangMin"}
        document.write("성: " + man.firstName + "<br>" 
                            + " 이름: " + man.lastName + "<br>")
        for(prop in man){
            document.write(prop + " : " + man[prop]+"<br>")
        }
    }
    plus()
  </script>
</head>
<body>

</body>
</html>

const로 선언한 배열의 값을 prop로 반복하여 배열의 값을 출력해준다.

<!DOCTYPE html>
<html>
<head>
  <script>

    function plus(){
        const cars = ["K5", "Volvo", "BMW"]
		
        // 주소값을 직접 선언하기
        document.write(cars[0] + " : " + cars[1] + " : " + cars[2] + "<br>")

        document.write("<hr>")
		
        // i변수로 주소값 할당하기
        for(let i=0; i < cars.length; i++){
            document.write(cars[i] + "<br>")
        }

        document.write("<hr>")
		
        // forEach로 주소값 할당하기
        cars.forEach(function(car, index){
            document.write(car + "<br>")
        })

        document.write("<hr>")
		
        // map으로 값 저장하여 출력하기
        cars.map((car) => {
            document.write(car + "<br>")    
        })

        document.write("<hr>")
		
        // 값이 한줄로 표현이 가능할시 사용하는 map 구조
        cars.map((car) =>   document.write(car + "<br>"))

        document.write("<hr>")
		
        // prop으로 배열값 받아오기
        for(prop in cars){
            document.write(prop + " : " + cars[prop] + "<br>")
        }
    }
    plus()
  </script>
</head>
<body>

</body>
</html>

배열의 값을 받아오는 여러가지 방법이다 .

<!DOCTYPE html>
<html>
<head>
  <script>
    function plus(){
            const person = {
                firstName:"Seo"
                ,lastName:"Jhon"
                ,id:1234
                ,fullName: function(){
                    return this.firstName + " " + this.lastName + " " + this.id
                }
        }
        document.write(person.firstName + "<br>")
        document.write(person.lastName + "<br>")
        document.write(person.fullName() + "<br>")
        document.write("<br><hr>")

        for(prop in person){
            document.write(prop + ":" + person[prop] + "<br>")
        }
    }
    plus()
  </script>
</head>
<body>

</body>
</html>

또다른 방법의 Object를 불러오는 방식이다.

앞서 함수안에 함수를 넣어 기존 값을 리턴받아 하나의 변수로 값을 확인했다.

서창민

Back-end Developer Preparation Students

다음 포스트

111일차_JavaScript

JavaScript

23.08.21 111일차

112일차_JavaScript

0개의 댓글