<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
// 가장 기본적인 alert() 함수로 경고창 띄우기
// 순차적으로 진행
alert("Hello~JavaScript!!!");
alert('안녕~ 자바스크립트!!');
</script>
</head>
<body>
<script>
// 연산도 가능하다.
alert(5+5*2); // 수식 연산도 가능
alert(10%7); // 나머지 연산도 가능
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>자바스크립트 변수 var(let,const)</title>
<script>
var name1="임";
var name2="형";
var name3="준";
var name=name1+name2+name3;
// 자바스크립트의 출력
// html 요소없이 출력..
// ()안의 것을 화면에 출력하라.
document.write("안녕하세요?<br>"+name+"입니다.<br>");
document.write("자바스크립트의 시작<br> '자바스크립트 1일차'<br>");
document.write('자바스크립트의 시작<br> "자바스크립트 1일차"<br>');
// 소따옴표, 대따옴표 바꿔서 사용 가능. 겹치지 않게만 하면 될듯..
</script>
</head>
<body>
<!-- 자바스크립트의 출력 3가지
1. document.write()\\
2. innerHTML : HTML 요소안에 출력해라.
3. console.log() : 브라우저의 콘솔탭에 출력 -->
<script>
var a;
a="변수연습";
a="100";
document.write(a+"<br>");
document.write(a+1+"<br>"); // 자바스크립트는 오류없이 문자열 인식하여 출력 된다.
// 대입연산자
var b=10;
document.write(b+"<br>");
b+=5;
document.write(b+"<br>");
// 증감연산자
var b=20;
b++;
document.write(b+"<br>");
b++;
document.write(b+"<br>");
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- 암시적 형변환 : JavaScript에서 알아서 바꿔주는 것. -->
<!-- 명시적 형변환 : 내가 원할때 바꾸는 것. -->
<script>
// 암시적 형변환 : 자바스크립트 컴파일러에 의해 자동 형변환이 일어남.
// Test
var result=1+"2";
document.write("result="+result+"<br>"); // 12
var result2="5"+true;
document.write("result2="+result2+"<br>"); // 5true
// 명시적 형변환
// 1. String() 이용해서 숫자로 변경 가능
var relt1=1+"2";
document.write("relt1="+relt1+"<br>"); // 12
var test1="300";
document.write((test1)+10+"<br>"); // 30010
var test2="300.6";
document.write((test2)+10+"<br>"); // 30010
// Number, parseInt : 숫자로 형변환
var test3=Number(test1);
document.write((test3+2)+"<br>"); // 302
var test4=parseInt(test2);
document.write((test4+2)+"<br>"); // 302.. parseInt 하여 정수로 바꿔줌.. 소숫점 안나옴.
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- 당신의 키는?
180
표준몸무게: (키-100)*0.9
당신의 표준 몸무게는 72kg 입니다. -->
<script>
// var height=window.prompt("당신의 키는?");
// st_weight=(height-100)*0.9;
// document.write(avg);
var height=Number(prompt("당신의 키는?"));
document.write("나의키는"+height+"cm 입니다.<br>");
var st_weight=(height-100)*0.9;
document.write("당신의 표준 몸무게는 "+st_weight+"kg 입니다.<br>")
// confirm
// confirm("정말 삭제할까요?");
var ans=confirm("정말 삭제할까요?");
if(ans==1){ // ture 1
document.write("삭제되었습니다.<br>");
}
else{
document.write("삭제가 취소되었습니다.<br>");
}
//eval() : 문자열 내에서 연산이 가능하다.
var a=eval("10+10");
document.write(a+"<br>") // 20
var b=eval("10+10.5");
document.write(b+"<br>") // 20.5
document.write(parseFloat(b)+parseInt(b)+"<br>");
// prompt창에 구구단(원하는단) 입력해서 출력해보자.
var dan=Number(prompt("몇단?"));
for(var i=1;i<=9;i++){
document.write(dan+" x "+i+"="+(dan*i)+"<br>");
}
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
var rightId="bts";
var rightPw="1234";
function login(id,pw){
if(id==rightId){
if(pw==rightPw){
document.write(id+"님 방문을 환영합니다.");
}else {
alert("잘못된 비밀번호입니다.");
}
}
else {
alert("존재하지 않는 아이디 입니다.");
}
}
var userId=prompt("아이티를 입력하세요","아이디");
var userPw=prompt("비밀번호를 입력하세요","비밀번호");
login(userId,userPw);
</script>
</body>
</html>
아이디를 틀렸을 경우
아이디를 맞췄을 경우
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- Normal 함수만들기
1. function 함수명(){
}
2. function 함수명(파라메터1, 파라메터2....){
}
3. function 함수명(파라메터1, 파라메터2...){
......
return 반환값;
}
-->
<!-- 리터럴 방식으로 함수만들기... 이 방식 또한 자주 사용함
1. 함수명=function(파라메터1,파라메터2....){
return 반환값;
}
-->
<script>
// 1. Normal 방식
function hello(){
document.write("자바스크립트 함수만들기 시작!!!<br>");
}
hello();
// 2. 리터럴 방식
hi=function(){
document.write("함수만들기 리터럴 방식이야<br>");
}
hi();
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
document.write("안녕하세요 순영님... 자바스크립트 재미있죠?<br>");
document.write("안녕하세요 민규님... 자바스크립트 재미있죠?<br>");
document.write("안녕하세요 성신님... 자바스크립트 재미있죠?<br>");
document.write("안녕하세요 시온님... 자바스크립트 재미있죠?<br>");
/* 중복되는것을 함수로 포장한 후.. 중복되지 않는 부분을 파라메터로 만든 후
함수를 호출할 때 값을 넘긴다. */
function showName(name){
document.write("안녕하세요 "+name+"님... 자바스크립트 재미있죠?<br>");
}
showName("순영");
showName("민규");
showName("성신");
showName("시온");
// Q. 안녕하세요? A님의 나이는 B살 입니다. 로 출력해보세요
// 함수명: showInfo
function showInfo(iName,age){
document.write("안녕하세요? "+iName+"님의 나이는 "+age+"살 입니다.<br>");
}
showInfo("메붕",24);
showInfo("엘리",43);
showInfo("헤네",53);
showInfo("커닝",34);
// Q. 본인의 이름,나이,키,몸무게를 파라메터로 받아서 출력하는 변수를 만드세요
// 이름: 홍길동
// 나이: 26세
// 키 : 170cm
// 몸무게 : 64kg
function showMy(myName,myAge,height,weight){
document.write("이름: "+myName+"<br>나이: "+myAge+"세<br>키: "+height+"cm<br>몸무게: "+weight+"kg<br>");
}
showMy("마법사",29,171,73);
myInfo=function(irum,nai,ki,mom){ // 전역변수
document.write("이름: "+irum+"<br>나이: "+nai+"세<br>키: "+ki+"cm<br>몸무게: "+mom+"kg<br>");
}
myInfo("전사",26,170,64)
var myInfo=function(irum,nai,ki,mom){ // 지역변수
document.write("이름: "+irum+"<br>나이: "+nai+"세<br>키: "+ki+"cm<br>몸무게: "+mom+"kg<br>");
}
myInfo("궁수",36,156,55)
document.write("=================================<br>");
myInfo("도적",32,174,64)
document.write("=================================<br>");
myInfo("메붕이",26,167,49)
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
var date=new Date();
document.write("date.getFullYear()"+date.getFullYear()+"<br>");
document.write((date.getMonth()+1)+"<br>");
document.write(date.getDate()+"<br>");
document.write(date.getDay())+"<br>"; // 1: 월요일, 2: 화요일... 요일을 숫자로 출력해줌
// 오늘은 2023년 7월 27일 입니다.
document.write("오늘은 "+date.getFullYear()+"년 "+(date.getMonth()+1)+"월 "+date.getDate()+"일 입니다.<br>");
// isNaN(Not a Number) : 문자가 끼어있나 안끼어있나 찾는것, 문자가 껴있으면 true, 숫자일경우 false
document.write(isNaN(100)+"<br>"); // false
document.write(isNaN("Hello")+"<br>"); // true
document.write(isNaN("a100")+"<br>"); // true
document.write(isNaN("100")+"<br>"); // false (문자형 숫자도 숫자로 인식한다.)
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
// 전역변수 : 전역에서 사용하는 변수
var a=10;
var b=100;
function outer(){
// 지역 변수
var a=20;
document.write("3. a="+a+"<br>"); // 20
document.write("4. b="+b+"<br>"); // 100
}
document.write("1. a="+a+"<br>");
document.write("2. b="+b+"<br>");
outer(); // 이걸 해서 불러와줘야 3번과 4번이 출력된다!! 주의!!
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
// 페이지의 모든요소가 로드되어야 호출...
// html 로딩이 끝나야 아래 코드가 시작이 된다.
window.onload=function(){ // 모든것이 load가 끝난 다음에 동작을 하겠다. 라는 뜻
// dom객체(document, object, model) : JavaScript 문을 html에 가져와 실행 시 순서에 따라 결과값이 달라진다.
// body에서 시작해야 하는 명령어가 head 단에서 시행이 안되면 window.onb
var list='';
list+='<ul>';
list+='<li>Java</li>';
list+='<li>JavaScript</lt>';
list+='</ul>';
// document.write(list);
// html문서의 body태그에 list를 넣어줄께요.
// document.body.innerHTML=list;
document.getElementById('out').innerHTML=list; // id요소값을 찾아서
//엘리먼트를 통해 찾아와야 한다.
// out.innerHTML=list;
}
</script>
</head>
<body>
<div id="out">결과</div> <!-- script의 내용이 이 결과가 나오기 전에 바로 실행을 해버려셔.. 결과값이 나오지 않는다. -->
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
function hello(){
alert("두번째 버튼을 클릭했어요!!");
}
// btn1에 이벤트 주기
window.onload=function(){
var b=document.getElementById('btn1');
b.onclick=function(){
alert("3번째 버튼 클릭")
}
}
</script>
</head>
<body>
<button type="button" onclick="alert('안녕하세요')">함수호출_직접이벤트 호출</button>
<br><br>
<button type="button" onclick="hello()">자바스크립트 사용자 함수 호출</button>
<br><br>
<button type="button" id="btn1">이벤트를 자바스크립트로</button>
</body>
</html>
초기 실행화면
첫번째 버튼(함수호출_직접이벤트 호출) 클릭
두번째 버튼(자바스크립트 사용자
세번째 버튼(이벤트를 자가스크립트로) 클릭
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="../css/buttonStyle.css">
<title>Title</title>
<style>
#out{
position: absolute;
left: 20px;
top: 100px;
background-color: beige;
padding: 10px;
width: 300px;
height: 150px;
border: 1px solid gray;
}
</style>
<script>
function test1(a){
alert(a+1000);
}
function test2(str){
alert("문자열 ["+str+"]을 \\n 받았어요!!!");
}
// test3... 데이터를 추가할까요? 확인. 추가했어요, 취소. 취소했어요... out에 출력
function test3(){
var ans=confirm("데이터를 추가할까요?");
if (ans){
document.getElementById("out").innerHTML="추가했어요";
} else {
document.getElementById("out").innerHTML="취소했어요";
}
}
// prompt 창에 당신이 사는 지역은?, 내가사는 지역은 서울입니다. = out에 출력
window.onload=function () {
document.getElementById("btn4").onclick=function (){
var city=prompt("당신이 사는 지역은?");
out.innerHTML="내가 사는 지역은 "+city.fontcolor('pink')+"입니다."; // 자바스크립트 에서는 여기서 글씨에 바로 색상을 줄 수 있다.
}
}
</script>
</head>
<body>
<input type="button" value="alert" class="btn btn-black" onclick="test1(25)"> <!-- btn 클래스와 btn-pink 클래스 2개 적용함. -->
<input type="button" value="alert" class="btn btn-pink" onclick="test2('hello')">
<input type="button" value="confirm" class="btn btn-sky" onclick="test3()">
<input type="button" value="prompt" class="btn btn-yellow" id="btn4">
<div id="out"></div>
</body>
</html>
초기화면
까만색 alert을 눌렀을 때
분홍색 alert를 눌렀을 때
confirm을 눌렀을 때
확인을 눌렀을 때