Insert title here

PC방 이용요금

기본 사용료 1시간 : 1000원

1시간추가 : 1000원
3시간추가 : 2700원
5시간추가 : 4200원

합계금액 : 원정

 

예제

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<h1>PC방 이용요금</h1>
기본 사용료 1시간 : 1000원
<br><br>
<form name="pc">
	<input type="checkbox" onclick="sum(0)" id="hour1" value="1000">1시간추가 : 1000원<br> 	<!-- 0번요소 -->
	<input type="checkbox" onclick="sum(1)" id="hour3" value="2700">3시간추가 : 2700원<br> 	<!-- 1번 요소 -->	
	<input type="checkbox" onclick="sum(2)" id="hour5" value="4200">5시간추가 : 4200원<br><br>	<!-- 2번 요소 -->
	합계금액 : <input type="text" id="total" value="1000" size="5">원정						<!-- 3번요소 -->
</form>

<script type="text/javascript">
	let values = new Array(3); // 배열을 선언하여 값 불러오기
	values[0] = parseInt(document.getElementById('hour1').value);
	values[1] = parseInt(document.getElementById('hour3').value);
	values[2] = parseInt(document.getElementById('hour5').value);
	
	let total = parseInt(document.getElementById('total').value);

	function sum(num) {
		if(document.pc.elements[num].checked == true){
			total = total + values[num];
		}else{
			total = total - values[num];
		}
		document.pc.elements[3].value = total;	
	}
</script>

</body>
</html>

 

 

설명

input태그를 form태그로 묶을 경우 input태그는 form태그의 요소가 된다.

script 태그 안에서 배열을 선언 하여 체크박스의 값을 넣어준다.

document.pc.elements[num].checked == true

form태그의 name은 pc이고 pc의 요소가 체크될 경우(checked) true를 반환한다.

document.pc.elements[3].value = total;

form태그의 3번째 요소 = total에 값을 넣어준다.(요소 시작 번호 : 0)

'IT > JavaScript' 카테고리의 다른 글

[Html+JavaScript] 라면 타이머 만들기/clearInterval/setInterval/window.close/option value 접근 예시  (0) 2021.06.07
[Html+JavaScript] 식별자(==Access Attribute (접근 속성))/id/class/name  (0) 2021.06.07
[Html+JavaScript] 계산기(feat.Dom)  (0) 2021.06.06
[Html+JavaScript] 정답을 입력받고 경고창으로 정답 확인하기/조건문/alert  (0) 2021.06.06
[Html+JavaScript] 사진 클릭 시 경고창 띄우기/alert  (0) 2021.06.06
Insert title here

계산기

a, b에 대해서 변수 a와 b의 계산 결과를 표시합니다.



첫번째 수                     두번째 수      연산 결과
=

 

 

계산기 예제

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>

<h2>계산기</h2>
a, b에 대해서 변수 a와 b의 계산 결과를 표시합니다.
<br><br>
<button type="button" onclick="plus()">덧셈</button>
<button type="button" onclick="minus()">뺄셈</button>
<button type="button" onclick="multi()">곱셈</button>
<button type="button" onclick="div()">나눗셈</button>
<button type="button" onclick="rest()">나머지</button>
<br><br>

<input type="text" id="a" size="8">
<input type="text" id="oper" size="5">
<input type="text" id="b" size="8">
=
<input type="text" id="result" size="8">

<script type="text/javascript">
let a, b;	// 전역변수

function setValue() {
	a = parseInt(document.getElementById('a').value); // 입력값 받기
	b = parseInt(document.getElementById('b').value);
}

function plus() {
	setValue();
	document.getElementById('oper').value = "+"; // 값 넣기
	document.getElementById('result').value = a + b;
}
function minus() {
	setValue();
	document.getElementById('oper').value = "-"; // 값 넣기
	document.getElementById('result').value = a - b;
}
function multi() {
	setValue();
	document.getElementById('oper').value = "*"; // 값 넣기
	document.getElementById('result').value = a * b;
}
function div() {
	setValue();
	if(b == 0){ // 0 안됨
		alert('계산할 수 없습니다');
		return;
	}
	document.getElementById('oper').value = "/";
	document.getElementById('result').value = a / b;	
}
function rest() {
	setValue();
	if(b == 0){ // 0 안됨
		alert('계산할 수 없습니다');
		return;
	}
	document.getElementById('oper').value = "%";
	document.getElementById('result').value = a % b;	
}

