자바스크립트
웹화면을 제어하는 스크립트 언어
다양한 API(웹애플리케이션), 라이브러리(함수) 제공 => 차트, 지도, jQuery, 리액트, 뷰
- 태그
- html 문서 내
- .js 자바스크립트 파일
자바스크립트에서 문자열에 '' "" 둘다 사용 가능
"" 안에는 ''
'' 안에는 "" 쓰기
1. 태그
<input type="button" value="클릭버튼" onclick="alert('클릭')"><br>
<input type="button" value="더블클릭버튼" ondblclick="alert('더블클릭')"><br>
<input type="button" value="마우스오버버튼" onmouseover="alert('마우스오버')">
알림창 뜸
2. html 문서 내
head 태그 안에 삽입
<script type="text/javascript">
alert("문서내 자바스크립트1");
alert("문서내 자바스크립트2");
</script>; 생략 가능 대신 enter키로 줄 바꾸기
3. .js 자바스크립트 파일
- 자바스크립트 파일 만들기
head 태그 안에 입력
<script type="text/javascript" src="script.js"></script>
변수 선언
(형지정 하지 않음 => 저장된 값에 따라 형 지정)
var a=10;- 변수명 만드는 규칙
- 영문자, _(언더스코어), 숫자
_now=10; a_1=20; - 대소문자 구분
- 숫자로 시작 못함, 다른 특수 문자 사용 못함
[불가] 25now=10; *no=20; - 예약어(자바스크립트 문법) 사용 못함
[불가] for=10;
자료형
숫자형(정수, 실수), 문자열('',""), 논리형(true/false), 배열, 객체
undefined 값이 저장 안된 상태
null 값이 유효하지 않음
a= 10;
alert(typeof a); // number
a=3.4;
alert(typeof a); // number
a="문자열";
alert(typeof a); // string
a=true;
alert(typeof a); // boolean산술연산자
+ - * / % ++ -- [java랑 동일]
연결연산자
+
대입연산자(할당연산자)
= += -= *= /= %=
비교연산자
== != >= > <= <
=== (자료형도 일치) !==
alert("javascript" > "Javascript" ); // 대문자보다 소문자가 크다 true논리연산자
&&(and) ||(or) !(not)
조건연산자
조건? 참인 경우 명령 : 거짓인 경우 명령;
var a=10;
a%3==0?alert("3의배수"):alert("3의 배수 아님");
조건문 if
if(a%2==0){
alert("2의 배수, 짝수");
}else{
alert("홀수");
}
switch 문
a=1;
switch(a){
case 1 : alert("일"); break;
case 2 : alert("이"); break;
case 3 : alert("삼"); break;
default: alert("잘못입력"); break;
}
for문
var i;
for(i=1;i<=10;i++){
alert(i);
}
10까지 출력됨
var i;
var sum=0;
for(i=1;i<=10;i++){
sum+=i;
}
alert(sum);
- html 문서에 출력하기
var dan=2;
for(i=1;i<=9;i++){
// html문서에 출력
document.write(dan+"*"+i+"="+dan*i+"<br>");
}"<br>"태그써서 다음줄로 내려야함
while문
i=1;
sum=0;
while(i<=100){
sum+=i;
i++;
}
alert("1~100까지 합 : " +sum)
do while문, continue, break; [java와 동일]
함수
자주 사용하는 기능을 정의하고 함수 이름을 불러서 사용
function 함수이름(){
}- 자동으로 호출
function fun1(){
alert("안녕하세요");
alert("반갑습니다");
}
fun1();- 버튼으로 호출
<script type="text/javascript">
function fun1(){
alert("안녕하세요");
alert("반갑습니다");
}
</script>
</head>
<body>
<input type="button" value="함수호출버튼" onclick="fun()">
</body>- 사칙연산
function fun2(a,b){
alert(a+b);
alert(a-b);
alert(a*b);
alert(a/b);
}- 최대값 구하기
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>js2/test5.html</title>
<script type="text/javascript">
function fun3(a,b) {
// 두수 비교 => 최대값 리턴
var max=0;
if(a>b){
max=a;
}else{
max=b;
}
return max;
}
</script>
</head>
<body>
<input type="button" value="최대값함수호출" onclick="alert(fun3(10,20))">
</body>
</html>내장함수
자바스크립트 언어가 만들어 질 때 미리 만들어 놓은 함수
- alert("함수호출");
알림창 출력 - confirm("확인해주세요");
확인창 출력
확인을 클릭 true 리턴
취소를 클릭 false 리턴
- prompt("입력하세요");
프롬프트 창에서 입력받기
입력한 값 리턴
var b = prompt("입력하세요");
alert(b); // 5
alert(b+100); //5100 연결 = 문자+숫자
alert(parseInt(b)+100); // 105
alert(parseFloat(b)+100);
alert(b*100); //500사칙연산 '+' 숫자로 입력해도 문자로 인식
문자를 숫자(정수)로 변경 => parseInt() => 정수형숫자
문자를 숫자(실수)로 변경 => parseFloat() => 실수형숫자
'*' 숫자연산 말고는 다른 기능이 없으므로 숫자로 형변환 됨
-
document.write("b="+b);
html웹 페이지 출력 -
console.log("b="+b);
콘솔창 출력 => 웹브라우저 F12 => console
