31일차 2023-04-19
2023. 4. 19. 19:14ㆍJavaScript
HTML5
form태그는 속성으로 action과 method 가짐
action은 페이지 경로 지정(생략 시 현재 페이지 다시 요청됨)
method는 get방식과 post방식
전에 <a> 태그는 get방식이었다 (복습)
get방식은 데이터 노출(전의 a태그 예제)
post방식은 데이터 노출 안됨(네이버 로그인)
웹서버 ↔ 클라이언트 브라우저
요청할 시: "요청헤더+요청바디"로 이루어짐
get방식은 요청헤더로 보냄
post방식은 요청바디로 보냄
둘의 차이는 요청헤더는 크기가 정해져 있다.(데이터양 최대 4kb)
요청바디는 크기가 정해져 있지 않다.
웹서버에서 응답할 시
응답헤더_응답바디를 브라우저에 보냄
브라우저는 응답헤더를 먼저 읽음
응답헤더는 작업지시자(브라우저에 화면 뿌려줘 지시)
응답바디의 할 일은 우리 브라우저에 뿌림
http프로토콜 => 요청하고 브라우저가 요청받으면 연결 끊김(계속 연결되면 서버 과부하)
Form13_1.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Form13_1.html</title>
</head>
<body>
<!--
form태그: 사용자가 입력한 값 혹은 선택한 값을 서버로 전송할때 사용하는
태그
주요 속성:
action: 사용자가 입력한 값을 전송할 서버상에 있는 페이지경로 지정
(action생략시 기본값은 자신의 페이지)
method: get/post(method 생략시 기본값은 get)
데이타 전송방식(서버 자원에 대한 요청방식)을 의미
------------------+-----------------+------------
데이타 전송 방식 | get | post
------------------+-----------------+---------------
URL노출 | 데이타 노출됨 | 노출 안됨
------------------+-----------------+--------------
전송방식 | HTTP 요청헤더에 포함 | HTTP 요청 바디에 내용이
| 되서 전송됨 | 포함되서 전송됨
---------------------+-----------------+-----------------
데이타량 | 최대 4KB | 무한대
-------------------------+-----------------+----------------
*get방식에서 URL을 통해 데이타 전송시
FORM태그 하위 요소의 NAME속성에 지정한
이름을 통해서 전송 된다
즉 이름=값(사용자가 입력하거나 선택한 값)의 쌍으로
전송
여러개 전송시에는
이름1=값1&이름2=값2&.....즉 &로 연결되어서 전송됨
target:이 속성은 a태그의 target속성과 같은 기능
enctype:URL 인코딩방식 지정
application/x-www-form-urlencoded(디폴트값)
multipart/form-data(파일 업로드)
-->
<div>
<h2>form태그로 데이타 전송하기</h2>
<h3>GET방식 요청</h3>
<form action="https://www.naver.com">
아이디 : <input type="text" name="user"/>
비밀번호 : <input type="password" name="pass"/>
<input type="submit" value="로그인"/>
</form>
<h3>POST방식 요청</h3>
<form action="https://www.naver.com" method="post">
아이디 : <input type="text" name="user"/>
비밀번호 : <input type="password" name="pass"/>
<input type="submit" value="로그인"/>
</form>
<h3>action 속성 생략(현재 페이지 다시 요청)/method속성 생략(GET)</h3>
<form>
아이디 : <input type="hidden" name="no" value="120"/>
비밀번호 : <input type="password" name="pass"/>
날짜 : <input type="date" name="date"/>
색상 : <input type="color" name="color"/>
이메일 : <input type="email" name="email"/>
나이 : <input type="number" name="age" min="1" max="200"/>
<input type="submit" value="로그인"/>
</form>
<h3>a태그로 데이타 전송(GET방식)</h3>
<a href="Form13_1.html?no=120&pass=1234&date=2023-04-17&color=%23395516&email=hwanyhee%40naver.com&age=200">GET요청</a>
</div>
</body>
</html>결과) get요청 누를 시 전에 입력했던 주소가 보이면서 이 페이지 나옴
form태그로 데이타 전송하기
GET방식 요청
POST방식 요청
action 속성 생략(현재 페이지 다시 요청)/method속성 생략(get)
a태그로 데이타 전송(get방식)
get요청
radio속성은 하나 선택
file속성은 type="text"속성과 동일, value속성을 지정하지만 보이지 않음. 이건 자바스크립트로 알 수 있음.
hidden속성은 값을 브라우저에 표시하지 않고 전송
웹프로그래밍 시 자주 사용됨
Form13_2.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Form13_2.html</title>
</head>
<body>
<!--
[INPUT태그]
form태그의 하위요소로 type속성에
다양한 값을 지정함으로써 여러가지 형태의
모양을 만들어 사용자로부터 입력이나 선택을
받을 수 있는 태그
INPUT태그의 주요 속성
type:모양을 타나태는 값 지정
text,password,checkbox,radio등
text:한줄 입력상자
password:입력시 입력한 값이 노출 안되게
checkbox: 여러개 선택 가능한 체크 박스 표시할때
체크된 상태를 미리 보여주고자 할때는
checked="checked" 속성 추가
radio:하나만 선택 가능한 라디오 박스 표시할때
미리 선택된 박스를 보여주고자 할때는
checked="checked" 속성 추가
hidden: 값을 웹브라우저에 표시하지 않고 전송하고자 할때
웹브라우저에 보이지 않음
웹 프로그래밍시 자주 사용
--아래는 버튼 모양
submit: 값을 submit할때
reset: 초기화 할때
image:값을 submit할때,주로 버튼을 이미지로 만들때 사용
button:버튼모양을 표시할때,아무런 액션도 일어나지 않음
file : 파일 찾아보기 버튼과 힌줄 입력상자 표시
--선택상자
input 태그가 아닌 select태그로 시작.
하위 태그로 목록을 표시하기 위해 option태그를 가짐
미리 선택된 목록을 표시하기위해 selected="selected"
--여러줄 입력상자
textarea로 시작
시작태그와 종료 태그 사이에 값을 넣어주면
여러줄 입력상자에
표시됨.
단, 사용자가 입력한값등을 가져올때는 역시 value속성 이용
cols,rows 속성으로 크기 지정.
--공통 사항
value:사용자가 입력한 값이 저장되는 속성 혹은 값을 미리 지정시에 사용
name: 값 전송시 구분하기 위한 이름을 지정.서버로 값 전송시 필수 그래야 값이 전송됨
inline element
*값 전송하려면 반드시 name속성을 지정
checkbox나 radio계열을 제외하고는
name속성을 다르게 지정해야 한다.
왜냐하면 name속성에 지정한 값을 이용해
사용자가 전송한 값을 받으니까
type이 radio 및 checkbox는 반드시
value속성에 값을 지정해야
지정된 값이 전송이 된다.
그리고 name속성은 같은 그룹으로 묶기 위해서
name은 동일하게 지정해야 한다.
*모든 태그는 id속성을 가질 수 있다.
단, 한 페이지안에서 id값은 중복될 수 없다.
-->
<div>
<h2>form태그의 하위 요소들(태그들)</h2>
<h3>input계열의 type="text"</h3>
<!--
[한줄 입력 상자]
주요 속성]
size:한줄입력 상자의 크기 지정(영문자나 숫자 기준)
maxlength:최대 입력할 수 있는 글자 수 지정
value:사용자가 입력한 값이 저장되는 속성
disabled ="disabled" :비활성화
enabled="enabled" :활성화(기본값)
dir: "rtl" 혹은 "ltr" 입력방향
-->
기본 텍스트 상자 : <input type="text"/><br/>
속성 추가 : <input type="text" size="10" maxlength="5" value="기본텍스트" dir="rtl" disabled/><br/>
주민 번호 : <input type="text" size="6" maxlength="6"/> - <input type="text" size="7" maxlength="7"/><br/>
홈페이지 : <input type="text" value="https://"/>
<h3>input계열의 type="password"</h3>
<!--
type이 text일때와 속성이 동일하다
입력한 값이 노출이 안되고 ●모양으로 입력 됨
-->
기본 패스워드 : <input type="password" /><br/>
패스워드 지정(사용하지 말자) : <input type="password" value="1234" />
<h3>type="checkbox"</h3>
<!--
checkbox:여러개 선택시,
name을 같게 지정(그룹으로 지정),value속성에 값 미리 지정,
value에 미리 지정한 값이 action에 지정한 페이지로 전송됨
미리 선택해서 보여줄때 checked
-->
<fieldset>
<legend>당신의 관심사항은?</legend>
<form>
<input type="checkbox" name="inter" value="정치" id="pol"/> <label for="pol">정치</label>
<input type="checkbox" name="inter" value="경제" checked/> 경제
<input type="checkbox" name="inter" value="연예"/> 연예
<input type="checkbox" name="inter" value="스포츠" id="spo"/> <label for="spo">스포츠</label>
<input type="submit" value="확인"/>
</form>
</fieldset>
<h3>type="radio"</h3>
<!--
radio: 여러개 중 하나 선택시,
나머지는 checkbox와 동일
name속성에 값을 다르게 주면 여러개 선택가능 -->
<fieldset>
<legend>당신의 성별은?</legend>
<form>
<input type="radio" name="gender" value="남성" id="man"/> <label for="man">남성</label>
<input type="radio" name="gender" value="여성" checked/> 여성
<input type="radio" name="gender" value="트랜스젠더"/> 트랜스젠더
<input type="submit" value="확인"/>
</form>
</fieldset>
<h3>type="file"</h3>
<!--
input type="text"의 속성과 동일하다.
단, value속성에 값을 지정하더라도
디폴트로 텍스트상자에 보이지 않는다.
단, 선택한 파일은 value속성에 저장된다.
-->
기본 : <input type="file"/>
속성 추가:<input type="file" size="50" value="기본 텍스트"/>
<h3>type="hidden"</h3>
<!--
-프로그래밍시 자주 사용하는 폼의 하위 태그
-웹브라우저에 아무 모양도 보이지 않음
-값을 숨겨서 전송할때 사용
(값 전송시 value와 name속성을 반드시 주어라)
-주로 키값(Primary key)등을 전송할때 많이 사용
-->
<form>
<input type="hidden" name="empno" value="7799"/>
이름 : <input type="text" name="name"/>
<input type="submit" value="확인"/>
</form>
<h3>다양한 버튼들</h3>
<fieldset>
<form action="https://www.nate.com">
아이디 : <input type="text" name="id"/>
성별 :
<input type="radio" name="gender" value="남성" id="man"/> <label for="man">남성</label>
<input type="radio" name="gender" value="여성" checked/> 여성
<input type="radio" name="gender" value="트랜스젠더"/> 트랜스젠더
관심사항 :
<input type="checkbox" name="inter" value="정치" id="pol"/> <label for="pol">정치</label>
<input type="checkbox" name="inter" value="경제" checked/> 경제
<input type="checkbox" name="inter" value="연예"/> 연예
<input type="checkbox" name="inter" value="스포츠" id="spo"/> <label for="spo">스포츠</label>
<!-- 클릭시 무조건 action에 지정한 페이지나 URL로 데이타 전송 및 이동-->
<input type="submit" value="submit버튼"/>
<!--클릭시 폼의 하위요소의 값들이 원래대로 초기화 됨-->
<input type="reset" value="reset버튼"/>
<!-- 일반 버튼 모양으로 아무런 기능도 하지 않음--->
<input type="button" value="button버튼"/>
<!--input type="submit"과 같은 전송기능-->
<button>button태그</button>
<!--이미지로 버튼 표시할때:전송기능이 있다-->
<input type="image" src="../Images/button.jpg" alt="이미지 버튼" style="width:50px;height:25px"/>
</form>
</fieldset>
<h3><select>태그</h3>
<!--
[속성]
size:보여줄 목록의 개수 지정(기본값 1)
multiple:다중 선택 가능
- 단일 선택이 기본
- 종료태그 있다
- 하위태그로 option태그를 갖는다
option태그의 value속성에 값을
지정함으로써 목록을 표시한다
selected속성은 option태그의 속성
-->
<form>
<select name="grade" size="2" multiple>
<option value="">학력을선택하세요</option>
<option value="초등학교">초등학교</option>
<option value="중학교" selected>중학교</option>
<option value="고등학교">고등학교</option>
<option value="대학교">대학교</option>
</select>
<input type="submit" value="확인"/>
</form>
<h3><textarea>태그</h3>
<!--
-rows와 cols로 크기 결정(영문자/숫자 기준)
-value속성으로 사용자가 입력한 값을 얻는다.
-기본 텍스트를 줄때는 value속성이 아닌
시작태그와 종료태그 사이에 주면 된다.
-->
기본 : <textarea value="기본 텍스트"></textarea><br/>
속성추가:<br/>
<textarea cols="50" rows="10">
관리자님의 답변글
------------------------------
좋은 하루 되세요
</textarea>
</div>
</body>
</html>결과)
form태그의 하위 요소들(태그들)
input계열 type="text"
기본 텍스트 상자:속성 추가:
주민번호: - 홈페이지:
input계열의 type="password
기본 페스워드:패스워드 지정(사용하지 말자):
type="checkbox"
type="radio"
type="file"
기본: 속성 추가:type="hidden"
다양한 버튼들
<select>태그
<textarea>
기본:속성추가:
IFrame14.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>IFrame14.html</title>
</head>
<body>
<!--
iframe태그:인라인 프레임
화면속의 화면을 구성할때 사용하는 태그
주요 속성
src:프레임 안의 내용을 구성할 문서 경로나 사이트 경로
frameborder:인라인 프레임의 테두리 두께
height:프레임의 세로 폭
width:프레임의 가로 폭
scrolling :auto:프레임안 의 내용에 따라
자동으로 스크로바가 생김(기본값)
no:내용이 많아도 스크롤바를 생기지 않게 설정
yes:내용이 적어도 무조건 스크롤바 생김
marginheight:프레임과 내용사이의 세로 여백
marginwidth:프레임과 내용사이의 가로 여백
inline element
-->
<div>
<h2>화면속의 화면(사이트)</h2>
<iframe src="https://www.nate.com" scrolling="no" frameborder="0" width="400" height="400"></iframe>
<h2>화면속의 화면(페이지)</h2>
<iframe src="Link/IFrameInLink.html" marginwidth="0" marginheight="0" scrolling="no" frameborder="0" width="400" height="400"></iframe>
</div>
</body>
</html>노란색의 _self는 자기 자신을 조그마 난 nate.com화면이 나옴,
_parent는 nate 홈피로 이동
_top도 최상위로 가는 거라 _parent와 같음 nate 홈피로 이동
빨간색의 _self는 노란색 바탕의 작은 nate.com화면이 나옴.
빨간색의 _parent는 바탕이 흰색인 위의 _self와 같은 작은 화면이 나옴.
빨간색의 _top는 nate홈피로 이동.
결과)
JavaScript
some은 어떤 요소라도 하나라도 일치하면 true반환
중간에 true 만나면 순회 멈춤
every는 모든 요소가 주어진 판별 함수 통과해야 true,
중간에 false 만나면 순회 멈춤 (실행오류로 만약 return문이 없다면 false를 반환하기 때문에 A, B, C가 아닌 A만 나오고 끝나기도 했음 return true;추가하기 전 이유? 함수가 한 번만 돌고 나옴 )
Array03_2.html 추가)
<script>
console.log('10.배열 정렬하기');
//sort([콜백함수])- 배열 안의 요소들을 정렬하여 반환
//인자가 없을 경우 배열 안의 원소들을 오름차순으로 정렬-원본배열이 변경됨
//숫자일때는 -
//문자열일때는 localCompare()함수 적용
//function(인자1,인자2){return 인자1-인자2;//오름차순}
//function(인자1,인자2){return 인자2-인자1;//내림차순}
//function(인자1,인자2){return 인자1.localeCompare(인자2);//오름차순}
//function(인자1,인자2){return 인자2.localeCompare(인자1);//내림차순}
var newArr=[5,2,1,4,3];
newArr.sort();
console.log(newArr);
newArr.sort(function(x,y){return y-x;});
newArr=['가','하','다','라'];
newArr.sort();
console.log(newArr);
newArr.sort(function(x,y){return y.localeCompare(x);});
console.log(newArr);
console.log('11.배열에 여러요소 한꺼번에 추가하기');
//concat()- 기존 배열의 모든 요소에 concat() 메서드의 인자들을
//추가한 새로운 배열 반환
//원본 배열은 변하지 않고 기존 배열에 추가된 새로운 배열을 반환.
newArr.splice(0,newArr.length,5,3,1,4,9);
console.log(newArr);
var newArr_=newArr.concat(10,9,6,2,1);
console.log('원봉',newArr.sort());
console.log('바뀜',newArr_.sort((x,y)=>x-y));
console.log("12.순회하면 배열 요소 출력하기")
newArr.forEach(function(item){
console.log(item);
});
newArr.forEach(function(item,index){
//if(index==1) break;//legal break statement (
console.log('요소:%s,인덱스:%s',item,index);
return;
});
//
//
var arr=['A','B','C','D','E'];
//try~carch
try{
arr.forEach(function(item){
console.log(item);
if(item ==='C') throw new Error('C이후부터는 출력 안할래');
});
}
catch(e){
console.log('%O',e);
console.log('에러메시지:',e.message);
}
//방법2: Array.prototype.some():forEach()처럼 순회하면서 배열 안의 어떤 요소라도 주어진 판별 함수를 통과하는지 테스트
// 즉 하나라도 주어진 판별 함수를 통과하면 true 반환
// 중간에 true를 반환하면 순회를 멈춘다
//https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/some
//return true 는 break,return false 는 continue와 같다
console.log(arr.some(x=>x > 'F'));
arr.some(x=>{console.log(x);if(x==='C') return true;});
//방법3: Array.prototype.every():forEach()처럼 순회하면서 배열 안의 모든 요소가 주어진 판별 함수를 통과하는지 테스트
// 즉 모든 요소가 주어진 판별 함수를 통과해야 true 반환
// 중간에 false를 반환하면 순회를 멈춘다
//https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/every
//return fasle 는 break,return true 는 continue와 같다
arr.every(x=>{console.log(x);if(x==='C') return false; return true;});
</script>결과)
If04.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>IF04.html</title>
<script>
/*
if(비교식이나 논리식뿐 아니라 모든식 즉 모든값이 올 수있다.)
자바에서는 true아니면 false를 판단할 수 있는
비교식이나 논리식이 와야 한다(산술식(x))
자스에서는 모든 식이 가능하다.
0이나 null 그리고 false 이외의 모든 값은 true로 판단하기때문에.....
*/
console.log('[NaN판단하기]');
var nan=parseInt('HELLO');
console.log(nan);
if(isNaN(nan))
console.log('%s는 NaN이다',nan);
else
console.log('%s는 NaN이 아니다',nan);
console.log('[undefined판단하기]');
var unvar;
console.log(unvar);
if(unvar === undefined)
console.log('선언 후 값을 할당하지 않았다');
else
console.log('선언후 값을 할당했다');
console.log('[null판단하기]');
var nullvar=null;
if(nullvar ===null)
console.log('nullvar는 null이다');
else
console.log('nullvar는 null이 아니다.');
console.log('[기타 타입 비교시에 문자열로 비교]');
var str='HELLO';
if(typeof str==='string')
console.log('str는 string타입입니다.');
else
console.log('str는 string 타입이 아니다.');
var obj={};
if(typeof obj==='object')
console.log('obj는 object타입입니다.');
else
console.log('obj는 object 타입이 아니다.');
var num1=num2=10;
if(num1-num2)
console.log('0은 참이다.');
else
console.log('0은 거짓이다.');
/* 삼항 연산자
자바와는 다르게 판단식(모든식)이 참이거나 거짓일때
결과값을 변수에 담지 않아도 됨.
방식1]
//자바에서는 에러]
판단식 ? 참일때 실행할 문장 : 거짓일때 실행할 문장;
방식2]
var 변수 =판단식 ? 참일때 값 : 거짓일때 값;
*/
num1>num2 ? console.log('num1이 num2보다 크다'):console.log('num1이 num2보다 크지않다');
var result= num1>num2 ? 'num1이 num2보다 크다':'num1이 num2보다 크지않다';
console.log(result);
console.log(num1>num2 ? 'num1이 num2보다 크다':'num1이 num2보다 크지않다');
</script>
</head>
<body>
<fieldset>
<legend>성적 출력</legend>
국어 <input type="text" id="kor" />
영어 <input type="text" id="eng" />
수학 <input type="text" id="math"/>
<span id='span' style='color:red;font-weight:bold;'>여기에 출력</span>
<button onclick="getGrade();">확인</button>
</fieldset>
<script>
var korNode=document.getElementById("kor");
console.log(korNode);
var endNode=document.getElementById("eng");
var mathNode=document.getElementById("math");
var spanNode=document.getElementById("span");
function getGrade(){
console.log('버튼에 클릭이벤트 발생');
var kor=parseInt(korNode.value);
var eng=parseInt(endNode.value);
var math=parseInt(mathNode.value);
var avg=(kor+eng+math)/3;
if(avg>=90) spanNode.textContent="A학점";
else if(avg>=80) spanNode.textContent="B학점";
else if(avg>=70) spanNode.textContent="C학점";
else if(avg>=60) spanNode.textContent="D학점";
else spanNode.textContent="F학점";
}
</script>
</body>
</html>
결과) 입력 전
결과) 입력 후
switch05.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Switch05.html</title>
<script>
/*
switch(식):
자바: 식이 정수값(byte/short/char/int)이 나올 수 있는
정수식(산술식)이거나 문자열(String: JDK7.0 부터 가능)이어야 한다(long[x])
자스:모든 값이 나올수 있는 모든 식이 가능하다
즉 정수뿐만 아니라 실수 그리고 논리값(true/false)
문자열도 가능하다.
*/
var f=3.000001;
switch(f){
case 3.000000001:
case 3.000001:
case 3.00001:
case 3.0001:
console.log('f는 3이다'); break;
default:console.log('f는 3이 아니다');
}
switch(10%2==0){
case true:console.log('짝수다'); break;
case false:console.log('홀수다');
}
</script>
</head>
<body>
</body>
</html>
결과)
자바는 변수가 블락 스코프를 따름.
자바스크립트는 함수 스코프를 따름. (그래서 호이스팅이 중요)
ForWhile06.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ForWhile06.html</title>
<script>
/*
자바: for문 안에서 선언된 변수는 for문이 끝나면
소멸된다
자스: script태그 안에서 선언된 변수는
해당 페이지 모든 영역에서 사용가능하다.(호이스팅:변수 선언이나 함수 선언문은 맨위로 호이스팅된다)
for(var 변수 =초기값;반복조건;증감식){
반복조건이 참일때 수행할 명령문들
}
*/
/*
for(var i=0;i < 5;i++){
var num =100;
console.log('i=',i);
}*/
//위 코드는 인터프리터시 아래처럼 hoisting이 일어난다.
var i;
var num;
for(i=0;i < 5;i++){
num =100;
console.log('i=',i);
}
console.log('for문이 끝난후:i=%s,num=%s',i,num);
/*
1 0 0 0 0
0 1 0 0 0
0 0 1 0 0
0 0 0 1 0
0 0 0 0 1
를 웹브라우저에 출력하여라.(for문 및 while문 버전)
for문 사용시에는 줄바꿈시 <br/>태그 사용
단,while문 사용시에는 table태그를 사용해라
*/
document.write('<h2>for문으로 출력</h2>');
for(i=0;i < 5;i++){
for(var k=0;k < 5;k++){
if(i===k) document.write('1 ');
else document.write('0 ');
}
document.write('<br/>');
}/////////////////
document.write('<h2>while문으로 출력</h2>');
document.write("<table style='text-align:center;width:300px;background-color:red;border-spacing:1px'>");
i=0;
while(i < 5){
document.write('<tr style="background-color:white">');
var k=0;
while(k < 5){
if(i===k) document.write('<td>1</td>');
else document.write('<td>0</td>');
k++;
}
document.write('</tr>');
i++;
}/////////////////
document.write("</table>");
//문]table태그를 사용하여 구구단을 출력하여라.
//(for문 혹은 while문 사용)
document.write('<h2>구구단 출력 첫번째-직접 출력</h2>');
document.write("<table style='text-align:center;width:700px;background-color:red;border-spacing:1px'>");
for(i=1;i <= 9;i++){
document.write('<tr style="background-color:white">');
for(k=2;k <= 9;k++){
document.write("<td>"+k+" * "+i+" = "+k*i+"</td>");
}
document.write('</tr>');
}/////////////////
document.write("</table>");
document.write('<h2>구구단 출력 두번째-문자열에 누적</h2>');
var table="<table style='text-align:center;width:700px;background-color:red;border-spacing:1px'>";
for(i=1;i <= 9;i++){
table+='<tr style="background-color:white">';
for(k=2;k <= 9;k++){
table+=("<td>"+k+" * "+i+" = "+k*i+"</td>");
}
table+='</tr>';
}/////////////////
table+="</table>";
document.write(table);
document.write('<h2>구구단 출력 세번째-DOM API사용</h2>');
var table_ = document.createElement('table');
//table_.style='text-align:center;width:700px;background-color:red;border-spacing:1px';
//혹은
table_.setAttribute('style','text-align:center;width:700px;background-color:red;border-spacing:1px');
for(i=1;i <= 9;i++){
var tr = document.createElement('tr');
//tr.style="background-color:white";
//혹은
tr.setAttribute('style',"background-color:white");
for(k=2;k <= 9;k++){
var td=document.createElement('td');
var text=document.createTextNode(k+'*'+i+'='+k*i);
td.appendChild(text);
tr.appendChild(td);
}
table_.appendChild(tr);
}/////////////////
window.addEventListener("DOMContentLoaded",function(){
var h2Node=document.querySelector('#position');
h2Node.insertAdjacentElement('afterend',table_);
});
</script>
</head>
<body>
<h2 id="position">for문 및 while문 연습</h2>
<script>
console.log('for문이 끝난후(body안):i=%s,num=%s',i,num);
</script>
</body>
</html>
결과)
'JavaScript' 카테고리의 다른 글
| 34일차 2023-04-24 (0) | 2023.04.24 |
|---|---|
| 33일차 2023-04-21 (0) | 2023.04.21 |
| 32일차 2023-04-20 (1) | 2023.04.20 |
| 30일차 2023-04-18 (0) | 2023.04.18 |
| 29일차 2023-04-17 (0) | 2023.04.17 |