[JS] 생활코딩 강의 내용

도갱도갱·2022년 6월 10일
0

JS

목록 보기
1/15

생활코딩 강의 내용
https://opentutorials.org/course/3085

Event

onclick
onchange
onkeydown

데이터 타입 - 문자 & 숫자

데이터 타입

  • Boolean
  • Null
  • Underlined
  • Number
  • String
  • Symbol

문자연산자

javascript string 라고 검색해서 모질라 docs를 보면 다양한 연산자들을 확인할 수 있다.

"hello".length
"hello".indexOf('h')
  • length : 문자의 길이

  • toUpperCase() : 대문자로 변환

  • indexOf() : 문자열에서 특정 문자의 인덱스 반환. 대소문자 유효하다.

  • trim() : 공백제거



변수와 대입 연산자

	var x = 1;
	var y = 2;
	x = y;



조건문

if (A === B){}
else{ }



self와 this

  • this는 이벤트가 속해있는 자기 자신의 태그를 의미한다. 또는 객체 자신을 가르키기도 한다.
<input id="input-tag" type="button" value="value01"  onclick = "this.value = 'value02';">
  • <script> 내에서 JS 코드를 작성하여 태그에서 불러올 때 self를 사용한다.
<script>
  function value(self){
  self.value = 'value02';
  }
</script>

<input id="input-tag" type="button" value="value01"  onclick = "value(this);">



함수

<script>
document.write('<div> JS로 html 코드 작성 </div>');
</script>



객체

  • 중괄호를 이용해 나타내며 변수들을 저장할 수 있다. 객체에 소속된 변수들을 프로퍼티라고 한다.
var menu = {
"pasta":"1000",
"pizza": "2000"
"chicken": "3000"
}

document.write(menu.pasta)

menu['rice cake'] = '4000'
document.write(menu['rice cake'])
  • 객체의 값들은 key를 이용해 출력할 수 있다.
for(var key in menu){
  document.write(menu[key])
  }
  • 객체에 함수도 지정할 수 있다. 객체에 소속된 함수를 매소드라고 한다.
menu.allMenus = function(){
  for(var key in this){
    document.write(this[key])
    }
  }
  • 객체 함수는 다음과 같이 정의하기도 한다. 매소드의 이름에 대응되도록 함수임을 정의하고, 함수 정의가 끝나면 콤마로 구분한다.
var menu = {
  allMenus:function(color){
    var alist = document.querySelectorAll('a');
    var i = 0;
    while(i < alist.length){
      alist[i].style.color = color;
      i = i + 1;
    }
  },
  allMenus2:function(color){
  }
}



JS 파일로 분리하기

  • 별도의 JS 파일을 생성한 후 HTML 파일에서 불러올 수 있다.
    개발자도구 네트워크에서 확인할 수 있다.
<script src="~.js"></script>



라이브러리

JQuery

  • JQuery는 코드를 직관적이고 효율적으로 작성할 수 있도록 고안된 JS의 라이브러리이다.

  • CDN: Content Delivery Network
    ex) 구글에서 CDN (html)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  • $ 표시
    $(a)<a>를 모두 선택한다는 JQuery 문법이다.
    ex) HTML 모든 <a>의 color를 변경하는 코드
$('a').css('color','red')



Refactoring

  • 코드의 가독성과 유지보수의 편리성, 중복성 제거 등을 강화한 작업을 말한다.

0개의 댓글