++ 느슨한 언어, 호이스팅, 예약어, this, 화살표함수, + 문자열 , "," parameter 정리
JavaScript
웹 페이지에서 복잡한 기능을 구현할 수 있도록 하는 스크립팅 언어 또는 프로그래밍 언어
자바 스크립트는 Java, C와 달리 느슨한 언어임
javascript는 느슨한 언어이기 때문에 변수의 타입을 미리 선언하지 않아도 되지만 이로 인해
Javascript 사용법
<script>
//Javascript 코드 작성
</script>console.log()
브라우저의 개발자 도구 > 콘솔에서 확인 가능 (디버깅할 때 많이 씀)alert()
브라우저가 열렸을 때, 그 내용을 알림창으로 보여줌
방식
- 내장 방식
위치는 어디서나 사용이 가능함 - 링크 방식
Java Script 파일을 따로 만들어서 링크하는 방식
읽기 순서
읽히는 순서에 따라 작동함
스크립트의 위치?
-
head에 포함될 경우
HTML 페이지를 파싱하면서 js파일을 받아오고, 실행한 뒤 다시 HTML 페이지를 파싱하게 됨
JS 파일 크기가 클 경우 렌더링이 너무 오래 걸리게 되어 페이지를 보기 까지 오래 걸리게 됨 ( 흰 화면이 오래 뜸) -
body에 포함될 경우
HTML 파일의 크기가 클 경우 JS가 포함된 화면을 보기 까지 오래 걸리게 됨
--> 클릭이 안된다거나 ..etc
결국 적절히 잘 파악해서 섞어 써야함
async속성 사용
<head>에 넣어 사용함
파싱과 JS 불러오기를 병렬적으로 진행하기에 위의 방법보다는 다운로드 받는 시간이 절약돼 효율적이라고 볼 수 있음
JS를 실행하는 단계에서는 파싱을 중지하고 JS 실행후에 파싱을 재시작하여 HTML 실행 전 JS가 먼저 실행되기에 순서에 상관없이 실행하게 됨
defer속성 사용
async와 마찬가지로<head>에 넣어 사용함
병렬적으로 파싱과 js 받아오는 것을 진행하고 HTML 파싱이 끝난후 JS가 실행된다.
병렬적으로 진행되어 다른 속성에 비해 시간이 절약되고 async과 다르게 HTML을 파싱하는 중에 JS를 다 받고 파싱 후에 JS를 실행하기에 원하는 순서대로 할 수 있음
표기법
dash-case(kebab-case)
the-quick-brown-fox-jumps-over-the-lazy-dogsnake_case
the_quick_brown_fox_jumps_over_the_lazy_dogcamelCase
theQuickBrownFoxJumpsOverTheLazyDogParcelCase
TheQuickBrownFoxJumpsOverTheLazyDog
변수
var
재선언 가능, 재할당 가능
var name = "김보영";
var name = "김뽀요"; 최신 문법에선 var 사용 지양을 권고함
let
재선언 불가능, 재할당 가능
let name = "김보영";
name = "김뽀요";
let name = "김뽀요"; //오류 발생const
재선언 불가능, 재할당 불가능
const name; // 오류 발생
const name = "김뽀요"; // 오류 발생
name = "김뽀요"; // 오류 발생
const name = "김보영";초반에 선언할 때 초기화를 동시에 진행해야함
++ 바뀌지 않는 값(상수)으로 만들어 코드를 짜는게 좋음
변수 기본 규칙
- 변수 이름으로는 문자/숫자/$/ _ 만 사용가능
- 첫 글자는 숫자가 될 수 없음
- 예약어 사용 불가
- 변수 이름은 읽기 쉽도록 센스 있게
- 상수는 대문자로 선언해서 다른 개발자도 알 수 있게
자료형
String 문자열
"",''를 사용해 표현함
let myName = "홍길동"
var email = "abc@abc.com"
let city = "서울"++ 문자와 변수를 동시에 쓰고 싶을 때
+를 사용 :console.log("문자"+변수+"문자),를 사용 :console.log("문자",변수,"문자)백틱을 사용 :console.log(~${variable}~)
(벨로그 마크다운 특성상 백틱은 물결로 표현)
, : 변수 그 자체로 출력함
+, 백틱: 변수를 문자로 변환해서 출력함
Number 숫자형
따옴표 없이 숫자만 적으면 됨
let number = 123;
let opacity = 0.8;Boolean 참,거짓
true,false 두 가지 값만 가지는 데이터
let checked = true;
let isShow = false;Undefined 미할당 데이터
데이터 값이 할당이 안되어있을 때
let undef ; //undefined
let obj = { abc :123 };
Null 의도적으로 빈 데이터
의도적으로 빈값을 넣음
let empty = null; // nullArray 배열
여러 데이터를 순차적으로 저장할 때
let fruits = ["orange", "strawberry", "banana"];배열에 사용 가능한 함수,속성
변수명.length: 길이변수명.push(추가 값): 배열 맨 마지막에 값을 추가변수명.pop(): 배열 맨 마지막 값 삭제변수명.unshift(추가 값): 맨 앞에 값을 추가변수명.shift(): 맨 앞에 값을 뺌변수명.includes(찾을 값): 특정 배열에 찾는 값을 검색해 boolean으로 출력변수명.indexOf(찾을 값): 값을 찾아 인덱스 번호로 출력
Object 객체
let cat = {
name : "고양이";
age : 1;
isCute : true;
mew: function(){
return "ㄴㅑㅑ옹";
}
};typeof 자료형 확인
자료형을 확인하고 싶을 때 씀
console.log(typeof 123); // number
console.log(typeof dfks); // string
console.log(typeof null); // object
형 변환
문자형 변환
toString(): 특정한 변수(값)에 쓸 수 있음 (null, undefined에 적용X)String(): 전역함수
숫자형 변환
Number()
기본 연산자
==: 값만 비교===: type까지 비교
함수
호이스팅(hoisting)
함수 안에 있는 선언들을 모두 끌어 올려 해당 함수 유효 범위의 최상단에 선언하는 것
- 함수 선언문
// 함수 선언문 : 어디서든 호출 가능
function functionName() {
console.log("안녕핫세염");
} //functionName() 함수를 선언 한 것
functionName(); //실행- 함수 표현식
// 함수 표현식 : 코드에 도달하면 생성
//sayHello(); // 에러뜸
let sayHello = function () {
console.log("안녕하세세염");
}; // 익명 함수는 형태를 화살표로 가져갈 수 잇음
sayHello();- function 변수명(매개변수,매개변수)
function hello(name, age) {
console.log(name + "님 안녕하세요");
console.log(age + "세");
}
hello("홍길동", 10);- return 값 반환
function hello(name, age) {
console.log(name + "님 안녕하세요");
console.log(age + "세");
return age + 10;
}
let result = hello("홍길동", 10);
console.log("result: " + result);- 화살표 함수
let add = function(num1,num2){
retrun num1 + num2;
}
let add = (num1, num2) => {
return num1 + num2;
}
let showError = () => {
alert('error!');
} // 익명 함수는 형태를 화살표로 가져갈 수 있음
onclick
각각의 HTML 요소에 속성 값으로 JS 함수를 연결
// Onclick
function test() {
alert("클릭했습니다");
}
<body>
<button onclick="test()">버튼</button>
<div style="background-color: yellow" onclick="test()">안녕</div>
</body>조건문
if
조건식의 결과인 true, false에 따라 흐름이 진행
if (조건1) {
// 조건1이 참일 때 실행할 코드
} else if (조건2){
// 조건2가 참일 때 실행할 코드
} else{
// 위의 모든 조건들이 부함하지 않을 때 실행함
}switch
변수의 값에 따라서 실행문이 결정되기에 if문보다 코드가 간결
// switch 조건문 switch (변수){ case 값1: // 변수와 값1이 일치하면 실행 break; case 값2: // 변수와 값2이 일치하면 실행 break; default: // 일치하는 값이 없을 때 실행 break; }
삼항연산자
조건식
?참일 때:거짓일 때
a > 5 ? console.log("5보다 크다") : console.log("5보다 작다");반복문
for
똑같은 명령을 일정 횟수만큼 반복해 수행하도록 하는 실행문
for(①초기화식; ②조건식; ④증감식){
③실행 문장;
}while
조건식이 true일 경우 계속해서 반복, false가 되면 반복을 멈추고 종료
while(①조건문){
②실행할 코드(명령문);
}
for문과 달리 조건을 변경하는 구문이 없기에 무한 루프 가능
break
반복문을 멈추고 밖으로 빠져 나감
//break
for (let index = 0; index < 10; index++) {
if(index == 10) {
console.log("멈춰");
break;
}
console.log(index); // 9 이후로 멈춰! 출력
}
continue
반복문을 한 번만 멈추고 다음으로 진행
// continue
for (let i = 0; i < 100; i++) {
if(i%2 == 0) {
continue;
}
sum += i;
}
console.log(i); // 2500 출력참고
오늘 진도도 자바 공부를 했었어서 그나마 버틸 수 있었던 것 같다. 매일 공부한 걸 정리하지 않으면 나중에 쓰나미가 덮쳐올텐데 이런식으로 살아도 되는걸까 싶다 ㄱ-.. 진짜 열심히해야지. . 내일부턴 진짜 밀리지 않고 찾아보면서 정리해야겠다 :(ㅠㅠ
