'javascript'에 해당되는 글 4건

### 문서 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

,

### 창만들기

<!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

,

### 주소 가져오기 href

<!DOCTYPE html>
<html>
<head>
</head>
<body>
	<script type="text/javascript">
    	console.log(location.toString(), location.href);
    </script>
</body>
</html>

### 링크의 분석을 해보자

console.log(location);
// 출력 : https://opentutorials.org/module/904/6634?id=10#bookmark

console.log(
	location.protocol, // 'http:' 이게 프로트콜
	location.host, // 'opentutorials.org' 이거
    location.port, // '8080' 도매인 뒤에 있음 
    location.pathname,  // 'module/904/6634' 구체적인 위치
    location.search, // '?id=10' 
    location.hash // '#bookmark'  
    )

###  리로딩 

location.href = 'http://egoing.net';
// 이곳으로 보넴

location.reload();
//현제 웹페이지를 리로드함

location.href = 'location.href'
이또한 같다

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

7. JavaScript 창제어  (0) 2020.04.12
6. JavaScript Navigator  (0) 2020.04.12
4.Javascript 객체  (0) 2020.04.10
3. JavaScript 사용자와 커뮤니케이션  (0) 2020.04.10
2. Java Script 구조에 대하여(HTML)  (0) 2020.04.10
블로그 이미지

Or71nH

,

### 간단한 CSS 사용 법

<!DOCTYPE html>
<html>
<head>
	<style type="text/css">
    #selected{
    	color:red;
    }
    </style>
</head>
<body>
    <ul>
        <li>HTML</li>
        <li>CSS</li>
        <li id="selected">JavaScript</li>
    </ul>
</body>
</html>

이렇게 간단히 # '으로 id값을 불러와 CSS 설정을 할 수 있다

 

### 색변환 설정 기본값 만들기 버튼만들기

<!DOCTYPE html>
<html>
<head>
	<style type="text/css">
    #selected{
    	color:red;
    }
    .dark{
        background-color: black;
        color:white;
    }
    .dark #selected {
        color:yellow;
    }
    </style>
</head>
<body class="dark">
    <ul>
        <li>HTML</li>
        <li>CSS</li>
        <li id="selected">JavaScript</li>
    </ul>
    <input type="butten" value="dark" onclick="document.body.className='dark';" />
</body>
</html>

맞나?? 암튼 스크립트는 저렇게 온클릭같은 역동적인것이다

 

<!DOCTYPE html>
<html>
<head>
	<style type="text/css">
    #selected{
    	color:red;
    }
    .dark{
        background-color: black;
        color:white;
    }
    .dark #selected {
        color:yellow;
    }
    </style>
</head>
<body class="dark">
    <ul>
        <li>HTML</li>
        <li>CSS</li>
        <li id="selected">JavaScript</li>
    </ul>
    <input type="butten" value="dark" onclick="document.body.className='dark';" />
</body>
</html>

로드하기

<!DOCTYPE html>
<html>
<body>
	<input type="butten" id="hw" value="Hello world" />
    <script type="text/javascript">
    	var hw = document.getElementBtId('hw');
        hw.addEventListener('click', function(){
        	alert('Hello world');
        })
    </script>
</body>
</html>

스크립트 안은 자바스크립트로 해석을 한다

 

<!DOCTYPE html>
<html>
<body>
	<input type="butten" id="hw" value="Hello world" />
    <script src="./script.js"></script>
</body>
</html>
//<File JavaScript.js>

var hw = document.getElementBtId('hw');
    hw.addEventListener('click', function(){
    alert('Hello world');
})

 

 

이렇게 해서 스크립트를 이용해 불러오기로 사용할 수 있다

이거할 때 안될 수 있다 load 하기전에 버튼 함수가 없기 때문에 이름을 러와야한다

<!DOCTYPE html>
<html>
<head>
    <script>
    	window.onload = function(){
        	var hw = document.getElementBtId('hw');
        	hw.addEventListener('click', function(){
        		alert('Hello world');
            })
        }
    </script>
</head>
<body>
	<input type="butten" id="hw" value="Hello world" />
</body>
</html>

이렇게 뒤에 다끝나고 onload 하는것으로 마즈막까지 다 참조 해서 읽기 때문에 애러가 안난다.

 

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

3. JavaScript 사용자와 커뮤니케이션  (0) 2020.04.10
2. Java Script 구조에 대하여(HTML)  (0) 2020.04.10
선택만들기  (0) 2020.03.12
테이블 및 이미지  (0) 2020.03.12
글자 크기 조정  (0) 2020.03.12
블로그 이미지

Or71nH

,