javascript는 <head>부분에
<script> </script> 를 만들고 입력.
<script> </script> = 크롬 개발자도구 콘솔창 (F12)
크롬 확장프로그램과 충돌하면 콘솔창에 오류 생김. (ex 웹 인스타그램)
기본형태 1) 기능 설정 먼저 하고,
function 함수이름설정 (변수이름설정)
{ 움직이게할 명령 내릴 명령 순서대로 작성 }
2) 기능 사용
함수이름(변수);
자바스크립트의 5가지 유형
- 1) 변수 (값을 담음) let ~~ = // ~~를 //라고 정의하자.
let a = 2 a = 2
let first_name = 'su' first_name = 'su'
- 2) 자료형 (이게 숫자인지 문자인지) 리스트 딕셔너리
- let 변수 = [ , , , ] [ ] 안의 값은 0부터 순서세기 시작
let a_list = [1,2,'hey',3] 숫자는 그냥, 문자는 ' ' 안에 작성
a_list[0] => 1 출력됨
<<리스트에 더 추가하기>>
a_list.push('헤이') =>밀어넣으면() 목록이 1,2,'hey',3,'헤이' 가 됨
<<리스트의 길이(개수) 구하기>>
a_list.length => 5 출력됨 ( 항목이 5개 이므로)
-let변수= { '키(key) ' : 밸류(value) ,'##' : // } 사전처럼 [키:밸류] 형태
let a_dict = {'name':'Bob','age':21}
a_dict['name'] => Bob 출력됨
<<딕셔너리에 더 추가하기>>
a_dict ['height'] = 180 => 냅다 정의해버리면 [ ]=@@ 사전에 추가됨
**두가지를 조합해서 딕셔너리들의 리스트를 만들수 있음
let 고객 = [
{'이름' : 아무개 , '전화번호' : '01012341234'}, {'이름' : 아무개 , '전화번호' : '01012341234'},{ },...
]
- 3) 함수 (기능이름 ())
function 함수이름설정 (변수이름설정) {
함수의 기능을 뭘로 할지~~ }
* 함수 읽는 순서
// 두 숫자를 입력받으면 더한 결과를 돌려주는 함수
function sum(a, b) {
console.log('계산을하자');
return a + b;
}
let result = sum(2, 3);
console.log(result)function 기능이니까 일단 내려가고,
result는 sum 2,3? -> 위로올라가서 sum a,b에 넣어보자
콘솔창에 '계산을 하자' 출력하고,
되돌아와서 a+b 하라니까 2+3 =5값 기억해두고,
그럼 result 는 5
콘솔창에 result 띄우라니까 '5' 출력
- alert(' ') -알림창 띄우기
<script> </script>안에
function hey() { alert('안녕!') } hey()에 부여된 기능 => 알림창을 띄운다 (안녕! 이라고 써짐)
<body> </body> 안에
<button onclick ="hey()">영화 기록하기</button> 버튼을 클릭하면 => hey()를 호출해라
- console.log(변수) 개발자가 결과값을 보기 편하도록 괄호 안의 값을 콘솔창에만 출력함.
- .split('@') 특정 문자로 문자열을 나누고 싶은 경우 @앞뒤로 문자를 나눈다
- .split('@')[1] 나눈것 중에서 앞에껀 0, 뒤에껀 1. 1을 출력한다
let myemail = 'sparta@gmail.com'
let result = myemail.split('@') // ['sparta','gmail.com']
result[0] // sparta
result[1] // gmail.com
let result2 = result[1].split('.') // ['gmail','com']
result2[0] // gmail -> 우리가 알고 싶었던 것!
result2[1] // com
myemail.split('@')[1].split('.')[0] // gmail -> 간단하게 쓸 수도 있다!
- 4) 조건문(if~else~)
function 함수이름설정 (변수이름설정) {
if(~~~이면) {뭘 해라}
else if (아니면~~일때) {뭘 해라}
그것도 아니면 빼박 else {뭘 해라}
}
function is_adult(age){
if(age > 20){
alert('성인이에요')
} else if (age > 10) {
alert('청소년이에요')
} else {
alert('10살 이하!')
}
}
- 반복문(i=0; i<100)
<<돌면서 리스트 항목들 출력하기>>
let 리스트이름 = ['목','록','들', , , ]
for (let i = 0 ; i < 리스트이름.length ; i++) {
console.log(리스트이름[i])
}
i가 0부터 리스트의 길이(개수)가 될때까지 {명령}을 실행시키고 하나씩 커진다
<<돌면서 조건 이상인 리스트 항목만 출력하기>>
let 리스트이름 = [
{'@': 'ㄱㄱ', '#': 20}, {'@': 'ㄴㄴ', '#': 40} , .....
]
for (let i = 0 ; i < 리스트이름.length ; i++) {
if (리스트이름[i]['#'] > 70) {
console.log(리스트이름[i]['@']);
}
}
리스트이름 i번째의 #이라는 값이 70보다 클때만
리스트이름 i번째의 @값을 출력해라
'웹개발 종합반' 카테고리의 다른 글
| WIL 2주차 & 오류원인 (0) | 2022.08.05 |
|---|---|
| javascript 줄임말 jQuery 문법 (0) | 2022.08.02 |
| CSS로 모바일처리 하기 (0) | 2022.07.29 |
| CSS 모음집 부트스트랩 활용 (0) | 2022.07.29 |
| CSS로 폰트 입히기 (0) | 2022.07.27 |