'JavaScript' 태그의 글 목록 (4 Page)

JavaScript

JavaScript - NODE 객체 2019.02.27
javascript - let,var,const 차이 2019.02.27
javascript - DOM 선택 STYLE 바꾸기 2019.02.27
javascript - 바닐라자바스크립트 예제(nomad by nicollas) 2019.02.27

JavaScript - NODE 객체

2019. 2. 27. 09:48

모든 엘리먼트들의 거희 조상이다.

여러가지 형태의 HTML코드를 객체화 시킨게 DOM 이다.

NODE 관계

엘리먼트는 서로 부모,자식,혹은형제자매 관계로 연결되어 있다.

각각의 Node가 다른 Node와 연결된 정보를 보여주는 API를 통해서 문서를 프로그래밍적으로 탐색할 수 있다.

Node.childNodes

Node.firstChild <-- node 객체의 첫번째 node

Node.lastChild

Node.nextSibling

Node.previousSibling

Node.contains()

Node.hasChildNodes()

<!DOCTYPE html>
<html>
<head>
    <title>Page Title</title>
    <script src="http://code.jquery.com/jquery.min.js"></script>
</head>
<body id = "body">
    <ol>
        <li><a href="#">1</a></li>
        <li><a href="#">2</a></li>
        <li><a href="#">3</a></li>
        <li><a href="#">4</a></li>
    </ol>
    <ul>
        <li>A</li>
        <li>B</li>
        <li>C</li>
        <li>D</li>
    </ul>
    <script>
        var body = $('body') // var body = document.ElementById('body'); 와 같다
        body[0].firstChild // #text body 태그 다음 자식의 첫번째 노드를 출력하는 api다
            //결과가 text인 이유는 body 태그다음 줄바꿈 문자가 있어서 그렇다
        body[0].firstChild.nextSibling 
            // nextSibling 는 같은 노드의 다음 형제 자매를 부른다 같은 레벨에 있는 node들
        body[0].firstChild.previousSibling
            // previousSibling 는 같은 레벨의 노드중 이전 노드를 부른다
        body[0].firstChild.parentNode
            // parentNode는 부모의 노드를 부른다
        body[0].childNodes
            //자식 노드들을 유사배열로 담아서 호출
    </script>
</body>
</html>

노드의 종류

Node 객체는 모든 구성요소를 대표하는 객체이기 때문에 각각의 구성요소가 어떤 카테고리에 속하는 것인지를 알려주는 식별자를 제공한다.

Node.nodeType //node의 타입을 의미한다 node의 종류에따라서 정해진 상수가 존재한다

for (name in Node){  //각 노드들의 정해진 상수
console.log(name,Node[name]);
}
///////출력결과///////////
VM684:2 ELEMENT_NODE 1
VM684:2 ATTRIBUTE_NODE 2
VM684:2 TEXT_NODE 3
VM684:2 CDATA_SECTION_NODE 4
VM684:2 ENTITY_REFERENCE_NODE 5
VM684:2 ENTITY_NODE 6
VM684:2 PROCESSING_INSTRUCTION_NODE 7
VM684:2 COMMENT_NODE 8
VM684:2 DOCUMENT_NODE 9
VM684:2 DOCUMENT_TYPE_NODE 10
VM684:2 DOCUMENT_FRAGMENT_NODE 11
VM684:2 NOTATION_NODE 12
VM684:2 DOCUMENT_POSITION_DISCONNECTED 1
VM684:2 DOCUMENT_POSITION_PRECEDING 2
VM684:2 DOCUMENT_POSITION_FOLLOWING 4
VM684:2 DOCUMENT_POSITION_CONTAINS 8
VM684:2 DOCUMENT_POSITION_CONTAINED_BY 16
VM684:2 DOCUMENT_POSITION_IMPLEMENTATION_SPECIFIC 32

이상수를 body.firstChild.nodeType === Node.TextNODE // true 이런식으로 노드객체가 뭔지 확인가능

Node.nodeName

