FrontEnd - JavaScript(1)

wlsdnboy·2022년 4월 4일

자바스크립트란?

자바스크립트는 객체 기반의 스크립트 언어이다.
html로는 웹의 내용을 작성하고, css로는 웹을 디자인하며 , 자바스크립트로는 웹의 동작을 구현할 수 있다

자바스크립트는 주로 웹 브라우저에서 사용되나,node.js와 같은 프레임워크를 사용하면 서버 측 프로그래밍에서 사용할 수 있습니다.

함수형 프로그래밍을 표현할 수 있다.

자바스크립트 출력 메소드

alert


<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">




</head>
<body>
<input type="button" value="버튼" onclick="alertDialogBox()">
<script>
function alertDialogBox(){
	alert("확인을 누를때 까지 다른 작업을 할 수 없습니다")
}






</script>


</body>
</html>

alert 메소드는 대화상자를 띄우는 메소드 이다.

HTML DOM요소를 이용한 innerHTML 프로퍼티

document 객체의 getElementByID()나 getElementsByTagName()등의 메소드를 사용하여 HTML 요소를 선택합니다.

그리고서 innerHTML프로퍼티를 이용하면 선택된 HTML 요소의 내용(content)이나 속성(attribute)값 등을 손쉽게 변경할 수 있다

html 태그 이름을 이용한 선택

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
 <script>
	function change() {
		let spanArray = document.getElementsByTagName("span")
		spanArray[0].style.color = "orchid";
		spanArray[1].style.color = "red";
		spanArray[2].style.color = "blue";
		spanArray[3].style.color = "green";
		
	}
 
 </script>
</head>
<body>
<button onclick="change()">버튼</button>
<span>1</span>
<span>2</span>
<span>3</span>
<span>4</span>

</body>
</html>

버튼을 누르면 change함수가 실행되면서 색이 바뀐다

아이디를 이용한 선택

해당 아이디의 요소중에서 첫 번째 요소 하나만을 선택한다
여러 요소를 선택 하고 싶을때는 태그 이름이나 클래스 같은 다른 방법을 사용해야한다 .


<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
 <script>
	function change() {
		let span = document.getElementById("spanid")
		span.style.color="green";
		span.style.fontSize="30px";
		span.style.display="block";
		span.style.width = "6em";
		span.style.border = "3px dotted magenta";
		span.style.margin = "20px";
	}
 
 </script>
</head>
<body>
<p style="color:blue">이것은 <span id="spanid" style="color:red">문장입니다</span>
</p>
<input type="button" value="버튼" onclick="change()">

</body>
</html>

버튼을 누르면 아이디가 spanid인 문장입니다의 스타일을 바꾼다

클래스를 이용한 선택


<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
 <script>
	function tot() {
		let totArray = document.getElementsByClassName("tot");
		for(let i =0; i<totArray.length; i++){
			let tot = totArray[i];
			tot.style.color="navy";
		}
	}
	
	function man() {
		let manArray = document.getElementsByClassName("man");
		for(let i =0; i<manArray.length; i++){
			let man = manArray[i];
			man.style.color="yellow";
		}
	}
 
 </script>
</head>
<body>
<input type="button" value="맨유" onclick="man()">
<input type="button" value="토트넘" onclick="tot()">

<span class="tot">케인</span>
<span class="tot">윙크스</span>
<span class="tot">요리스</span>
<span class="man">호날두</span>
<span class="man">데헤아</span>
<span class="man">산초</span>
</body>
</html>

같은 클래스 이름을 가진 요소들을 배열에 넣은 후 for문을 이용해서 배열의 인덱스 번호의 요소들의 스타일 을 변경한다.

내용 변경


<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
 <script>
	function change(){
		let p = document.getElementById("pname");
		p.innerHTML = "innerhtml"
		
		
	}
 
 </script>
</head>
<body>
<p id="pname" onclick="change()">hello </p>
</body>
</html>

hello를 누르면 innerhtml로 내용이 바뀐다

특정 요소를 번갈아 가면서 변경하는 예제

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
 <script>
	function change(color,size){
		let cs = document.getElementById("cs");
		cs.style.color = color;
		cs.style.fontSize = size;
	}
 </script>
</head>
<body>
<p id = "cs">테스트</p>

<input type="button" value="변경" onclick="change('yellow','30px')">
<input type="button" value="변경" onclick="change('green','10px')"> 
</body>
</html>