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

16.JavaScript NodeText

HTML 참고서/HTML 생활코딩 Youtube 2020. 4. 17. 10:35 
<!DOCTYPE html>
<html>
<head>
    <style>
    #target{
        font-size:77px;
        font-family: georgia;
        border-bottom:1px solid black;
        padding-bottom:10px;
    }
    p{
        margin:5px;
    }
    </style>
</head>
<body>
<p id="target">Cording everybody!</p>
<p> data : <input type="text" id="datasource" value="JavaScript" /></p>
<p>   start :<input type="text" id="start" value="5" /></p>
<p> end : <input type="text" id="end" value="5" /></p>
<p><input type="button" value="appendData(data)" onclick="callAppendData()" />
<input type="button" value="deleteData(start,end)" onclick="callDeleteData()" />
<input type="button" value="insertData(start,data)" onclick="callInsertData()" />
<input type="button" value="replaceData(start,end,data)" onclick="callReplaceData()" />
<input type="button" value="substringData(start,end)" onclick="callSubstringData()" /></p>
<script>
    var target = document.getElementById('target').firstChild;
    var data = document.getElementById('datasource');
    var start = document.getElementById('start');
    var end = document.getElementById('end');
    function callAppendData(){
        target.appendData(data.value);
    }
    function callDeleteData(){
        target.deleteData(start.value, end.value);
    }
    function callInsertData(){
        target.insertData(start.value, data.value);
    }
    function callReplaceData(){
        target.replaceData(start.value, end.value, data.value);
    }
    function callSubstringData(){
        alert(target.substringData(start.value, end.value));
    }
</script>
</body>
</html>

ㅛ

문자를 변경할때 쓰는 것 

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

18.JavaScript Inline  (0) 2020.04.17
17.JavaScript Coding setInterval  (0) 2020.04.17
15.JavaScript Node API  (0) 2020.04.16
14. JavaScript Node  (0) 2020.04.16
13.JavaScript jQuery 조회범위  (0) 2020.04.16
블로그 이미지

Or71nH

,

15.JavaScript Node API

HTML 참고서/HTML 생활코딩 Youtube 2020. 4. 16. 17:16 
<ul id="target">
    <li>HTML</li>
    <li>CSS</li>
</ul>
<input type="button" onclick="callAppendChild();" value="appendChild()" />
<input type="button" onclick="callInsertBefore();" value="insertBefore()" />
<script>
    function callAppendChild(){
        var target = document.getElementById('target');
        var li = document.createElement('li');
        var text = document.createTextNode('JavaScript');
        li.appendChild(text);
        target.appendChild(li);
    }
 
    function callInsertBefore(){
        var target = document.getElementById('target');
        var li = document.createElement('li');
        var text = document.createTextNode('jQuery');
        li.appendChild(text);
        target.insertBefore(li, target.firstChild);
    }
</script>

append 추가한다

insertBefore 전에 추가한다 위치도 조정

.

<ul>
    <li>HTML</li>
    <li>CSS</li>
    <li id="target">JavaScript</li>
</ul>
<input type="button" onclick="callRemoveChild();" value="removeChild()" />
<script>
    function callRemoveChild(){
        var target = document.getElementById('target');
        target.parentNode.removeChild(target);
    }
</script>

문제는 다불러오기가 힘들다 안에 안에 안을 불러와야한다

 

<ul>
    <li>HTML</li>
    <li>CSS</li>
    <li id="target">JavaScript</li>
</ul>
<input type="button" onclick="callReplaceChild();" value="replaceChild()" />
<script>
    function callReplaceChild(){
        var a = document.createElement('a');
        a.setAttribute('href', 'http://opentutorials.org/module/904/6701');
        a.appendChild(document.createTextNode('Web browser JavaScript'));
 
        var target = document.getElementById('target');
        target.replaceChild(a,target.firstChild);
    }
</script>

수정이 가능하다

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

17.JavaScript Coding setInterval  (0) 2020.04.17
16.JavaScript NodeText  (0) 2020.04.17
14. JavaScript Node  (0) 2020.04.16
13.JavaScript jQuery 조회범위  (0) 2020.04.16
12.JavaScript API  (0) 2020.04.16
블로그 이미지

Or71nH

,

14. JavaScript Node

HTML 참고서/HTML 생활코딩 Youtube 2020. 4. 16. 17:01

