<h3>document.write('화면에출력할문);</h3>
<button onclick="documentWrite();">화면출력</button>
<script>
function documentWrite(){
// document.write('잘출력되는가');
// document.write('<b>보올드</b> 이것도 잘 출력되나유<br><h3>잘가</h3>');
// 문자열에 html 태그가 포함될 경우 태그 해석되어 적용
var table="<table border='1'>";
table+="<tr>";
table+="<td>1</td>";
table+="<td>2</td>";
table+="</tr>";
table+="</table>";
document.write(table);
}
</script>
실행창에서 이동되어 표 출력(뒤로가기 불가)
선택한요소.innerHTML/innerText = "해당 요소 출력문구";
<button onclick="tagValue();">가져오기</button>
<script>
function tagValue(){
var divEl = document.getElementById("area1"); // id가 area1인 div 객체정보를 담음
console.log(divEl);
console.dir(divEl);
// 선택한 요소 내의 정보를 알고 싶다면 속성에 .을 통해 직접 접근하여 가져옴
console.log(divEl.id); // id : 해당요소의 id값을 콘솔에 출력
console.log(divEl.className); // className : 해당요소의 className값을 콘솔에 출력
console.log(divEl.innerHTML); // innerHTML : content영역안의 HTML태그포함한 텍스트를 콘솔에 출력
console.log(divEl.innerText); // innerText : content영역안의 텍스트만 콘솔에 출력
// 해당요소의 속성값을 가지고 올수도 있지만 값을 변경할수도 있다
divEl.innerHTML="<em>innerHTML값 변경</em>";
// innerHTML로 변경하면 출력할 문구에 html 태그가 있을 경우 태그로 인식
// divEl.innerText="<b>innerText값 변경</b>";
// innerText로 변경하면 출력할 문구에 html 태그가 있어도 문자열로 인식
console.log(divEl.innerHTML);
console.log(divEl.innerText);
}
</script>
좌) 버튼 클릭 전 / 우) 버튼 클릭 후콘솔창
데이터를 입력받는 기본 구문(변수에 기록 가능)
변수 = window.confirm('질문내용');
변수 = window.prompt('질문내용');
변수 = 선택한요소.속성(id/className/innerHTML/innerText,...);
변수 = 선택한input요소.value;
window.confirm("질문내용");
confirm 호출시 질문내용과 확인/취소 버튼이 존재하는 알림창 발생
확인 버튼 클릭시 true, 취소 버튼 클릭시 false를 반환
<button onclick="testConfirm()">지루하신가요</button>
<br>
<div class="area" id="area2"></div>
<script>
function testConfirm(){
var result = window.confirm("지루하면 확인 아니면 취소를 누르시오");
console.log(result);
var divEl = document.getElementById("area2");
if(result){
divEl.innerHTML="<h3>지루하긴해요...</h3>";
}
else{
divEl.innerHTML="<h3>아뇨 지루한데요</h3>"
}
}
</script>
좌) 확인 클릭시 결과 / 우) 취소 클릭시 결과
window.prompt("질문내용");
prompt 호출 시 "질문내용"과 입력할 수 있는 "텍스트 상자"와 "확인/취소"
버튼이 보여지는 알림창 발생
- 확인버튼 클릭시 텍스트 상자에 입력되어 있는 값이 반환
- 취소버튼 클릭시 null을 반환
<button onclick="testPrompt()">질문봇</button>
<div class="area" id="area3"></div>
<script>
function testPrompt(){
var hobby = window.prompt("취미가 무엇입니까?");
var dinner = window.prompt("오늘 저녁 메뉴는 무엇입니까?");
var divEl = document.getElementById("area3");
divEl.innerHTML="당신의 취미는 "+hobby+"군요. "+dinner+"는 맛있겠네요";
}
</script>
선택한input요소.value
아이디 : <input type="text" id="userId"> <br>
비밀번호 : <input type="password" name="" id="userPw"> <br>
<button onclick="testInput()">input</button>
<div class="area" id="area4"></div>
<script>
function testInput(){
var input1 = document.getElementById("userId");
var input2 = document.getElementById("userPw");
console.log(input1);
console.log(input2);
// 입력한값 확인
console.log(input1.value);
console.log(input2.value);
var divEl = document.getElementById("area4");
divEl.innerHTML=input1.value+"님의 비밀번호는 "+input2.value+"입니다";
input1.value="수업끝";
console.log(input1.value);
}
</script>
(단순한 구조와 원칙, 접근제한자x, 메소드 정의시 반환형 정의x, 변수 선언시 자료형 설정x)
- 단점
웹에 특화된 기술로 내부에서 제공되는 기능이 제한적
HTML 내에 소스코드를 작성하는 경우 외부에 공개되어 보안에 취약
소스코드 작성 위치에 따른 종류
1. inline(인라인) 방식
이벤트를 부여하고자 하는 요소 내에 간단한 소스코드를 작성하여 실행
태그 내에 직접적으로 실행할 간단한 소스코드를 작성하여 실행시킨다
주로 실행할 코드가 적을 경우 사용한다
태그명 이벤트속성="해당 요소에 해당 이벤트가 발생했을 때 실행할 소스코드"
<!-- 버튼을 클릭했을 때(onclick) 이벤트 발행 알림참 띄워보기 -->
<button onclick="window.alert('네가 버튼을 눌렀구나')">알림창 출력</button><br><br>
<button onclick="console.log('콘솔창에 적힌단다')">콘솔창 출력</button>
<!-- F12의 콘솔창에서 확인가능 -->
<!-- 콘솔창(개발자도구) : 주로 디버깅용으로 사용 -->
2. internal(내부) 방식
해당 html 문서 내에 script 태그 내에 소스코드를 작성하여 실행
script태그 영역에 함수단위로 소스코드를 작성한 후 어떤 요소에 어떤 이벤트 발생시 해당 함수를 호출하여 실행
(script 태그는 head, body태그 내에서 모두 작성 가능)
<!-- 인라인방식 + 내부방식 -->
<button onclick="함수();">함수버튼</button> <!-- 버튼을 클릭하면 함수가 호출되어 실행된다 -->
<br><br>
<!-- 내부방식 -->
<button id="btn">콘솔버튼</button>
<script>
// 한줄 주석
/* 여러줄 주석 */
function 함수(){
window.alert('함수를 실행하여 버튼 눌림');
}
//이벤트를 적용시키고자 하는 요소의 객체를 가지고와서 변수에 담는다
var btn = document.getElementById("btn"); //담겨있는 객체 정보 : <button id="btn">콘솔버튼</button>
btn.onclick = function(){ //이름없는 익명함수
console.log('내부방식으로 콘솔 출력');
함수(); //함수 내부에서 이미 정의되어있는 함수 호출 가능
}
</script>
