기술노트/웹프론트엔드

웹 프론트엔드 강의(4)

반응형

우선 소스부터 보여드리고나서 그 다음에 설명하겠다.

<html>
    <head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8">
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
    </head>
<a href='#' onclick='sayhello("hi~~")'>go1</a>  
<a href='#' onclick='sayhello("abc~~")'>go2</a>  
<a href='#' onclick='sayhello("123~")'>go3</a>  

 
    <script type ='text/javascript'>
  function sayhello(message)
    {
    alert(message);
    }
</script>
    <body>
  
    </body>
</html>

<a href='#' onclick='sayhello("hi~~")'>go1</a> 여기서 #은 정의가 안되었다는 의미이다.

function 은 함수라는 의미이며 sayhello( )에서 괄호안의 message라고 변수를 선언해줌을 의미한다.

alert(message)하면 message라는 변수가 출력되는데 이때

go1을 눌렀을경우 hi~~ , go2를 눌렀을 경우 abc~~ , go3를 눌렀을 경우 123~~가 출력된다.

​

일단 이렇게 되고

go1 눌르면?

go2 눌르면?

go3 눌르면?

​

이렇게 출력된다.

​

다음은 준비물이 필요한다 파일질라로 영화포스터사진, 음식사진, 선물사진을 가져오자.

 

<html>
    <head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8">
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
    </head>

<button onclick="changeImage('movie.jpg')"> 영화 </button>
<button onclick="changeImage('food.jpg')"> 음식 </button>
<button onclick="changeImage('present.jpg')"> 선물 </button>  

<img id="img1" width=200 height=150 >
 
    <script type ='text/javascript'>
     function changeImage(imagename)
        {
        document.getElementById("img1").setAttribute('src',imagename);
       
        }
</script>
    <body>
  
    </body>
</html>

영화버튼을 눌렀을 때 영화포스터사진

음식버튼을 눌렀을 때 음식사진

선물버튼을 눌렀을 때 선물사진이 나오도록 할 것이다.

 

<img id="img1" width=200 height=150 >를 통해 이미지의 크기를 200X150으로 맞추었다.

​

<button onclick="changeImage('movie.jpg')"> 영화 </button>

<button onclick="changeImage('food.jpg')"> 음식 </button>

<button onclick="changeImage('present.jpg')"> 선물 </button> 를 통해서

버튼을 클릭했을 때 각각 다른 사진이 나오도록 여지를 만들어준다.

그리고 function changeImage(imagename)을 통해 클릭했을 때 각각 다른 사진이 나오도록 확인사살 시켰다.

​

처음에 아무것도 뜨지 않는다.

영화를 누르니 영화포스터가

​

음식을 누르니 음식사진이

선물을 누르니 선물사진이 나온다.

​

<html>
    <head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8">
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
    </head>
<button onclick="changeImage('movie.jpg')"> 영화 </button>
<button onclick="changeImage('food.jpg')"> 음식 </button>
<button onclick="changeImage('present.jpg')"> 선물 </button>  
<button onclick="nextImage()"> NEXT </button>  
<button onclick="backImage()"> BACK </button>  

<img src="movie.jpg" id="img1" width=200 height=150>
 
    <script type ='text/javascript'>
     imgs=["movie.jpg","food.jpg","present.jpg"];
    idx=1
   setInterval(nextImage,3000);
           function nextImage()
        {
           
         document.getElementById("img1").setAttribute('src',imgs[idx++%imgs.length]);
        }
         function changeImage(imagename)
        {
        document.getElementById("img1").setAttribute('src',imagename);
       
        }
      
</script>
    <body>
  
    </body>
</html>

일단 이 소스설명을 듣기전에 배열은 1,2,3순서가 아니라 0,1,2순서라는 점 기억하고 있어야한다

idx=1로 두고 idx가 점점 증가하게 만든다.

next를 넣으면 다음 사진으로 넘어가지고 next를 굳이 누르지 않으면 3초뒤에 다음 이미지가 나타나는 소스이다.

imgs=["movie.jpg","food.jpg","present.jpg"];를 통해서 배열을 나타내주었고

setInterval(nextImage,3000);을 통해 3초마다 반복되게 하였다 5초마다 반복의경우 3000자리에 5000을 넣어라.

document.getElementById("img1").setAttribute('src',imgs[idx++%imgs.length]); 을 통해

idx값이 1씩 증가하다가 imgs라는 배열의 숫자만큼 되면 다시 처음부터 반복하게 되는 구문이다.

​

<html>
    <head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8">
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
    </head>
<button onclick="changeImage('movie.jpg')"> 영화 </button>
<button onclick="changeImage('food.jpg')"> 음식 </button>
<button onclick="changeImage('present.jpg')"> 선물 </button>  
<button onclick="nextImage()"> NEXT </button>  
<button onclick="backImage()"> BACK </button>  

<img src="movie.jpg" id="img1" width=200 height=150>
 
    <script type ='text/javascript'>
     imgs=["movie.jpg","food.jpg","present.jpg"];
    idx=1
    iox=2
   
           function nextImage()
        {
           
         document.getElementById("img1").setAttribute('src',imgs[idx++%imgs.length]);
        }
      
         function backImage()
        {
         
         document.getElementById("img1").setAttribute('src',imgs[iox--]);
        if(iox<0){
            iox=2
        }
       
        }
