[16일] JavaScript (10) - style접근, this, JSON

자바스크립트에서 스타일 접근

자바스크립트에서 스타일에 접근하려면 다음과 같이 하면 된다.

document.getElementById("mydiv").style    //[object CSSStyleDeclaration]

 

만약 jQuery에서 스타일에 접근한다면 다음과 같다.

$("#mydiv").css()

 

<div id="mydiv" style="position: relative;
                       top: 10px;
                       left: 20px;
                       width: 150px;
                       height: 70px;
                       background-color: red;">대한민국</div>

id가 mydiv인 <div>의 스타일에 접근해보자

function test1(){
    alert(document.getElementById("mydiv").style.top);
    alert(document.getElementById("mydiv").style.left);
    alert(document.getElementById("mydiv").style.width);
    alert(document.getElementById("mydiv").style.height);
    alert(document.getElementById("mydiv").style.backgroundColor);
    alert(document.getElementById("mydiv").style.position);
}//test1() end

이제 스타일을 변경해보자

function test2(){
    document.getElementById("mydiv").style.top="100px";
    document.getElementById("mydiv").style.left="150px";
    document.getElementById("mydiv").style.width="400px";
    document.getElementById("mydiv").style.height="300px";
    document.getElementById("mydiv").style.backgroundColor="green";
    document.getElementById("mydiv").style.position="absolute";
}//test2() end

 

this

- 자기 자신의 요소를 가리킨다.

- 폼 컨트롤 요소에서만 사용이 가능하다

   예) <a href=" " onclick="test(this)">  여기서 this는 쓰레기 값이므로 주의!!

 

<form name="myform" id="myform" onsubmit="return test5(this.form)">
    <input type="button" name="btn1" id="btn1" value="버튼1" onclick="test1()">
    <!-- this 자신의 요소 -->
    <input type="button" name="btn2" id="btn2" value="버튼2" onclick="test2(this)">
    <!-- this.value 자신의 요소가 가지고 있는 실제 값(value) -->
    <input type="button" name="btn3" id="btn3" value="버튼3" onclick="test3(this.value)">
    <!-- this.form 자신의 요소가 속해 있는 폼. 여기서는 <form name=myform>을 가리킴 -->
    <input type="button" name="btn4" id="btn4" value="버튼4" onclick="test4(this.form)">
    <hr>
    <!-- onsubmit 이벤트는 리턴값이 true이면 전송된다 -->
    <input type="submit" value="전송">
</form>

function test1(){
     //1)name접근
     let f = document.myform;
     alert(f);              //[object HTMLFormElement]
     alert(f.btn1);         //[object HTMLInputElement]
     alert(f.btn1.value);   //버튼1
     //2)id접근(추천)
     alert(document.getElementById("btn1").value);   //버튼1
}//test1() end

function test2(obj){
     alert(obj);         //[object HTMLInputElement]
     alert(obj.value);   //버튼2
}//test2() end

function test3(val){
     alert(val);   //버튼3
}//test3() end

function test4(f){
     alert(f);   //[object HTMLFormElement] 여기서는 <form name=myform>을 가리킴
}//test4() end

function test5(f){
     alert(f);   //[object HTMLFormElement]
}//test5() end

 

JSON

JavaScript Object Notation

• 문자단위 통신(비동기식 방식)에서 XML을 대체하는 포맷이다.
• AJAX, NoSQL DB 등에서 주로 사용하는 포맷(표기법)이다.
• 배열을 객체화한다.

XML문법

• 여는 태그와 닫는 태그로 구성된다.
• custom tag(사용자 정의 태그) 기반이다.
• 환경설정 파일 작성, 안드로이드 기반 앱 개발 시 View 단 구성

<databased>
  <driver>OracleDriver</driver>
  <username>system</username>
  <password>1234</password>
</database>

위의 태그들을 html을 배우면서 접한 적이 없다. custom tag로 사용자가 직접 만든 태그이기 때문이다.

이렇게 자신이 원하는 태그를 만들어 사용할 수 있다.

 

JSON 기본 구조

속성:값 쌍으로 데이터가 구성되어 있다.

속성(name, key, property), 값(value, data)

name 구성 시 " " 기호는 생략가능하다. (value값이 String이면 " " 써야 한다.)

{ } 안에 데이터를 저장한다.

형식 : {name:value, "name": value, 'name':value, ...}

예) {driver:"OracleDriver", "username":"system", password:'1234', ...}

 

JSON 변수 선언

JSON의 변수 선언과 접근은 다음과 같이 한다.

let person = {"firstName":"John", "lastName":"Doe", "age":46};
//name에 " "는 생략가능
// let person = {firstName:"John", lastName:"Doe", age:46};

//JavaScript 접근
document.write(person["firstName"]);   //John
document.write("<hr>");
document.write(person["lastName"]);    //Doe
document.write("<hr>");
document.write(person["age"]);         //46
document.write("<hr>");

//JSON 접근
document.write(person.firstName);   //John
document.write("<hr>");
document.write(person.lastName);    //Doe
document.write("<hr>");
document.write(person.age);         //46
document.write("<hr>");

 

JSON 함수

let persons=[
    {firstName:"John", lastName:"Doe1", age:46}
   ,{firstName:"Tom",  lastName:"Doe2", age:48}
   ,{firstName:"Jimmy",  lastName:"Doe3", age:44}
];

document.write(persons.length);  //3
document.write(persons[0]);      //[object Object]
document.write(persons[1]);
document.write(persons[2]);
document.write("<hr>");

for(let i=0; i<persons.length; i++){
    document.write(persons[i].firstName);
    document.write(persons[i].lastName);
    document.write(persons[i].age);
    document.write("<hr>");
}//for end

 

//JSON Array
let myObj={
    name:"John"
    ,age:30
    ,cars:["Ford", "BMW", "Fiat"]
};

document.write(myObj.cars[0]);  //Ford
document.write("<hr>");

 

//for ~ in 반복문
//형식) for( key in object ) {  }
const numbers=[45, 4, 9, 16, 25];
for(let i=0; i<numbers.length; i++){
    document.write(numbers[i]);
    document.write("<hr>");
}//for end

for(let i in numbers){
    document.write(numbers[i]);
    document.write("<hr>");
}//for end


const person={"firstName":"John", "lastName":"Doe", "age":46};
for(let i in person){
    document.write(person[i]);
    document.write("<hr>");
}//for end

 

//1) JSON.parse()
// ->String 형태의 JSON 문법을 분리할 때
let person = '{"firstName":"John", "lastName":"Doe", "age":46}';
document.write(person.length);
document.write(person);           //그냥 문자열
document.write("<hr>");

let obj=JSON.parse(person);      //JSON 형식으로 형 변환
document.write(obj.firstName);
document.write(obj.lastName);
document.write(obj.age);
document.write("<hr>");

 

//2) JSON.stringify()
// ->JSON값을 일반 문자열로 변환
let txt={"firstName":"John", "lastName":"Doe", "age":46};
let str=JSON.stringify(txt);
document.write(str.length);
document.write(str);

 

JSON으로 구성된 파일을 작성하는 경우  .json으로 저장한다.

예) person.json