w3.css 다른 웹 페이지로 리디렉션 JavaScript를 사용하여 다른 웹 페이지로 리디렉션하는 방법을 알아보자. 웹 페이지 리디렉션 JavaScript를 사용하여 다른 웹페이지로 리디렉션하는 방법에는 몇 가지가 있다. 가장 많이 사용되는 방법은 location.href와 location.replace다. 1단계) HTML 추가 // Simulate a mouse click: window.location.href = “http://www.w3schools.com”; // Simulate an HTTP redirect: window.location.replace(“http://www.w3schools.com”);

w3.css 숨겨진 요소 확인 JavaScript를 사용하여 요소가 숨겨져 있는지 확인하는 방법을 알아보자. 숨겨진 요소 확인 <div> 요소가 숨겨져 있는 경우 다음과 같이 하자. 1단계) HTML 추가 function myFunction() { var x = document.getElementById(“myDIV”); if (window.getComputedStyle(x).display === “none”) { // Do something.. } }   요소가 display:none(위의 예처럼)로 숨겨진 경우, 요소는 공간을 차지하지 않는다. 요소가 visibility:hidden로 숨겨져 있는지 알아보려면 아래 예를 참조하자. 이 “hidden” 요소는 공간을 차지한다.   function myFunction() { var x = document.getElementById(“myDIV”); if (window.getComputedStyle(x).visibility === “hidden”) { //…

w3.css 온라인 오프라인 감지 JavaScript를 사용하여 브라우저가 온라인인지 오프라인인지 감지하는 방법을 알아보자. 오프라인 감지 onLine객체 의 속성은 브라우저 Navigator가 온라인 모드인지 오프라인 모드인지를 지정하는 부울 값을 반환한다. 1단계) HTML 추가 var x = “Is the browser online? ” + navigator.onLine;

w3.css 개체에서 속성 제거 JavaScript 객체에서 속성을 제거하는 방법을 알아보자. 개체에서 속성 제거 delete 연산자 는 객체에서 속성을 삭제한다. 1단계) HTML 추가 var person = { firstName: “John”, lastName: “Doe”, age: 50, eyeColor: “blue” }; delete person.age; // or delete person[“age”]; // Before deletion: person.age = 50, after deletion, person.age = undefined   delete 연산자는 속성 값과 속성 자체를 모두 삭제한다. 삭제한 후에는 다시 추가하기 전까지 해당 속성을 사용할 수 없다. delete 연산자는 객체 속성에 사용하도록 설계되었다. 변수나 함수에는 영향을…

w3.css 숫자의 소수점 제거 JavaScript에서 숫자의 소수점 부분을 제거하는 방법을 알아보자. 소수점 제거 다음 Math.trunc() 방법을 사용하면 숫자의 소수점을 제거할 수 있다. 1단계) HTML 추가 let x = Math.trunc(8.7512356); // 8

w3.css 트리 뷰 CSS와 JavaScript를 사용하여 트리 뷰를 만드는 방법을 알아보자. 트리 뷰 트리 뷰는 정보의 계층적 보기를 나타내는데 각 항목에는 여러 개의 하위 항목이 있을 수 있다. 화살표를 클릭하면 나무 가지를 열거나 닫을 수 있다. 1단계) HTML 추가 <ul id=”myUL”> <li><span class=”caret”>Beverages</span> <ul class=”nested”> <li>Water</li> <li>Coffee</li> <li><span class=”caret”>Tea</span> <ul class=”nested”> <li>Black Tea</li> <li>White Tea</li> <li><span class=”caret”>Green Tea</span> <ul class=”nested”> <li>Sencha</li> <li>Gyokuro</li> <li>Matcha</li> <li>Pi Lo Chun</li> </ul> </li> </ul> </li> </ul> </li> </ul> 2단계) CSS 추가 /* Remove default bullets…

w3.css Active 클래스 추가 JavaScript를 사용하여 현재 요소에 Active 클래스를 추가하는 방법을 알아보자. 활성 요소 1단계) HTML 추가 <div> 요소의 클래스를 “mystyle”에서 “newone”으로 변경한다. <div id=”myDIV”> <button class=”btn”>1</button> <button class=”btn active”>2</button> <button class=”btn”>3</button> <button class=”btn”>4</button> <button class=”btn”>5</button> </div> 2단계) CSS 추가 /* Style the buttons */ .btn { border: none; outline: none; padding: 10px 16px; background-color: #f1f1f1; cursor: pointer; } /* Style the active class (and buttons on mouse-over) */ .active, .btn:hover { background-color: #666; color: white; } 3단계) ​​JavaScript…

w3.css 클래스 변경 JavaScript를 사용하여 요소의 클래스 이름을 변경하는 방법을 알아보자. 클래스 변경 1단계) HTML 추가 <div> 요소의 클래스를 “mystyle”에서 “newone”으로 변경한다. <div id=”myDIV” class=”mystyle”> This is a DIV element. </div> <script> function myFunction() { const element = document.getElementById(“myDIV”); // Get the DIV element element.classList.remove(“mystyle”); // Remove mystyle class from DIV element.classList.add(“newone”); // Add newone class to DIV } </script>

w3.css 클래스 제거 JavaScript를 사용하여 요소에서 클래스 이름을 제거하는 방법을 알아보자. 클래스 제거 1단계) HTML 추가 이 예제에서는 버튼을 사용하여 id=”myDIV”인 <div> 요소에서 “mystyle” 클래스를 제거한다. <button onclick=”myFunction()”>Try it</button> <div id=”myDIV” class=”mystyle”> This is a DIV element. </div> 2단계) CSS 추가 지정된 클래스 이름의 스타일을 지정한다. .mystyle { width: 100%; padding: 25px; background-color: coral; color: white; font-size: 25px; } 3단계) ​​JavaScript 추가 id=”myDIV”를 가진 <div> 요소를 가져와서 해당 요소에서 “mystyle” 클래스를 제거한다. function myFunction() { var element = document.getElementById(“myDIV”); element.classList.remove(“mystyle”);…

w3.css 클래스 추가 JavaScript를 사용하여 요소에 클래스 이름을 추가하는 방법을 알아보자. 클래스 추가 1단계) HTML 추가 id=”myDIV”로 div 요소에 클래스 이름을 추가한다(이 예에서는 버튼을 사용하여 클래스를 추가한다). <button onclick=”myFunction()”>Try it</button> <div id=”myDIV”> This is a DIV element. </div> 2단계) CSS 추가 지정된 클래스 이름의 스타일을 지정한다. .mystyle { width: 100%; padding: 25px; background-color: coral; color: white; font-size: 25px; } 3단계) ​​JavaScript 추가 id=”myDIV”를 가진 <div> 요소를 가져와서 여기에 “mystyle” 클래스를 추가한다. function myFunction() { var element = document.getElementById(“myDIV”); element.classList.add(“mystyle”); }