본문 바로가기
Language/JavaScript

자주 쓰이는 자바스크립트 js

by javapp 자바앱 2020. 4. 28.
728x90

 

출력

      document.write("자바스크립트 안녕하세요<br>");
      document.write("반갑습니다.<br>");

      num1 = 100;
      num2 = 5;

      r1 = num1 <= num2;
      r2 = num1 == num2;
      r3 = num1 != num2;

      document.write("r1 : " + r1 + "<br>") ;
      document.write("r2 : " + r2+"<br>");
      document.write("r3 : " + r3+ "<br>");
      
      r4 = (num1<=num2) && (num1>=num2);
      r5 = (num1<=num2) || (num1>=num2);
      r6 = !(num1 != num2);

      document.write("r4 : " + r4 + "<br>") ;
      document.write("r5 : " + r5+"<br>");
      document.write("r6 : " + r6+ "<br>");

 

 

 

조건

      // 조건
      var n=10;
      var m=5;
      if(n>m){
        document.write("크다.")
      }else{
        document.write("작다.")
      }

 

 

 

스위치

 

      jumsu = prompt("점수 입력")
      switch(parseInt(jumsu/10))
      {
        case 9: alert("A"); break;
        case 8: alert("B"); break;
        case 7: alert("C"); break;
        default: alert("F"); break;
      }

 

parseInt(jumsu/10)

정수로 변환하는 함수를 통해 해결

 

 

 

 

 

반복문

 

      // 반복문
      for(i=1; i<10; i++)
      {
        document.write("2 * "+i+"="+2*i+"<br>")
      }

 

 

 

함수

 

  <input type="button" value="변경" onclick="changeColor()"/>

    function changeStyle(){
      document.getElementById("p1").style.background='red'
      document.getElementById("p1").style.color='white'
      document.getElementById("p1").style.fontStyle='italic'
      document.getElementById("p1").innerHTML='완료'
    }

 

 

 

첫번째 수 부터 두번째 수까지의 합

  첫번째 수 : <input type="text" id="num1" size="10"/><br>
  두번째 수 : <input type="text" id="num2" size="10"/><br>
  결과 : <input type="text" id="result" size="10"/><br>
  <input type="button" value="작은 수에서 큰수 합계" onclick="total()"/>
    function total(){
      min = parseInt(document.getElementById("num1").value)
      max = parseInt(document.getElementById("num2").value)
      
      if(min > max){
        min = temp
        min = max
        max = temp
      }
      
      sum = 0
      for (i = min;i <= max; i++){
        sum += i;
      }
      document.getElementById("result").value=sum
    }

 

 

 

배열

 

  <script>
    var arr= new Array();
    arr[0]='zero';
    arr[1]='one';

    for(i=0; i<arr.length; i++){
      document.write(arr[i])
    }

    var lan = new Array("Java","database", "html");
    document.write(lan.length)
  </script>

 

Objects

 

const player = {
    name: "javapp",
    points: 10,
    fat: true
};
console.log(player);
player.points = player.points + 15;
console.log(player.points);

player["name"] 도 가능

 

 

 

 

마우스 효과

 

<body>
  <h3>마우스를 올려보세요</h3>
  <img src="/image/bird.jpg" width="300px"
    onmouseover="over(this)" onmouseout="out(this)"
  />

  <img src="/image/flower.png" width="300px"
    onmouseover= "this.src='image/bird.jpg'"
    onmouseout="this.src='image/flower.png'"/>
</body>
  <script>
    function over(obj){
        obj.src='image/flower.png'
    }
    function out(obj){
      obj.src='/image/bird.jpg'
    }
  </script>

 

 

체크 박스

 

 

style ="display:none" : 안보이게

 

function myFunction() {
  var checkBox = document.getElementById("myCheck");  //아이디가 myCheck 인 요소 = 체크박스
  var text = document.getElementById("text");  //p
  if (checkBox.checked == true){
    text.style.display = "block";              //display 보이게 
  } else {
     text.style.display = "none";
  }
}

 

 

 

 

 

탭

 

css

/* Style the tab */
.tab {
  overflow: hidden;
  border: 1px solid #ccc;
  background-color: #f1f1f1;
}

/* Style the buttons inside the tab */
.tab button {
  background-color: inherit;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 14px 16px;
  transition: 0.3s;
  font-size: 17px;
}

/* Change background color of buttons on hover */
.tab button:hover {
  background-color: #ddd;
}

/* Create an active/current tablink class */
.tab button.active {
  background-color: #ccc;
}

/* Style the tab content */
.tabcontent {
  display: none;                      //디스플레이 감추기
  padding: 6px 12px;
  border: 1px solid #ccc;
  border-top: none;
}

 

 

div class="tab" //탭 1개에 버튼 만들기,  클릭시 openCity 함수

