티스토리 뷰

IT Skills/Frontend

JavaScript 과외 자료 (1)

E-yarn 2016. 12. 25. 19:55

<!DOCTYPE html>

<html>


<head>

<title>타이틀이 달리는곳</title>

<!-- jquery CDN -->

<script src="//code.jquery.com/jquery.min.js"></script>

<!-- 합쳐지고 최소화된 최신 CSS -->

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">


<!-- 합쳐지고 최소화된 최신 자바스크립트 -->

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>


<link rel="stylesheet" href="./this.css">




<script type="text/javascript">

<!-- 버튼을 클릭했을때 자바스크립트에 만든 함수가 input 안에있는 아이를 꺼내다가 라벨값을 바꿔주는 행위를 하게됨 -->

var imLabel = function( ){

alert("나는 클릭된 라벨이에요");

}



window.onload = function(){

<!-- 콘솔창을 보고싶으면 -->

<!-- IE(인터넷 익스플로러) = F12 -->

<!-- 크롬이나 다른 브라우저(파폭, 오페라 등)은 Ctrl+ Shift + i  -->


<!-- 아이디로 해당 태그를 검색한다. -->

var input = document.getElementById("thisInputId");

<!-- console.log 를 통해서 input이라는 var로 선언한 변수안에 집어넣어진 값을  console 창에 보여줄수있다. -->

console.log(input);

<!-- input안에 있는 내용, value 값을 표현해준다. CTRL + K + C--> 

console.log(input.value);

<!-- 위에 방식대로 안하고 요런식으로 가지고올수도 있다. -->

var thisisValue = document.getElementById("thisInputId").value;

console.log("이건 새로 받은 밸류값 : "+ thisisValue);

var label = document.getElementById("thisLabelId");

console.log(label);

console.log(label.innerHTML);

console.log("이제 바뀐값이야");

label.innerHTML = thisisValue;

<!-- 따로 선언한 함수형태 -->

var imFunction = function( functionvalue ){

alert("나는 새로 만들어진 함수에요");

alert("버튼이 클릭되었습니다. 이제 값이 바뀌어요.");

alert("바뀌게될 값은 : " + functionvalue);

}

<!-- 예를 들어 -->

<!-- public void imFunction( string hi){ -->

<!-- 처리할 내용. -->

<!-- } -->


<!-- 이제 바꿔봅시다 -->


var btn = document.getElementById("buttonId");

btn.onclick = function(){

var thisisValue = document.getElementById("thisInputId").value;

var label = document.getElementById("thisLabelId");

imFunction(thisisValue);

label.innerHTML = thisisValue;

}

<!-- 자바스크립트는 클라이언트에서 동작하는 언어다. -->

<!-- 자바스크립트는 따라서 -->

<!-- 클라이언트(사용자 환경, 사용자의 컴퓨터 즉 사용자가 현재 이 페이지를 연 브라우저가 해석을해서 동작시킨다.) -->

<!-- JSP ASP ASP .NET, PHP 이런애들은 모두다 서버에서 동작을 하는거야. -->

<!-- 그래서 위에 이런 행위를 하려면 모두다 서버를 통해서 한번 서버와 통신에서  -->

<!-- 서버가 저 태그? 변수 이런걸 선언하고 계산을해서 행위를 한다음 다시 사용자한테 보여주는 방식이잖아. -->

<!-- 하지만 자바스크립트는 그런형식이 아니지. -->

<!-- 그래서 클라이언트에서 처리해도되는 이런 행위나 서버 없이 간단하게 보안적으로 문제가없고 -->

<!-- 간단한 동작들을 처리할때 자바스크립트를 많이 사용한다. -->

}

</script>








</head>




<body>


<input type="text" id="thisInputId" name="thisInputName" value="나는값이다" >

<input type="button" class="btn btn-primary wid" id="buttonId" value ="나를 클릭해줘">  

<br>

<label id="thisLabelId" name="thisLabelName" onclick="imLabel();"> this is label </label>

<br><br><a href="javascript:imLabel();">나는 하이퍼링크 a태그 </a>

</body>


</html>



저작자표시

'IT Skills > Frontend' 카테고리의 다른 글

Javascript, Closer(클로저) 의 사용 예시 및 이해과정  (0) 2017.12.18
[Javascript] upload file size check 파일 사이즈 체크 (chrome/IE)  (0) 2017.10.13
Angular2 (1)  (0) 2016.12.25
Angular2 알아가보기 - 1차  (0) 2016.12.11
[script] 입/출력 데이터가 깨져서 나올때, encodeURIComponet  (0) 2016.09.29
공유하기 링크
댓글
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
TAG more
«   2024/05   »
일 월 화 수 목 금 토
1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 31
글 보관함