📌 데이터를 출력하는 구문
🔊 1) [window.]alert("알림창에 출력할 문구");
: alert (알리다, 경보, 경고) 브라우저에 대화상자를 띄우는 함수
html 파일
<button onclick ="fnAlert()">alert 확인</button>
js 파일
funcion fnAlert(){
alter("alter 버튼 클릭됨!");
}
🔊 2) [window.]console.log("콘솔창에 출력할 문구");
: 작성된 내용을 새 페이지에서 화면상에 출력하는 함수
-> 한번 확인할때 쓰면 어디서 오류가 났는지 바로 확인이 가능하다.
-> 개발자모드를 켜서 F12번을 누르면 확인 할 수 있다.
HTML 코드
<button onclick="getInnerHTML1()">innerHTML로 읽어오기</button>
RS 코드
function getInnerHTML1() {
// id가 test2인 요소를 얻어와
// test2 변수에 대입
const test2 = document.getElementById("test2");
// test2 요소 내부에 내용(태그 + 속성 + 내용)을 읽어서 콘솔에 출력
console.log(test2.innerHTML);
}
🔊 3) document.wirte("화면상에 출력할 문구");
: 작성된 내용을 새 페이지에서 화면상에 출력하는 함수
html 파일
<button onclick="documentWriter()">화면에 출력</button>
js 파일
function (){
document.writer("안녕하세요");
}
🔊 4) 선택한요소.innerText = "요소에 출력할 문구";
: 자바 스크립트에서 요소에 작성된 내용을 읽어들이거나 변경하는 속성
- 내용을 읽어올 때 태그는 모두 무시함
- 내용을 변경할때 태그는 문자열 자체로 해석됨(태그 해석x)
html 파일
<button onclick="setInnerText()">InnerText로 읽어오기</button>
<p id="test1" class="box">
테스트1입니다.
<br>
<b>안녕하세요 ? </b>
</p>
rs 파일
function setInnerText() {
//아이디가 "test1"인 요소를 얻어와
//test1 변수에 대입
const test1 = document.getElementById("test1");
// test1 변수에 대입된 요소에서 새로운 내용을 작성
test1.innerText = "innerText로 변경된 <br> 내용입니다.";
🔊 4) 선택한요소.innerHTML = "요소에 출력할 문구";
:자바 스크립트에서 요소 전체를 (태그+속성+내용) 읽어들이거나 변경하는 속성
- 내용을 읽어 올때 태그+속성 모두 포함
- 내용을 변경할 때 태그는 HTML 요소로 해석됨( 태그 해석 O)
html 코드
<button onclick="setInnerHTML1()">innerHTML로 변경하기</button>
<p id="test2" class="box">
테스트2 입니다.
<br>
<b>안녕하세요?</b>
</p>
rs 코드
function setInnerHTML1() {
const test2 = document.getElementById("test2");
test2.innerHTML = "<b>innerHTML로 변경된 내용</b> <br>반갑습니다."
}
* 기존에는 태그가 하나도 해석되지 않았는데 innerHTML은 내용+속성+태그 모두 읽어들일 수 있다!
📌 데이터를 입력 받는 구분(변수에 기록 가능)
🔊 1) 변수 = [window.]confirm("질문내용");
: 질문에 대한 "예" / "아니요" 결과를 얻고자 할때 사용하는 대화 상자 출력 함수
-> 선택 결과에 따라 확인 버튼 클릭 시 true 또는 취소 버튼 클릭시 false가 반환됨
html 코드
<button id="confirmBtn" onclick="fnConfirm()">confirm 확인하기</button>
rs 코드
function fnConfirm() {
// 확인
if (confirm("버튼 배경색을 분홍색으로 바꾸시겠습니까?")) {
document.getElementById("confirmBtn").style.backgroundColor = "pink";
} else {
document.getElementById("confirmBtn").style.backgroundColor = "green";
}
}
🔊 2) 변수 = [window.]prompt("질문내용");
: 텍스트를 작성할 수 있는 대화 상자
- 확인 : 입력한 값 반환(문자열)
- 취소 : null 반환
html 코드
<button onclick="fnPrompt1()">클릭</button>
<div id="area2"></div>
rs 코드
function fnPrompt1() {
var name = prompt("당신의 이름은 무엇입니까?");
var age = prompt("당신의 나이는 몇살입니까?");
//console.log(name);
//console.log(age);
const divE1 = document.getElementById("area2");
divE1.innerHTML = "<b>앗, 당신이 바로 " + age + "살" + name + "님이시군요..!!</b>"
}
🔊 3) 변수 = 선택한요소.속성(id,className,innerHTML,innerText,..);
🔊 4) 변수 = 선택한 input요소.value;
: input 요소를 사용하면 value로 값을 불러와야한다!
( innertText가 아닌 value로 받아야한다! 이유는 input 내용이 없다!)
html 코드
아이디 : <input type="text" id="userId"><br>
비밀번호 : <input type="password" id="userPwd"><br>
<button onclick="fnInput()">클릭</button>
<br>
<input type="text" id="area4">
rs 코드
function fnInput(){
const input1 = document.getElementById("userId"); //아이디 input요소
const input2 = document.getElementById("userPwd"); //비밀번호 input요소
//console.dir(input1);
const id = input1.value;
const pwd = input2.value;
//console.log(id);
//console.log(pwd);
/* input에는 innerText가 아닌 value 값으로 받아야합니다! */
document.getElementById("area4").value = id + "," +pwd;
input1.value=null;
input2.value='';
}
'ON > JavaScript' 카테고리의 다른 글
[JavaScript] 배열 (0) | 2023.06.23 |
---|---|
[JavaScript] 문자열, 숫자열,형변환,연산자 (0) | 2023.06.22 |
[JavaScript] 정규 표현식 | 객체생성 및 확인 (0) | 2023.06.21 |
[JavaScript] 이벤트 (0) | 2023.06.21 |
[JavaScript] DOM | 변수 | 변수자료형 (0) | 2023.06.21 |