</script>
</body>
</html>

 

 

설명

onclick : 클릭을 할 경우 해당 메소드로 이동한다.

parseInt : 연산을 하기 위해 입력값을 숫자형으로 변환한다. 

나누기와 나머지는 두번째 수가 0이 들어올 경우 연산이 안되기 때문에 조건문을 걸어주어 return을 하게 한다.

 

 

'IT > JavaScript' 카테고리의 다른 글

[Html+JavaScript] 식별자(==Access Attribute (접근 속성))/id/class/name  (0) 2021.06.07
[Html+JavaScript]체크박스에 체크를 하면 금액이 포함되게 하기/Array/checked/form  (0) 2021.06.07
[Html+JavaScript] 정답을 입력받고 경고창으로 정답 확인하기/조건문/alert  (0) 2021.06.06
[Html+JavaScript] 사진 클릭 시 경고창 띄우기/alert  (0) 2021.06.06
[Html+JavaScript] 진수 변환하기/10진수를 2진수, 8진수, 16진수 변환하기/toString(feat.Dom)  (0) 2021.06.06
Insert title here

웹 페이지를 위한 지배적인 마크업 언어는? (대문자로 입력)

답 :




정답을 입력받고 경고창으로 정답 확인하기 예시

<h2>웹 페이지를 위한 지배적인 마크업 언어는? (대문자로 입력)</h2>
답 : <input type="text" id="answer">

<input type="button" onclick="func()" value="정답확인">

<script type="text/javascript">
function func() {

	let answer = document.getElementById('answer').value;
	if(answer == ""){
		alert('답을 기입해 주십시오');
	}
	else if(answer == "HTML"){
		alert('정답입니다');
	}
	else{
		document.getElementById('answer').value = "";
		alert('정답이 아닙니다');
	}
}
</script>

 

설명

<input type="button" onclick="func()" value="정답확인">

버튼 클릭 시 func() 함수로 이동한다.

let answer = document.getElementById('answer').value;

document.getElementById('answer'). value는 id=answer 즉, 사용자에게 입력받은 값이 된다.

if(answer == ""){
alert('답을 기입해 주십시오');
}

만약 입력값이 ""(공백일 경우) 경고창에 '답을 기입해 주십시오' 문구를 출력한다.

else if(answer == "HTML"){
alert('정답입니다');
}

만약 입력값이 "HTML"일 경우 경고창에 '정답입니다' 문구를 출력한다.

else{
document.getElementById('answer').value = "";
alert('정답이 아닙니다');
}

만약 입력값이 공백이 아니거나 "HTML"이 아닐경우 id=answer의 value값을 공백으로 넣어주고,

경고창에 '정답이 아닙니다' 문구를 출력한다.

 

 

 

 

'IT > JavaScript' 카테고리의 다른 글

[Html+JavaScript]체크박스에 체크를 하면 금액이 포함되게 하기/Array/checked/form  (0) 2021.06.07
[Html+JavaScript] 계산기(feat.Dom)  (0) 2021.06.06
[Html+JavaScript] 사진 클릭 시 경고창 띄우기/alert  (0) 2021.06.06
[Html+JavaScript] 진수 변환하기/10진수를 2진수, 8진수, 16진수 변환하기/toString(feat.Dom)  (0) 2021.06.06
[Html+JavaScript]Date()사용법/날짜,시간 설정하기(setter)/년,월,일,요일,시,분,초 출력하기(getter)(feat.Dom)  (0) 2021.06.06

이미지 파일 접근 경로 설명 글 : https://chlee21.tistory.com/80?category=936649 

 

사진 클릭 시 경고창 띄우기 예시 1

설명

img 태그안에 onclick="alert('내용')"을 설정하여 클릭 시 경고창이 뜨게 한다. 

