학원수업_Oracle/Html_CSS_JAVAScript

java script

logloglog 2020. 11. 30. 13:40

동적인 웹페이지 작성하기위해 사용되는 언어.

웹의 표준프로그래밍 언어

특징

-인터프리트 언어 : 컴파일이 필요없다는 뜻
-동적타이핑(dynamic타이핑): 동적인 타입을 쓸수있다. 즉 변수의 자료형 선언안하고도 쓸수있다.
-구조적프로그래밍 지원 : if, else등을 완벽지원
자바는 컴파일언어니까 오류가딱나는데 자바스크립트는 내가잘못썼어도 오류가안남. 구분오류 문법오류는 콘솔에서나지만
 그외의 다른오류들을 실제싱행되면서 오류가 나거나 이상하게동작이 됨.
함수형 프로그래밍 지원. 자바스크립트는 함수도 그 자체로 객체.. 함수도 파라미터로 주고받을수있따.
함수는 속성과 그 자체가 call()과같은 메서드를 가진다.
상속을 위해 클래스개념대신 프로토타입사용 > 프로토타입 기반
<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>Javascript 첫수업</title>
</head>
<body>
	<script>
		var now = new Date();
		document.write(now);
	</script>
</body>
</html>

now 선언, 현재날짜 생성해서 now에 담음

document.write는 syso이랑 똑같음

 

자바스트립트의 용도

이벤트에 반응하는 동작구현가능
ajax통해서 전테페이지 다시로드하지않고도 서버로부터 새로운 페이지받거나데이터제출시 사용
html요소들의 크기나 색상을 동적으로 변경 하능 (css로 hover색깔 바꾼거.. 이런거 자바스크립트로가능)
사용자가 입력한 값들을 검증하는작업도 자바스크립트 이용함. > 횐갑화면에서 입력값눌렀을때 자바스크립트가 한번
확인을 해준다.

 

제이쿼리 :자바스크립트 라이브버리

json : 자바스트립트 객체표기법

 

css가 외부내부인라인 있던것처럼 자바스크립트도 똑같다.

내부자바스크립트는 head나 body나 아무곳에나, 양쪽모두에도 배치가능

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>Javascript 첫수업</title>
	<script>
		document.write("안녕!!");
		</script>
</head>
<body>
	<script>
		var now = new Date();
		document.write(now);
		document.write("안녕!!");
	</script>
</body>
</html>

헤드에도 바디에도 가능

외부자바스크립트. : head, body 양족에 배치가능

 

 

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>Javascript 첫수업</title>
	<script>
		document.write("안녕!!");
		document.write("눈이오려나");
	</script>
	<script src="myscript.js"></script>
</head>
<body>
	<script>
		var now = new Date();
		document.write(now);
		document.write("안녕!!");
	</script>
</body>
</html>

중요한건, script는 순서가 중요! 스크립트가 어디에있느냐 .. 앞에서부터 줄줄 실행되는거임

실수마니하는거. 

<script src="myscript.js"></script>
	<script src="myscript1.js"></script>

했는데, 1에 replace를 정ㅎ의해놓고 myscript에서 replace 호출하면 에러가 난다.

외부자바스크립트 장점 : html코드와 분리가 가능.가독성높아지고 유지보수편해짐

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>Javascript 첫수업</title>
	<script>
		document.write("안녕!!");
		document.write("눈이오려나");
	</script>
	<script src="myscript.js"></script>
</head>
<body>
	<button type="button" onclick="alert('반갑습니다.')">버튼을 누르세요 </button>
	<script>
		var now = new Date();
		document.write(now);
		document.write("안녕!!");
	</script>
</body>
</html>

버튼만들엇을떄

안에 alert()적은게 인라인 자바스크립트인거임

<button type="button" onclick="document.write('히히이이이')">버튼을 누르세요 </button>

이렇게 바꾸면?? (작은따옴표로 바꾸는거 잊지말기)

버튼누르면

document.write는 잘 쓰지않는다.

왜? 썼다가 페이지가 아예 바껴버리는 경우가 생길수있기떄문에

	<script>
		var now = new Date();
		document.write(now);
		document.write("안녕!!");
	 	alert("와우");
	</script>

페이지로드하면서 alert이 나옴

innerHTML : 화면에 표시되는 데이터변경시 용이

console.log() : 디버그할때 콘솔에 로그남기는것

 

자바스크립트문장(statement)는 웹브라우저에게 내리믄 명령! 순차적으로 실행된다!!

 

구분(syntax)에러 : 문법에러를 뜻함. 괄호나 ' " 등이 제대로 닫히지않음

변수는 var키워드 사용하여 선언

식별자는 숫자로 시작할수없으며, 대소문자 구분함.

변수명은 숫자로 시작하면 안됨

 

변수 : variable > var 데이터를 저장하는 상자

var x; << x는 유일해야함

	
	 	var str;
	 	str = "쉬는시간이다.";
	 	alert(str);
	</script>

var str = "쉬는시간이다";로 쓸수도잇음

변수명은 숫자로 시작안됨 $나 _로 시작가능. 대소문자 구변, 예약어는 변수명으로 사용불가

number : 수치형

String

booleans

Arrays 배열 []를 이요해서 정의 ["a","b","c"]

object : 객체를 나타내는 타입 {}를 사용해 정의 {id:"a",name:"홍길동",age:30}

 

 

type of 연산자를 이용해서 변수의 유형 찾응수있음

undifined : 변수선언은 되었으나 값이 정해지지않은 상태

 

연산자 나머지는 다 같은데 **지수화는 처음본다..

x=5**2 이건 math.pow(5,2)와 동일