body[0].firstChild.nextSibling.nodeName

// UL 이렇게 BODY 태그의 첫번째자식의 다음번쨰 노드의 이름을 출력한다 (엘리먼트객체의이름)

값

Node 객체의 값을 제공하는 API

Node.nodeValue

Node.textContent

NODE 추가,변경,삭제 (자식관리)

Node 객체의 자식을 추가하는 방법에 대한 API

Node.appendChild() <-- 인수에 맨뒤에 노드 추가

Node.removeChild() <-- 인수에 노드 제거

Node.replaceChild()

<!DOCTYPE html>
<html>
<head>
    <title>Page Title</title>
    <!-- <script src="http://code.jquery.com/jquery.min.js"></script> -->
</head>
<body id = "body">
    <ol id="ol">
        <li><a href="#">1</a></li>
        <li><a href="#">2</a></li>
        <li><a href="#">3</a></li>
        <li id='li4'><a href="#">4</a></li>
    </ol>
    <ul>
        <li id = 'target'>A</li>
        <li>B</li>
        <li>C</li>
        <li>D</li>
    </ul>
    <script>
        var body = document.getElementById('body') 
        var ol = document.getElementById('ol');
        var li4 = document.getElementById('li4');
        var li = document.createElement('li'); // li 변수에 li엘리먼트를 담음
        var text = document.createTextNode('text입니다'); // text 변수에 text노드를 담음
        li.appendChild(text); //li 엘리먼트에 text 노드 추가
        ol.appendChild(li); // ol엘리먼트에  맨 뒷부분에 li 추가

        body.insertBefore(li,body.firstChild); // body의 첫번째 자식 앞에 li 를 추가
        li4.parentNode.removeChild(li4); 
        // li4를 제거하기위해서 부모노드로 갔다가 제거 노드 이름을 줘야하는 불편함이있다
        
        var target = document.getElementById('target'); //id 가 target 인걸 담는다
        var a = document.createElement('a'); // a태그 엘리먼트를 만든다
        a.setAttribute('href','http://naver.com/'); // a태그의 속성으로 href를 추가한다
        a.appendChild(document.createTextNode('네이버')); 
         //a태그의 첫번째 자식으로 텍스트를 추가한다
        target.replaceChild(a,target.firstChild); 
        // target의 첫번째 자식을(텍스트노드: A) a태그로 바꾼다 
        
    </script>
</body>
</html>

    <script>
        function traverse(target , callback){

            if(target.nodeType === Node.ELEMENT_NODE) { //노드의 타입이 엘리먼트노드만
            callback(target); // 아래의 익명함수 인자 elem 을 target 로 넣는다
            var c = target.childNodes; // body 태그의 자식노드들을 유사배열로 만든다
            for (var i=0; i<c.length;i++){  // 유사배열의 자식노드들을 차례대로 콘솔출력
                traverse(c[i],callback);
            }
        }
    }
        traverse(document.getElementById('body'),function(elem){ 
            console.log(elem)
            })
    </script>

위에 써논 기술들의 총집합 요약 소스라고해야하나? 하튼 그렇다..

'프로그래밍 > JavaScript' 카테고리의 다른 글

자바스크립트 - 제어대상 찾기 (dom요소 찾기) (0)	2019.02.27
JavaScript - .map , ELEMENT (0)	2019.02.27
javascript - let,var,const 차이 (0)	2019.02.27
javascript - DOM 선택 STYLE 바꾸기 (0)	2019.02.27
javascript - 바닐라자바스크립트 예제(nomad by nicollas) (0)	2019.02.27

javascript - let,var,const 차이

2019. 2. 27. 09:47

ES6 에서 LET , CONST라는 개념이 도입됫다 es5? 인가?

var a = 'abcd';

var a = 'bcdef';

이렇게 이미선언한 변수를 다시선언하면서 값을 넣는것도 가능하게된

이상한 구문이된다

하지만 let 을 선언하면 저런건 불가능해진다

일반 프로그래밍의 변수 선언과 비슷하게 된다는말이다

