최근 글 목록
-
- 포토샵33-sharpen필터(1)
- 진보호스팅
- 2004
-
- 포토샵32-Render필터
- 진보호스팅
- 2004
-
- 포토샵32-Pixelate필터
- 진보호스팅
- 2004
-
- 포토샵31-Noise필터
- 진보호스팅
- 2004
-
- 포토샵30-Distort필터
- 진보호스팅
- 2004
중에서
올가미 툴
다각형 올가미 툴
자석 올가미 툴
에 대한 설명입니다.
올가미 툴 원하는 영역을 자유롭게 선택할 수 있습니다.
올가미 툴 : 툴을 선택하고 마우스로 원하는 만큼 그리듯이 선택합니다.
다각형 올가미 툴 : 선택하려는 영역을 클릭하면서 직선으로 영역을 선택합니다.
자석 올가미 툴 : 색상 차이가 분명한 경계를 따라 선택할 때 유용합니다. 경계를 따라 마우스를 움직이면 영역이 선택됩니다.
옵션바
올가미 툴과 다각형 올가미 툴의 옵션은 선택툴의 옵션과 비슷합니다. 자석 올가미 툴에서 width는 올가미 폭을, Edge Contrast는 가장자리 대비를, Frequency는 선택선이 놓이는 곳에 나타나는 핸들의 발생수를 조절할 수 있습니다. 모두 수치가 높을수록 정교하게 선택할 수 있습니다.
올가미 툴 | 다각형 올가미 툴 | 자석 올가미 툴 |
중에서 에 대한 설명입니다.
이동mover 툴
선택한 영역을 움직일 때 사용합니다. 레이어를 움직일 때도 사용합니다.
원본 이미지 | Alt 키를 누르고 이동하면 복사되어 이동합니다. |
선택한 영역을 이동하면 이동한 자리는 배경색상으로 채워집니다. |
포토샵에서 하는 대부분의 일은 작업할 부분을 원하는 만큼 선택하는 것부터 시작합니다. 선택 영역이 없으면 그림 전체에 작업 결과가 적용되기 때문에 원하는 결과를 얻을 수 없습니다. 도구 상자에서 선택을 위한 툴은 선택툴, 라쏘툴, 마술봉 툴이 있습니다.
선택툴
사각 선택 툴 이미지에서 선택을 원하는 부분을 마우스로 클릭하고 드래그 하면 사각으로 선택할 수 있습니다. 선택한 이미지의 안쪽을 마우스로 클릭한 수 이동하면 선택한 틀만 이동할 수 있고, 선택영역을 해제하려면 이미지의 아무 곳이나 다시 클릭합니다.
원형 선택 툴 원형으로 이미지가 선택됩니다.
세로 선택 툴 세로로 한 픽셀이 선택됩니다
가로 선택 툴 가로로 한 픽셀이 선택됩니다.
옵션바
선택영역에서는 일반선택, 선택 더하기, 선택 빼기, 겹치는 부분만 선택하기 탭으로 선택영역을 조정할 수 있습니다. 단축키로도 선택영역을 조절할 수 있습니다. 선택영역을 더할 때는 먼저 선택한 후에 Shift키를 누르고 다시 선택을 하면 두 영역이 함께 선택됩니다. 마찬가지로 선택영역을 뺄 때는 먼저 선택한 후에 Alt키를 누른 채 다시 선택을 하면 먼저의 영역에서 나중에 선택한 영역이 빠지게 됩니다.
선택 더하기 | 선택 빼기 | 겹치는 부분만 선택하기 |
feather: 수치를 입력하면 선택한 가장자리가 부드러워집니다. 수치가 높을수록 더 부드럽게 됩니다.
feather=0 | feather=5 | feather=10 |
Anti-aliased: 이곳을 클릭하면 선택영역의 가장자리를 부드럽게 만들어줍니다. 꼭 직선영역을 선택할 경우가 아니라면 안티앨리어스를 선택하는 것이 좋습니다.
anti-aliased를 선택한 경우 | anti-aliased를 선택하지 않은 경우 경우 | 두 경우를 확대하여 보면 anti-aliased의 역할을 알 수 있습니다. |
1. 포토샵 시작
2. 포토샵 용어설명
포토샵을 실행하면 아래와 같이 작업화면이 뜹니다.
16. 파일 업로드하기
17. 복수의 조건들 검사하기
18. for 루프로 숫자 세기
19. 문자열을 숫자로, 정수로, 숫자를 문자열로 변환시키기
20. 페이지 로드에 반응하기
21. 상태바 메시지 디스플레이 하기
22. 대화형 버튼 만들기
23. 현재 날짜 디스플레이하기
24. 배열 만들기
25. 새로운 윈도우 열기, 윈도우 닫기
보안상의 이유로, 자바 스크립트는 이력 태그에 집어넣은 이름과 파일 업로드 요소 값만을 읽을 수 있다.
아래의 코드처럼, 유저가 파일을 선택했는지를 확인하는 데 value를 사용할 수 있다.
FileUpload 오브젝트
|
if(document.forms[0].theFie.value == ""){
alert("Please specify a file to upload.")
if 절의 괄호 안에 에러 메시지를 집어넣는다. 유저가 파일을 선택하기 전에 양식을 전송하려고 하면 자바 스크립트가 이 문장을 디스플레이하게 된다.■ 코드 실행 결과
|
function analyze(theForm){
검사하고 있는 양식을 참조하는 하나의 인자로 기능을 정의한다.if (theForm.group[0].checked && theForm.group2[0].checked) {
onClick="analyze(this.Form)"
HTML 태그 내에 이벤트 핸들러를 위치시켜 검사 기능을 호출한다. 이것을 this.form으로 패스하여 작업하고 있는 양식을 참조하는 것을 짧게 줄인다.■ 코드 실행 결과
{
document.write("
■ 코드 실행 결과
유저가 입력한 텍스트를 숫자로 변환시키는 데는 eval()을 가장 자우 사용하게 된다. eval()는 그것이 스크립트의 일부인 것처럼 부여한 텍스트를 읽는다.(이 것은 변환 작업은 부수적인 효과일 뿐이다.). 코드행을 검사하는 것과 같은 몇가지 목적을 위해서(아래의 코드 참조), 원래의 목적으로 eval 명령을 사용하게 된다.
document.forms[0].out.value = eval(document.forms[0].field.value)
■ 코드 실행 결과
유저가 숫자를 입력할지 잘 모르는 상황에서도 이런 명령을 사용할 수 있다. eval()에 글자를 부여하면 에러 메시지가 나타나는 반면에, parsInt()와 parseFloat()는 "숫자가 아님"을 나타내는 NaN을 반영하게 된다.
var a = parseInt(document.it.num.value)
■ 코드 실행 결과
document.forms[0].outfiedl.value = num.toString(base)
■ 코드 실행 결과
페이지가 아직 로드되고 있을 때 스크립트가 페이지의 일부로 접근하려 하면, 에러 메시지가 나타난다. 이런 현상을 피하려면, onLoad를 사용하여 페이지가 로드되자마자 스크립트가 트리거되도록해야 한다.
■ 코드 실행 결과
상태 바의 텍스트를 개별화하는 것은 자바 스크립트의 용도 중 가장 자주 사용되는 것이다. 이 것은 defaultStatus와 status로 할 수 있다. status에 배정된 텍스트는 즉각 디스플레이되는데, 브라우저가 다음에 메시지를 디스플레이할 때 사라진다. 보통 status는 유저가 링크 위로 이동하는 작업과 같은 유저의 이벤트와 메시지를 연계시키는 데 사용된다.
defaultStatus는 페이지가 로드되어 있는 한 상태 텍스트의 초기값을 설정해 준다. 이것은 변경되지 않고, 위의 코드에서처럼 아무 메시지도 나타나지 않을 경우에 보이게 되는 메시지를 디스플레이하는 데 사용한다.
■ 코드 실행 결과
마우스 위치 핸들러와 이미지 소스를 사용하여 대화형 버튼들을 만들 수 있다.
var down = new Image()
스크립트 내에 Image 생성자를 사용하여 새로운 이미지를 만든다.down.src = "buttonDown.gif"
새로운 이미지의 변수 이름과 그 뒤에 .src=를 써 넣고 캐시에 미리 로드될 이미지의 이름을 써 넣는다.■ 코드 실행 결과
var today = new Date()
■ 코드 실행 결과
넷스케이프3.0의 Array 생성자로 배열들을 만들 수 있다. 배열 엔트리에 집어 넣을 것과 엔트리 수를 지정할 수 있다.
var colors = new Array(3)
colors[0] = myColor
특정 엔트리를 채우려면, 배열 이름과 엔트리 번호를 대괄호 안에 써 넣는다. 등호 표시를 사용하여 그것에 값을 배정한다.■ 코드 실행 결과
var myWin = window.open("beauty.htm"),"picture
■ 코드 실행 결과
페이지가 두번째 윈도우를 열었다면, 그것을 열을 때 사용했던 변수 이름으로 그것을 닫을 수 있다. 현재 윈도우를 닫으려면 self를 사용하고, 현재 윈도우를 열어 준 윈도우를 닫으려면 opener를 사용한다.
onClick="self.close()"
■ 코드 실행 결과
11. 이벤트와 이벤트 핸들러
12. 함수 정의하기
13. 숨겨진 요소들
14. 자바스크립트와 CGI
15. 양식 전송 트리거 하기
|
일반적으로 이벤트 헨들러를 통해 스크립트의 제동 장치 역할을 부여하게 된다. 유저가 버튼을 클릭하면, 자바 스크립트로 강화된 페이지가 반응을 하게 된다. 이것은 onClick에 원하는 반응을 배정하여 할 수 있다. 웹 페이지의 각 부분은 어떤 특정한 이벤트 핸들러로써 작동된다.
대부분의 경우, 이런 이벤트 핸들러의 이름들은 자신들이 작동될 때를 나타내 준다. 하지만 몇 가지는 설명이 필요하다. 텍스트 난이나 윈도우로 이동하여 초점을 맞추는 이벤트는 onFocus로 작동된다. 난이나 윈도우를 떠나는 것은 onBlur로 작동된다. 텍스트 난을 떠나기 전에 유저가 텍스트를 입력하면, onBlur로 작동된다. 텍스트 난을 떠나기 전에 유저가 텍스트를 입력하면, onBlur가 아니라 onChange로 작동된다.
어떤 이벤트들은 유저의 행동에 직접적으로 개입하지 않는다. 예를 들어, onError는 스크립트가 작동시에 에러를 만났을 때 반응을 유발시킨다.
이벤트 핸들러에 스크립트의 부분을 할당하여 그 이벤트가 (on-다음에 오는 것)발생할 때 그 스크립트 부분을 자바 스크립트가 읽도록 해 놓는다. 작동시키고 싶은 코드를 인용 부호 안에 집어넣어야 한다.
글쓰지 마세요:
함수를 사용하기 전에 그것을 정의해야 하므로, 스크립트를 제목 태그 내에 위치시켜 그것이 먼저 읽히게끔 해 놓는다.
function diplay()
{ alert("Have a Great Day!") }
■ 코드 실행 결과
페이지 상의 거의 모든 곳에서 몇 번이고 함수를 호출할 수 있다. 함수를 트리거하는 데는 보통 이벤트 핸들러를 사용하게 된다.
■ 코드 실행 결과
document.links[0].onclick = shootTwo
■ 코드 실행 결과
제 강좌에 나와 있는 예제들을 버튼들을 자주 사용한다. 다음의 표는 버튼 오브젝트의 특성들을 설명하고 있다. 이런 표들은 이 강좌의 나머지 부분들에서도 이벤트 핸들러, 특성, 오브젝트와 연계된 방식들에 대해서 말할 때 사용되고 있다.
버튼 오브젝트
|
■ 코드 실행 결과
라디오 오브젝트
|
function tellMe(theForm) {
한 개의 인자를 채택하는 함수를 정의한다. 인자는 양식 참조를 저장하게 된다.alert(theForm.group[0].checked)}
onClick="tellme(this.form)"
HTML 버튼 태그 내에서 onClick에 함수를 배정한다. 이것을 this.form으로 패스하면 한 단어로 정확한 양식을 나타낼 수 있다.■ 코드 실행 결과
체크 박스 오브젝트
|
alert(document.forms[0].one.checked)
onClick="display()"
원하는 HTML 태그 내에서, 디스플레이 함수를 이벤트 핸들러에('함수 호출하기' 참조) 배정한다.■ 코드 실행 결과
텍스트 오브젝트
|
function doIt(theForm){
텍스트란의 양식을 참조하는 하나의 인자로 함수를 정의한다.theForm.text2.value=theForm.text1.value
onBlur=doIt(this.Form)
■ 코드 실행 결과
선택 메뉴에는 여러 개의 옵션이 들어 있다. 자바 스크립트는 이런 옵션들의 각각을 서버 오브젝트로 취급한다. options[]를 통해서 메뉴에 있는 각각의 항목에 접근할 수 있다.
선택 오브젝트
|
function display(selector){
선택 리스트를 참조하는 하나의 인자로 함수를 정의한다.selector.options[selector.selectedIndex].text
onChange="display(this)"
HTML 태그에 있는 이벤트 핸들러로 함수를 트리거 한다.■ 코드 실행 결과
복수의 페이지들로 작업할 경우, 숨겨진 오브젝트를 사용해서 복수의 페이지들이 펼쳐 있는 양식을 만들 수 있다. 한 양식에서 다른 양식으로 정보를 패스하고 싶을 때마다 사용한다.
위의 코드에서처럼 두 개의 HTML 양식을 만든다. 두번째 내에 숨겨진 요소를 정의한다. 그것에 이름을 붙이면 더 쉽게 찾아낼 수 있다.
document.forms[1].hider.value = document.forms[0].elements[0].value
자바 스크립트는 어떤 상태에 있는 CGI를 대치할 수 있는데, 때로는 서버에게 정보를 보내야만 할 때도 있다. 자바 스크립트를 이용하여 전송하기 전에 양식들을 검증함으로써 이 처리 과정을 개선시킬 수 있다.
양식 오브젝트
|
양식들에는 CGI 전송에 특별하게 적용되는 많은 특성들(action, method, target, encoding)이 포함된다. CGI를 능숙하게 사용할 줄 안다면, 이런 속성들을 HTML에 설정해 놓았을 것이다.
기본적인 배정 문장을 사용하여 스크립트에서 그것들을 변경할 수도 있다. 예를 들어 새로운 값을 action에 배정하면 두 개의 서버 사이에서 CGI 조회들을 분리시킬 수도 있고 여러 개의 CGI 애플리케이션들에 단일 HTML 양식을 사용할 수 있다.
유저가 전송 버튼을 클릭하면 HTML에 ACTION으로 배정한 URL로 양식 데이터가 보내진다. 아래의 코드에서처럼, 스크립트 내에서도 양식 전송을 트리거할 수 있다.
function checker(theForm){
양식을 참조하는 하나의 인자로 기능을 정의합니다.if (confirm("Are you ready to submit this information?")) {theForm.submit()}}
onChange = "checker(this.Form)"
기능을 트리거하는데 이벤트 핸들러를 사용한다. 기능을 this.form으로 패스하여 기능에서의 주소 지정을 짧게 만든다.■ 코드 실행 결과
8. 자바스크립트 활용하기
9. 변수들
10. 오브젝트에 대하여
alert("message")
document.write(confirm("message"))
document.write(prompt("message","")
■ 코드 실행 결과
아래의 코드에서처럼 var라는 키워드를 사용하여 변수를 정의한다. 일단 정의하고 나면, 그것에 부여한 이름으로 변수를 참조할 수 있다. 다음 규칙에 의해 변수의 이름을 선정해야 한다.
브랜드나 모델과 같은 질은 특성(property)라고 한다. 애플리케이션을 작동시키는 것과 같은 수행 작업은 방식(method)이라고 부른다.
예를 들어, 페이지에 HTML을 쓰려면, document.write()를 사용한다('자바스크립트에서 HTML 쓰기' 참조). 이 코드에서 write()는 도큐멘트라고 부르는 오브젝트에 속해 있는 방식이다. 오브젝트의 특성이나 방식을 나타내는 데 마침표를 사용한다. 이런 시스템을 도트구문 이라고 한다.
오브젝트 지향은 이런 명령 시스템을 사용하지 않는 작업 과정 언어들에 많은 이점을 가지고 있다. 오브젝트는 관련 정보와 명령어들을 논리적인 그룹들에 위치시켜서 더 다루기 쉽게 해준다. 오브젝트는 관련 정보와 명령어들을 논리적인 그룹들에 위치시켜서 더 다루기 쉽게 해준다. 예를 들면 document는 웹 도큐멘트에 들어 있는 링크나 이미지로부터 그 배경색에 이르기까지 웹 도큐멘트의 부분들을 포함한다.
자바 스크립트는 오브젝트의 계층 구조를 이용하여 페이지의 부분들로 접근하고 조직한다. 다른 모든 것을 담고 있는 오브젝트인 브라우저 윈도우가 맨 위에 위치한다. 이 오브젝트는 자신의 특성들과 방식들을 갖고 있다. 윈도우 내에 자리잡고 있는 모든 서브 오브젝트를 특성으로서 다룰 수 있다.
특성이나 방식과 같은 서브 오브젝트들은 도트 구문을 통해서 부모 오브젝트들과 연계되어 있다. 이런 서브 오브젝트들도 자신의 특성, 방식, 그리고 서브 오브젝트를 가질 수 있다.
자바 스크립트를 마스트하고 페이지의 부분들을 작성하려면, 그 계층 구조를 배워야 한다.
현재의 날짜나 산술적인 상수처럼 페이지에는 아무 작용도 하지 않는 정보를 다루어야 할 때도 있다. 자바스크립트는 계층 구조의 일부가 아닌 내장되어 있는 오브젝트들을 통해서 이런 일을 해준다. 계층 구조에 있는 것과는 달리, 내장되어 있는 오브젝트들은 윈도우의 서브 오브젝트로서 나타낼 수 없다.
최상위 단계
자바 스크립트의 계층 구조에서 최상위 단계는 브라우저 윈도우이다. 이것은 Window로 나타낸다. 각 윈도우는 현재의 주소를 위치와 히스토리 상에서의 이전의 URL에 담고 있다.
유저가 보고 있는 페이지는 윈도우 내에 있다. HTML로 정의한 모든 것을 포함하여 이 페이지의 내용들은 세번째 서브 오브젝트인 도큐멘트를 구성한다. 도큐멘트에는 모든 닻, 링크, 이미지, 그리고 페이지 상의 양식들이 들어 있다.
하위 단계
도큐멘트의 각 서브오브젝트를 여러 개의 요소들로 더 세분화 할 수 있다. 예를 들면 forms[]는 여러 개의 요소들을 담고 있고, 그 각각은 자신의 특성을 지니고 있다.
네번째 단계의 네 개의 오브젝트들은 모두 배열이라고 하는 것으로 정보를 담고 있다. 자바 스크립트는 배열을 사용하여 페이지에 비슷한 부분들을 번호순으로 조직한다.
예를 들어, 이미지 오브젝트는 그 페이지의 모든 이미지들을 담고 있다. 특정 이미지로 접근하려면 images[]를 써넣고 그 괄호 안에 번호를 써 넣어야 한다.
자바 스크립트는 HTML에 나타나는 HTML 순서로 이미지들과 모든 배열 입력 내용들을 담고 있다. 이 순서는 항상 0으로 시작된다. 페이지 상의 맨 처음 이미지는 document.images[0]이라는 코드로 나타내고, 두번째 것은 document.images[1]로 나타내는 식이다.
1. 출력문
2. HTML에 스크립트 삽입하기
3. 별개의 파일에서의 스크립트
4. 자바스크립트가 아닌 내용
5. 자바스크립트에서 HTML 쓰기
6. 미리 포맷된 텍스트 쓰기
7. 스크립트에 주석 삽입하기
자바 스크립트를 배웁시다.
자바 스크립트를 배웁시다.
자바 스크립트를 배웁시다.") 명령이 HTML 문서로의 출력 작업을 수행한다. 이 명령은 현재의 문서에 문자열을 출력할 것을 명령하고 있다. 이 문자열에서는 HTML 명령 또는 추가로 문자 포맷 명령이 포함될 수 있다. 예를 들어, document.write("
자바 스크립트를 배웁시다")라는 명령을 사용하여 그 문자열의 일부를 볼드체로 나타낼 수도 있다. 밑의 그림에서 HTML의 "자바스크립트" 메시지 전에 나오는 자바 스크립트의 "자바스크립트" 메시지를 주의하여 보면 이것은 자바 스크립트 코드를 문서의 앞부분, 그러니까 HTML 메시지의 본문 앞에 위치시켰기 때문이다. 만약 HTML 문서의 앞부분에, 그리고 자바 스크립트 본문의 앞부분에 위치되었다면 그 순서가 뒤바뀌었을 것이다.
페이지의 제목 부분과 본문 부분에 스크립트를 배치시킬 수 있다. 자바 스크립트를 보다 능숙하게 사용하게 되면, 스크립트를 제목에 집어넣어 그것이 맨 처음으로 로드되게 해 놓을 수 있다.
HTML에 스크립트 삽입하기
브라우저가 자신의 스크립트를 알게 하려면, 그 파일이 있는 장소를 알려 주어야 한다. 이것은 스크립트 태그에 있는 소스 속성으로 가능하다. 별개의 소스 파일들을 사용하면 유저들이 읽지 못하도록 주석을 달 필요가 없다. 외부 소스 도큐먼트를 사용하기 전에, 자신의 서버 관리자로 하여금 MIME 유형의 application/x-javascript에 .js를 붙여 놓도록 해야 한다.
|
별개의 파일에 스크립트 위치시키기
넷스케이프 3.0은 noscript의 시작과 끝맺음 태그 사이에 있는 모든 것을 무시한다. 이 두 태그 내에 다른 대체 내용을 집어넣을 수 있다.
이 noscript 태그는 넷스케이프 3.0에 새로 등장한 것이다. 만약 유저가 네트웍 설정에서 자바스크립트를 불능으로 해 놓아도 텍스트가 디스플레이된다.
자바 스크립트를 해석하지 못하는 브라우저를 위한 메시지 담기
자바 스크립트에 대해 더 배우게 되면, document.write()를 이용하여 HTML 도큐먼트를 유저의 상호 반응에 따라 개별화시킬 수 있다는 것을 알게 될 것이다.
스크립트로부터 텍스트와 HTML 쓰기
document.write(" 강좌!)
|
document.writeln("
안녕하세요")
미리 포맷된 텍스트 블록의 시작을 나타내는 미리 포맷 태그를 써넣는다.
밑의 코드는 주석에 대해 보여주고 있다. 스크립트가 작동하는 방법을 꼭 이해할 필요는 없지만, 주석이 사용되는 방법은 꼭 검사해 보는 것이 좋다.
자바 스크립트에는 단일 행과 복수 행의 두 가지 유형의 주석이 있다. 단일 행 주석은 브라우저로 하여금 그 뒤에 나오는 모든 것을 무시하게끔 한다. 복수행 주석은 무시될 코드 블록을 표시해 준다. 스크립트에 주석 삽입하기
/*comment*/
1. 자바스크립트의 산술표현식
2. 선언문과 지정문
3. 자바스크립트의 숫자 표현
|
2.1. var 문장
자바 스크립트에서 var 문장은 변수를 선언할 때 사용된다. 이것은 int, float, double(이 외에도 많음) 같은 뚜렷한 데이터 형식을 사용하는 C, C++, 자바와는 근본적으로 다르다. 자바 스크립트 변수 이름은 문자 또는 밑줄 문자( _ )로 시작될 수 있으며, 그 뒤에 숫자, 문자, 밑줄 문자 등을 포함할 수 있다. 물론 자바 스크립트 예약어들은 적절한 변수 이름이 아니므로 사용하면 안된다. 다음의 코드는 몇 가지의 부적절한 변수 이름과 적절한 변수 이름을 보여주고 있다.
var 2p1; // 부적절한 변수 이름이다. 숫자 2를 처음에 쓸 수 없다.
var with; // 부적절한 변수 이름이다. 자바 스크립트 예약어를 사용할 수 없다.
var p21; // 적절한 변수 이름이다.
var number_of_widgets; // 적절한 변수 이름이다.
일반적으로 변수를 선언할 때 그것에 0 또는 빈 문자열을 할당함으로써 그것을 초기화하는 작업도 같이 해야 한다. 그렇게 변수들을 명확히 초기화하지 않으면 그 변수에는 null 값이 배정된다. 그래서 나중에 여러분이 먼저 그 변수에 아무런 값도 지정하지도 않고서, 그 변수를 숫자로서 참조하려고 하면 인터프리터는 에러를 발생시킨다. 다음의 코드는 이러한 예를 보여주고 있다.
var totalUser; // 변수를 선언하고 그 변수를 0으로 초기화한다.
var newUser; // 변수만 선언한다.
totalUsers=totalUsers+nesUsers; // 에러가 발생한다.
편의상 자바 스크립트는 다음과 같이 여러분이 하나의 문장에서 콤마로 분리하여 여러 개의 변수들을 선언할 수 있도록 해준다.
var rate=0, distance=100;
물론, 초기화할 때는 여러 가지의 형식을 사용할 수 있다. 다음의 예는 먼저 선언된 변수를 어떤 문자에 곱합니다. 그것은 문법적으로 완전한 자바 스크립트 문장이다.var rate=0
var newRate=rate*1.1;
2.2. 옵션으로서의 var
변수를 선언하고 초기화하는 데 var를 사용해도 되고, 안해도 된다. 그러나 여러분이 이 변수를 선언하고 초기화하고자 한다는 사실을 명확하게 나타내는 데 var를 사용한다는 것은 바람직한 일이다.
만약 여러분이 var를 사용하지 않았을 때 그 변수가 존재하지 않는 것이라면 그 변수는 묵시적으로 또는 자동적으로 선언될 것이다. 만약 그 변수가 이미 선언되어 있는 것이라면 그 변수에는 단지 새로운 값이 할당될 것이다. 만약 여러분이 함수를 사용하기 시작한다면 여러분은 로컬 변수를 선언하는 데 var를 사용하여야 똑같은 이름의 글로벌(global) 변수의 값이 부주의로 바뀌는 것을 막을 수 있다. 여기에 있는 코드는 변수를 선언하고 초기화하는 두 가지의 방법을 보여주고 있다.
첫 번째 줄은 var를 사용하여 변수를 선언하고 정의하려 한다는 사실을 명확하게 밝히고 있다. 두 번째 줄에서는 var를 사용하고 있지 않다.
그러므로 그전의 코드를 살펴보지 않는 한 이것이 새로운 변수를 선언하고 그 것을 초기화하는 것인지, 아니면 기존의 변수 그냥 새로운 값을 할당하는 것인지를 알 수 없다.
var count=0; // 이 방법을 권장한다.
// 아래의 코드도 새로운 변수를 선언하고 초기화하는 일을 수행한다. 그러나 이렇게 하면 여러분의 프로그램을 알아보기 어렵게 된다.numWidget=0;
3.1. 정수값의 표현
자바 스크립트는 정수를 10진수, 16진수, 8진수 등으로 표시할 수 있다. 10진수로 표시되는 정수가 디폴트로서, 앞에 문자를 붙일 필요가 없다. 16진수는 Ox 또는 OX 문자로 시작되며, 0에서 9까지의 숫자와 f 또는 A에서 F까지의 문자들을 가진다. 8진수는 0으로 시작되며, 0에서 7까지의 숫자만을 가질 수 있다. 다음의 예는 255라는 십진수를 나타내는 각각의 형식을 보여주고 있다.
dec = 255;
hex = Oxff;
oct = 0377;
fp = 1.732;
fp = 2E-7;
fp = -3.3e5; fp = .5e3;
HTML 태그 중의 LI 태그와 비교하면서 알아보자.
속성 속성값 설명 list-style-type disc | circle | square | decimal | loer-roman | upper-roman | lower-alpha | upper-alpha | none Display 속성값이 list-item인 태그(UL, LI)에 적용할 수 있고, 상속된다. 초기값은 disc이다. list-style-position inside | outside Display 속성값이 list-item인 요소에 적용할 수 있고, 상속된다. 초기값은 outside이다. list-style-image URL | none Display 속성값이 list-item인 요소에 적용할 수 있고, 상속된다. 초기값은 none이다. list-style 'list-style-type' | 'list-style-position' | 'list-style-image' Display 속성값이 list-item인 요소에 적용할 수 있고, 상속된다. 대표속성은 초기값이 없다.
다음의 코드를 실행시켜 보고 결과를 예측해 보자.
| |
최근 댓글 목록