🌱Inflean 🌱 자바스크립트

---

 

 

❤ 김춘장이의 위키백과 - 나만의 공부 기록 Tistory ❤ 

GitHub - gayulz/StudyHistory: 나의 공부 기록 commit

 

 

---

 

 

 

 

 

변수와 상수
var / let / const
이름중복(재선 언) var 가능 / 나머지 불가
데이터 수정(재할당) var , let 가능 const불가
var보다 let이나 const를 자주 쓴다. var는 잘 안 쓴다고 함
js는 camelCase를 주로 사용한다

 

 

실습

class / 03-javascript / 01-variable.html
class / 03-javascript / 01-variable.js

JS는 html에 연결 시

 

 

src로 연결해 준다

Chrome 개발자 도구 : 웹사이트를 전반적으로 분석, 시험해 볼 수 있는 도구
콘솔 데이터는 저장되지 않는다. 새 탭

요소 : html을 분석하고 수정해 볼 수 있는 도구
콘솔 : 현재 로딩된 페이지에서 자바스크립트를 시험하거나 로그/오류 메시지 등을 확인할 수 있는 도구
소스 : 현재 로딩된 페이지에서 사용된 리소스를 열람할 수 있는 도구
네트워크 : 서버와의 통신 내역을 보여주는 도구
성능 : 웹 애플리케이션의 성능을 향상할 방법을 컨설팅해 주는 도구

Js는 자료형이 없나?

 

 

 

배열

길이 구하는 것 : 배열변수명. length
값 꺼내기 : 배열변수명[인덱스]
맨 뒤에 값 추가 : 배열변수명. push()
맨 마지막 값 삭제 : 배열변수명. pop()
배열 요소 정렬 : 배열변수명. sort()
배열데이터확인 : 배열변수명. includes(값)
각각 다른 배열 2개 연결 : 배열변수명. concat(배열변수명 2)
배열을 문자로 만들기 : 배열변수명. join()
배열 분리 : 배열변수명. slice()
배열 원하는 요소 뽑기 : 배열변수명. filter()
배열의 모든 요소 변경 : 배열변수명. map()

문자열도 배열로 다룰 수 있다
const email = “gayulz@kakao.com”
email [0] = g
email [1] = a

 

 

 

객체

문법
const profile = {
name : “홍길동”,
age : 50 ,
height : 165
}

키와 값으로 나눠져 있다
객체는 값을 저장하고 키로 구분한다

**특징 : 중괄호 안에 데이터를 넣고 쉼표로 데이터를 구분한다, const는 상수 선언이고 객체를 선언 시 별다른 자료형이 없는 것 같다

**규칙 : 값은 비어져있을 수 있으나 키는 절대 비울 수 없다

예제
빈 객체 : let object = {}
숫자 값 : let numObj = { first:3 , second : 9 }
문자열 값 : let strObj =

 

객체에 담긴 value를 추출하는 방법

1. **변수명. KEY
   예제 : profile.name
2. 변수명[“KEY”]
   예제 : profile[“school”]

프런트엔드 : 서버에서 전달받은 내용을 그대로 화면에 보여주는 것
백엔드 : 프엔에서 요청한 정보를 서버에서 받아 검증하는 로직을 거치거나
디비에 있는 정보를 조회, 기록, 수정하거나 외부 api연결해서 데이터를 교환하는 등 처리하는 직업이다

 

 

데이터타입
배열은 객체의 한 종류이다

Js는 java와 같은 데이터 타입과 다른 데이터타입이 있다

jc데이터타입	선언
String	" "
Number	159
Boolean	true
Object
Null	null
undefined	undefined

null은 개발자가 값이 없다는 것을 직접 설정할 때 Null
undefined는 컴퓨터가 뭔가를 실행하다가 할당한 적이 없다는 걸 발견하면 undefined를 반환함
컴퓨터가 null을 리턴하는 일은 거의 없다
null과 undefined는 사용자가 의도한 빈칸인가 아니면 의도치 않았던 빈값인가를 잘 알아봐야 함

 

 

연산자

산술 : + - * / %

비교연산자 : Java와 같다
<= , >= , === ,!==
Js에는 엄격한 동치연산자와 느슨한 동치연산자가 있다

=== ,!== 는 엄격한 동치연산자
데이터 타입뿐만 아니고 그 값이 같아야 true를 반환한다
== ,!= 는 느슨한 동치 연산자
느슨한 동치연산자는 타입은 상관없이 값만 비교해 주는 연산자

 

 

 

 

 

 

반복문

자바와 반복문은 비슷하다
다만 자바에서 문자열과 변숫값 등 같이 출력 시 + " " + 이런 식에 혼잡한 문법에서
js는 ₩ 문자작성%{} 문자작성 빈칸필수 문자작성${}₩ 방법으로 가능하다
예시는 아래에 있다

 

for (let index = 0; index < fruits.length; index++) { 
	console.log(fruits[index].number +" "+ fruits[index].title) 
}         


for (let index = 0; index < fruits.length; index++) { 
	console.log(`${fruits[index].number} ${ fruits[index].title}`) 
}  


for (let index = 0; index < fruits.length; index++) {  
	console.log(`과일 차트 ${fruits[index].number}위는 ${ fruits[index].title}입니다`)  
}

 

 

 

수학객체

수학메서드

최댓값 구하기 : Math.max(2, 1, 6)
최솟값 구하기 : Math.min(2, 1, 6)
랜덤수생성 : Math.random()
반올림 : Math.round(2.12)
올림 : Math.ceil(2.12)
버림 : Math.floor(2.12)

앞자리가 0으로 시작하는 랜덤값 만들기

• 이 방법은 인증문자를 만들 때 쓴다.
• 숫자 메서드로는 앞자리가 0으로 하는 값을 만들 수 없기 때문에 String으로 형변환을 해야 한다.
• 다만 String으로 변형하더라도 값 자체가 정수인값이 먼저 생성된 다음 형변환이라 앞자리에 0 이 올 수 없다
• 그럴 경우 padStart를 이용하면 된다
•  

String (Math.floor(Math.random()*10000)).padStart(6,"0") 출력 : '000820' 

 

 

 

 

DOM조작

DOM : Document Object Model의 약자
사용법

• 주요 사용 코드
  document.getElementById(“[tagID]”). [명령어]
  [tagID] 자리에는 실제 태그에 있는 아이디를 적는 곳
  해석 : HTML 파일에서, "tagID"라는 id를 가진 태그를 선택해 제어한다
• 명령어 리스트
  innerText
  value
  style
  TextContent... 등등등

개발공부 중인 개린이의 포스팅입니다📝