카테고리 없음
스파르타코딩클럽 웹개발 JAVA SCRIPT
Hanachoi
2022. 4. 11. 01:05
#JAVA Script 맛보기
- 브라우저가 유일하게 알아 들을 수 있는 컴퓨터 언어, 명령을 내리면 그걸 알아듣고 동작을 수행해달라고 소통할 수 있는 언어
- Java와 Java script는 연관관계가 전혀 없다
- 기본 html 작업에서 <style>밑에 <script>를 만들어 자바스크립트 사용이 가능
- 맛보기 예시
- <script>태그 안에 아래 함수 만들기
function hey(){
alert('안녕!')
}
- "jumbotron"으로 가서 <a>태그 안에 onclick 태그 넣기
<div class="jumbotron">
<h1 class="display-4">나홀로 메모장!</h1>
<p class="lead">중요한 링크를 저장해두고, 나중에 볼 수 있는 공간입니다.</p>
<hr class="my-4">
<p class="lead">
<a onclick="hey()" class="btn btn-primary btn-lg" href="#" role="button">포스팅박스 열기</a>
</p>
</div>
- 그럼 [포스팅박스열기]를 누르면 alert만든 '안녕!'이 팝업( alert은 경고창)
- 브라우저에서 오른쪽클릭>검사 하면 console창 뜸. 우리는 이 개발자 도구에 만들어 놓았던 함수를 불러와서 사용해볼 수 있음. 매번 수정 저장 실행하면 귀찮기 때문에 여기 console창에 바로바로 수정하면서 볼 수 있게 만들어 둔것
- console.log(변수1,변수2)로 여러 변수를 한번에 출력할 수도 있음.
#Java script 기초문법
- 변수, 자료형, 함수, 조건문, 반복문 -> 여기를 알아두면 왠만한 로직은 만들 수 있다
#변수
- 값을 담는 박스
- 문자열도 담을 수 있는데 이땐 ''(작은, 큰 따옴표)안에 넣어야 함
- 변수이름을 지을때는 아무렇게나 지을 수 있지만, 남이 봐도 알아보기 쉽게 정하는게 좋음
#리스트
- 순서가 중요한 담기
- let a_list = [ ] 리스트를 선언, 변수 이름은 아무렇게나 가능
- 컴퓨터는 숫자를 셀 때 0부터 센다.
- 여기서 수박이 0번째 a_list[0]
let a_list = ['수박','참외','배']
#딕셔너리
- 일상생활에서 많이쓰는 유형. 예를들어, 생일을 물어본다면 생일에 대응되는 날짜를 알고자 물어보는 것
- 생일이라는 키(KEY)값에 대응되는 밸류(값)을 말해달라는 것
- name, age = key / bob,27=value
let a_dict = {'name':'bob', 'age'=27}
- 여기는 순서가 중요하진 않다.
- 값을 가져오고 싶을 땐 [ ], 선언할 떈 중괄호 {}
a dict = ['name']
- 딕셔너리에 값을 추가하고 싶으면 그대로 적어주면 바로 들어감 . a_dict['height']=180 이렇게 쳐주면 바로 포함됨
- 딕셔너리와 리스트는 둘을 조합할 수 가 있음
a_dict['fruit'] = a_list
- a_list를 'fruit'라는이름으로 정해주고 넣으면 딕셔너리에 포함됨
- 'fruit'라는 리스트 안에 '수박','배','참외'가 있다고 할 때, 수박을 부르고 싶다면
- 'fruit'부르고 뒤에 순서 써주면 부를 수 있음
a_dict['fruit'][0]
#그 외 기본 공식들
- let a = 100 일 때, a 를 7로 나눈다면 그에 대한 나머지는 ?
- 아래 공식으로 치면 나머지는 2 이렇게 나옴
- 이런 공식은 들어오는 트래픽을 균등하게 나눌 때 사용
- 짝수 홀수 나눌때 사용
a % 7
- 등호도 존재 함
- a < 150 하면 true, a>200 하면 false 뜸
- a == 100 여기서 같다라고 하려면 ==두번 쳐야함
- a !=100 같지않다 라는 뜻
- 글자를 나누기도 가능함
let myemail = 'spart@gmail.com'
- 위 코드를 @ 기준으로 나누려면?
myemail.split('@')
- ['sparta', 'gmail.com']으로 나뉘게 됨
- 이걸 리스트로 보고 또 1번째를 취하려고 한다면?
myemail.split('@')[1]
- [gmail.com] 나오게 되고 여기서 다시 .을 기준으로 나누다면?
myemail.split('@').split('.')
- ['gmail','com']으로 나오고 여기서 0번째 를 뽑아낸다면 ?
myemail.split('@')[1].split('.')[0]
- "gmail"로 나오게 됨 -> 지금 우리는 어떤 도메인을 쓰는 이메일인지 뽑아 낸 셈!
#함수
- 프로그래밍에서의 함수는 부르면 '정해진 동작'을 하는 것
- sum이라는 함수를 만들었다면,(sum이라는 함수 이름은 내가 그냥 정한거고 그 안에 숫자를 더하는 걸 값으로 내놓는 함수를 만든 것
function sum(num1,num2){
return num1+num2
}
let result = sum(2,3)
result
5
- num1에 2 num2에 3이 들어가서 더해진 값 5가 나오는 것
- 함수에서 return은 끝내고 나를 변신시켜줘! 이런 것
#IF문
기본 if 문
let age = 20
function is_adult(age){
if(age> 20){
alert('성인입니다')
}else{
alert('청소년이에요')
}
}
let sex = '남성'
// AND 표시 = &&
if(age>20 && sex =='남성') {
console.log('성인 남성입니다')
} else {
console.log('청소년입니다')
}
성인남성입니다
- or : ||
// 참고: OR 조건은 이렇게
function is_adult(age, sex){
if (age > 65 || age < 10) {
alert('탑승하실 수 없습니다')
} else if(age > 20 && sex == '여'){
alert('성인 여성')
} else if (age > 20 && sex == '남') {
alert('성인 남성')
} else {
alert('청소년이에요')
}
}
is_adult(25,'남')
#반복문
- 반복되는 숫자를 계속 더한다던지 반복되는 정보를 입력해야할 때 사용
for(i=0; i<10, i++){
console.log(i)
}
- 0부터 10보다 작을때까지 이 조건을 반복하는게 이 원리
for (1. 시작조건; 2. 반복조건; 3. 더하기) {
4. 매번실행
}
1 -> 2체크하고 -> (괜찮으면) -> 4 -> 3
-> 2체크하고 -> (괜찮으면) -> 4 -> 3
-> 2체크하고 -> (괜찮으면) -> 4 -> 3
-> 2체크하고 -> (괜찮으면) -> 4 -> 3
와 같은 순서로 실행됩니다.
i가 증가하다가 반복조건에 맞지 않으면, 반복을 종료하고 빠져나옵니다.
- 반복문은 주로 리스트와 함께 많이 사용
let people = ['철수','영희','민수','형준','기남','동희']
people.lenght
6
for (let i= 0; i<people.length; i++){
console.log(people[i])
}
// people.lenght는 길이니까 6이 나올것, 근데 여기 console.log에서 people[i]를 넣으면 이름이 그대로 출력
- (people[i]) 를 넣음으로서 리스트를 한 바퀴 돌아라~라고 할 수 있음
- 더 자주 쓰는 패턴
let scores = [
{'name':'철수', 'score':90},
{'name':'영희', 'score':85},
{'name':'민수', 'score':70},
{'name':'형준', 'score':50},
{'name':'기남', 'score':68},
{'name':'동희', 'score':30},
]
for(let i=0; i<scores.length; i++){
console.log(scores[i])
}
- 이상태에서 아래처럼 돌리면 이름만 뽑아 낼 수 있음
for(let i = 0; i <score.length; i ++) {
console.log(score[i]['name'])
}
for(let i=0; i <scores.length; i++) {
let name = scores[i]['name']
let scores = scores[i]['score']
console.log(name,score)
}
//각각의 이름과 점수가 순서대로 나옴
for (let i = 0 ; i < scores.length ; i++) {
if (scores[i]['score'] < 70) {
console.log(scores[i]['name']);
}
}
// 이렇게 하면 점수가 70점 미만인 사람들의 이름만 출력할 수도 있습니다
- 딕셔너리들을 모아둔 리스트를 돌면서 필요에 맞는 딕셔너리를 if문으로 값을 찍어낼 수 있음