log file을 확인 에라
sts.ini 파일에
-vm
jdk에 bin 파일 경로 넣어줌
javascript : 웹 브라우저에서 실행되는 프로그래밍 언어
사용방법
1. script태그내에서 소스를 삽입하여 처리
2. 텍스트파일의 형태로 만든 후 링크를 걸어서 처리 >> 파일의 확장자는 js를 사용한다.
3. 태그내에서 이벤트 다음에 소스를 삽입 할 수 있다. (간단한 명령을 사용할때)
스크립트는 언제 실행이 될까?
1. function내에 있는 소스는 문서를 다 읽은 다음 적절한 이벤트에서 호출되면 동작한다.
- 적잘한 이벤트란 ? : 웹제작자가 사용자들의 특정 이벤트를 했을경우 동작할 수 있게 소스를 작업
- click, mouseover, mouseout, keydown, keyup 등등
2. function내 가 아닌 script태그내에 있는 소스는 브라우저에서 문서를 읽을때 위에서부터순서대로 실행된다.
예 )
<body onload="test()">
<span onclick="test()"> 함수호출 </span> <p>
<span onmouseover="test()"> 함수호출(마우스오버) </span>
</body>
alert("경고창"); // 사용자에 경고메세지를 보여줄때 주로 사용함
console.log("안녕하시오"); // 개발자가 소스내에 값을 확인하고자 할때 사용함
// 브라우저내에 직접 출력하는 방식
document.write("브라우저 내에 출력");
function test() // 문서를 읽은 후 함수를 통해 실행할 경우 이전의 내용은 사라진다.
{
document.write("출력해봄");
}
// 웹 문서내의 특정태그내에 출력하기 innerText, InnerHTML : 해당속성은 모든 태그가 가지는 속성
function test2()
{
document.getElementById("aa").innerText="<b>안녕</b>"; // 모든 내용을 text(글자)로만 인식함
document.getElementById("bb").innerHTML="<b>하세오</b>";// html태그는 태그로 인식해서 실행함
}
dom : document object model
문서의 각 요소(태그)에 접근하는 방식 : id, class, tag, name
function test() // dom을 통해 id로 접근
{
document.getElementById("aa").style.color="red";
현재 문서에서 id로 검색하여 'aa'인 요소를 찾아라
id의 요소는 같을 경우 가장 위에 있는 하나만 적용된다.
}
function test()
{
class속성을 가진 요소에 접근하기
class는 찾은 후에 접근시 무조건 배열로 접근이 된다. : 1게민 존재해도 [0]을 사용
document.getElementsByClassName("aa")[0].style.color="red";
// class는 자동배열이 됨으로 배열의 길이를 구하는 length속성을 사용 할 수 있다.
alert(document.getElementsByClassName("aa").length);
alert(document.getElementsByClassName("bb").length);
// class가 여러개 있는 경우 length를 통해 for문을 사용하여 속성을 변경
for(i=0;i<document.getElementsByClassName("bb").length;i++)
{
document.getElementsByClassName("bb")[i].style.color="blue";
}
}
function test()
{
var span = document.getElementsByTagName("span");
var div = document.getElementsByTagName("div");
span[0].style.color="blue";
for(i=0;i<div.length;i++)
{
div[i].style.color="red";
}
}
function test()
{
document.getElementsByName("aa")[0].style.color="red";
for(i=0;i<document.getElementsByName("aa").length;i++)
{
document.getElementsByName("bb")[i].style.color="blue";
}
// name의 속성을 부른다 >> 폼태그에서 많이 사용
}
function test()
{
// querySelector("요소명")은 여러개 존재하더라도 가장 앞에 있는 요소만
document.querySelector("span").style.color="red";
document.querySelector("div").style.color="blue";
//여러개 존재하는 요소에 다 접근하고자 할땐
//querySelectorAll()을 사용 >> 배열 처리
//document.querySelector("div").style.color="blue"; // 안됨
for(i=0;i<document.querySelectorAll("div").length;i++)
{
document.querySelectorAll("div")[i].style.color="blue";
}
}
국비 코딩