alert : 경고창 함수

<img alt="" src="santorini.jpg" onclick="alert('여행가고 싶다!')" width="500">

 

실행화면

 

Insert title here

 

 

 

사진 클릭 시 경고창 띄우기 예시 2

설명

onclick="func()" 클릭시 func()함수로 이동

<img alt="" id="img" src="santorini.jpg" onclick="func()" width="500">

<script type="text/javascript">
function func() {
	alert('여행가고 싶다!!');
}
</script>

 

실행화면

 

Insert title here

'IT > JavaScript' 카테고리의 다른 글

[Html+JavaScript] 계산기(feat.Dom)  (0) 2021.06.06
[Html+JavaScript] 정답을 입력받고 경고창으로 정답 확인하기/조건문/alert  (0) 2021.06.06
[Html+JavaScript] 진수 변환하기/10진수를 2진수, 8진수, 16진수 변환하기/toString(feat.Dom)  (0) 2021.06.06
[Html+JavaScript]Date()사용법/날짜,시간 설정하기(setter)/년,월,일,요일,시,분,초 출력하기(getter)(feat.Dom)  (0) 2021.06.06
[Html+JavaScript]1초당 갱신되는 시계 만들기(feat.Dom)/setInterval()/Date()  (0) 2021.06.06

10진수, 2진수, 8진수, 16진수

 

10진수 → 2 , 8, 16 진수 변환 예시

참조 

toString(2) : 2진수 변환

toString(8) : 8진수 변환

toString(16) : 16진수 변환

	let num = 8;
    
	// 10->2
	let num2 = num.toString(2);	// 0000 1000
	// 10->8
	let num8 = num.toString(8);	// 10
	//10->16
	let num16 = num.toString(16);	// 8

 

2진수 → 10 , 8, 16 진수 변환 예시

참조

2진수는 parseInt(값, 2)하여 숫자형으로 변환 후 진수 변환을 하여야 한다.

	let bin = "00001000";
    
	// 2->10
	let num10 = parseInt(bin,2);			// 8
	// 2->8
	let num8 = parseInt(bin,2).toString(8);	// 10
	// 2->16
	let num16 = parseInt(bin,2).toString(16);	// 8

 

8진수 → 10 , 2, 16 진수 변환 예시

참조

8진수는 parseInt(값, 8)하여 숫자형으로 변환 후 진수 변환을 하여야 한다.

	let oct = "10";
    
	// 8->10
	let num10 = parseInt(oct,8);			// 8
	// 8->2
	let num2 = parseInt(oct,8).toString(2);	// 00001000
	// 8->16
	let num16 = parseInt(oct,8).toString(16);	// 8

 

16진수 → 10 , 2, 8 진수 변환 예시

참조

16진수는 parseInt(값, 16)하여 숫자형으로 변환 후 진수 변환을 하여야 한다.

	let hex = "15a";
    
	// 16->10
	let num10 = parseInt(hex,16);			// 346
	// 16->2
	let num2 = parseInt(hex,16).toString(2);	// 101011010
	// 16->8
	let num8 = parseInt(hex,16).toString(8);	// 532

 

사용자 입력값으로 진수 변환 예제

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<table>
	<tr>
	<th>10진수</th>
	<td><input type="text" id="num" size="10" value="">
	<button type="button" onclick="num()">변환</button></td>
	</tr>
	<tr>
	<th>2진수</th>
	<td><input type="text" id="bin" size="10" value="">
	<button type="button" onclick="bin()">변환</button></td>
	</tr>
	<tr>
	<th>8진수</th>
	<td><input type="text" id="oct" size="10" value="">
	<button type="button" onclick="oct()">변환</button></td>
	</tr>
	<tr>
	<th>16진수</th>
	<td><input type="text" id="hex" size="10" value="">
	<button type="button" onclick="hex()">변환</button></td>
	</tr>
</table>

