2022. 7. 25. 17:51ㆍ카테고리 없음
webapp에 새로운 폴더를 만들고 html파일을 생성한다
앞으로 META-INF와 WEB-INF 폴더는 건드리지 않는다
1. 버튼 만들기
세가지 버튼을 만들었다
onclick
ondbclick
onmouseover
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>js1/test1.html</title>
</head>
<body>
<input type ="button" value="버튼" onclick="alert('버튼클릭')"><br>
<input type ="button" value="더블클릭" ondblclick="alert('버튼 더블클릭')"><br>
<input type ="button" value="마우스오버" onmouseover="alert('버튼 마우스오버')"><br>
</body>
</html>
2. 텍스트상자 만들기
<input type = "text" onblur="alert('텍스트 상자 포커스 해제')"><br>
3. 자바스크립트 넣기
<head 안에 자바스크립트>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>js1/test1.html</title>
<script type="text/javascript">
// 자바스크립트 넣기
alert("head안에 자바스크립트")
</script>
</head>
<body>
<!-- 태그 설명글 -->
<input type ="button" value="버튼" onclick="alert('버튼클릭')">
</body>
</html
head 태그 안에 script 태그를 사용하여 자바스크립트를 넣었다
위에서 부터 순서대로 실행되기 때문에 제일 먼저 자바스크립트 구문이 실행되는 것을 볼 수 있다
< 파일 안에 자바스크립트 >
js1 폴더 안에 js 파일을 생성하고 자바스크립트를 작성하였다
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>js1/test1.html</title>
<script type="text/javascript" src="script.js"></script>
<script type="text/javascript">
// 자바스크립트 넣기
alert("head안에 자바스크립트")
</script>
</head>
<body>
<!-- 태그 설명글 -->
<input type ="button" value="버튼" onclick="alert('버튼클릭')">
</body>
</html>
html 파일에서 script 태그안에 방금 만든 js 소스 파일을 입력하였다
가장먼저 '파일안에 자바스크립트 ' 경고창이 뜨는것을 확인 할 수 있다
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>js1/test1.html</title>
<script type="text/javascript" src="script.js"></script>
<script type="text/javascript">
// 자바스크립트 넣기
alert("head안에 자바스크립트")
</script>
</head>
<body onload="alert('문서 불러오기')">
<!-- 태그 설명글 -->
<input type ="button" value="버튼" onclick="alert('버튼클릭')"><br>
<input type ="button" value="더블클릭" ondblclick="alert('버튼 더블클릭')"><br>
<input type ="button" value="마우스오버" onmouseover="alert('버튼 마우스오버')"><br>
<input type = "text" onblur="alert('텍스트 상자 포커스 해제')"><br>
</body>
</html>
body태그에 onload 를 사용해......
4. 문자, 숫자, 불린
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>js1/text2.html</title>
<script type="text/javascript">
//자바스크립트에 사용하는 값
alert("문자열");
alert('문자열2');
alert(500);
alert(3.4);
alert(true);
alert(false);
</script>
</head>
<body>
</body>
</html>자바스크립트에서는 큰따옴표 작은 따옴표 모두 문자를 입력할 때 사용할 수 있다
안보고 혼자 입력해보기!!!
5. 사칙연산
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>js1/text2.html</title>
<script type="text/javascript">
// 자바스크립트 사칙연산 + - * /
// 변수 : 변하는 수(값 변경) => 기억장소 이름부여 하고 값을 변경할 수 있게 함
// 변수 : 값이나 식 => 오른쪽에 있는 값이나 식을 왼쪽 기억장소에 저장(대입연산자)
var a=10;
var b=20;
alert(a); //변수 a
alert("a"); //문자 a
alert(a+b);
alert(a-b);
alert(a*b);
alert(a/b);
</script>
</head>
<body>
</body>
</html>
[예제]
올해연도와 태어난연도를 가지고 나이를 구하라
풀이)
var a=2022;
var b=1990;
alert(a-b+1);
=> 33이 출력되는것을 확인하였다
밋밋하니 문자열도 넣어보자
alert("나이 : " + a-b+1);
NaN 이라는 에러가 발생했다
NaN : Not a Number
숫자끼리는 괄호로 묶어야한다
alert("나이 : " + (a-b+1));
6. 변수이름
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>js1/test3.html</title>
<script type="text/javascript">
//변수이름 만드는 규칙
//1. 영어문자, _(언더스코어), 숫자 사용(숫자는 첫글자로 사용할 수 없음)
var 7class=100; //에러
var _class=200;
var aclass=300;
var *class=400; //에러
//2.대소문자 구분, 예약어(var, if, for, class) 사용 할 수 없음
var var=100; //에러
//3. 여러단어 연결 변수이름 중간에 대문자 birthYear, birth_Year
//4. 변수이름 의미있게 작성
</script>
</head>
<body>
</body>
</html>
7. 자료형, 연산자
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
//자료형
// 변수에 모든형을 저장 할 수 있다
var a="문자열"; //문자열
a='문자열'; //문자열
a='a'; //문자열
a=500; //정수 숫자형 (10진수, 8진수, 16진수)
a=3.4; //실수 숫자형
a=true; //논리형 참
a=false; //논리형 거짓
//배열. 객체, undefined(정의 되지 않았을때), null(비어있는 경우, 값이 유효하지 않은 상태)
//연산자 +(더하기) = */ %(나머지) ++(1증가) --(감소)
var a=10;
var b=2;
alert(a%2);
var c=10;
alert(++c); // 1증가하고 출력
alert(c++); // 출력하고 1증가
alert(c--);
// + 연결 연산자 숫자+문자, 문자+문자
alert(5+"연결"+7);
//대입연산자(할당연산자) = += -= *= /=
var i=0;
i=i+1;
alert(i);
i += 1;
alert(i);
//비교연산자 ==(같다) !=(다르다) <(작다) <=(작거나같다) >(크다) >=(크거나같다)
var a = 10;
alert(a==10); //true
alert(a!=10); //false
alert(a<10); //false
alert(a<=10); //true
alert(a>=10); //false
alert(a>=10); //true
</script>
</head>
<body>
</body>
</html>