[Javascript] HTML에 자바스크립트의 출력물 넣기 - Input, Script

1. 자바스크립트의 내용을 html 문서 안에 삽입하는 방법 - <script>(내용)</script>

ex) <script>function helloworld(){alert("Hello World!");}</script> 

* 결과 보기 :

2. 입력한 스크립트를 html에서 표현하는 방법

1) input 명령어를 이용하는 방법 (태그를 확인하자!)

ex) <input name="b1" value="버튼이 만들어져요" type="button">

* 결과 : 

*input의 속성들

a. name : 개체의 이름. 자바스크립트에서 call 할 때 사용할 수 있다.

b. type : 개체의 종류. 여러가지가 있는데 대표적인 것을 꼽아보면 다음과 같다.

* Button -   Text -  File -

c. value : 개체의 값, 예를 들어 Button, Text 개체의 Value를 "안녕하세요!"로 하면 다음과 같이 나온다.

*  

d. size : Text 계열 개체의 크기를 지정하는 속성, 예를 들어 각 개체의 size를 5, 10, 20으로 지정하면 다음과 같다.

*   

※ Text 계열이 아닌 경우, style속성으로 수정할 수 있다.

e. onclick : 개체를 클릭했을 때 실행할 스크립트를 지정하는 속성.

Button개체의 onclick을 "chk()"로 하고 chk 함수의 내용이 alert("안녕하세요!")라면 다음과 같다.

*

f. readonly : Text 계열 개체의 내용을 수정할 수 없도록 한다. 그냥 readonly만 써주면 된다.

      * <input type="text" name="t1" value="U Cannot Modify This." readonly> = 

*input의 style속성

style 속성은 기존의 태그에서 속성을 부여하던 것들을 input의 value의 속성으로 부여할 수 있도록 한 것이다.

style의 속성을 여러개 부여하고 싶을 때는 각 속성을 세미콜론(;)으로 구분하면 된다.

가능한 속성은 다양하지만 보통 쓰이는 속성으로는 text-align, color, font, font-weight

* <input type="text" name="t2" value="Stylish." style="text-align:center; color:red; font-weight:bold">

2) 예시

a. <script>function punk(){var a;for(a=20;a>0;a--){alert("You should wait for "+a+"times haha");}}</script>

    <input type="button" name="button1" value="Do not Click" onclick="punk()">

     ⇒