<script type="text/javascript">

	function num() {
		let num = parseInt(document.getElementById('num').value);

		let num2 = num.toString(2);
		document.getElementById('bin').value = num2;
		let num8 = num.toString(8);
		document.getElementById('oct').value = num8;
		let num16 = num.toString(16);
		document.getElementById('hex').value = num16;
	}
	
	function bin() {
		let bin = parseInt(document.getElementById('bin').value,2);
		// 2->10
		document.getElementById('num').value = bin;
		// 2->8
		let bin8 = bin.toString(8);
		document.getElementById('oct').value = bin8;
		// 2->16
		let bin16 = bin.toString(16);
		document.getElementById('hex').value = bin16;
	}
	
	function oct() {
		let oct = parseInt(document.getElementById('oct').value,8);
		// 8->10
		document.getElementById('num').value = oct;
		// 8->2
		let oct2 = oct.toString(2);
		document.getElementById('bin').value = oct2;
		// 8->16
		let oct16 = oct.toString(16);
		document.getElementById('hex').value = oct16;
	}	
	
	function hex() {
		let hex = parseInt(document.getElementById('hex').value,16);
		// 16->10
		document.getElementById('num').value = hex;
		// 16->2
		let hex2 =hex.toString(2);
		document.getElementById('bin').value = hex2;
		// 16->8
		let hex8 = hex.toString(8);
		document.getElementById('oct').value = hex8;
	}
</script>

</body>
</html>

 

실행화면

Insert title here
10진수
2진수
8진수
16진수

 

'IT > JavaScript' 카테고리의 다른 글

[Html+JavaScript] 정답을 입력받고 경고창으로 정답 확인하기/조건문/alert  (0) 2021.06.06
[Html+JavaScript] 사진 클릭 시 경고창 띄우기/alert  (0) 2021.06.06
[Html+JavaScript]Date()사용법/날짜,시간 설정하기(setter)/년,월,일,요일,시,분,초 출력하기(getter)(feat.Dom)  (0) 2021.06.06
[Html+JavaScript]1초당 갱신되는 시계 만들기(feat.Dom)/setInterval()/Date()  (0) 2021.06.06
[Html+JavaScript] getElementById()/onclick사용법(feat.Dom)  (0) 2021.06.06

 

날짜, 시간 설정하기(setter) / 년, 월, 일, 요일, 시, 분, 초 출력하기(getter)

예시

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>

<p id="today"></p>
<p id="Mydate"></p>
<p id="year"></p>
<p id="month"></p>
<p id="date"></p>
<p id="day"></p>
<p id="hour"></p>
<p id="min"></p>
<p id="second"></p>

<script type="text/javascript">

let day = new Date();
document.getElementById('today').innerHTML = "오늘날짜 : " + day;
let d = new Date();// 현재년월 현재시간 
d = new Date(2021, 1 - 1, 23, 01, 30, 10);	// setter (월 -1)
d = new Date("Jan 23, 2021 1:30:10");		// setter
document.getElementById('Mydate').innerHTML = "설정날짜 : " + d;
document.getElementById('year').innerHTML = "년도 : " + day.getFullYear();
document.getElementById('month').innerHTML = "월 : " + parseInt(day.getMonth()+1);	 
document.getElementById('date').innerHTML = "일 : " + day.getDate();		
document.getElementById('day').innerHTML = "요일 : " + day.getDay();		 // 요일(일:0~토:6)			
document.getElementById('hour').innerHTML = "시 : " + day.getHours();	
document.getElementById('min').innerHTML = "분 : " + day.getMinutes();	
document.getElementById('second').innerHTML = "초 : " + day.getSeconds();	

</script>
</body>
</html>

 

실행화면

 

 

 

 

 

 

 

 

 

 

 

 

 

설명

d = new Date(2021, 1 - 1, 23, 01, 30, 10);	// setter (월 -1)
d = new Date("Jan 23, 2021 1:30:10");		// setter

날짜 설정시 2가지 방법이 있습니다.

다만, d = new Date(2021, 1 - 1, 23, 01, 30, 10); 이 방법으로 진행 시 월 = 월 -1 해주어야 합니다.

document.getElementById('year').innerHTML = "년도 : " + day.getFullYear();

getFullYear() : "년"을 반환

