3)자바스크립트
3-1) 자바스크립트 시작
3-2) 정리와 예시
3-3) 자료형과 변수
3-4)연산자
3-5)데이터입출력
1) 출력
2)입력
3-6) 예제
3) 자바스크립트
역할
웹페이지 기능 구현
특징
한줄씩 읽으며실행되는 인터프리터언어 ,
웹에서 실행되며 사용자가 웹과 상호작용 할 수
있게 도와줌
접근제한자의 개념이없다
소스가외부공개되므로 보안에취약
변수선언 필요X (초기화시 자료형결정됨)
인터프리터 언어
한 구문씩 기계어로 해석해가면서 실행하는 언어
미리 번역하지않기때문에 속도가느린편
오류발생시 수정이편함
3-1) 자바스크립트 시작
기본형식
<script type="text/javascript">
자바스크립트 내용
</script>2) 특징
- HTML에서 제공하는 <script>태그 사용
- 자바스크립트 작성 영역을 설정
- 그 사이에 자바스크립트 코드 작성
- 시작 태그의 속성으로 오는 type은 HTML5부터 default로 부여되니 생략
3) 위치
- <script>태그는 <head>,<body> 어디에도 사용 가능
- 심지어 <html>태그 밖에도 작성 가능
- 웹 표준과 웹 접근성을 고려해 되도록 <html>안에 작성
- 자바스크립트 파일이 너무 큰 경우 파일을 인식하는데 시간이 오래 걸림
- 되도록 <body>의 가장 하단에 입력
inline방식
<태그명 on이벤트 = "함수명();">
<h1>인라인 방식</h1>
<button onclick="alert('alert는 알람');">
내장 함수
</button>
<button onclick="inlineType();">
사용자 정의 함수
</button>
<script>
// Hello JavaScript라는 문구를
// alert창에 출력하는 함수
function inlineType(){
alert('Hello JavaScript');
}
</script>internal 방식
1) 특징
- 가장 일반적인 방식
- html 파일내 <head>나 <body>안에 자바스크립트 소스 작성
- html태그에서 이벤트 핸들러를 통해 함수 실행 시킴
- 이벤트 핸들러 : 이벤트 발생시 동작하는 함수
<h1>인터널 방식</h1>
<button id="internal_btn">
인터널 버튼
</button>
<script>
document.getElementById('internal_btn').onclick
= function(){
alert('인터널 방식이에요!!');
}
</script>. external 방식
1) 특징
- 자바스크립트 양이 많거나 여러개의 html파일에서 공통적으로 활용하는 코드가 많을 때 사용
- 자바스크립트 코드 부분을 외부 파일(*.js)로 저장
2) 예시
- 외부에 sample.js 파일 생성
document.getElementById('external_btn').onclick
= function(){
alert('외부에 JS 작성했니?');
}
lec01_basic.html에 불러오기 (id가 external_btn 인 동작을 처리한것임)
<h1>익스터널 방식</h1>
<button id="external_btn">
익스터널 버튼
</button>
<script src="sample.js"></script>
3-2 ) 정리 및 예시
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!--
-html : 웹페이지의 틀
-css : 스타일. 색상 , 크기 , 간격,...
- javascript : 동작을 처리
-->
<h1>자바스크립트 개요</h1>
<p>
html 페이지에 동작을 사용자의 요구에 맞도록 수행 기능<br>
브라우저의 언어임 <br>
인터프리터 방식의 언어 <br>
</p>
<script type="text/javascript">
//한줄주석
/*여러줄 주석(블럭주석)*/
//internal방식
console.log("hello world"); /*콘솔에 표시*/
</script>
</body>
</html>
inline 방식 예
<h4>인라인방식</h4>
<p>
<태그! on이벤트명="자바스크립트소스코드(해당요소에 이벤트발생시 실행시킬 코드)" >
<br>
<a href = 'javascript: 자바스크립트소스코드'> 내용</a>
</p>
<!--inline방식-->
<button onclick="window.alert('안녕하세요')">알림창출력</button>
<!-- 알림창출력 버튼 클릭 시 안녕하세요 창 출력-->
<button onclick="console.log('반갑습니다')">콘솔출력</button>
<!--콘솔출력버튼을 클릭 시 '반갑습니다'를 console에 띄워-->
<br>
<a href="javascript:btnClick2()">링크태그에서 자바스크립트 실행하기</a><br>
<!--btnClick2 실행(이벤트(함수)를 내가 만들어야함)-->
<a href="javascript:alert('반갑습니다')">링크태그에서 자바스크립트 실행하기</a>
<!--단순히 화면에 반갑습니다 창을 띄워줌-->
<br><br>
<script>//internal 방식
function btnClick2() {
//btnClick2() 이벤트
console.log("콘솔출력 버튼 클릭")
}
</script>
internal방식 예
<h4>내부방식(internal)</h4>
<button id='btn'>알림창출력2</button>
<button onclick=btnClick2();>콘솔출력2</button>
<!--콘솔출력2버튼 클릭시 btnClick2() 이벤트 발생-->
<p>
현재html문서내에 script태그 영역 내에 소스코드작성 <br>
script 태그는 head or body태그 어디서든 작성가능
</p>
<script>//internal 방식
let btn = document.getElementById("btn");
//btn변수 : <button id='btn' >알림창출력2</button> 태그 객체 저장
btn.onclick = function(){
window.alert("알림창 출력버튼 클릭");
}
function btnClick2() {
//btnClick2() 이벤트
console.log("콘솔출력 버튼 클릭")
}
</script>
외부방식(External)
js코드
function test(){
alert("별도로 작성된 sample.js 파일에서 호출")
}
//test()라는 함수를 만들고
// alert("a") : a를 화면에 창을 띄운다HTML
<h4>외부방식</h4>
<script src="sample.js">
</script>
<button onclick="test()">외부함수 호출</button>
3-3) 자료형과 변수
1.기본자료형
1)number : 정수/실수 구분X
NaN(not a number) 숫자가아님
Infinity / -Infinity : +0/-0으로 나눈값 , 불능
2)string : 문자/문자열 구분X , 작은따옴표,큰따옴표 모두 사용가능
3)boolean : true/false
4)null : 값X
5)underfined : 값이 저장된적이없다 , 초기화되지않은 상태의변수임
2.자바스크립트 변수의 특징
1) 동적타입 . 선언하지않아도 변수사용가능
2) 변수 선언시 자료형 작성하지 않는다
3) 변수에 값을 저장 시 자료형결정됨 => 변수에 지정된값이 수정되면 자료형변경
4) 즉, 변수선언없이 변수사용이 가능
3.변수선언 키워드
1)var
(1)범위 : 함수레벨
(2) 변수 선언 생략 가능
(3) 같은 변수명으로 다시 선언이 가능
(4) 변수초기화 생략가능 (undefined상태)
2) let(Es6 표준)
(1) 범위 : 블록레벨{} => 지역변수
(2) 변수선언 생략가능
(3) 같은 변수명으로 다시 선언이 불가능함(유일)
(4) 변수의 초기화생략가능(메모리에 변수생성 전)
3) const(Es6표쥰)
(1)범위 : 블록레벨{}
(2) 변수선언 생략 불가능
(3) 같은 변수명으로 다시 선언 불가능(유일한변수)
(4) 변수의 초기화 생략 불가능 = > 상수
(5) 저장된 값을 변경할 수 없음
4.호이스팅
1) hoisting
2) 코드 중 항상 먼저처리되는 코드가 존재
3)대상 : 변수선언,함수정의 등
예시)
<script>
//변수에 선언
//(초기화하지않음(undifined) 오류가발생하진않음)
var a;
console.log(a);//a를 console에출력
var a; //동일한변수명으로 재선언가능
a=10;
console.log(a, typeof a);
//a의 값과 a의타입을 console에출력
//a의값 변경시 a타입도 바뀜
a="hello world%R@$@@$"
console.log(a, typeof a);
b = false;//변수선언 없이도 사용가능
console.log(b,typeof b);
//변수 선언이 먼저 처리 됨(호이스팅)
c = Math.sqrt(25);
var c; //변수선언(먼저 처리)
console.log(c, typeof c);
//let : 중복선언 불가능(주료 사용)
let user = "user1";
console.log(user , typeof user);
// let user = "user2";//재선언불가능
// const : 중복선언 불가능, 변수의 값 변경 불가(상수개념)
const pw = "pw1";
console.log(pw , typeof pw);
// pw = "pw2"; 변수변경 불가능(상수임 final이라고생각하면될듯)
// console.log(pw , typeof pw);
</script>
변수 범위의 예제
<script>
//변수의 범위
if(true){
var age= 10;
//var 선언된 변수의 범위(scope)는 함수영역(function scope)
}
console.log(age , typeof age);
//let , const 의 범위는 블록({})영역까지 임
if(true){
const hobby = "운동";
let name ="홍길동";
}
// console.log(hobby,name);
// 출력오류가 나거나 아무것도나오지않음음
</script>
3-4) 연산자
1. 산술연산자
1)더하기 : +
2) 뺴기 : -
3) 곱하기 : *
4) 나누기 : / (5/2 = 2.5) ==> parseInt(5/2) = 2 , Math.floor(5/2) = 2
5) 나머지 : %
6) 증감 : ++, --
7) 제곱 : ** (2**3 ==> 8)
2.비교연산자 : > , >= , < , <= , == , === , != , !==
1)같다
== : 값만비교 (1=='1' : true)
=== : 자료형까지비교 (1==='1' : false)
2)같지 않다
!= : 값만 비교 ( 1 != '1' false)
!== : 값과 자료형비교 (1 !== '1' : true)
3.논리연산자 : && , || , !
4. 대입연산자 : = , += , -= , *= ....
5.조건연산자 (조건식)?참:거짓
6.문자열 연산자 : +
<script>
/*
최저시급이 9620 이다 8시간까지는 최저시급을 받고 8시간초과근무는 최저시급의1.5배받는다할떄
10시간 근무의 일당?
*/
let paperHours=9620;
let workTime = 10;
let totalPay= (paperHours * workTime) + ((workTime > 8)?(paperHours * 0.5*(workTime-8)):0);
alert("총급여 : "+totalPay)
</script>예제_
<body>
<p> 시간당 입금을 입력받고 8시간까지는 시간당 시급을 받고 , 8시간 초과근무는 시간당 시급의 1.5배를 받는다고할떄
근무시간 만큼 근무했을 때의 일당 #totalpay에 출력
</p>
<table><caption>급여 계산하기</caption>
<tr><th>시간당임금</th>
<td><input type="text" id="payPerHour"></td></tr>
<tr><th>근무시간</th>
<td><input type="text" id="workTime" ></td></tr>
<tr><td colspan="2" align="right">
<input type="button" value="총급여 계산하기"
onclick=calc() style="width:100%; text-align:center;">
</td></tr>
<tr><th>받을 수 있는 총급여</th><td>
<input type="text" id="totalPay" >
</td></tr></table>
<script>
//let변수는 {} 범위까지만 작동함!
//또한 calc는 함수이므로 hoisting에 의해 먼저 실행되게 됨
function calc(){
let payPerHour = document.getElementById("payPerHour").value;
//id 속성이 payPerHour인 태그의 value값
let time = document.getElementById("workTime").value;
let total = document.getElementById("totalPay");
total.value = (payPerHour * time) + ( (time>8)?(payPerHour*0.5*(time-8)):0);
//계산된값을 total의 값에 넣어줌
}
</script>
document.getElementById('id').value'
id값을 가진 태그의 값
3-5)데이터입출력
1) 출력
데이터를 출력하는 구문
[window.]alert("브라우저의 확인창에 출력시킬 메시지")
[window.]console.log("브라우저의 콘솔창에 출력시킬 메시지")
document.write("브라우저의 화면에 출력시킬 메시지")
태그.innerHTML("태그 내부에 출력시킬 메시지")
예제 코드
<body>
<h2>데이터를 출력하는 구문</h2>
<ul>
<li>[window.]alert("브라우저의 확인창에 출력시킬 메시지")</li>
<li>[window.]console.log("브라우저의 콘솔창에 출력시킬 메시지")</li>
<li>document.write("브라우저의 화면에 출력시킬 메시지")</li>
<li>태그.innerHTML("태그 내부에 출력시킬 메시지")</li>
</ul>
<div id="test"></div>
<script>
document.writeln("<h1 style=color:red>데이터입출력 예시</h1>")
alert("브라우저 확인창에 메시지를 띄웁니다")
document.write("<hr>")
document.write("document.write() 함수를 이용해 화면에 출력<br>")
let test = document.getElementById('test');
test.innerHTML = "<table border='1'><tr><td>innerHTML테스트</td></tr></table>";
</script>
</body>
2) 입력
데이터를 입력하는 구문
변수 : [window.]confirm("질문내용"); (확인or취소 )
변수 : [window.]prompt("질문내용"); (직접입력을받을수있는창)
변수 : 특정요소.속성(id,className,innerHTML,innerText,...);
confirm( 질문내용과 확인/취소)
function testConfirm(){
let result = confirm("홍길동님이시면 확인 아니면 취소눌러주세요")
//확인 :true , 취소:false
console.log(result)
const divEl = document.getElementById('area');
if(result){
divEl.innerHTML="<h3>환영합니다</h3>"
}
else{
divEl.innerHTML = '<h3>안녕히가세요</h3>'
}
}
확인 누를 시 if문에 있는 문장이출력
취소 누를 시 else문 문장 출력
prompt (질문내용과 텍스트상자 , 확인/취소버튼)
<h3>
window.prompt("질문내용");
</h3>
<p>
prompt 호출 시 "질문내용"과 입력할 수 있는 "텍스트 상자"와
"확인/취소"버튼이 보여지는 브라우저의 알람창 발생<br>
확인 버튼 클릭 시 텍스트 상자에 입력된 value값을 "문자열"로 반환,
취소버튼 클릭시 null 반환 ==> 변수에 담아서 활용가능
</p>
<button onclick="testPrompt1()">클릭</button>
<div id="area2"></div>
<script>
function testPrompt1(){
let name = prompt("당신의 이름은 무엇입니까?");
let age = prompt("당신의 나이는 몇살?");
const divEl = document.getElementById('area2');
divEl.innerHTML = "<b>"+age+"살 "+name+"님. 반가워요 </b>"
//innerHTML :해당 태그내부에 출력될 문장
//id가 area2인 div태그에 출력
}
</script>
클릭버튼 click!!!
입력 EXAM
<body>
<p>
합계 구하기버튼 클릭 시 prompt창이 나오고
숫자만 입력받아 1부터입력받은 수 까지 합계를 출력하기
계산된합계는 #total 에 출력(div태그의속성에는 value가없음)
</p>
<button onclick="totalSum();">합계 구하기</button>
<div id="total"></div>
<script>
function totalSum(){
let count = prompt("숫자를 입력하세요!",0);//기본값이 0이라는 뜻
let sum=0; //let(변수선언)을 붙이지않는다면 전역변수가 되어버림
for(i=1 ; i<=count ; i++){
sum+=i;
}
let total = document.getElementById('total');
//div태그 내에 출력
total.innerHTML = "<h4 style=color:red>1부터"+count+"까지의 합 : "+sum+"</h4>";
// total.innerText = "<h4 style=color:red>1부터"+count+"까지의 합 : "+sum+"</h4>";
//오직 text값만을 태그 내에 넣을 수 있음
}
// function test(){
// console.log(sum);} sum에 아무함수선언도하지않는다면
// 블럭밖에서도 사용이 돼 버림
</script>
예제1)
다음과 같이
바구니당 사과갯수를 선택해주고
사과의 총갯수를 입력한 후
바구니 수 계산하기를 누르면
필요한 바구니수가 나오게 프로그래밍해보자
<!DOCTYPE html>
<!-- webapp/test/test1.html -->
<html>
<head>
<meta charset="UTF-8">
<title>바구니수 구하기</title>
<style type="text/css">
input {text-align: right;}
</style>
</head>
<body>
<table><caption>바구니수 계산하기</caption>
<tr><th>바구니당 사과 갯수</th>
<td><select id="cnt">
<option value="5">5개</option><option value="10">10개</option>
<option value="15">15개</option><option value="20">20개</option>
</select></td></tr>
<tr><th>사과의 총갯수</th>
<td><input type="text" id="apple"></td></tr>
<tr><td colspan="2" align="right">
<input type="button" value="바구니수 계산하기"
onclick="calc()" style="width:100%; text-align:center;">
</td></tr>
<tr><th>필요한 바구니수</th><td>
<input type="text" id="basketcnt">
</td></tr></table>
<script>
function calc(){
let cnt = document.getElementById('cnt').value;
let apple = document.getElementById('apple').value;
document.getElementById('basketcnt').value= Math.ceil(apple/cnt);//큰 근사정수
}
</script>
</body>
</html>
<script>
function calc(){
let cnt = document.getElementById('cnt').value;
let apple = document.getElementById('apple').value;
document.getElementById('basketcnt').value= Math.ceil(apple/cnt);//큰 근사정수
}
</script>JS코드를 보고 설명!
일단 함수가 가장먼저 실행이되기 때문에
function calc()로 모든 문장을 감싸준다
document.getElementById('cnt').value 로
내가 선택한 바구니수(#cnt)의 value를 가져온 후
let변수(블록내에서만동작)에 담아둠
내가 입력한 사과의갯수(#apple)도 같은원리다
사과의갯수/바구니의갯수를 한 후
(JS에서 '/' 는 소수점까지 나옴)
Math.ceil을 이용해 큰 근사정수로 반환해준다
ex) (apple)10개 / (cnt)4개 == (필요한 바구니 : 3)
예제2)
다음과 같이
해당이름이 적힌 버튼을 클릭 하면
구구단
세로출력 가로출력 2단출력을 만들어보자
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>구구단출력하기</title>
<style type="text/css">
table { width:100%; border-collapse: collapse; border: 1;}
th,td {border : 3px solid #bcbcbc; text-align: center; padding: 8px;}
th {background-color: #e2e2e2; color:#111111;}
td {background-color: #f2f2f2;}
caption {color:#111111; font-size: 20px; background-color: #ffffff;}
</style>
</head>
<body>
<input type="button" value="세로출력" onclick="print1()">
<input type="button" value="가로출력" onclick="print2()">
<input type="button" value="2단출력" onclick="print3()">
<div id="gugudan"></div>
<!-----------------스크립트---------------------->
<script>
function print1(){
let dan = "<table ><caption>세로출력</caption><tr>";
//html문을 담아놓자
for(i=2;i<10;i++){
dan += "<th>"+i+"단</th></tr>"
for(j=2;j<10;j++){
dan += "<tr><td>"+i+"*"+j+"="+(j*i)+"</td></tr>";
}
}
//모두담은 태그문장을 한번에 innerHtml로 div태그에 넣자!!
document.getElementById('gugudan').innerHTML = dan;
}
//-----------------------------------------------------------------------------------------------
function print2(){
let dan = "<table ><caption>가로출력</caption><tr>";
for(a=2;a<10;a++){
dan += "<th> "+ a +"단 </th> ";
}
dan += "</tr>";
for(i=2;i<10;i++){
dan += "<tr>";
for(j=2;j<10;j++){
dan += "<td>"+j+"*"+i+"="+(j*i)+"</td>";
}dan += "</tr>";
}
document.getElementById('gugudan').innerHTML =dan;
}
//------------------------------------------------------------------------------
function print3(){
let dan = "<table><caption>2단출력</caption><tr>"
for(a=2;a<6;a++){
dan += "<th> "+ a +"단 </th>";
}
dan += "</tr>";
for(i=2;i<10;i++){
dan += "<tr>";
for(j=2;j<6;j++){
dan += "<td>"+j+"*"+i+"="+(j*i)+"</td>";
}dan += "</tr>";
}
//6~9단단
dan+="<tr>"
for(a=6;a<10;a++){
dan += "<th> "+ a +"단 </th>";
}
dan += "</tr>";
for(i=2;i<10;i++){
dan += "<tr>";
for(j=6;j<10;j++){
dan += "<td>"+j+"*"+i+"="+(j*i)+"</td>";
}dan += "</tr>";
}
document.getElementById('gugudan').innerHTML = dan;
}
</script>
</body>
</html>
세로 출력 버튼의 이벤트인 print1() 에 대해서만 설명하겠음.
<input type="button" value="세로출력" onclick="print1()"><script>
function print1(){
let dan = "<table ><caption>세로출력</caption><tr>";
//html문을 담아놓자
for(i=2;i<10;i++){
dan += "<th>"+i+"단</th></tr>"
for(j=2;j<10;j++){
dan += "<tr><td>"+i+"*"+j+"="+(j*i)+"</td></tr>";
}
}
//html문 문장을 한번에 innerHtml이용해
// div태그에 넣자!!
document.getElementById('gugudan').innerHTML = dan;
}
</script>일단 onclick="print1()" 이라는 것은
해당 버튼을 클릭시 print1();이라는 이벤트를 발생시키겠다는 뜻
일단 JS 로 넘어가겠다
호이스팅에 의해 클릭 시 함수가 제일먼저 작동된다
함수 안에 처리할동작들을 담아두자
let 함수에 table선언문과 행을 하나 만들어 넣어둠!
그 후 구구단에 맞게 테이블을 만들어준다
(출력들은 계속 let함수에 쌓아둔다 (+=))
마지막에 document.getElementById('gugudan')을
통해 gugudan이라는 아이디를 가진 태그를 가져온 후
.innerHTML을 이용해
지금까지 쌓아둔 let함수를 한번에 넣어준다.
내가만든 매우간단한 예제 (external 방식)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>동곤자바</title>
</head>
<body>
<h1>동곤 예제</h1>
<fieldset>
<legend>부가세 계산기</legend>
<caption>돈 입력: </caption><input type="text" id="money">
<button onclick="dong()">부가세 계산</button>
<caption> 부가세 : </caption>
<input type="text" id="tax">
</fieldset>
<script src="myTest.js">
</script>
</body>
</html>function dong(){
let money = document.getElementById('money').value;
let a = document.getElementById('tax').value = Math.round(money*0.1);
alert("부가세 : "+a); //a 를 화면에출력
}
나의예제2)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
a{
display: none; /*a태그를 숨겼음*/
}
</style>
</head>
<body>
<input type="button" onclick="but()" value="버튼" style="font-size: 400px;">
<a href="http://www.naver.com" id="naver" target="_blank" >네이버</a>
<script src="myTest2.js">
</script>
</body>
</html>JS
function but(){
let age = confirm("네이버에 접속할건가요?")
if(!age){
alert("나가세요");
}
else{
alert("환영합니다");
let a = document.getElementById('naver');
open(a);
//a의 링크에 접속하게됨
}
}
'JavaScript' 카테고리의 다른 글
| 부트캠프39일(jquery{요소선택자,필터링,요소탐색,예제}) (0) | 2025.03.28 |
|---|---|
| 부트캠프38일차 (게임들 , jquery , 예제) (0) | 2025.03.27 |
| 부트캠프37일차(BOM,game) (0) | 2025.03.26 |
| 부트캠프35일차 (JS(시간함수,Event,배열) (0) | 2025.03.21 |
| 부트캠프34일차(JS[요소조회출력, 문자열,Math, 조건문]) (0) | 2025.03.20 |