'HTML 참고서'에 해당되는 글 29건

11.JavaScript Collection

HTML 참고서/HTML 생활코딩 Youtube 2020. 4. 14. 13:50

1

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>
    <ul>
        <li>HTML</li>
        <li>CSS</li>
        <li id="active">JavaScript</li>
    </ul>
    <script src="../dil/jQuery_3.5.js"></script>
    <script>
      console.group('before');
      var lis = document.getElementsByTagName('li');
      for(var i = 0; i < lis.length; i++){
        console.log(lis[i]);
      }
      console.groupEnd();
      console.group('after');
      lis[1].parentNode.removeChild(lis[1]);
      for (var i = 0; i < lis.length; i++){
        console.log(lis[i]);
      }
      console.groupEnd();
    </script>
  </body>
</html>

'HTML 참고서 > HTML 생활코딩 Youtube' 카테고리의 다른 글

13.JavaScript jQuery 조회범위  (0) 2020.04.16
12.JavaScript API  (0) 2020.04.16
10. JavaScript Element  (0) 2020.04.14
9. JavaScript jQuery  (0) 2020.04.12
8. JavaScript 제어대상 찾기  (0) 2020.04.12
블로그 이미지

Or71nH

,

10. JavaScript Element

HTML 참고서/HTML 생활코딩 Youtube 2020. 4. 14. 13:02

DOM Tree 

  1. Node 
    1. Document
      1. HTMLDocument
    2. CharacterData
      1. Text
      2. Comment
    3. Element
      1. HTMLElement
        1. HTMLHeadElement
        2. HTMLBodyElement
        3. HTMLTileElement
        4. HTMLParagraphElement
        5. HTmMLInputElement
        6. HTMLTableElement
        7. ...etc
    4. Attr

### 태그를 찾을수 있다

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>
    <a id="anchor" href="http://opentutorials.org">opentutorials</a>
    <ul>
      <li>HTML</li>
      <li id="list">CSS</li>
      <li>JavaScript</li>
    </ul>
    <input type="button" value="button"/>

    <script>
      var target = document.getElementById('list');
      console.log(target.constructor.name);

      var taget = document.getElementById('anchor');
      console.log(target.constructor.name);

      var taget = document.getElementById('button');
      console.log(target.constructor.name);

    </script>
  </body>
</html>

'HTML 참고서 > HTML 생활코딩 Youtube' 카테고리의 다른 글

12.JavaScript API  (0) 2020.04.16
11.JavaScript Collection  (0) 2020.04.14
9. JavaScript jQuery  (0) 2020.04.12
8. JavaScript 제어대상 찾기  (0) 2020.04.12
7. JavaScript 창제어  (0) 2020.04.12
블로그 이미지

Or71nH

,

9. JavaScript jQuery

HTML 참고서/HTML 생활코딩 Youtube 2020. 4. 12. 17:33

### 

<!DOCTYPE html>
<html>
<body>
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
    <script>
    jQuery( document ).ready(function( $ ) {
      $('body').prepend('<h1>Hello world</h1>');
    });
    </script>
</body>
</html>

Jquery 파일을 다운해서 넣어줘도된다 

아니면 불러오면 된다 src 를 사용해서 말이다

jQuery.com 으로 가면 된다 

 

jQuery

What is jQuery? jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers.

jquery.com

여기서 $가 무엇인가???

변수명이다 이걸 만들때 짧게 만들기 위해 $라는 이름을 쓴것이다

jQuery( document ).ready(function( $ ) {
  $('body').prepend('<h1>Hello world</h1>');
});


$('body').prepend('<h1>Hello world</h1>');

 

압축한것이 있고 

압축이 안되있는것도 있다 압축이 안된게 보기는 편하나 압축된것이 효과적으로 쓸수 있다

 

lib 에 들어가 JQuary 안에 jquery - 버전 을 찾아 들어가서 불러와야한다

<script src ="../liv/jQury/jquert-버전이름"></script>

이렇게 만들어 지는 것은 내가 파일을 저장하여 쓸때이다

<!DOCTYPE html>
<html>
<head>
    <style>
    #demo{width:200px;float: left; margin-top:120px;}
    #execute{float: left; margin:0; font-size:0.9em;}
    #execute{padding-left: 5px}
    #execute li{list-style: none}
    #execute pre{border:1px solid gray; padding:10px;}
    </style>
