Js에 대해서 배웠다.
Js는 웹페이지에 움직임을 줄 때 사용한다.
박스가 나왔다가 사라졌다거나
서버랑 통신을 하는데 사용하거나
Js는 범용성이 넓다. 서버를 만드는데도 사용할 수 있다고 한다.
Js에 들어가기 전
변수, 자료형, 함수, 조건문, 반복문
에 대해서 알아두면 Js를 잘 이용할 수 있다
변수
let a = 'hello'
console.log (a)console에 hello라는 값이 출력된다.
let // 선언
a // 를 변수로 지정 할 거다
= // 변수에 들어가는 값은
'hello' // 작은 따옴표 값을 선언 및 초기화
console // 콘솔
. // 의
log // 로그 작성
(a) // a라는 값문자열 변수 결합
let a = 'hello'
let b = 'nice to meet you'
console.log (a+b)이런 식으로 활용이 가능하다.
숫자형 변수 덧셈
let a = 8
let b = 1
console.log (a+b)을 입력하면 console에 9가 나온다.
자료형
리스트, 딕셔너리
탄생 이유 (꾸러미로 관리하고 싶어서)
- 리스트
let a = ['A', 'B', 'C']
console.log(a[0])
console에 A를 출력한다
모든 언어는 숫자를 0부터 센다고 한다.
- 딕셔너리
let me = {'name':'원호', 'age':30, 'height':182}
console.log(me['name'])console에 원호를 출력한다
조건문
let age = 15
if (age < 20) {
console.log('청소년입니다')
} else {
console.log('성인입니다')
}반복문
반복을 하려면 반복 대상이 있어야 한다.
어떤 꾸러미 순서대로 반복해라
let ages = [20,71,16,52,10,11]
ages.forEach(a = > {
console.log(a)
})ages를 돌면서 하나씩 빼서 console에 출력한다
let ages = [20,71,16,52,10,11]
ages.forEach(a = > {
if (a<20) {
console.log('청소년입니다')
} else {
console.log('성인입니다')
}
})ages를 돌면서 하나씩 빼면서 a가 20보다 작으면
console에 청소년입니다 를 출력
20보다 크면
성인입니다 를 출력한다.
함수
function name() {
}
함수는 같은 동작을 반복 하는 친구다
name을 부르면 name 안의 값을 반복 한다.
<button onclick="name()"> name이라는 함수 부르기</button>버튼에 onclick을 넣고 함수 이름을 넣어주면 클릭 할 때 마다 name의 함수를 동작한다.
JQuery
JQuery는 누가 만들어 놓은 Js 라이브러리다.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
이런 JQuery CDN을 가져오는 것 부터 시작한다.
JQuery를 사용할 땐 id 값을 붙여줘야 한다.
$('#id')을 입력하면 id값을 가리킨다.
뒤에 .을 붙이고 원하는 명령어를 입력하면 된다.
temphtml 써보기
temp_html =`` // (1 옆에 있는 물결에 적혀 있는 거 ` 백틱)
temp_html =`<p>${a}</p>`
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>js 연습하기</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<script>
function pracbutton() {
let other = ['저거', '요거', '이쪽', '저쪽']
$('#q1').empty()
let temp_html = `<p>${other}</p>`
$('#q1').append(temp_html)
}
</script>
<body>
<h1>연습해!</h1>
<button onclick="pracbutton()">버튼</button>
<div id="q1">
<p>이거를 다른 거로 바꿀거야</p>
</div>
</body>
</html>
'TIL' 카테고리의 다른 글
| 나의 미래 신문 홈페이지 (0) | 2023.09.28 |
|---|---|
| 내일배움캠프 9기 자바스프링 사전캠프 웹 개발 AtoZ 5주차 (0) | 2023.09.25 |
| 내일배움캠프 9기 자바스프링 사전캠프 웹 개발 AtoZ 4주차 (0) | 2023.09.25 |
| 내일배움캠프 9기 자바스프링 사전캠프 웹 개발 AtoZ 3주차 (0) | 2023.09.25 |
| 내일배움캠프 9기 자바스프링 사전캠프 웹 개발 AtoZ 1주차 (2) | 2023.09.25 |