div id="London" // 런던에 들어갈 내용

 

function openCity(evt, cityName) {
  var i, tabcontent, tablinks; //변수
  tabcontent = document.getElementsByClassName("tabcontent"); //탭 내용
  for (i = 0; i < tabcontent.length; i++) { //3개 안보이게
    tabcontent[i].style.display = "none";
  }
  tablinks = document.getElementsByClassName("tablinks");//탭 
  for (i = 0; i < tablinks.length; i++) {
    tablinks[i].className = tablinks[i].className.replace(" active", ""); //클래스 이름 대체
  }
  document.getElementById(cityName).style.display = "block"; //div 가 보여지게 
  evt.currentTarget.className += " active"; //타켓이 탭 클래스 이름에 " active" 붙이기
}



최소한의 코드

function openCity(evt, cityName) {
  var i, tabcontent, tablinks;
  tabcontent = document.getElementsByClassName("tabcontent");
  for (i = 0; i < tabcontent.length; i++) {
    tabcontent[i].style.display = "none";
  }
  document.getElementById(cityName).style.display = "block";
}

 

 

사이드 바

 

.sidenav {
  height: 100%;          //세로 꽉채움
  width: 0;
  position: fixed;       //픽스로 고정
  z-index: 1;           //우선순위
  top: 0;
  left: 0;                  //좌상
  background-color: #111;
  overflow-x: hidden;
  transition: 0.5s;
  padding-top: 60px;
}

.sidenav a {
  padding: 8px 8px 8px 32px;
  text-decoration: none;
  font-size: 25px;
  color: #818181;
  display: block;  //앵커 태그 block
  transition: 0.3s;
}

.sidenav a:hover {
  color: #f1f1f1;   //마우스 대면 색깔
}

.sidenav .closebtn {
  position: absolute;  //absolute
  top: 0;
  right: 25px;
  font-size: 36px;
  margin-left: 50px;
}

@media screen and (max-height: 450px) {
  .sidenav {padding-top: 15px;}
  .sidenav a {font-size: 18px;}
}

 

샌드위치 버튼 open 누르면 사이드바 생김 

누르면 너비를 변경한다.

화면 밀면서 나오는 사이드바

function openNav() {
  document.getElementById("mySidenav").style.width = "250px";
  document.getElementById("main").style.marginLeft = "250px";

  document.body.style.backgroundColor = "rgba(0,0,0,0.4)";     //불투명하게 하기
}

function closeNav() {
  document.getElementById("mySidenav").style.width = "0";
  document.getElementById("main").style.marginLeft= "0";

  document.body.style.backgroundColor = "white";             //다시 밝아지게 하기
}

 

 

 

 

 

 

 

 

 

 

 

클릭 가능한 DropDown 메뉴

 

.dropbtn { //버튼
  background-color: #3498DB;
  color: white;
  padding: 16px;
  font-size: 16px;
  border: none;
  cursor: pointer; //?
}

.dropbtn:hover, .dropbtn:focus {
  background-color: #2980B9;
}

.dropdown {                //div 클래스
  position: relative;       //위치 관계
  display: inline-block;    //인라인 블록
}

.dropdown-content {  //내용 상자
  display: none;        //우선 안보이게
  position: absolute;    //자식 위치
  background-color: #f1f1f1;
  min-width: 160px;     //최소 너비
  overflow: auto;        //자동으로
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);  //그림자 
  z-index: 1;
}