</head>
<body>
<ul id="demo">
    <li class="active">HTML</li>
    <li id="active">CSS</li>
    <li class="active">JavaScript</li>
</ul>
<ul id="execute">
    <li>
        <pre>
var lis = document.getElementsByTagName('li');
for(var i=0; i&lt;lis.length; i++){
    lis[i].style.color='red';   
</pre>
        <pre>
$('li').css('color', 'red')     </pre>
        <input type="button" value="execute" onclick="$('li').css('color', 'red')" />
    </li>
    <li>
        <pre>
var lis = document.getElementsByClassName('active');
for(var i=0; i &lt; lis.length; i++){
    lis[i].style.color='red';   
}</pre>
        <pre>
$('.active').css('color', 'red')</pre>
        <input type="button" value="execute" onclick="$('.active').css('color', 'red')" />
    </li>
    <li>
        <pre>
var li = document.getElementById('active');
li.style.color='red';
li.style.textDecoration='underline';</pre>
        <pre>
$('$active').css('color', 'red').css('textDecoration', 'underline');
        </pre>
        <input type="button" value="execute" onclick="$('#active').css('color', 'red').css('textDecoration', 'underline')" />
    </li>
</ul>
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
</body>
</html>

id 는 # 으로 표연하고

$는 jquery불러오는거고

.은 클레스 불러오고 좀 중요하다

'.active'  == document.getElementsByClassName('active');

'#active'  == document.getElementsById('active');

 

이렇게 다르다 

 

'HTML 참고서 > HTML 생활코딩 Youtube' 카테고리의 다른 글

11.JavaScript Collection  (0) 2020.04.14
10. JavaScript Element  (0) 2020.04.14
8. JavaScript 제어대상 찾기  (0) 2020.04.12
7. JavaScript 창제어  (0) 2020.04.12
6. JavaScript Navigator  (0) 2020.04.12
블로그 이미지

Or71nH

,

8. JavaScript 제어대상 찾기

HTML 참고서/HTML 생활코딩 Youtube 2020. 4. 12. 17:20

### 문서 li 제어하기 getElementsByTagName

<!DOCTYPE html>
<html>
<body>
<ul>
    <li>HTML</li>
    <li>CSS</li>
    <li>JavaScript</li>
</ul>
<ol>
    <li>HTML</li>
    <li>CSS</li>
    <li>JavaScript</li>
</ol>
<script>
    var ul = document.getElementsByTagName('ul')[0];
    var lis = ul.getElementsByTagName('li');
    for(var i=0; lis.length; i++){
        lis[i].style.color='red';   
    }
</script>
</body>
</html>

일단 ul 의 테그를 불러와야 한다 

var ul = document.getElementsByTagName('ul');

이렇게 해주고 

리스트에 담는다 

var lis = ul.get ElementsByTagName('li');

그리고 리스트를 다변형을 한다

 

그럼 ol 안에 있는 태그는 변화하지 않는다

 

### 클레스 name 으로 변환하기

 

<!DOCTYPE html>
<html>
<body>
<ul>
    <li>HTML</li>
    <li class="active">CSS</li>
    <li class="active">JavaScript</li>
</ul>
<script>
    var lis = document.getElementsByClassName('active');
    for(var i=0; i < lis.length; i++){
        lis[i].style.color='red';   
    }
</script>
</body>
</html>

이렇게 class 라는 이름을 주어서 할수도 있다

getElementsByClassName

 

### 아이디 name 으로 변환하기

<!DOCTYPE html>
<html>
<body>
<ul>
    <li>HTML</li>
    <li id="active">CSS</li>
    <li>JavaScript</li>
</ul>
<script>
    var li = document.getElementById('active');
    li.style.color='red';
</script>
</body>
</html>

getElementById 를 이용한 변환 방법이다

 

### 셀렉터로 설정하기

<!DOCTYPE html>
<html>
<body>
<ul>
    <li>HTML</li>
    <li>CSS</li>
    <li>JavaScript</li>
</ul>
<ol>
    <li>HTML</li>
    <li class="active">CSS</li>
    <li>JavaScript</li>
</ol>
 
<script>
    var li = document.querySelector('li');
    li.style.color='red';
    var li = document.querySelector('.active');
    li.style.color='blue';
</script>
</body>
</html>

이렇게 하면 먼저인 li 가 맨첫번째것만 즉 베열의 [0]에 해당된거만 변경 실행되고 그다음 active 가 실행되니 ol의 CSS 만 파란색이된다

querySelector 

quertSelectorAll을 사용하고

for (var name in lis){

    list[name].style.color = 'blue';

}

'HTML 참고서 > HTML 생활코딩 Youtube' 카테고리의 다른 글

10. JavaScript Element  (0) 2020.04.14
9. JavaScript jQuery  (0) 2020.04.12
7. JavaScript 창제어  (0) 2020.04.12
6. JavaScript Navigator  (0) 2020.04.12
5.JavaScript Location  (0) 2020.04.12
블로그 이미지

Or71nH

,

7. JavaScript 창제어

HTML 참고서/HTML 생활코딩 Youtube 2020. 4. 12. 13:33

### 창만들기

<!DOCTYPE html>
<html>
<style>li {padding:10px; list-style: none}</style>
<body>
<ul>
    <li>
        첫번째 인자는 새 창에 로드할 문서의 URL이다. 인자를 생략하면 이름이 붙지 않은 새 창이 만들어진다.<br />
        <input type="button" onclick="open1()" value="window.open('demo2.html');" />
    </li>
    <li>
        두번째 인자는 새 창의 이름이다. _self는 스크립트가 실행되는 창을 의미한다.<br />
        <input type="button" onclick="open2()" value="window.open('demo2.html', '_self');" />
    </li>
    <li>
        _blank는 새 창을 의미한다. <br />
        <input type="button" onclick="open3()" value="window.open('demo2.html', '_blank');" />
    </li>
    <li>
        창에 이름을 붙일 수 있다. open을 재실행 했을 때 동일한 이름의 창이 있다면 그곳으로 문서가 로드된다.<br />
        <input type="button" onclick="open4()" value="window.open('demo2.html', 'ot');" />
    </li>
    <li>
        세번재 인자는 새 창의 모양과 관련된 속성이 온다.<br />
        <input type="button" onclick="open5()" value="window.open('demo2.html', '_blank', 'width=200, height=200, resizable=yes');" />
    </li>
</ul>
 
<script>
function open1(){
    window.open('demo2.html');  
    //새창이 만들어진다
}
function open2(){
    window.open('demo2.html', '_self'); 
    //자기자신 창이 변환된다
}
function open3(){
    window.open('demo2.html', '_blank');
    //새창이 만들어진다
}
function open4(){
    window.open('demo2.html', 'ot');
    // 이름이 'ot' 라는 새창이 1개만 만들어진다 이미있으면 변환된다
}
function open5(){
    window.open('demo2.html', '_blank', 'width=200, height=200, resizable=no');
    // 새창을  만들며 크기를 조정하였다 그다음 창크기를 변경불가능하게 함니다
}
</script>
</body>
</html>

 

 


### 외부 창의 텍스트 원격 설정하기

<!DOCTYPE html>
<html>
<body>
    <input type="button" value="open" onclick="winopen();" />
    <input type="text" onkeypress="winmessage(this.value)" />
    <input type="button" value="close" onclick="winclose()" />
    <script>
    function winopen(){
        win = window.open('demo2.html', 'ot', 'width=300px, height=500px');
    }
    function winmessage(msg){
        win.document.getElementById('message').innerText=msg;
    }
    function winclose(){
        win.close();
    }
    </script>
</body>
</html>

 

### 시작시 팝업 하기 

<!DOCTYPE html>
<html>
<body>
    <script>
    window.open('demo2.html');
    </script>
</body>
</html>

'HTML 참고서 > HTML 생활코딩 Youtube' 카테고리의 다른 글

9. JavaScript jQuery  (0) 2020.04.12
8. JavaScript 제어대상 찾기  (0) 2020.04.12
6. JavaScript Navigator  (0) 2020.04.12
5.JavaScript Location  (0) 2020.04.12
4.Javascript 객체  (0) 2020.04.10
블로그 이미지

Or71nH

,

공지사항

카테고리

글 보관함

달력

«   2024/04   »
일 월 화 수 목 금 토
1 2 3 4 5 6
7 8 9 10 11 12 13
14 15 16 17 18 19 20
21 22 23 24 25 26 27
28 29 30

티스토리툴바