TIL

TIL 241003

muerha 2024. 10. 3. 23:10

 

 

웹개발 종합반 2주차

 

 

html, css 복습

 

<style>

@import url('해당 경로')

*{

font-family: 폰트 이름

}

</style> 

 

 

 

Javascript

 

자바스크립트란? 웹을 움직이게 하는 코드

 

웹 브라우저에서 실행되는 스크립트 언어로 사용되어 왔고, 많은 웹 개발자들이 Javascript를 사용하여 웹 애플리케이션을 구축하고 유지 관리함. 현재 모든 브라우저의 표준 프로그래밍 언어로 자리 잡았다.

 

자바와 자바스크립트의 차이? 아무 관련 없음

 

 

 

프로그래밍 언어 기억해야 할 것 5가지

 

변수

자료형

함수

조건문

반복

 

 

 

console.log()

 

Javascript 개발에서 가장 흔히 사용되는 디버깅 도구 중 하나

 

* 디버깅이란 컴퓨터 프로그램 개발 단계 중에 발생하는 시스템의 논리적인 오류나 비정상적 연산(버그)을 찾아내고 수정하는 작업 과정

 

 

 

변수 

 

값을 담아서 한방에 관리하기 위해 사용

 

변수 이름은 나중에 알아보기 쉽게 직관적으로 지어야한다.

 

 

 

자료형

 

 

리스트 

 

순서를 지켜서 가지고 있는 형태

대괄호 [ ] 안에 선언

        let a = ['사과', '감', '배']
        console.log(a[0]) // 사과
        console.log(a[1]) // 감
        console.log(a.length) // 3

 

 

 

딕셔너리

 

키(Key)와 밸류(Value) 값으로 이루어진 형태

중괄호 { } 안에 선언

        let person={'name':'bob', 'age':30, 'height':180}
        console.log(person['name']) // bob
        console.log(person['height']) // 180
        let name=person['name']
        let age=person['age']
        console.log(name, age) // bob 30

 

 

 

반복문

 

forEach() 함수

배열을 순회해서 각 요소를 콜백 함수로 처리하기 위한 함수
배열의 각 요소에 대해 주어진 콜백 함수를 적용해서 순서대로 한 번씩 실행한다.

        let fruits = ['사과', '배', '감', '귤']
        fruits.forEach((a) => {
            console.log(a)
        })

 

 

 

 

조건문

 

        let age=15;

        if(age < 20) {
            console.log('청소년입니다.')
        } else {
            console.log('성인입니다.')
        } // 청소년입니다.

 

 

 

반복문+조건문 합치기

 

        let ages = [15, 30, 28, 7, 40, 13];

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

 

 

 

 

함수

 

function 함수() {

}

 

 

Alert 띄우기

        function hey(){
            alert('안녕하세요');
        }

 

 

 

JQuery

 

Javascript를 미리 더 쉽게 작성해둔 라이브러리

 

누가 만들어 놓은 라이브러리를 가져와서 사용하는 것이기 때문에 쓰기 전에 미리 "임포트"를 해야한다.

 

<head>

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

</head>

 

css에서는 선택자로 class를 썼지만 JQuery에서는 id 값을 통해 특정 버튼/인풋박스/div/.. 등을 가리킴

 

$(’#아이디값’) 으로 어떤 html 태그를 바꿀 것인지 지정해준다.

 

 

 

백틱(``)

 

html 요소를 통째로 넣을 때 묶어주는 기호

문자와 변수를 함께 써줄 수 있도록 하는 특수기호

 

 

제이쿼리 나오자마자 머리가 하얘졌다. 계속 반복하면 익숙해질 수 있겠지..?

'TIL' 카테고리의 다른 글

TIL 241005  (0) 2024.10.05
TIL 241004_3  (0) 2024.10.04
TIL 241004_2  (0) 2024.10.04
TIL 241004_1  (0) 2024.10.04
TIL 241002  (0) 2024.10.02

'TIL'의 다른글

  • 현재글TIL 241003

관련글

티스토리툴바