주기억장치

사전적 정의로 attribute는 특성, preperty는 자산,특질

attribute: 정적이며, html문서에 존재

property: 동적으로, Dom tree에 존재 (Dom Tree 에서 attribute에 대한 표현)

<p class="myClass" id="name">Jeo</p>

<p></p>: Tag

class, id: attribute

myClass, name: attribute의 value

Jeo: Content

전체: element

이를 Dom Tree에서 확인하면 값이 myClass인 className이라는 property가 존재한다.

예를들어, 체크박스에 체크를해서 값을 변경할때, attribute의 값은 변하지 않지만,

attribute는 동적으로 변화한다.

HTML5에서 제공하는 브라우저에 데이터를 저장하는 방식

KEY-VALUE

localStorage: 영구저장, sessionStorage: 임시저장

쿠키는 데이터가 매번 서버로 전송되나 웹스토리지는 클라이언트단에만 머문다

단순문자열 뿐만 아니라 스크립트의 객체정보도 저장가능

용량제한이없다, 키밸류 모두 스트링

localStorage.setItem(‘name’, ‘Pat’);
localStorage.getItem(‘name’);  || localStorage[‘name’];
localStorage.removeItem(‘name’)  // delete
localStorage.clear();  // delete all
localStorage.length();  // number of keys
localStorage.key(val);  //  값으로 키를 찾음

window.addEventListener(‘storage’, function(e) { … }, false);

localStorage는 기본적으로 키:밸류로만 저장가능하기에 객체는 JSON String으로 변환하여 넣어준후, 다시 객체로 변환하여 꺼내쓴다.

var testObj = { aa:1, bb:2, cc:3};
localStorage.setItem(“testObj”, JSON.stringify(testObj));

var result = localStorage.getItem(“testObj”);
console.log(“result”, JSON.parse(result));

<form action="/home/admin" class="className" method="post">
  <!-- text -->
  <label for="userName">User Name</label>
  <input type="text" name="userName" id="textId" class="textClass">
  <br/><hr>
      
  <!-- radio button -->
  <label for="seneca">Seneca</label>
  <input type="radio" name="college" value="seneca">
  <label for="humber">Humber</label>
  <input type="radio" name="college" value="humber">
  <label for="sheriden">Sheriden</label>
  <input type="radio" name="college" value="sheriden">
  <br><hr>
  
  <!-- check box -->
  <label for="seneca">Seneca</label>
  <input type="checkbox" name="college" value="seneca">
  <label for="humber">Humber</label>
  <input type="checkbox" name="college" value="humber">
  <br><hr>
  
  <!-- select -->
  <label for="college">Select a school</label>
  <select name="college">
    <option value="select">select</option>
    <option value="seneca">Seneca</option>
    <option value="humber">Humber</option>
    <option value="sheriden">Sheriden</option>
  </select>
  <br><hr>
  
  <!-- select group -->
  <label for="school">Select a school</label>
  <select name="school">
    <optgroup label="College">
      <option value="seneca">Seneca</option>
      <option value="humber">Humber</option>
    </optgroup>
    <optgroup label="university">
      <option value="toronto">Toronto</option>
      <option value="york">York</option>
    </optgroup>
  </select>
  <br><hr>
  
  <!-- textarea -->
  <label for="college">College</label><br>
  <textarea name="college" rows="3" cols="30">any text can write here ...</textarea>
  <br><hr>
  
  <!-- submit -->
  <input type="submit" value="Submit">
  <submit class="className" style="background-color:red; cursor:pointer;">SEND</submit>
  <input type="reset" value="Reset">
</form>

input type="button  Vs.  button

<!-- input type=”button” : 값을 받거나 전달할때 사용 -->
<input type=”button” value=”Login” onclick=”location.href=’admin/login’”> // 다른페이지로 이동
<input type=”button” value=”Login” onclick=”window.open(‘admin/login’)”> // 새로운 탭 열기

<!-- button: 값을 전달하는 사용자 인터페이스를 구현 -->
<button type=”button” value=”Login” onclick=”location.href=’admin/login’”>클릭</button> // 다른페이지로 이동
<button type=”button” value=”Login” onclick=”window.open(‘admin/login’)”>클릭</button> // 새로운 탭 열기

- button은 이미지 요소나 기타 필요한 것들을 자식으로 가질 수 있다

- button type=”button”을 하지 않으면 “submit” 기능을 수행한다

- button type=”submit”은 form 전송 기능을 수행한다

- button type=”reset”은 내용을 초기화 한다

- button type=”button”은 URI는 연결하지 않고 단순하게 인터페이스를 조작(기능선택, 레이어보기, 삭제등)하기 위한 버튼으로 자바스크립트 실행