getElementById(id명)으로 연결되어 (Id=year)의 문자열을 "년도 : day.getFullYear()"으로 변경

document.getElementById('month').innerHTML = "월 : " + parseInt(day.getMonth()+1);

getMonth() : "월-1"을 반환 , 정확한 월을 구하기 위해선 +1을 해주어야 합니다. getMonth()의 반환형이 문자형이라 parseInt를 사용하여 숫자형으로 변환해 주어야 연산이 가능합니다.

getElementById(id명)으로 연결되어 (Id=month)의 문자열을 "월 : parseInt(day.getMonth()+1)"으로 변경

document.getElementById('date').innerHTML = "일 : " + day.getDate();

getDate() : "일"을 반환

getElementById(id명)으로 연결되어 (Id=date)의 문자열을 "일 : day.getDate()"으로 변경

document.getElementById('day').innerHTML = "요일 : " + day.getDay();

getDay() : 해당 "요일"에 해당하는 숫자를 반환 ( 일=0, 월=1, 화=2, 수=3, 목=4, 금=5, 토=6 ) 

getElementById(id명)으로 연결되어 (Id=day)의 문자열을 "요일 : day.getDay()"으로 변경

document.getElementById('hour').innerHTML = "시 : " + day.getHours();

getHours() : "시"을 반환

getElementById(id명)으로 연결되어 (Id=hour)의 문자열을 "시 : day.getHours()"으로 변경

document.getElementById('min').innerHTML = "분 : " + day.getMinutes();

getMinutes() : "분"을 반환

getElementById(id명)으로 연결되어 (Id=min)의 문자열을 "분 :  day.getMinutes()"으로 변경

document.getElementById('second').innerHTML = "초 : " + day.getSeconds();

getSeconds() : "초"을 반환

getElementById(id명)으로 연결되어 (Id=second)의 문자열을 "초 :  day.getSeconds()"으로 변경

'IT > JavaScript' 카테고리의 다른 글

[Html+JavaScript] 사진 클릭 시 경고창 띄우기/alert  (0) 2021.06.06
[Html+JavaScript] 진수 변환하기/10진수를 2진수, 8진수, 16진수 변환하기/toString(feat.Dom)  (0) 2021.06.06
[Html+JavaScript]1초당 갱신되는 시계 만들기(feat.Dom)/setInterval()/Date()  (0) 2021.06.06
[Html+JavaScript] getElementById()/onclick사용법(feat.Dom)  (0) 2021.06.06
[JavaScript] 변수 선언 방식/데이터 타입의 종류/데이터 타입 확인/ 주석  (0) 2021.06.04

1초당 갱신되는 시계 만들기

예시

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<h2>시계는 똑딱똑딱</h2>
<p id="demo"></p>
<script type="text/javascript">
function displayDate() {
	document.getElementById("demo").innerHTML = Date();	// 현재시각이 나옴.
}
// timer -> 초당 시간이 흘러가게 하는법 (1초마다 값이 갱신된다.)
setInterval("displayDate()", 1000); // 호출할함수, 1000 <- 1초 
</script>
</body>
</html>

 

실행화면

시계는 똑딱똑딱

 

 

 

설명

document.getElementById("demo").innerHTML = Date();

Date() : 현재 날짜의 정보를 제공하는 객체

getElementById(id명)으로 연결되어 (Id=demo)의 문자열을 Date()로 변경

setInterval("displayDate()", 1000);

setInterval(호출할 함수,시간간격(ms)) : setInterval는 일정한 시간간격으로 값을 갱신해 주는 함수

ms 단위로 1000 = 1초이다.

'IT > JavaScript' 카테고리의 다른 글

[Html+JavaScript] 진수 변환하기/10진수를 2진수, 8진수, 16진수 변환하기/toString(feat.Dom)  (0) 2021.06.06
[Html+JavaScript]Date()사용법/날짜,시간 설정하기(setter)/년,월,일,요일,시,분,초 출력하기(getter)(feat.Dom)  (0) 2021.06.06
[Html+JavaScript] getElementById()/onclick사용법(feat.Dom)  (0) 2021.06.06
[JavaScript] 변수 선언 방식/데이터 타입의 종류/데이터 타입 확인/ 주석  (0) 2021.06.04
[JavaScript] 자바스크립트 정의/작성 위치  (0) 2021.06.04