let은 변수처럼 다른값을 계속 바꿀수 있찌만

const 는 한번 값을 설정하면 다른데에서 값을 바꿀수는 없다 (참조변수는가능)

// 이미 만들어진 변수이름으로 재선언했는데 아무런 문제가 발생하지 않는다.
var a = 'test'
var a = 'test2'

// hoisting으로 인해 ReferenceError에러가 안난다.
c = 'test'
var c


// let
let a = 'test'
let a = 'test2' // Uncaught SyntaxError: Identifier 'a' has already been declared
a = 'test3'     // 값이 재할당이됨

// const
const b = 'test'
const b = 'test2' // Uncaught SyntaxError: Identifier 'a' has already been declared
b = 'test3'   //값이 재할당이 안됨 ( 참조변수는 가능)

결론

– ES6 에서는 var는 지양하고 가급적 let과 const를 사용하자

– 원시형에서 변수는 let, 상수는 const로 선언한다

– 참조형은 const로 선언한다

'프로그래밍 > JavaScript' 카테고리의 다른 글

자바스크립트 - 제어대상 찾기 (dom요소 찾기) (0)	2019.02.27
JavaScript - .map , ELEMENT (0)	2019.02.27
JavaScript - NODE 객체 (0)	2019.02.27
javascript - DOM 선택 STYLE 바꾸기 (0)	2019.02.27
javascript - 바닐라자바스크립트 예제(nomad by nicollas) (0)	2019.02.27

javascript - DOM 선택 STYLE 바꾸기

2019. 2. 27. 09:47

자바스크립트에서 String 는 '' 나 "" 로 할수있지만

`` 로 사용할 수 도있다 ''로 사용할경우 변수를 넣을수도있다

const abcd = ` abcdefg 	`;
console.log(`abd ad` + `adf egfle ${abcd}`);
//bd   adadf    egfle  abcdefg 	

상수의 계산에서

3*2 는 6 단순 곱하기이지만

3**2 는 3의 2제곱 9가 된다

<!DOCTYPE html>
<html>
<head>
    <title id="title">타이틀 색깔바꾸기</title>
</head>
<body>
    <div id="div">안녕하세여</div>
</body>
<script>
    const div = document.getElementById('div');
    const basecolor = (function(){
            if(div.style.color === 'yellow' && div.style.background === 'red'){
                div.style.color = 'white';
                div.style.background = 'black';
            } else {
                div.style.color = 'yellow';
                div.style.background = 'red';               
            }
                });
    
    function init(){
    
     div.addEventListener("click",basecolor); // 클릭할때마다 바뀜
   //  div.addEventListener("mouseenter",basecolor); // 클릭할때마다 바뀜
   //window.addEventListener("online",basecolor);  //인터넷이 연결됫을때 바뀜
   //window.addEventListener("offline",basecolor); // 인터넷이 연결이 끈겻을때 바뀜
   // 각종 마우스 이벤트 모음 구글키워드 javascript dom event mdn
    }
    init();

</script>
</html>

색깔바꾸기 예제

<!DOCTYPE html>
<html>
<head>
    <title id="title">타이틀 색깔바꾸기</title>
</head>
<style>
.div{
    color : red;
    background-color: yellow;
}
.div2{
    color : white;
    background-color: black;
}
</style>
<body>
    <div id="div">안녕하세여</div>
</body>
<script>
    const div = document.getElementById('div');
    
    const colorClick = function(){
        if(div.className === 'div2'){
            div.className = 'div';
        } else {
            div.className = 'div2';
        }
    }
    const clickEvent = function(){
        div.addEventListener('click',colorClick);

    }
    
    clickEvent();
    
</script>
</html>

위 예제는 스타일은 css 자바스크립트는 로직 으로 바꿔서 한 처리이다

보기좋게 한파일로햇지만 파일을 따로 나눠서 사용하는데 목적을 둔다

-------------------------------------------------------------------------------------------------------------------------------

클릭이벤트

