Notice
Recent Posts
Recent Comments
Link
컴퓨터는 잘못이 없다..
[JavaScript]자바 스크립트 시작하기 본문
Contents
접기
[javascript 영역과 javascript 함수의 의미]
<!--
#javascript영역
1. 크롬 - 우클릭 - 검사 - console : enter를 누르는 순간 자바 스크립트 코드 실행
2. p태그 안의 onclick 속성값으로 자바 스크립트가 올 수 있다.
3. 실행 예정인 자바 스크립트를 모아놓고 일괄적으로 수행시킬 수 있다.(2번의 속성값에 함수를 호출하면 된다.)
4. body태그 안의 <javascript> 영역은 페이지가 로딩되는 시점에 실행된다.
#함수의 의미
특정시점에 실행 예정인 자바 스크립트를 모아놓고 일괄적으로 수행시킬 수 있으며 모아놓는 곳을 함수라고 한다.
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>hello.html</title>
</head>
<body>
<!--안녕하세요를 클릭했을 때 (직접 자바스크립트 코드 집어넣기)-->
<!--onclick=”(안의 명령어는 작은따옴표로 밖이 큰따옴표이기 때문!)”-->
<p id="one" onclick="document.querySelector('#one').innerText='안녕히 가세요.';">안녕하세요</p>
<!--어쩌구 위에 마우스를 갖다 댔을 때(직접도 넣어보고 함수로도 넣어보기)-->
<p id="two" onmouseover="document.querySelector('#two').innerText='김구라';">어쩌구</p>
<p id="three" onmouseover="change();">저쩌구</p>
<!--아래 버튼을 클릭하면 id가 result로 지정된 p요소에 버튼을 클릭했네?가 나오게 하기-->
<button id="btn" onclick="change2();">눌러보셈</button>
<p id="result"></p>
<script>
//함수 : 특정시점에 실행 예정인 자바 스크립트를 모아놓고
//일괄적으로 수행시킬 수 있으며 모아놓는 곳을 함수라고 한다.
function change(){
document.querySelector("#three").innerText="해골";
document.querySelector("#three").style.color="red";
document.querySelector("#three").style.fontSize="100px";
}
function change2(){
document.querySelector("#result").innerText="버튼을 클릭했네?";
document.querySelector("#btn").style.color="blue";
document.sele
}
</script>
</body>
</html>
-> 위 코드의 결과
[각종 javaScript 함수 보기]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<p id="one" onmouseover="onOver();" onmouseout="onOut();">마우스를 올려보셈</p>
<img id="two" src="images/kim1.png" onclick="clicked()">
<div>
<img id="four" onclick = "a();" src="images/rabbit_1.png">
<button id="three" style="display: none;" onclick="b();">가즈아~</button>
</div>
<script>
function onOver(){
document.querySelector("#one").style.color="yellow";
}
function onOut(){
document.querySelector("#one").style.color="black";
}
function clicked(){
document.querySelector("#two").setAttribute("src","images/1.jpg");
}
function a(){
//버튼이 보이게 하기
document.querySelector("#three").style.display="inline";
//이미지가 안보이게 하기
//document.querySelector("#four").style.display="none";
//이미지가 다른 이미지로 바뀌기
document.querySelector("#four").setAttribute("src","images/1.jpg")
}
function b(){
location.href="https://www.google.com";
}
</script>
</body>
</html>
-> 위 코드의 결과
'공부 > JavaScript' 카테고리의 다른 글
[JavaScript]document.querySelector() 사용해보기 document.querySeletor()의 value와 innerText 사용해서 산술연산 예제(계산기) 풀어보기 (0) | 2020.11.04 |
---|---|
[JavaScript]number type, 대입연산자, 산술연산자, 연결연산자 (0) | 2020.11.04 |
[JavaScript]자바스크립트 7가지 데이터타입 (0) | 2020.11.04 |
Comments