Dom (Document Object Model) : 문서 객체 모델

웹페이지를 핸들링하기 위한 프로그램 인터페이스(문서 구조)이다.

javascript는 Dom을 통해 html을 제어한다.

 

 

Dom을 이용한 getElementById/onclick 사용 예시

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>

<p id="demo">안녕하세요!</p>		<!-- 일반태그 -->

<input type="text" id="text" value="버튼 클릭!" size="20">	<!-- form태그 -->
<br>

<input type="button" value="클릭" onclick="btnClick()"> <!-- 버튼눌릴때 btnClick() 호출 -->

<script type="text/javascript">
function btnClick() {
	document.getElementById("demo").innerHTML = "반갑습니다.";
	
	document.getElementById("text").value = "잘 클릭하셨네요";
}
</script>
</body>
</html>

 

실행화면

Insert title here

안녕하세요!


 

 

설명

<p id="demo">안녕하세요!</p>

p태그에 id="demo" 설정

<input type="text" id="text" value="버튼 클릭!" size="20">

form태그에 id="text" 설정

<input type="button" value="클릭" onclick="btnClick()">

onclick="btnClick()" 사용자가 클릭을 할 경우 이벤트가 발생하여  btnClick() 메서드로 이동

document.getElementById("demo").innerHTML = "반갑습니다.";

getElementById(id명)으로 연결되어 (Id=demo)의 문자열을 "반갑습니다."으로 변경

innerHTML = (p 태그)의 문자열 변경

document.getElementById("text").value = "잘 클릭하셨네요";

getElementById(id명)으로 연결되어 (Id=text)의 문자열이 "잘 클릭하셨네요"으로 변경

value = (input type="text")의 문자열 변경

 

'IT > JavaScript' 카테고리의 다른 글

[Html+JavaScript] 진수 변환하기/10진수를 2진수, 8진수, 16진수 변환하기/toString(feat.Dom)  (0) 2021.06.06
[Html+JavaScript]Date()사용법/날짜,시간 설정하기(setter)/년,월,일,요일,시,분,초 출력하기(getter)(feat.Dom)  (0) 2021.06.06
[Html+JavaScript]1초당 갱신되는 시계 만들기(feat.Dom)/setInterval()/Date()  (0) 2021.06.06
[JavaScript] 변수 선언 방식/데이터 타입의 종류/데이터 타입 확인/ 주석  (0) 2021.06.04
[JavaScript] 자바스크립트 정의/작성 위치  (0) 2021.06.04

변수 선언 방식

var : 초기화 후 변수 선언 가능, 재선언 가능

참조

 얼핏보면 편하겠다는 생각이 들겠지만, 다수가 동시에 같은 작업 시 변수 충돌이 우려된다.

 

예시

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<p id="num">p</p>
<script type="text/javascript">

// 초기화 후 변수 선언
v = 1;
var v;
document.getElementById('num').innerHTML = v; // 출력을 위한 코드(dom)

//재선언 가능
var v = 2;
document.getElementById('num').innerHTML = v;

</script>
</body>
</html>

 

실행화면 : 초기화를 먼저 진행하여도 에러가 발생하지 않고, 재선언 부에도 에러가 발생하지 않는다.

 

p 태그입니다

let : 변수 선언 후 초기화, 재선언 불가, 재할당 가능

 

예시 

// 변수 선언
let i = 2;

// 재할당 가능
i = 4;

/* 불가능
i = 5;
let = i;

let i = 5;
*/

 

실행화면

 

p 태그입니다

 

 

데이터 타입의 종류

문자형 : String 

   "", '' 안에 들어 있는 문자이다. 연산시 우선순위가 높다.

숫자형 : number

논리형 : boolean

object형 : array [] , class

 

예시

// JavaScript는 변수타입 지정 없이도 선언이 가능하다.

var str = 'hello';
var str = "hello";

// 에러
// var str = 'hello";

