[HTML] JavaScript 기초

자바 스크립트는 HTML 파일 어디에나 작성 할 수 있다.

주로 head 나 body의 마지막 부분에 작성한다.

 

HTML 파일에 직접 코딩하지 않고도 파일 경로만 확실하게 적어주면 자바 스크립트 파일을 불러올 수 있다

<script type="text/javascript" src="js/myscript.js"></script>

 

자바 스크립트를 이용해서 콘텐츠를 수정 할 수 있다.

<button type="button" onclick="changeToFrench();">
Click me to change the text to French
</button>
<span id="french">Hi there!</span>

<script>
function changeToFrench(){
	document.getElementById("french").innerHTML = "Salut!";
}
</script>

document.getElementById를 이용해서 ID가 French 인 항목을 Hi there! 에서 Salut! 로 변경했다.

 

<button type="button" onclick="changeHelloWorldStyle();">
Click me to change the style of the text
</button>
<span id="hello">Hello world</span>
<script>
function changeHelloWorldStyle(){
	var e = document.getElementById("hello");
	e.style.color = "orange";
	e.style.fontSize = "30px";
	e.style.fontStyle = "italic";
}
</script>

document.getElementById를 이용해서 ID가 hello 인 항목의 스타일을 변경했다.