div.addEventListener("click",hangleClick); 와

div.addEventListener("click",hangleClick()); 의 차이는?

아래껀 한번만 실행되고 위에껀 클릭할때마다 실행됨?

'프로그래밍 > JavaScript' 카테고리의 다른 글

자바스크립트 - 제어대상 찾기 (dom요소 찾기) (0)	2019.02.27
JavaScript - .map , ELEMENT (0)	2019.02.27
JavaScript - NODE 객체 (0)	2019.02.27
javascript - let,var,const 차이 (0)	2019.02.27
javascript - 바닐라자바스크립트 예제(nomad by nicollas) (0)	2019.02.27

javascript - 바닐라자바스크립트 예제(nomad by nicollas)

2019. 2. 27. 09:44

이 예제는 https://academy.nomadcoders.co/courses/435558/lectures/6701513

공지사항

크롬 앱 클론코딩하며, JS 이론 배우기 <br></br>[초급] HTML, CSS, JS

academy.nomadcoders.co

위 강의에 들어있는 니콜라스 선생님의 강의를 토대로 제가 연습겸 작성한

js 문서들 입니다.

무료강의니깐 한번 들어보시길 추천드리겠습니다.

신기술? 신개념? 등을 좀 배울수 있어 유익했습니다.

플젝은 localStorage 에 name , to dolist , 날씨API사용하여 가져오기 , 실시간 시계 , 배경이미지(랜덤)

등이 포함된 기술입니다.

CSS는 포함안되있고 JS적인 부분만 다루고있습니다.

예제파일도 첨부하니 필요하시분은 받아서 보시기 바랍니다.

index.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Real Time</title>
    <link rel="stylesheet" href="../css/index.css">
</head>
<body>
    <div class="realTime_div">
        <h1>00 : 00</h1>
    </div>
    <form id="form" class="form">
        <input id="input" type="text" placeholder="your name?"/>
    </form>
    <h4 id="h4" class="h4"></h4>
    <form id="todoform"> 
            <input type="text" placeholder="what is todo?">
    </form>
    <ul id="ul"></ul>
    <span class="weather"></span>
    <script src="../js/clock.js"></script>
    <script src="../js/user.js"></script>
    <script src="../js/todo.js"></script>
    <script src="../js/bg.js"></script>
    <script src="../js/weather.js"></script>
</body>
</html>

index.css

.h4,
.form {
    display:none;
}

.show{
    display:block;
}