var num = 123;
var pi = 3.141592;
var answer = true;
var cars = [ "saab", "volvo", "bmw" ];

var strNum = "5" + 3 + 1; // -> 531 문자열로 통합된다.
var numStr = 3 + 2 + "3"; // -> 53

 

typeof : 데이터 타입 확인

예시

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>

변수(variable)

<p id="demo">p tag</p>

<script type="text/javascript">	
  
    document.getElementById('demo').innerHTML 
		= 		"홍길동 : " + typeof "홍길동" + "<br>"
			+ 	"325 : " + typeof 325 + "<br>"
			+	"3.14 : " + typeof 3.14 + "<br>"
			+ 	"true : " + typeof true + "<br>"
			+	"array : " + typeof [1,2,3] + "<br>"
			+	"object : " + typeof { num:1, name:'abc'};
</script>
</body>
</html>

 

실행화면

 

 

p tag

 

 

주석

형식

 // : 한줄 주석처리

 /* */ : 여러 줄 주석처리

 

예제

// 한줄 주석처리
/*
여러줄
주석처리
*/

'IT > JavaScript' 카테고리의 다른 글

[Html+JavaScript] 진수 변환하기/10진수를 2진수, 8진수, 16진수 변환하기/toString(feat.Dom)  (0) 2021.06.06
[Html+JavaScript]Date()사용법/날짜,시간 설정하기(setter)/년,월,일,요일,시,분,초 출력하기(getter)(feat.Dom)  (0) 2021.06.06
[Html+JavaScript]1초당 갱신되는 시계 만들기(feat.Dom)/setInterval()/Date()  (0) 2021.06.06
[Html+JavaScript] getElementById()/onclick사용법(feat.Dom)  (0) 2021.06.06
[JavaScript] 자바스크립트 정의/작성 위치  (0) 2021.06.04

JavaScript

자바스크립트는 객체 기반의 스크립트 프로그래밍 언어이다. 이 언어는 웹 브라우저 내에서 주로 사용하며, 다른 응용 프로그램의 내장 객체에도 접근할 수 있는 기능을 가지고 있다. 또한 Node.js와 같은 런타임 환경과 같이 서버 프로그래밍에도 사용되고 있다. 

 

 

사용 목적

웹에 접근하기 위해서이다.

tag들을 접근하기 위한 스크립트.
보조 프로그래밍 언어이다.
컴파일을 하지 않기 때문에 빠르고 가볍다.
Java Script 간략화, 경량화 시킨 것이 JQuery 이다.

 

예) 회원가입 -> 빈칸을 조사, ID 글자수 조사. PW를 숫자 + 문자, 대소문자포함
    CSS를 제어, 구현
    Timer를 설정해서 특수효과 같은 처리가 가능

 

 

JavaScript 작성방식

Internal 방식 : body 내부 선언

내부 작성 방식 :  head 내부 선언

extarnal 방식 : head 내부에서 선언하여 js파일을 불러오는 방법 

 

<html>
<head>

<script type="text/javascript" src="myJS.js"> 
// extarnal 방식
</script> 

<script type="text/javascript"> 
// 내부 작성 방식
</script> 

</head>
<body>

<script type="text/javascript">
// Internal 방식
</script>

</body>
</html>

 

'IT > JavaScript' 카테고리의 다른 글

[Html+JavaScript] 진수 변환하기/10진수를 2진수, 8진수, 16진수 변환하기/toString(feat.Dom)  (0) 2021.06.06
[Html+JavaScript]Date()사용법/날짜,시간 설정하기(setter)/년,월,일,요일,시,분,초 출력하기(getter)(feat.Dom)  (0) 2021.06.06
[Html+JavaScript]1초당 갱신되는 시계 만들기(feat.Dom)/setInterval()/Date()  (0) 2021.06.06
[Html+JavaScript] getElementById()/onclick사용법(feat.Dom)  (0) 2021.06.06
[JavaScript] 변수 선언 방식/데이터 타입의 종류/데이터 타입 확인/ 주석  (0) 2021.06.04

+ Recent posts

티스토리툴바