웹

4일차 - JavaScript

DJ.Kang 2024. 7. 18. 20:46

◇ 기초문법

<script>
    function hey() {
        console.log('Hello World')
    }
</script>

<body>
    <button onclick="hey()">기록</button>
</body>

- 변수 선언

let a = 2
a = 'Bob' // 문자열은 작은 따옴표로

- 리스트

let a_list = []  // 리스트를 선언.
let a = ['사과','수박','딸기','감'] // 로 선언 가능

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

- 딕셔너리

let a_dict = {}  // 딕셔너리 선언.
let a = {'name':'영수','age':27} // 로 선언 가능

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

- 리스트 & 딕셔너리

let a = [
    {'name':'영수','age':27},
    {'name':'철수','age':15},
    {'name':'영희','age':20}
]
console.log(a[0]['name']) //영수
console.log(a[1]['age']) //15

※ 리스트 & 딕셔너리의 필요성 : 순서를 표시할 수 있고, 정보를 묶을 수 있다.

- 반복문

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

- 조건문

if (조건) {
    // 조건에 맞다면~
} else {
    // ~가 아니라면~
}

 

◇ JQuery

HTML요소들을 조작하는 Javascript를 더 쉽게 작성해둔 라이브러리

- import

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

- 사용

<div id="q1">테스트</div>

function checkResult() {
	let a = '사과'
	$('#q1').text(a)
}

 

- html코드 추가하기

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

 

◇ fetch

 

https://djhelloworld.tistory.com/85

 

4일차 - Javascript 비동기처리

◇ 비동기처리란?자바스크립트의 비동기 처리란 특정 코드의 연산이 끝날 때 까지 코드 실행을 멈추지 않고 다음 코드를 먼저 실행하는자바스크립트의 특성을 의미한다.◇ Promise 객체자바스크

djhelloworld.tistory.com