728x90
버튼과 텍스트
<body>
<input type="text" value="난 텍스트야"><br>
<input type="button" value="난 버튼이지"><br>
</body>
텍스트속성
1) readonly
읽기만 가능하고 쓰지는 못함
서버로 값 전송 가능
2) disabled
비활성화
서버로 값 전송 불가능
<body>
<input type="text" value="난 읽기만 가능한 텍스트야" readonly><br>
<input type="text" value="난 비활성화 텍스트야" disabled><br>
</body>
버튼이벤트
1) onclick
<input type="button" value="버튼" onclick="함수명"><br>>> onclick 이벤트
<body>
<input type="button" value="난 버튼이지" onclick="f_click()"><br>
<script>
function f_click(){
alert("왜 눌렀어!");
}
</script>
</body>
>> 텍스트 창에 어떤 글자가 있는지 출력
<body>
<input type="text" id="id_txt" value="텍스트"><br>
<input type="button" value="난 버튼이지" onclick="f_click()"><br>
<script>
function f_click(){
alert(document.getElementById("id_txt").value);
}
</script>
</body>
>> 버튼을 누르면 다른 텍스트로 변경
<body>
<input type="text" id="id_txt" value="텍스트"><br>
<input type="button" value="난 버튼이지" onclick="f_click()"><br>
<script>
function f_click(){
alert(document.getElementById("id_txt").value);
document.getElementById("id_txt").value="다른 텍스트";
}
</script>
</body>가독성 높은 코드
더보기
v_textValue는 단순히 '텍스트'라는 문자열을 가진 변수일 뿐
<body>
<input type="text" id="id_txt" value="텍스트"><br>
<input type="button" value="난 버튼이지" onclick="f_click()"><br>
<script>
var v_text = document.getElementById("id_txt");
function f_click(){
alert(v_text.value);
v_text.value="다른 텍스트"
}
</script>
</body>>> var v_text = document.getElementById("id_txt").value;로 하면 안 됨 text의 value속성을 변경했기 때문!!
v_text 변수!! 객체가 아니야~
참조는 객체만 가능!! (-> 줄여서 쓸 수 있는 것은 객체만)
왜?? value는 원시타입! 문자열!!! 따라서 값이 복사가 되어버림. 위에 코드는 문자열을 카피된 문자열 값 그대로 참조
<body>
<input type="text" id="id_txt" value="텍스트"><br>
<input type="button" value="난 버튼이지" onclick="f_click()"><br>
<script>
var v_text = document.getElementById("id_txt");
var v_textValue = document.getElementById("id_txt").value;
function f_click() {
console.log(v_text);
console.log(v_textValue);
}
</script>
</body>
참조와 복사
<body>
1<input type="text" id="id_txt1" value=""><br>
2<input type="text" id="id_txt2" value=""><br>
<input type="button" value="복사" onclick="f_copy()"><br>
<script>
var v_text = document.getElementById("id_txt1");
var v_text2 = document.getElementById("id_txt2");
function f_copy() {
v_text2.value = v_text.value;
}
</script>
</body>'화면구현 > HTML' 카테고리의 다른 글
| HTML 테이블로 구구단 출력 (0) | 2020.06.19 |
|---|---|
| HTML 라디오버튼과 체크박스 (0) | 2020.06.19 |
| HTML 함수 (0) | 2020.06.19 |
| innerHTML (0) | 2020.06.18 |
| 복사(copy)와 참조(reference)의 이해 (0) | 2020.06.18 |