생활코딩_WEB2 JS요약

 

자바스크립트는 웹안에서 사용자와 상호작용할 수 있게 한다.

 

자바스크립트는 html문서 내에서

<script>

이사이에 넣어줄 수 있다.

</script>

 

div는 제목도 아니고 아무의미가 없고, 단지 css나 js로 대상을 선택하기 위한 태그다. 자동 줄바꿈이 된다.

span도 같은 역할을 하지만 자동 줄바꿈이 없다. 상황에 따라서 쓰면 된다.

 

class(.클래스명으로 사용)는 그룹핑, id(#아이디명으로 사용)는 타겟팅을 위해 사용한다.

id선택자에 대한 명령이 최우선으로 작동한다. 그다음은 class선택자, 그다음이 span선택자의 내용이 실행된다.

 

웹에서 동작하는 버튼과 같은 요소들에게 id를 부여한다음, 조건문으로 id 벨류값에 따라 style을 바꾸는 등의 상호작용을 할 수 있다.

 

반복되거나, 긴 문장을 id나 변수로 축약할 수 있다. 중복을 없애고 간결하게 관리하는 것을 리팩토링이라고 한다.

 

조건문을 쓸 때 유연하게 동작할 수 있도록 설계한다.

 

document.querySelector는 하나의 검색결과만 가져온다.

document.querySelectorAll은 여러개의 검색결과를 가져온다.

 

함수는 반복되는 기능(입력과 출력내용이 있는)을 효과적으로 관리할수 있도록 내용이 들어있는 상자다.

 

인자는 함수에서 괄호안에 들어갈 실제 값이고, 매개변수는 괄호안에 실제값을 지칭하는 변수다.

 

sum(2,3); //인자

 

function sum(left, right){ //매개변수

document.write(left+right);

}

 

리턴이용하기

 

function sum2(left, right){
return left+right;
}

 

이렇게 해두면 아래와 같이

필요에 따라, 인자와 얻어낼 값을 기입해서 간편히 쓸 수 있다.

document.write(sum2(3,3)+'<br>');

document.write('<div style="color:red">'+sum2(2,3)+'</div>');

document.write('<div style="font-size:3rem;">'+sum2(2,3)+'</div>');

 

리팩토링에 있어서 긴 코드를 함수와 객체로 정리하는 것은 필수다.

짧더라도 의미가 불명확한 코드는 함수로 만들어서 이름을 지어주는 것도 괜찮은 최적화 방법이다.

 

객체는 함수와 변수들을 담아 정리하는 폴더다

쩜으로 된 것은 객체다.

객체속의 함수는 메소드라고 부른다. 객체이름과 쩜 뒤에 오는 것이다.

배열은 순서대로 데이터를 저장한다면, 객체는 순서없이 데이터를 저장할 수 있다.

 

객체는 중괄호{}를 쓴다.

앞쪽에 있는 것이 키값이다.

var coworkers={

  "programmer":"egoing",

  "designer":"leezche"

};

 

객체값을 불러온다.

document.write("programmer :"+coworkers.programmer+"<br>");

document.write("designer :"+coworkers.designer+"<br>");

 

중간에 객체내용값을 추가할 수 있다.

coworkers.bookkeeper = "duru";

document.write("bookkeeper :"+coworkers.bookkeeper +"<br>");

 

띄어쓰기가 필요하다면 쩜을빼고 대괄호와 큰따옴표로 감싸주면 된다.

coworkers["data scientist"] = "teaho";

document.write("data scientist:"+coworkers["data scientist"]+"<br>");

 

객체 반복문쓰기

for(var key in coworkers){

  document.write(key+' : '+coworkers[key]+'<br>');

}

객체안의 키+[키값]를 불러올수있다.

 

객체프로퍼티와 메소드

아래 세개의 기능은 똑같다.

coworkers.showAll = function(){}

var showAll = function(){}

function showAll(){}

객체에 소속된 함수(showAll)나 변수(bookkeeper)를 프로퍼티 또는 메소드라고 부른다. 

 

이미 함수로 만든 것들을 객체안의 프로퍼티로 변환하기. 프로퍼티 사이에는 콤마를 찍는다.

var Body = {

  setColor: function(color){

   document.querySelector('body').style.color = color;

},

  setBackgroundColor: function(color){

   document.querySelector('body').style.backgroundColor = color;

}

 

 

불러와서 쓰기. Body와 Links객체속에 있는 메소드를 사용해서 컬러값을 바꿀수있다.

function nightDayHandler(self){

  var target = document.querySelector('body');

  if(self.value === 'night'){

     Body.setBackgroundColor('black');

     Body.setColor('white');

     self.value = 'day';

     Links.setColor('powderblue');

} else {

     Body.setBackgroundColor('white');

     Body.setColor('black');

     self.value = 'night';

     Links.setColor('black');

 

파일로 관리하기

문서마다 반복적으로 들어가는 스크립트를 js파일로 저장하고, 불러온다.

<script src="colors.js"></script>

 

제이쿼리 사용법

<script src= "https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> 입력후

color.js의 내용을 제이쿼리식으로 바꾼다.

 

$('a').css('color', color);

모든 a태그의 컬러를 파라미터 컬러입력 값으로 바꿔라.