Node

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
<body id="start">
<ul>
    <li><a href="./532">html</a></li>
    <li><a href="./533">css</a></li>
    <li><a href="./534">JavaScript</a>
        <ul>
            <li><a href="./535">JavaScript Core</a></li>
            <li><a href="./536">DOM</a></li>
            <li><a href="./537">BOM</a></li>
        </ul>
    </li>
</ul>
<script>
function traverse(target, callback){
    if(target.nodeType === 1){
        //if(target.nodeName === 'A')
        callback(target);
        var c = target.childNodes;
        for(var i=0; i<c.length; i++){
            traverse(c[i], callback);
        }
    }
}
traverse(document.getElementById('start'), function(elem){
    console.log(elem);
});
</script>
</body>
</html>

 

 

 

 

 

 

콘솔에서 이렇게 치면 테그가 a 것만 블루로 바꾼다

traverse(document.getElementById('start'), function(elem){
if (elem.nodeName === 'A'){    
    elem.style.color = 'blue';}
});

<!DOCTYPE html>
<html>
<body id="start">
<ul>
    <li><a href="./532">html</a></li> 
    <li><a href="./533">css</a></li>
    <li><a href="./534">JavaScript</a>
        <ul>
            <li><a href="./535">JavaScript Core</a></li>
            <li><a href="./536">DOM</a></li>
            <li><a href="./537">BOM</a></li>
        </ul>
    </li>
</ul>
<script>
function traverse(target, callback){
    if(target.nodeType === 1){
        //if(target.nodeName === 'A')
        callback(target);
        var c = target.childNodes;
        for(var i=0; i<c.length; i++){
            traverse(c[i], callback);       
        }   
    }
}
traverse(document.getElementById('start'), function(elem){
    console.log(elem);
});
</script>
</body>
</html>

제귀함수로 다불러오기

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

16.JavaScript NodeText  (0) 2020.04.17
15.JavaScript Node API  (0) 2020.04.16
13.JavaScript jQuery 조회범위  (0) 2020.04.16
12.JavaScript API  (0) 2020.04.16
11.JavaScript Collection  (0) 2020.04.14
블로그 이미지

Or71nH

,

13.JavaScript jQuery 조회범위

HTML 참고서/HTML 생활코딩 Youtube 2020. 4. 16. 15:11 
<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>
    <ul>
    <li class="marked">html</li>
    <li>css</li>
    <li id="active">JavaScript
        <ul>
            <li>JavaScript Core</li>
            <li class="marked">DOM</li>
            <li class="marked">BOM</li>
        </ul>
    </li>
    <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
    <script>
    //$( ".marked", "#active").css( "background-color", "red" );
      //$('#active').find('.marked').css("background-color","red");
      $('#active').css('color', 'blue').find('.marked').css("background-color", "red")
    </script>
  </body>
</html>

 

 

어디에 무엇을 변경할지 

#은 아이디 $는 jquery이  . 은 class

 

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

15.JavaScript Node API  (0) 2020.04.16
14. JavaScript Node  (0) 2020.04.16
12.JavaScript API  (0) 2020.04.16
11.JavaScript Collection  (0) 2020.04.14
10. JavaScript Element  (0) 2020.04.14
블로그 이미지

Or71nH

,

12.JavaScript API

HTML 참고서/HTML 생활코딩 Youtube 2020. 4. 16. 15:03 
<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>
    <a id="t1" href="./demo.html">opentutorials</a>
    <input id="t2" type="checkbox" checked="checked" />
    <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
    <script>
    // 현재 문서의 URL이 아래와 같다고 했을 때
    // http://localhost/jQuery_attribute_api/demo2.html
    var t1 = $('#t1');
    console.log(t1.attr('href')); // ./demo.html
    console.log(t1.prop('href')); // http://localhost/jQuery_attribute_api/demo.html

    var t2 = $('#t2');
    console.log(t2.attr('checked')); // checked
    console.log(t2.prop('checked')); // true
    </script>

  </body>
</html>

ㅊ

체크박스 확인하기

 

 

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

14. JavaScript Node  (0) 2020.04.16
13.JavaScript jQuery 조회범위  (0) 2020.04.16
11.JavaScript Collection  (0) 2020.04.14
10. JavaScript Element  (0) 2020.04.14
9. JavaScript jQuery  (0) 2020.04.12
블로그 이미지

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

티스토리툴바