Javascript
프로그래밍 언어 중 하나로, 브라우저가 알아들을 수 있는 언어이다. 일반적인 프로그래밍 언어와 달리 하나의 완성된 프로그램보다는 코드 사이에 들어가 페이지에서 동작하고 움직이는 것들을 제어한다. head 안에 <script></script> 로 작성해서 사용한다.
Javascript 기본 문법 배우기
- 변수, 자료형(list,dict), 함수, 조건문, 반복문
- 변수
let a = 1 //let으로 변수 선언
let b = 2
console.log(a+b) //콘솔에 찍어내기(크롬페이지에서 F12). 테스트시에 사용해가면서 작업하면 편함
a+b // 3
a/b // 0.5
let first = 'Bob' //문자열은 ' ' 사용
let last = 'Lee'
- 자료형 : list
let b_list = [1,2,'hey',3] // []로 선언. 0번째 부터 시작한다.
// console.log()
b_list[1] // 1번째에 있는 2 를 출력
b_list[2] // 2번째에 있는 'hey'를 출력
b_list.push('헤이') // 후미에 리스트 추가하기
b_list // [1, 2, "hey", 3, "헤이"] 를 출력
b_list.length // 리스트의 길이 구하기. 5를 출력- 자료형 : dictionary
let b_dict = {'name':'Bob','age':21} // {}로 선언. key : value 묶음.
b_dict['name'] // 'Bob'을 출력
b_dict['age'] // 21을 출력
b_dict['height'] = 180 // 딕셔너리에 키:밸류 넣기
b_dict // {name: "Bob", age: 21, height: 180}을 출력- list + dictionary
names = [{'name':'bob','age':20},{'name':'carry','age':38}] // []list 안에 {}dictioinay가 있음.
new_name = {'name':'john','age':7} // dictionary
names.push(new_name) // names 리스트에 new_name이라는 딕셔너리를 추가한다.
// names의 값은? [{'name':'bob','age':20},{'name':'carry','age':38},{'name':'john','age':7}]
// names[2]['name']의 값은? 'john' ( names 리스트에서 두번째에 있는 'name'의 값은?)- 함수
function mysum(num1, num2) { //function 함수. mysum은 함수 이름. 변수들
alert('안녕!') //경고창에 안녕! 띄움
return num1 + num2 //num1+num2 결과값 반환
}
let result = mysum(2,3) //num1, num2 에 값이 들어가면 1)mysum 함수로 들어간다. 2)함수실행:경고창이 뜨고 확인을 누르면 3)return에 값이 들어간다.
console.log(result) // 콘솔에 11 찍힘.- 조건문
function is_adult(age){
if(age > 20){ // == 같다, != 다르다, && and, || or
alert('성인이에요')
} else if (age > 10) {
alert('청소년이에요')
} else {
alert('10살 이하!')
}
}
is_adult(12) // 경고창에 청소년이에요- 반복문
for (let i = 0; i < 100; i++) { // 변수 i 0부터 99까지 1씩 증가하며 console.log() 한다.
console.log(i);
}- 자주 쓰이는 리스트 + 딕셔너리 + 반복문 + 조건문 조합!!
let scores = [
{'name':'철수', 'score':90},
{'name':'영희', 'score':85},
{'name':'민수', 'score':70},
{'name':'형준', 'score':50},
{'name':'기남', 'score':68},
{'name':'동희', 'score':30},
] // name과 score로 된 딕셔너리들의 리스트
for (let i = 0 ; i < scores.length ; i++) { // 변수 i는 0부터 scores 리스트의 길이 전까지 (5까지)
if (scores[i]['score'] < 70) { // scores 리스트의 i(0~5)번째의 score 값이 70보다 작으면
console.log(scores[i]['name']); // 리스트의 i번째의 name 값을 출력한다.
}
}
//결과
//형준
//기남
//동희JQuery
Javascript로 복잡하게 써야하는 코드를 편하게 쓸 수 있게해주는 Javascript 라이브러리이다. 사용하기 위해선 <head>사이에 임포트가 필요하다. 또한 css와 마찬가지로 class로 이름을 주는 것 처럼, id로 이름을 준다.
- 임포트 코드
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>- jquery 문법 사이트
https://www.w3schools.com/jquery/jquery_get_started.asp
jQuery Get Started
W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.
www.w3schools.com
- ex)1 : $('#...').val()
<head>
<script>
a = $('#box1').val() /*변수 a에다가 box1의 이름을 가진 곳의 값을 넣는다.*/
console.log(a) /*로그에 변수 a 찍기 = box1의 들어있는 값*/
$('#box2').val('pw입력') /* box2의 이름을 가진곳에 'pw입력'문자열 값을 넣는다.
</script>
</head>
<body>
/*두개의 input박스에 id를 'box1', 'box2' 로 명시*/
<p>ID: <input id="box1" type="text"/></p>
<p>PW: <input id='box2' type="text"/></p>
/*버튼에 onclick함수 hi() 명시*/
<button onclick="hi()"> 로그인하기</button>
</div>
</body>- $('#...').val() 외에도 $('#...').hide() / $('#...').show() / $('#...').empty() / $('#...').split() 등 많은 문법이 있지만 외우려고 애쓸필요 없이 필요한 것은 그때그때 구글링해서 찾아쓰면 된다.
- 태그 내 html 입력하기
<script>
let title = '영화 제목이 들어갑니다';
let temp_html = `<div class="card-body"> //backtick(`)으로 감싼다. 코드 중간에 변수를 삽입할 수 있다.
<h5 class="card-title">${title}</h5> // ${...}
</div>`
$('#cards-box').append(temp_html); // id가 cards-box 인 div에서 temp_html 실행
</script>JSON
Javascript 문법을 따르는 문자기반의 데이터 포맷이다. 데이터를 저장, 전송 할 때 많이 사용되며, 통신방법도 문법도 아닌 데이터를 표시하는 방법이다. key : value 형식으로 이루어져있으며 크롬에서 JSON View를 설치하면 보기에 편하다.
- 클라이언트가 서버에 데이터를 요청할때 GET과 POST 방식이 많이 쓰이는데,
Get 요청은 통상적으로 데이터 조회(READ)를 요청할 때 많이 쓰이며, POST 요청은 데이터 생성(CREAT), 변경(UPDATE), 삭제(DELETE)를 요청할 때 많이 쓰인다.
Ajax
Javascript 에서 서버에 요청할 수 있는 기법이다. JQuery가 임포트 되어있어야 사용할 수 있다.
- Ajax로 GET 방식
<script>
function q1() { // 버튼 눌러 q1함수 실행
$('#names-q1').empty() // id=names-q1 클리어
$.ajax({
type: "GET", // GET 방식 요청
url: "http://spartacodingclub.shop/sparta_api/seoulbike", //요청할 url
data: {}, // 요청하며 함께 줄 데이터 ( GET 요청시엔 공백)
success: function (response) { // 서버에서 준 결과를 response 변수에 담는다.
let rows = response['getStationList']['row']
for (let i = 0; i < rows.length; i++) {
let name = rows[i]['stationName']
let rack = rows[i]['rackTotCnt']
let bike = rows[i]['parkingBikeTotCnt']
let temp_html = ``
if (bike < 5) {
temp_html = `<tr class="urgent">
<td>${name}</td>
<td>${rack}</td>
<td>${bike}</td>
</tr>`
} else {
temp_html = `<tr>
<td>${name}</td>
<td>${rack}</td>
<td>${bike}</td>
</tr>`
}
$('#names-q1').append(temp_html)
}
}
})
}
</script><body>
<div class="question-box">
<h2>2. 서울시 OpenAPI(실시간 따릉기 현황)를 이용하기</h2>
<p>모든 위치의 따릉이 현황을 보여주세요</p>
<p>업데이트 버튼을 누를 때마다 지웠다 새로 씌여져야 합니다.</p>
<button onclick="q1()">업데이트</button>
<table>
<thead>
<tr>
<td>거치대 위치</td>
<td>거치대 수</td>
<td>현재 거치된 따릉이 수</td>
</tr>
</thead>
<tbody id="names-q1">
</tbody>
</table>
</div>
</body>- 자주쓰는기능
$('#img-rtan').attr('src',url) : $("#바꿀곳아이디값").attr("src", 이미지URL);
$('#text-rtan').text(msg) : $("#바꿀곳아이디값").text("바꾸고 싶은 텍스트");
'AI 웹 개발 과정' 카테고리의 다른 글
| 05. 딥러닝 MLP / batch/ iteration/ epoch / activation function (0) | 2022.05.15 |
|---|---|
| github & Sourcetree (0) | 2022.05.03 |