</script>
    <body>
  
    </body>
</html>

이렇게 쓰면 백버튼도 먹힌다. 다만 백버튼은 시간이 지나면 자동으로 넘어가지는 함수랑 같이쓰면 너무 혼란스러워서 제외하는것이 좋다.

iox=2로두고 iox가 2에서 점차 감소하게 만든다. 그러다가 iox가 0보다 작아지면 iox가 다시 2가되게하면 백도 먹힌다.

 

실행하면 이렇게 뜨고

NEXT누르면 영화 >음식 > 선물 >영화 > 음식 ... 순으로 계속 바뀐다.

누르지 않으면 3초마다 영화 >음식 > 선물 >영화 > 음식 ... 순으로 계속 바뀐다.

아참 파일질라로 사진을 옮길때 movie.jpg와 movie.JPG를 다르게 인식하니 참고하자.

 

<html>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">


    <input type=text id="name"><input type=text id="price">
<button onclick=append()>add</button> <br>
    
    
    
    품목 <br>
    <ul id="item"></ul>
        
    <div id=sum> </div>
        
        
    
<script>
    
    sum = 0;
    function append() 
    {        
        li = document.createElement("li");
        li.innerHTML =  document.getElementById("name").value + "/" + document.getElementById("price").value + "원";
        document.getElementById("item").append(li);        
        
        sum += Number(document.getElementById("price").value);
        
        document.getElementById("sum").innerHTML = sum;
        
        document.getElementById("name").value = "";        
        document.getElementById("price").value = "";        
        document.getElementById("name").focus();  
        
        
        
    }
    
</script>
    
</html>

​<input type=text id="name"><input type=text id="price">을 통해 값을 입력받을 수 있는 칸을 만들고

<button onclick=append()>add</button> <br>을 통해 추가 버튼을 만들자.

순서가 필요하지 않은 목록 (unordered list)을 만들 때는 <ul> 태그를 사용한다

HTML 문서구조와 상관없이 <div>태그는 여러 요소들을 하나로 묶어서 구분해준다

아무튼 그래서 ul태그에 id는 item으로 div 태그에 id는 sum으로 설정하였다.

​

그리고 저 위에 소스에서 보면 <script type ='text/javascript'>라고 안써있고 script라고만 써있는데

옛날에는 하나하나 자바스크립트면 자바스크립트 이런식으로 구분해줬어야 하지만 지금은 많이 발전해서 꼭 저렇게 안써도 인식 할 수 있다고한다

​

그리고 스크립트내에서 sum의 초기값을 0으로 설정해주었고 append함수를 만든다.

document.createElement를 통해서 자바크스립트 내에서 테이블을 만들어준다.

li.innerHTML = document.getElementById("name").value + "/" + document.getElementById("price").value + "원";

을 통해서 name에 들어갈 글자 뒤에 슬래시 '/' 를 붙이게 되고 price에 들어갈 숫자 뒤에 원을 쓰게된다.

id가 name인 요소를 html문서에서 가지고오고 id가 price인 요소를 html 문서에서 가지고 오게 되었다.

​

document.getElementById("item").append(li); 을 통해 id가 item인 요소를 html 문서에서 가지고 오게 되었다.

​

sum += Number(document.getElementById("price").value);에서 number를 통해서 문자를 숫자로 읽을수 있게 되었다.

그래서 price의 값을 숫자로 읽을 수 있게 된 것이다.

​

document.getElementById("sum").innerHTML = sum;을 통해 id가 sum인 요소를 html 문서에서 가지고 오게 되었다.

근데 innerHTML을 통해서 가지고온 sum이라는 요소를 sum으로 변환하라고 해줌으로써 더해지고 값이 초기화 되지 않고 계속 sum에 누적되도록 하였다.

​

document.getElementById("name").value = "";

document.getElementById("price").value = ""; 에서 " " 안에 값을 입력하면

내가 name과 price 적는 칸에 값을 적고나서 add누르고나면 default로 " " 안의 문자가 출력된다.

만약 document.getElementById("name").value = "감자"; 라고 했다면

처음에는 감자라고 안뜨지만 대충 name에 사과 price에 5000을 누르고 add를 누르면 name 칸에 감자가 출력되게 된다.

document.getElementById("price").value = ""; 도 마찬가지다.

​

document.getElementById("name").focus(); 에서 focus()가 무엇인지 궁금할 것이다.

focus();를 안쓰면 내가 다시 마우스커서를 name을 입력하는 곳에 갖다대고 클릭을 해야 입력이 가능하다.

근데 focus();를 쓰면 내가 마우스커서를 움직일 필요없이 name과 price를 입력하고 add를 하고나면

자동적으로 name에 값을 넣을 수 있게 활성화가 되어서 편해진다.

 

이걸 실행시키면

이렇게 추가할 때마다 계속 더해지는 걸 만들 수 있다.

'기술노트 > 웹프론트엔드' 카테고리의 다른 글

웹 프론트 엔드 강의(6)  (0) 2020.12.28
웹 프론트 엔드 강의(5)  (0) 2020.12.28
웹 프론트엔드 강의(3)  (0) 2020.12.25
파일질라 설치  (0) 2020.12.25
웹 프론트엔드 강의(2)  (0) 2020.12.25
길현우
전문적인 노하우가 담긴 기술노트를 적는 블로그입니다.