숫자와 문장열을 +연산자로 합하면문자열이됨

y = "car"+1 은 문자열임

x=10 은 숫자임

x=x+20 은 숫자임

그러다가

x=x+"!" 은 x는 이떄부터 문자임

그냥 x+""도 문자됨

이후에 x = x+200 하면

30200되는거심

자바스크립트에스 ===은 값도 같고, 유형도 같아야 true인거

 	var x = 10;
	 	var y = 20;
	 	document.write((x>y)+"<br>")
	 	document.write((y>x)+"<br>")
	 	document.write((y==x)+"<br>")
	 	document.write((y!=x)+"<br>")
	 	
	</script>

 

ID로 HTML 요소 찾기 : document.getElemnetById("  ");

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>Insert title here</title>
</head>
<body>
	<h1 id="test">This is a </h1>
	<script type="text/javascript">
		function func(){
			e = document.getElementById("test");
			e.style.color = "red";
		}
		
	</script>
	<button type="button" onclick="func()">클릭하세요</button>
</body>
</html>

id가 유일하기떄문에 id로 컨트롤하는게 좋다.

변수선언사고, 이 <html>문서에서 id가 test인거를 찾아서 오는거임

*script는 html안에만 들어가면 어디든! 넣을수있음 하지만 들어가있는 위치에따라서 순차적으로 해석하는것만 기억

	<button type="button" onclick="alert(1);alert(2);">클릭하세요</button>

이런식으로 여러개 함수 쓸수있으니 끝에 ;를 쓰는거를 습관으로 하자

 

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>Insert title here</title>
</head>
<body>
	<script type="text/javascript">
	var x,y;
	var input;
	
	input = prompt("정수를 입력하시오","정수로");
	x = parseInt(input);
	input = prompt("정수를 입력하시오","정수로");
	y = parseInt(input);
	
	
	document.write(x+y+"<br>");
	</script>
</body>
</html>

10확인, 20확인 누르고 나면
결과로 30이 뜬다

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>덧셈계산기</title>
</head>
<body>
	<h1>덧셈계산기</h1>
	<form >
	첫번째 정수 : <input type="text" id="x"> <br>
	두번쨰 정수 : <input type="text" id="y"> <br>
	합계 : <input type="text" id="result">
	<button type = "button" onclick="calc()">계산</button>
	</form>
	
	<script type="text/javascript">
		function calc(){
			var x = document.getElementById("x").value;
			var y = document.getElementById("y").value;
			document.getElementById("result").value = parseInt(x)+parseInt(y);
		}
	</script>

</body>
</html>

parseInt안해주면 1020됨

 

value로 가져오면 그냥 String이라고 생각하면 됨

 

Object : 객체

사물의 속성과 동작을 묶어서 표현하는 기법

ex : 자동차는 메이커, 모델, 색상, 마력과 같은 속성도 있고 출발하기 정지하기등의 동작도 가지고있다

var myCAr = {model =" bmw" , color="red", hp:100};

document.write(myCar.model + "<br>"); 이런식으로 하면됨

혹은 myCar.model 대신 mycar["model"]이렇게..

 

배열 : 목록같은거..

생성방법 : var fruit = ["apple", "banana", "peach"];

var fruit = new Array ("apple", "banana", "peach");

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	<script type="text/javascript">
	var i;
	var fruit = new Array();
	fruit[0] = "Apple";
	fruit[1] = "Banana";
	fruit[2] = "Orange";
	
	for(i=0; i<fruit.length;i++){
		document.write(fruit[i] + "<br>");
	}
	
	for(x in fruit){
		document.write(fruit[x] + "<br>");
	}
	
	</script>
</body>
</html>

여기서 x는 var라고 선언안해줘도 된다? 자바스크립트는 선언안해줘도 되긴되는데 전역변수로됨.. 좋은방법은 아님

 

**parseInt() 

자바에서는 Integer.parseInt("10") >String 10을 숫자로 바꿔줌

parse가 들어가는 거는 형변환을  해준다고 생각하면됨 

if와 switch는 똑같음

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>Insert title here</title>
</head>
<body>
	<script type="text/javascript">
	var x = parseInt(prompt("정수를 입력하세요"));
	var y = parseInt(prompt("정수를 입력하세요"));
	var buho = prompt("연산자를 입력하세요");
	var result;
	if(buho == "+"){
		result = x+y;
	}else if(buho=="-"){
		result = x-y;
	}else if(buho=="*"){
		result = x*y;
	}else if(buho=="/"){
		result = x/y;
	}
	
	document.write(result);
	
	</script>
</body>
</html>

 

 

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>학점계산</title>
</head>
<body>
	<script type="text/javascript">
	var hak = parseInt(prompt("학점을 입력하세요"));
	var result;
	switch(true){
	case (hak>=90):
		result = "A";
		break;
	case (hak>=80):
		result = "B";
		break;
	case (hak>=70):
		result = "C";
		break;
	case (hak>=60):
		result = "D";
		break;
	case (hak>=0):
		result = "F";
		break;
	default:
		break;
	}
	
	document.write(result);
	
	</script>
</body>
</html>

case로 범위쓰려면 true를 넣어준다.

반복문 for

 

저작자표시

'학원수업_Oracle > Html_CSS_JAVAScript' 카테고리의 다른 글

String  (0) 2020.12.02
1201  (0) 2020.12.01
1127 POSITION  (0) 2020.11.27
1126  (0) 2020.11.26
CSS  (0) 2020.11.25

'학원수업_Oracle/Html_CSS_JAVAScript'의 다른글

  • 현재글java script

관련글

댓글

티스토리툴바