JavaScript 를 통한 HTML 접근
- onclick 을 통해서 자바스크립트와 버튼을 연결시켜 줄 수 있다.
<script type="text/javascript">
function testFunction(){
alert("버튼을 눌렀구나!!")
}
</script>
<button onclick="testFunction()">버튼입니당</button>- HTML 내용을 작성을 해줄 수도 있다.
<div id="mydivid">
</div>
<script type="text/javascript">
let names = ["name1","name2","name3"]
document.getElementById("mydivid").innerHTML = names;
</script>
제이쿼리
제이쿼리를 이용해서 화면을 조금더 자유롭게 이용할 수 있다. 아래코드는 버튼을 클릭하면 div 영역의 위치를 옮겨준다.
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#move").click(function(){
$("div").animate({left:'100px'});
});
});
</script>
<style type="text/css">
div{
width: 100px;
height: 100px;
background-color: pink;
position: absolute;
}
</style>
</head>
<body>
<button id="move"> 움직입니다.</button>
<div>
쿠팡 언제 오지.....
</div>다음과 같이 쓸 수도 있다.
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(myTest)
function myTest(){
$("#myButton").click(addText);
};
function addText(){
$("#test").append("추가할 내용")
}
</script>
</head>
<body>
<div id="test">
</div>
<button id="myButton">버튼입니당</button>
내게 맞는 옷을 찾는중🔎