함수(function)
함수 만들기
<script>
function nightDayHandler(self){if(this.value==='night'){
target.style.backgroudColor='black'
target.style.color='white'
this.value='day'} else {target.style.backgroudColor='white'
target.style.color='black'
this.value='night'}}
</script>
<body>
<input type="button" value="night" onclick="
nightDayHandler(this)">
</body>onclick 내에 있는 this는 이 이벤트가 소속된 태그를 가리키도록 약속되어 있다.
그렇기에 독립된 함수를 만들게 되면 script 태그 내에서 this의 역할을 하지 못한다.
이 때 -> 매개변수의 이름을 self로 바꾸고 this로 되어있는 부분 전부 self 로 바꾸어 준다.
그리고 input 내의 onclick 내에 nightDayHandler(this)를 넣어줌.
Function
- 입력 - 매개변수(parameter)/ 인자(argument)
- 출력(return)
<script>
function sum(left,right){document.write(left+right)+'<br>'}
</script>script 태그 내에 sum(2,3)을 입력하면 화면에 값 5가 나옴.
sum(2,3) 내의 숫자 2,3을 인자(argument)라고 부른다.
sum(left,right) 내의 left, right를 매개변수(parameter)라고 부른다. 인자 값을 받아서 함수 안으로 매개해주는 변수라는 뜻.
Return
ex)일반 함수의 형태
function sunColorRed(left+right){document.write('<div style = "color:red">' + left + right + '<div>');}이 때 SumColor Red(2,3) 의 값 =23이 나옴.
why? Javascript는 문자열을 우선시한다!
숫자 + 숫자 = 숫자 / string + 숫자 = string / string + string = string
div 태그가 string 자료형이기 때문에 2,3도 문자로 인식한 것.
숫자를 우선시하고 싶다면 (left + right) 이렇게 괄호를 넣어주면 됌.
위의 함수를 오직 계산만 함으로써 다양한 맥락, 용도에서 사용하고 싶을 때 Return 함수를 쓰면 된다.
ex) Return 함수
<script>
function sum2(left + right){
return left + right; }
document.write(sum2(2,3)+'<br>')
document.write('<div style = 'color:red'>'+sum2(2,3)+'</div>')
document.write('<div style = 'font-size:3rem;'>'+sum2(2,3)+'</div>')
</script>다양한 형태의 값으로 출력될 수 있다.
객체(object)
객체(object) : 정리정돈 수단으로 함수를 쓴다. 함수를 쓰다보면 변수들이 많아져 다시 복잡해진다. 이때 연관된 함수와 연관된 변수를 grouping해서 잘 정리정돈하기 위한 도구이다. (폴더와 비슷한 개념)
+추가사항
만약, 어떤 코드가 어떤 의미였는지 파악하기 불명확할 경우 함수로 정해서 그 로직 이름을 붙여주면 된다!
객체의 형태
document.querySelector('')
document : 객체
querySelector : 객체 내의 함수 (메소드method)
Links.setColor('') 또한 마찬가지의 형태.
배열은 순서대로 정보가 저장이 되지만,
객체는 순서없이 정보가 저장된다. 이름이 있는 정리정돈 상자라고 보면 된다.
객체 쓰기와 읽기
<script>
var coworkers{ "programmer" : "egoing" ,
"designer" : "leezxhe" }
document.write("designer : " + coworkers.designer + "<br>")
</script>
데이터를 추가하고 싶다면,
coworkers.bookkeeper = "sally" ;
document.write("bookkeeper : " + coworkers.bookkeeper + "<br>")
coworkers["data scientist"] = "hani"
document.write("data scientist : " + coworkers["data scientist"])data scientist 와 같이 띄어쓰기를 하고 싶다면, coworkers[""] 의 형태로 적어줄 것.
Property (변수) : 객체에 포함된 변수
ex) coworkers.bookkeeper, coworkers.designer
객체와 반복문
생성된 객체에 어떤 data가 있는지 보기 위해 모조리 다 가져와야 하는 경우 반복문을 쓸 수 있다.
How? -> javascript object iteration(반복) 검색
for (var key in coworkers){ document.write(key + "<br>")}위의 코드를 통해 화면에 모든 key 값들이 나온다.
key : 가져오고 싶은 정보에 도달할 수 있기 때문에 key라고 부른다.
ex) programmer designer 등의 값이 출력이 된다.
data 값을 출력하고 싶다면,
for (var key in coworkers){ document.write(coworkers[key] + '<br>')}method 만들기
ex) ShowAll 이라는 method를 만들고 싶을 때
<script>
coworkers.ShowAll= function(){
for (var key in coworkers){ document.write(key + " : " + coworkers[key] + '<br>')}}
</script>결국은 function ShowAll(){} 와 같은 형태임.
This : ShowAll 이라는 함수 안에 소속된 객체를 가리키는 약속된 단어
객체를 this로 바꾸어주는게 좋다. why? 객체 이름이 바뀔 수 있는 위험을 줄이고자.
위의 메소드를 적었을 때 화면상 불필요하게 showall~~ 이 뜬다면 아래의 코드로 다시 적어둔다. (왜인지는 아직 모름,,)
if(key!=="ShowAll"){document.write(key + " : " + coworkers[key] + '<br>')} 객체의 활용
주의) 객체의 property에 , 붙이는 것 잊지말기!
if 내의 body의 color 설정은
document.body.style.backgroundColor = "black"
로 해줄 수 있다.
script 태그 내에서는
document.querySelector('body').style.backgroundColor = "black"
객체를 직접 만들기
ex)
var Body = {
setColor : function(color){
document.querySelector('body').style.color = color;},
setBackgroundColor : function(color){
document.querySelector('body').style.backgroundColor = color;}}
Javascript 파일 따로 만드는 법
script 내의 모든 내용들을 colors.js 라는 새로운 파일 내로 옮긴다.
그리고 본문에
<script src = "colors.js"></script>라고 적어준다.
좀 더 수정이 용이해진다.
