11일차 - Javascript에 대해(0)

이상민·2024년 8월 7일

JavaScript TIL 내일배움캠프

TIL

목록 보기

10/50

자바스크립트란?

프로그래밍 언어 중 하나로, 브라우저가 알아들을 수 있는 언어를 의미한다.
클라이언트가 서버에 요청하면 서버가 클라이언트에게 주는 요소 중 하나(html,css,javascript)

자바스크립트 범용성

자바스크립트는 배워두면 매우 유용한 프로그램 언어이다. 왜냐하면 자바스크립트 하나로 프론트엔드, 백엔드 둘 다 가능하게 만들기 때문이다.
또 IOS나 안드로이드 앱, 게임 개발 엔진, 애플리케이션 앱 개발에도 널리 쓰이는중

Javascript의 기초문법을 알아보자

let 변수 선언

let b = 3
b = 'Ethan' // 문자열은 작은 따옴표로 감싸주기

// 처음 변수를 저장하려면, let을 앞에 붙여주기
// let으로 한 번 선언했으면, 다시 선언하지 않고 값을 넣기

let 선언으로 사칙연산 및 문자 더하기도 가능하다

let a = 16
let b = 14

console.log(a+b) // 30

let c = '양념'
let d = '갈비'

console.log(c+d) // 양념갈비

리스트 : 순서를 지켜서 가지고 있는 형태

let a = ['사과','수박','딸기','감'] // 로 선언 가능

console.log(a[0]) // 사과
console.log(a[1]) // 수박

//리스트 길이 구하기
console.log(a.length) //4

-컴퓨터는 0부터 세기 때문에 사과가 제일 첫번째인 0으로 불러와야 한다.

딕셔너리 : 키(Key)-밸류(Value) 값의 묶음

let a_dict = {}  // 딕셔너리 선언. 변수 이름은 아무렇게나 가능

// 또는,

let a = {'name':'철수','age':27} // 로 선언 가능

console.log(a)
console.log(a['name']) // 철수
console.log(a['age']) // 27

반복문

딕셔너리 형식의 자료를 하나하나 뽑아 쓰는 것은 미친짓이다. 이러한 문제를 해결하는 것이 바로 반복문!
그 중에서도 forEach를 사용해 나열해보자

fruits.forEach((a) => {
	console.log(a)
}) 
// fruits(과일) 의 요소를 하나씩 확인하는데 이름은 a라고 하자
// a는 b,c,zzz,fruit 어떤 걸로 해도 상관 X

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

조건문

반복문과 더불어 조건에 맞춰 실행을 다르게 해주는 조건문도 프로그래밍에선 빼놓을 수 없다.

if (조건) {
	// 조건에 충족한다면~
} else {
	// 그 외 라면~
}

만약 20살보다 크면 성인 작으면 청소년 이라고 구분해 출력하고 싶다면

let age = 18

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

20살보다 낮은 18이기 때문에 청소년이라고 뜨는 모습!

Javascript 활용문법(DOM)

자바스크립트로 Alert 띄우기

function hey(){
	alert('안녕!');
} // 먼저 함수를 만들어준다

<button class="form-button" type="button" onclick="hey()">영화 기록하기</button>
// 버튼을 만들어준뒤 onclick

JQuery 시작하기

JQuery란?

HTML의 요소들을 조작하는 Javascript를 미리 더 쉽게 작성해둔 것으로 라이브러리로 자바스크립트를 쓰는 이유는 웹을 움직이고 조작하기 위해서이다. 하지만 순수 javascript만 사용하면 길고 복잡해 이러한 문제를 해결하기 위해 JQuery라는 라이브러리를 사용한다.
Javascript로 길고 복잡하게 써야 하는 것을

document.getElementById('hello').innerHTML = '안녕';

아래처럼 jQuery를 사용하면 보다 직관적으로 쓸 수 있다.

$('#hello').html('안녕');

JQuery 사용하기

jQuery CDN

아래 코드를 가져와 와 사이에 붙여 넣어 준다.

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

그 다음 script 태그에 HiHi() 함수를 만들어 준 뒤,

<script>
function HiHi() {
alert('변경 완료 !');
        let a = ['사과', '배', '감', '귤']
        $('#list').text(a[3]) // 0부터 시작이니 3번째인 귤이 뜨게된다.
}
</script>
    <body>
        <div class="top-part">
            <h1>자바스크립트 문법 연습</h1>
        </div>
        <hr/>
        <br>
        <h2>1. 함수</h2>
        <div class="button-part">
            <button onclick="HiHi()">결과 확인하기!</button>
        </div>
        <div class="list-part">
            <h2>2. 리스트</h2>
            <div id="list">테스트</div> // 테스트가 귤로 바뀌게 된다.
        </div>
    </body>
</script>

JQuery 연습하기

.append() 를 활용하기

<script>
    function checkResult() {
	let fruits = ['사과','배','감','귤','수박']
	$('#q1').empty()
	fruits.forEach((a)=>{
		let temp_html = `<p>${a}</p>`
		$('#q1').append(temp_html)
	})
}
</script>

<body>
    <div class="top-part">
        <h1>자바스크립트 문법 연습하기!</h1>
    </div>
    <hr />
    <br>
    <h2>1. 함수</h2>
    <div class="button-part">
        <button onclick="checkResult()">결과 확인하기!</button> 
// 처음에는 과일 종류 표시만 있지만 결과 확인을 눌러 주면 사과,배,감,귤,수박이 나열되는것을 확인할수 있다.
    </div>
    <div class="list-part">
        <h2>2. 붙이기</h2>
        <div id="q1">
            <p>과일 종류</p>
        </div>
    </div>
</body>