.dropdown-content a {  //앵커
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

.dropdown a:hover {background-color: #ddd;}

.show {display: block;}

 

 

 

function myFunction() { //클릭시 실행
  document.getElementById("myDropdown").classList.toggle("show");  //class없으면 추가 , 있으면 지우기
}

div myDropdown 엘리먼트 toggle 메소를 통해 class="show" 추가 하여 

.show {display: block;} -> css 적용



바깥쪽 클릭하면 dropdown 닫기

// Close the dropdown if the user clicks outside of it
window.onclick = function(event) { //클릭시
  if (!event.target.matches('.dropbtn')) {  // class 이름 .dropbtn 인 요소를 클릭한다면
    var dropdowns = document.getElementsByClassName("dropdown-content");  //생기는 내용 상자
    var i;


    for (i = 0; i < dropdowns.length; i++) {
      var openDropdown = dropdowns[i];
      if (openDropdown.classList.contains('show')) {
        openDropdown.classList.remove('show'); //class="show" 가 있으면 지운다.
      }
    }
  }
}

 

 

 

 

 

Carousel

이미지 슬라이드

https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_slideshow

 

Tryit Editor v3.6

* {box-sizing: border-box} body {font-family: Verdana, sans-serif; margin:0} .mySlides {display: none} img {vertical-align: middle;} /* Slideshow container */ .slideshow-container { max-width: 1000px; position: relative; margin: auto; } /* Next & previous

www.w3schools.com

 

* {box-sizing: border-box}
body {font-family: Verdana, sans-serif; margin:0}
.mySlides {display: none}
img {vertical-align: middle;}

/* Slideshow container */
.slideshow-container {
  max-width: 1000px;
  position: relative;
  margin: auto;
}

/* Next & previous buttons  버튼*/
.prev, .next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  padding: 16px;
  margin-top: -22px;
  color: white;
  font-weight: bold;
  font-size: 18px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
}

/* Position the "next button" to the right 오른쪽 버튼*/
.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {
  background-color: rgba(0,0,0,0.8);
}

/* Caption text 사진속 글자 위치 */
.text {
  color: #f2f2f2;
  font-size: 15px;
  padding: 8px 12px;
  position: absolute;
  bottom: 8px;
  width: 100%;
  text-align: center;
}

/* Number text (1/3 etc) */
.numbertext {
  color: #f2f2f2;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}

/* The dots/bullets/indicators 사진 밑의 점들 */
.dot {
  cursor: pointer;
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}

.active, .dot:hover {
  background-color: #717171;
}

/* Fading animation 희미해졌다가 뚜렷해짐*/
.fade {
  -webkit-animation-name: fade;
  -webkit-animation-duration: 1.5s;
  animation-name: fade;
  animation-duration: 1.5s;
}

@-webkit-keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}

@keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}

/* On smaller screens, decrease text size */
@media only screen and (max-width: 300px) {
  .prev, .next,.text {font-size: 11px}
}

 

 

 

 

인덱스 다루는 함수

 

 

var slideIndex = 1;
showSlides(slideIndex);

function plusSlides(n) { //슬라이드 번호 증가
  showSlides(slideIndex += n);
}

function currentSlide(n) { //점 누를 때 실행
  showSlides(slideIndex = n);
}

function showSlides(n) {
  var i;
  var slides = document.getElementsByClassName("mySlides"); //슬라이드 div
  var dots = document.getElementsByClassName("dot");  //span
  if (n > slides.length) {slideIndex = 1}     //초기값  =1
  if (n < 1) {slideIndex = slides.length}
  for (i = 0; i < slides.length; i++) {
      slides[i].style.display = "none";  
  }
  for (i = 0; i < dots.length; i++) {
      dots[i].className = dots[i].className.replace(" active", "");
  }
  slides[slideIndex-1].style.display = "block";  
  dots[slideIndex-1].className += " active";
}

 

 

 

 

https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_todo

 

Tryit Editor v3.6

body { margin: 0; min-width: 250px; } /* Include the padding and border in an element's total width and height */ * { box-sizing: border-box; } /* Remove margins and padding from the list */ ul { margin: 0; padding: 0; } /* Style the list items */ ul li {

www.w3schools.com

 

리스트 추가삭제체크

 

 

https://blog.naver.com/desict/221150284131

 

[JavaScript] 하나만 열리는 아코디언

jQuery를 쓰지 않고 JavaScript만으로 아코디언 만들기. w3school에서 accordion 소스를 참고해서 만들...

blog.naver.com

  var acc = document.getElementsByClassName("accordion");

    for (var a = 0; a < acc.length; a++) {

			//클릭시
          acc[a].onclick = function() {  

             // 클릭이 일어났을 때 기존에 열려 있던 아코디언을 접는다. (1개의 아코디언만 열리게)
             for (var j = 0 ; j<acc.length; j++)
             {
                // 버튼 상태에 입혀진 active 라는 클래스를 지운다.
                 acc[j].classList.remove("active");

                // 버튼 다음에 있는 div 콘텐츠 높이를 0으로 만든다. == 아코디언을 접는다.
                 if (this!==acc[j]) {
                     acc[j].nextElementSibling.style.maxHeight = null;
                 }
             }

            this.classList.toggle("active");

            var panel = this.nextElementSibling;

            if (panel.style.maxHeight){
                this.classList.remove("active");
                panel.style.maxHeight = null;
            } else {
                panel.style.maxHeight = panel.scrollHeight + "px";
            }

          }
    }

 

'Language > JavaScript' 카테고리의 다른 글

jQuery 정리 | css 스타일, 이벤트, 애니메이션  (0) 2022.10.06
자바스크립트 null, undefined, '', 0 체크  (0) 2022.09.12
jQuery를 이용하여 객체 제어, 선택, 요소 추가, 대체, 삭제  (0) 2022.04.10
JavaScript - 웹 브라우저 window DOM BOM  (0) 2020.07.08
자바스크립트 참고 라이브러리 / 외부파일 / CSS 디자인 참고 추가 / 반응형 만들기(제플린)  (0) 2020.05.12

관련글

댓글

티스토리툴바