body{
    background-color: pink;
}
@keyframes fadeIn{
    from{
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.bgIMG{
    position: absolute;  
    z-index: -1;
    width:100%;
    height: 100%;
    left:0;
    top:0;
    animation: fadeIn 0.5s linear;
}
 /* 배경이미지의 속성 설정 
    position 절대위치로 left top 0 
    애니메이션으로 투명도를 0에서 1로 바꿈 0.5 초마다
    */

bg.js

const body = document.querySelector("body");

const IMG_NUMBER = 5;

function randomNumber(){ //랜덤숫자 생성
    return Math.ceil((Math.random()*IMG_NUMBER));
}

function IMGselect(randomNum){ 
    const image = new Image();
    image.src = `../img/${randomNum}.jpg`;
    image.className = 'bgIMG';
    body.prepend(image);
}//랜덤 숫자를 넣고 이미지 경로를 뽑아 body에 추가

function init(){
    const randomNum = randomNumber();
    IMGselect(randomNum);
}

init();

clock.js

const realTime_div = document.querySelector(".realTime_div"),
    realTime_H1 = realTime_div.querySelector("h1");
    realTime_js = (function(){
    
const realDate = new Date(),
    getHours = realDate.getHours(),  // 시간 가져오기
    getMinute = realDate.getMinutes(), // 분 가져오기
    getSecond = realDate.getSeconds();  // 초 가져오기

    realTime_H1.innerText = `${getHours < 10 ? `0${getHours}` : getHours} :`;
    realTime_H1.innerText += ` ${getMinute < 10 ? `0${getMinute}` : getMinute} :`;
    realTime_H1.innerText += ` ${getSecond < 10 ? `0${getSecond}` : getSecond}`;
    //시분초가 각각 10 미만일때 앞에 0 붙혀서 출력 삼항연산자 ex) 01:01:01 
});

//625
function init(){
    setInterval(realTime_js,1000);
}
init();

todo.js

const toDoform = document.querySelector('#todoform'),
    toDoinput = toDoform.querySelector('input'),
    LS_TODO = 'TODO',
    todolist = document.querySelector('ul');
let todos = [];


    function LS_Save(){
        localStorage.setItem(LS_TODO,JSON.stringify(todos));
        //객체를 STRING으로 변환해서저장 LOCAL은 STRING 박에 저장이 안됨
    }

    function saveTodo2(text){
        const li = document.createElement('li'), //LI 생성
            span = document.createElement('span'), //span 생성
            delBtn = document.createElement('button'), //button 생성
            newId = todos.length+1; //li에 만들어줄 id값 생성
           

        delBtn.innerText = '🤓'; // 버튼에 텍스트 이모티콘 추가
        delBtn.addEventListener('click',deleteLiBtn);
        span.innerText = text; // span 에 입력한값 추가
        li.appendChild(delBtn); // li에 버튼 추가
        li.appendChild(span); // li 안에 span 추가
        li.id = newId; //li 에 id 값 할당
        todolist.appendChild(li); // ul에 li 추가

        const todoObj = {
            text : text, //텍스트값
            id : newId  //li id값 지정
        }

        todos.push(todoObj); //객체를 배열에 저장
        LS_Save();
    }

    function deleteLiBtn(EVENT){ //버튼 클릭시 삭제 이벤트
        const BtnPaLi = event.target.parentElement;
        //버튼의 부모엘리먼트 li 찾음
        BtnPaLi.remove(BtnPaLi.id); //li의 id로 제거
        const newtodo = todos.filter(function(todo){
            //fiter 은 배열의 각각의 요소에 foreach처럼 접근해서
            //true 인 경우만 갖고 새로 배열을 만든다
            
            return todo.id !== parseInt(BtnPaLi.id)
            //true인지 false인지 확인중
        });

        todos = newtodo; //todo를 newtodo로 저장
        LS_Save(); //로컬스토리지 저장
    }

    function hanmdleSubmit2(event){  
        event.preventDefault(); //이벤트 초기화
        const todovalue = toDoinput.value;
        saveTodo2(todovalue); //text값 서브밋
        toDoinput.value = "";
    }

    function isTodo(){
        const LS_TODOSS = localStorage.getItem(LS_TODO); 
        if(LS_TODOSS !== null){
            const parseTodo = JSON.parse(LS_TODOSS); 
            //로컬 데이터를 객체로저장
           parseTodo.forEach(function(todo){ 
            //forEach로 각각 데이터 뽑기
            saveTodo2(todo.text);
           });
        }
    }

    function init(){
        isTodo();
        toDoform.addEventListener('submit',hanmdleSubmit2);
        
    }
    init();

user.js

const form = document.querySelector("#form"), 
    h4 = document.querySelector("#h4");
    input = form.querySelector("input");

function showuser(){
    h4.classList.remove('h4');
    form.classList.remove('show');
    form.classList.add('form');
    h4.classList.add('show');
    h4.innerText =localStorage.getItem("user");
}
function saveName(text){
    localStorage.setItem('user',text);
    showuser();
    //저장소에 user : 이름 저장
}

function handleSubmit(event){
    event.preventDefault(); //이벤트 초기화
    form.addEventListener("submit",saveName(input.value));

}

function isuser() {
    if(localStorage.getItem("user") === null){
        form.classList.remove('form');
        form.classList.add('show');
        form.addEventListener("submit",handleSubmit);
        //user 가 없으면 user입력
    } else {
        showuser(); //form 가리고 h4에 input.value 보여준다
        //user가 있으면 user 보여준다
    }
}

function init() {
    isuser();
}

init();

weather.js

const LS_GPSName = 'GPS';
const API_KEY = '이건 회원가입해서 받으세여 구글에 weather API 검색';
const weather = document.querySelector(".weather");

function getWeather(lat,lon){
    fetch(
        `https://api.openweathermap.org/data/2.5/weather?lat=${lat}&lon=${lon}&appid=${API_KEY}&units=metric`
        //api 호출해서 위도,경도,appid키값,화씨를 섭씨로 바꾸기 등을 넣어서 정보를 가져온다.
        ).then(function(data) {
            return data.json();
        }).then(function(json){
            const temper = json.main.temp;
            const place = json.name;
            weather.innerText = `장소 : ${place} @ 온도 : ${temper}`;

                        //속성으로 css 설정
            //weather.setAttribute('style','font-size : 30px; color : white;');

                        //프로퍼티로 css 설정
            weather.style.color = 'white';
            weather.style.fontSize = '30px';
        });        
    }

    //featch는 IE에선 작동이 안된다
    //AJAX의 상위호환 같은것인데 IE에서는 개발이안되서
    //국내에선 사용하기가 조금 꺼려진다
    //국내에선 되도록 AJAX를 호출하는게 나을거같다


function LS_SaveGPS(GPSObj){
    localStorage.setItem(LS_GPSName,JSON.stringify(GPSObj));
}
function SaveGPSSuccess(position){
    const lat = position.coords.latitude; //위도 얻기
    const lon = position.coords.longitude; //경도 얻기
    const GPSObj = {
        lat,
        lon
    }
    LS_SaveGPS(GPSObj);
    getWeather(lat,lon);
}

function SaveGPSError(){
    console.log("failed");
}

function SaveGPS(){
    navigator.geolocation.getCurrentPosition (SaveGPSSuccess,SaveGPSError);
    //navigator.geolocation 객체를 이용해서 gps 정보를 얻는다
    //getCurrentPosition빠른 응답 / 정확도는 낮음
    // getCurrentPosition 은 (첫번째인자,두번쨰인자)\
    //첫번쨰인자는 석세스 콜백 함수고
    //두번째 인자는 에러 콜백 함수다.
}

function loadGPS(){
    const LS_GPSInfo = localStorage.getItem(LS_GPSName);
    if(LS_GPSInfo === null || LS_GPSInfo === undefined){
        //GPS정보얻기
        SaveGPS();
    } else {
        const parseGPS = JSON.parse(LS_GPSInfo);
        //GPS 정보 가져오기
        getWeather(parseGPS.lat,parseGPS.lon);
    }
}

function init(){
    loadGPS();
}

init();

아래 파일의 img 폴더의 배경이미지는 용량이 많아 제거하였습니다.

마음에되는 이미지로 1.jpg 2.jpg 를 5.jpg까지 만드시면 됩니다.

clock.zip

예제파일 CLOCK.ZIP 추가

'프로그래밍 > JavaScript' 카테고리의 다른 글

자바스크립트 - 제어대상 찾기 (dom요소 찾기) (0)	2019.02.27
JavaScript - .map , ELEMENT (0)	2019.02.27
JavaScript - NODE 객체 (0)	2019.02.27
javascript - let,var,const 차이 (0)	2019.02.27
javascript - DOM 선택 STYLE 바꾸기 (0)	2019.02.27

PREV 1 2 3 4 NEXT

아빠개발자의 노트

JavaScript

JavaScript - NODE 객체

'프로그래밍 > JavaScript' 카테고리의 다른 글

javascript - let,var,const 차이

'프로그래밍 > JavaScript' 카테고리의 다른 글

javascript - DOM 선택 STYLE 바꾸기

'프로그래밍 > JavaScript' 카테고리의 다른 글

javascript - 바닐라자바스크립트 예제(nomad by nicollas)

'프로그래밍 > JavaScript' 카테고리의 다른 글

+ Recent posts

티스토리툴바