경고창 띄우기
alert("Hello~JavaScript!!!!");
alert창 연산가능 - 연산 순서도 지켜서 계싼
lert(5+5*2);
alert(10%7);
javascript 사용
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 가독성때문에 javascript도 이곳에 -->
<script>
// 자바처럼 주석 사용 가능
// 가장 기본적인 alert()함수로 경고창 띄우기
// 순차적으로 진행
alert("Hello~JavaScript!!!!");
alert('안녕 자바스크립트');
</script>
</head>
<body>
<script>
// 연산도 가능하다
// 연산순서도 지켜져서 계산
alert(5+5*2);
// 나머지
alert(10%7);
</script>
</body>
</html>
모든 자료형 var로 통일
document.write("안녕하세요?<br>"+name+"입니다<br>");
document.write("자바스크립트의 시작<br> '자바스크립트 1일차'<br>");
<script>
var name1="최";
var name2="성";
var name3="현";
var name=name1+name2+name3;
// 자바스크립트의 출력
// 개행<br>
// html요소 없이 출력 ()안의 것을 화면에 출력하라
document.write("안녕하세요?<br>"+name+"입니다<br>");
// ""과 '' 끊어서 구분 밖이든 안이든 구분만 해주면됨
document.write("자바스크립트의 시작<br> '자바스크립트 1일차'<br>");
</script>
var a;
a="변수연습"; // 순서대로 넣어서 이전 것에 덮어씌어짐(초기화)
a="100"; // 문자열
-> java때처럼 a는 100으로 설정됨
출력문 안에 <br> 적어줘야함
document.write(b+"<br>");
java때처럼 ""안은 문자/벗어난건 숫자
var b=10;
document.write(b+"<br>"); // 줄 내려주려면 "<br>" 필수
b+=5;
document.write(b+"<br>"); // 15
var b=20;
b++;
document.write(b+"<br>"); // 21
b++;
document.write(b+"<br>"); // 22
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- const 절대 변하지 않는 상수 let 범위를 가지는 지역변수 -->
<title>자바스크립트 변수_var(let,const)</title>
<script>
var name1="최";
var name2="성";
var name3="현";
var name=name1+name2+name3;
// 자바스크립트의 출력
// 개행<br>
// html요소 없이 출력 ()안의 것을 화면에 출력하라
document.write("안녕하세요?<br>"+name+"입니다<br>");
// ""과 '' 끊어서 구분 밖이든 안이든 구분만 해주면됨
document.write("자바스크립트의 시작<br> '자바스크립트 1일차'<br>");
</script>
</head>
<body>
<!-- 자바스크립트의 출력_3가지
1. document.write() : html요소 없이 출력
2. innerHTML : HTML요소 안에 출력
3. console.log() : 브라우저의 콘솔 탭에 출력(value 확인)-->
<script>
var a;
a="변수연습"; // 순서대로 넣어서 이전 것에 덮어씌어짐(초기화)
a="100"; // 문자열
document.write(a+1+"<br>"); // 문자열+1로 1001출력
// 대입연산자
var b=10;
document.write(b+"<br>"); // 줄 내려주려면 "<br>" 필수
b+=5;
document.write(b+"<br>"); // 15
// 증감연산자
var b=20;
b++;
document.write(b+"<br>"); // 21
b++;
document.write(b+"<br>"); // 22
</script>
</body>
</html>
자바스크립트 컴파일러에 의해 자동 형변환 일어남
var result=1+"2";
document.write("result="+result+"<br>"); //12 숫자 1 문자 2 붙여짐
var result2="5"+true;
document.write("result2="+result2+"<br>"); //5true 문자
var relt1=1+"2";
document.write("relt1="+relt1+"<br>"); //12
var test1="300";
document.write((test1)+10+"<br>"); //30010
var test2="300.1";
document.write((test2)+10+"<br>"); //300.110
var test3=Number(test1); // 숫자로 변환
document.write((test3)+10+"<br>"); //310
var test4=parseInt(test2); // 정수로 변환해서 소수점 x
document.write((test4)+100+"<br>"); //400
<!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 result=1+"2";
document.write("result="+result+"<br>"); //12 숫자 1 문자 2 붙여짐
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.1";
document.write((test2)+10+"<br>"); //300.110
//Number,parseInt_숫자로 형변환
var test3=Number(test1); // 숫자로 변환
document.write((test3)+10+"<br>"); //310
var test4=parseInt(test2); // 정수로 변환해서 소수점 x
document.write((test4)+100+"<br>"); //400
</script>
</body>
</html>
input창
<!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>
// prompt는 input 창
var userId=window.prompt("아이디는?");
document.write(userId+"님 환영합니다<br>");
// window.prompt=prompt
var num=prompt("숫자입력", "0");
// typeof(변수) -> 변수의 타입반환
document.write(typeof(num));
var num1=prompt("숫자1");
var num2=prompt("숫자2");
var num3=prompt("숫자3");
document.write("총 합계는 "+(parseInt(num1)+Number(num2)+Number(num3)));
</script>
</body>
</html>
확인:1 취소:0 boolean으로 생각
ar ans=confirm("정말 삭제하시겠습니까?");
if(ans) // true 1
document.write("삭제되었습니다<br>");
else
document.write("취소되었습니다<br>");
문자열 내에서 연산 가능 소수점 가능
var a=eval("10.5+10");
document.write(a+"<br>"); //20.5
document.write(parseFloat(a)+parseInt(a)+"<br>"); //40.5 float=double / float(소수)+int(정수)= 소수값
<!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
당신의 표준몸무게는 **kg 입니다-->
<script>
var q=Number(prompt("당신의 키는?"));
document.write("나의 키는 "+q+"cm<br>");
var avgwg=(q-100)*0.9;
document.write("나의 표준몸무게는 "+avgwg+"kg 입니다<br>");
// confirm
var ans=confirm("정말 삭제하시겠습니까?"); //확인:1 취소:0 boolean으로 생각
// ans==1 ==1이 없어도 default는 true
if(ans) // true 1
document.write("삭제되었습니다<br>");
else
document.write("취소되었습니다<br>");
// eval() : 문자열 내에서 연산 가능 소수점 가능
var a=eval("10.5+10");
document.write(a+"<br>"); //20.5
document.write(parseFloat(a)+parseInt(a)+"<br>"); //40.5 float=double / float(소수)+int(정수)= 소수값
//prompt 창에 구구단 (원하는 단) 입력해서 출력해보자
var dan=prompt("원하시는 단은?");
for(var i=1;i<=9;i++)
{
document.write(dan+"x"+i+"="+dan*i+"<br>");
}
</script>
</body>
</html>