UXUI 디자인 부트캠프/학습일지

24/04/25 학습일지 - 코딩 2주차: JQuery는 Javascript로 쓴 책만 모은 도서관이다

park1006 2024. 4. 25. 17:10

티스토리에 저장하기는 어려운 내용 같아서 본문 링크를 첨부하고 복기할 떄는 같이 읽어보면 좋겠다.

 

Javascript

  • 프로그래밍 언어의 하나
  • 브라우저에 명령을 내리는 표준 언어
  • 다양한 분야에서 사용되며 서버를 개설할 수 있어 프론트엔드와 백엔드 둘 다 가능함
  • java와는 별 상관이 없다...

 

Javascript 기초문법 1

  • 변수/기본연산
    • 변수: 태그 같은 거임
    • 프로그래밍 언어에서는 = 가 같다 의 개념이 아닌 오른쪽에 값을 왼쪽에 넣음
    • 변수 대입( a = 2 )의 의미→ 2를 a라는 변수에 넣는다
      1. 변수 선언
        • let a = 2
          a = 'Bob'
          // 처음 변수를 저장하려면, let을 앞에 붙여주세요!
          // 한 번 선언했으면, 다시 선언하지 않고 값을 넣습니다.
      2. 사칙연산 그리고 문자열 더하기
        • let a = 2
          let b = 3

          console.log(a+b) // = 5

          let c = '대한'
          let d = '민국'

          console.log(c+d) // = 대한민국
      3. 리스트
        1. 리스트: 순서를 지켜서 가지고 있는 형태(본문 참고)
          1. let a = ['사과','수박','딸기','감']
          2. console.log(a[1]) // 수박
          3. console.log(a.length) //4(리스트 개수)
          4. 컴퓨터는 0부터 세기 때문에  리스트에 들어있는 첫 번째 값은 [0]으로 불러옴
        2. 딕셔너리: 키(Key) : 밸류(Value) 값의 묶음
          1. let a = {'name':'영수','age':27}
          2. console.log(a['name']) // 영수
      4. 추가 문법
        • 나눗셈의 나머지
          • let a = 20
            let b = 7
          • a % b = 6
        • 특정 문자로 문자열을 분절
          • let myemail = 'sparta@gmail.com'

            let result = myemail .split('@') // ['sparta','gmail.com']

            result[0] // sparta
            result[1] // gmail.com

            let result2 = result[1].split('.') // ['gmail','com']

            result2[0] // gmail -> 우리가 알고 싶었던 것!
            result2[1] // com

            myemail .split('@')[1].split('.')[0] // gmail -> 간단하게 쓸 수도 있다!
      5. 반복문과 조건문
        • 반복문
          • forEach
          • let fruits = ['사과','배','감','귤']
            fruits .forEach((a) => {
            console.log(a)
            })
          • 리스트의 개수만큼 반복
        • 조건문
          • if
          • if (조건) {
            // 조건에 맞다면~
            } else {
            // ~가 아니라면~
            }
          • 예시
            • let age = 24

              if (age > 20) {
              console.log('성인입니다')
              } else {
              console .log('청소년입니다')
              }
        • 반복문+조건문
          • 예시
          • let ages = [12,15,20,25,17,37,24]

            ages .forEach((a)=> {
            if (a > 20) {
            console.log('성인입니다')
            } else {
            console.log('청소년입니다')
            }
            })

 

Javascript 활용문법(DOM)

  • 자바스크립트로 Alert 띄우기
    1. script 태그 안에 함수 제작
      • function hey(){
        alert('안녕!');
        }
    2. 버튼에 함수를 연결
      • <button class="form-button" type="button" onclick="hey()">영화 기록하기</button>
  • 자바스크립트로 HTML 조작
    • document: 웹문서
    • . 은 ~의 라는 의미
    • getElementById → html 요소 가져와 ById에 의해
    • 바꾸고 싶은 개체의 아이디를 넣고 바꿀 내용 적기
    • 예시: hey가 적용된 개체와 상호작용하면 hello가 적용된 개체의 color가 red로 설정됨
      • function hey(){
        alert('안녕!');
        document.getElementById('hello').style.color = 'red';
        }

 

JQuery 시작하기

  1. JQuery
    • Javascript를 미리 더 쉽게 작성해둔 것. 라이브러리
      • 순수 Javascript만 사용할 경우 코드가 복잡해짐
      • 브라우저 간 호환성 문제
    • Javascript와 JQuery 비교
      • Javascript
        • document.getElementById('hello').innerHTML = '안녕';
      • JQuery
        • $('#hello').html('안녕');
  2. JQuery의 사용