본문 바로가기
School/멋쟁이사자처럼

테킷-온보딩 자바스크립트

reiiiii 2023. 5. 12. 16:55 
/*
객체(Object)
-속성의 모음으로 이루어진 데이터
-속성에는 어떤 데이터 타입이라도 할당 가능
-속성의 구분,
-속성의 정의 속성명(키):속성값
 */


var student = {
    grade:1,
    school : "lion school"
};

console.log(student); //{grade: 1, school: 'lion school'}
console.log(typeof(student)); //object

//객체의 값 호출
var gradeInfo = student.grade; 
console.log(gradeInfo); //1반환

//객체의 키 호출
var key = Object.keys(student)[0];
console.log(key); //grade

//객체에 속성 추가
student.class = 3;
console.log(student);//{grade: 1, school: 'lion school', class: 3}

console.log(student['class']); //3 --> 객체에서 속성을 불러오는? 방법
console.log(student.class); //3

//비어있는 객체
var teacher = new Object(); //생성자 생성하는 방법
var teacher = {

};

현재 대부분 브라우저는 ECMA의 표준 JS기반 동작

 

Web API + ECMAScript = JavaScript

 

<html>

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>안녕하세요!</h1>
    <p>JavaScript는 어려워:(</p>
    <script src = "ex01.js"></script> <!-- 보통 이렇게 마지막에 넣음-->
</body>
</html>

<js>

document.write('<p>JavaScript는 재밌어:)</p>');

 

 

<변수주석_js>

/*
변수 : 데이터를 담아 놓기 위해 이름표를 붙여놓은 공간
*/


//변수 선언
//var num;

//변수 초기화
//num = 10;

//변수 선언 + 초기화
var num = 10;
num = 20;

console.log(num);

//사용할 수 없는 변수명
//숫자로 시작하면 안됨, 특수문자 쓰면 안됨

//예약어:프로그래밍 언어 자체적으로 사용할 단어 혹은 키워드 => 변수 X

//변수명(식별자)
//1.Camel Case
//var sendmail
//2.snake_case
//var send_emial_date

//주석(coments)
//1. 싱글라인 : //
/* 
    2. 멀티라인
    2. 멀티라인
*/

 

 

<자료형(1)>

/*
자료형

1. 기본형, 단순형, 원시형
-number
-string
-boolean
-undefined
-null
-symbol

2. 참조형, 객제(Object)

*/

//number
//정수(integer), 실수 구분이 없음
var price = 10000;
console.log(price);

//string
var myname = "테킷";
console.log(myname);
var myname2 = '멋사';
console.log(myname2);
var myname5 = "\"사자\""; //따옴표인식은 역슬래쉬를 써주자
console.log(myname5);

//boolean
var isTrue = true; //소문자로 해줘야함
console.log(isTrue);

//undefined
var a;
console.log(a); //출력: undefined --> 정의가 되어있지 않다 = 변수에 데이터가 저장되어 있지 않다.

 

 

<자료형(2)>

/*
객체(Object)
-속성의 모음으로 이루어진 데이터
-속성에는 어떤 데이터 타입이라도 할당 가능
-속성의 구분,
-속성의 정의 속성명(키):속성값
 */


var student = {
    grade:1,
    school : "lion school"
};

console.log(student); //{grade: 1, school: 'lion school'}
console.log(typeof(student)); //object

//객체의 값 호출
var gradeInfo = student.grade; 
console.log(gradeInfo); //1반환

//객체의 키 호출
var key = Object.keys(student)[0];
console.log(key); //grade

//객체에 속성 추가
student.class = 3;
console.log(student);//{grade: 1, school: 'lion school', class: 3}

console.log(student['class']); //3 --> 객체에서 속성을 불러오는? 방법
console.log(student.class); //3

//비어있는 객체
var teacher = new Object(); //생성자 생성하는 방법
var teacher = {

};

 

<자료형(3)>

var name1 = "김멋사";
var name2 = "김멋사";
console.log(name1 == name2); //true

//Symbol은 고유하다
var name3 = Symbol("이테킷");
var name4 = Symbol("이테킷");
console.log(name3 == name4); //false

var myclass = {
    [Symbol("이테킷")] :1,
    [Symbol("이테킷")] :2
};

 

<연산자>

/**
 * 연산자
 * -1개의 표현식에 대해 산술, 대입
 * 논리, 타입등을 평가하여 값을 생성하는 작업
 */

//1.산술 연산자

var a = 10;
var b = 3;

console.log(a+b);
console.log(a-b);
console.log(a*b);
console.log(a/b);
console.log(a%b);

console.log(a);
console.log(b);

var c = 7;
//console.log(++c); //8 <--c값(7)에다가 플러스 1함
console.log(c++); //7
console.log(c); //8 <--위에 7+1

//2. 대입 연산자, 할당 연산자

//3. 비교 연산자

console.log(2 == 2);
console.log(2 == "2"); //암묵적 형변환
console.log(2 === "2"); //'타입'이 같은지

//4. 논리 연산자
//논리합(or)
//피연산자 중에 하나라도 참이면 참
console.log(true || true); //true
//논리곱(and)
//피연산자 모두가 참이어야 참
console.log(true && true);
//부정(not)
//피연산자의 boolean값을 부정


//5. typeof 연산자
console.log(typeof 1);
console.log(typeof "1");

 

<문자열 다루기>

//문자열 선언
var greeting = "Hello!";
var farewell = 'Bye!';
var myname = '김테킷';

var sentence = greeting +'\n' + myname;
console.log(sentence);
console.log(farewell +2);//Bye!2 <-- 에러는 안 나고 암묵적 형변환을 통해 이렇게 출력됨

//이스케이프 시퀀스
var sentence = greeting +'\t' + myname;
console.log(sentence); //Hello!	김테킷

//템플릿 리터럴(ES6) --> 멀티라인 텍스트 작업 가능, 이스케이프 시퀀스 필요없음
var a = `안녕하세요!
여러분:`;
console.log(a); //엔터키 그대로 반영

var d = `이 물건은 ${200+450}원입니다.` //계산 해줌
console.log(d);

//문자열 함수
var abc = "I am Iron man";

//indexOf
//문자열의 특정 값이 시작되는 위치
//인덱스는 0부터 시작
console.log(abc.indexOf("man")); //10

//slice
//문자열의 일부를 잘라낼 때
console.log(abc.slice(0,4));//I am

//toUpperCase(), toLowerCase()
console.log(abc.toUpperCase());
console.log(abc.toLowerCase());

//startsWith(), endsWith()
//특정 문자를 걸러낼 때
var efg = 'This is my car.';
console.log(efg.startsWith('Th')); //true
console.log(efg.startsWith('th')); //false

console.log(efg.endsWith('car.')); //true


//includes()
console.log(efg.includes('is')) //true

 

 

<배열>

/**
 * 배열(Array)
 * -복수의 데이터를 순서대로 담고 있는 자료구조
 * -배열의 순서는 0부터 시작
 * -배열은 객체!
 * -키 => 인덱스, 값 => 요소
 */

var mbti = ['INFP','ENFJ','INTJ'];
console.log(mbti[0]); //INFP
console.log(mbti.length); //3

mbti[3] = 'ESFP'
console.log(mbti.length); //4 --> 배열 요소 추가

mbti[2] = 'ISTJ' //원래 있던 요소에 덮어쓰기

//push()메서드
//배열의 마지막에 추가
mbti.push('ESFP','ISTJ');

//스프레드 문법
var newMbti = [...mbti,'ESFP','ISTJ'];
console.log(mbti);
console.log(newMbti);

//pop()
console.log(mbti.pop()); //마지막에 있는게

//unshift()
//배열의 앞쪽에서 작동
console.log(mbti.unshift('ESFP','ISTJ')); //배열 앞쪽에 요소 추가

//스프레드 문법
var newMbti = ['ESFP','ISTJ',...mbti];
console.log(mbti);
console.log(newMbti);

//shift()
console.log(mbti.shift());
console.log(mbti);

//slice()
console.log(mbti.slice(0,2)) //2개의 원소만 출력
console.log(mbti.slice()) //전체복사 : 아무런 인자를 넣지 않으면 됨
console.log(mbti.slice(-1)) //끝에서부터

//join()
console.log(mbti.join());
console.log(mbti.join('-')); //구분자
console.log(mbti.join(''));//깡통

//sort()
console.log(mbti.sort()); //오름차순 정렬

//reverse()
console.log(mbti.sort().reverse()); //내림차순 정렬

 

<조건문>

/**
 * 제어문(control flow)
 * 1. 조건문
 * 2. 반복문
 */

var a = 5;

//1. if ... else
if(a > 2){
    console.log('a>2');
}else if(a == 2){
    console.log('a=2');
}
else if(a == 0){
    console.log('a=0');
}
else{
    console.log('a<=2');
}

//2. switch
//switch문은 끝까지 수행함
//->특정 조건을 만족하고 끝내고 싶으면 꼭 break;를 조건마다 써줘야함
var mbti = "INFP";
switch(mbti){
    case 'INFP':
        val = 'INFP';
        break;
    case 'ENFP':
        val = 'ENFP';
        break;
    case 'ISTJ':
        val = 'ISTJ';
        break;
    default:
        val = '유효한 값이 아닙니다.'
}

 

<반복문>

/**
 * 2. 반복문(loop)
 */

//1. for

//for(var i = 0; i < 10; i++){
//    console.log(i); //0~9출력
//}

//for(var i = 10; i > 10; i--){
//    console.log(i); //10~1
//}

//for(var i = 0; i < 10; i++){
//    for(var j = 0; j < 10; j++){
//        console.log(`${i}-${j}`);
//    }   
//}

//2. while

var flag =10;
while(flag > 0){
    console.log(flag); //이렇게만 쓰면 무한히 증가(무한루프) --> 컴퓨터에 안 좋음
    flag--;
}

//3. do...while
//무조건 일단 먼저 do안에 있는건 실행
var flag = 10;
do{
    console.log(flag);
    flag--;
}while(flag>10); //세미콜론 써줘야함

 

<에러처리>

/**
 * 예외(에러)처리
 */


try{

    //에러가 발생할 가능성이 있는 코드
    myfunc();

} catch(error){

    //에러가 발생했을 떄 실행되는 코드
    console.log("에러발생");


} finally{

    //에러 발생여부와 상관없이 무조건 실행
    console.log("무조건 실행");

}

 

<함수(1)>

/**
 * 함수(functions)
 * -작업의 묶음
 * -코드를 반복해서 작성하는 비효율을 줄임
 */

function multiply(a,b){
    return a*b;
}


multiply(10,5)
console.log(multiply(10,5)); //50

var result = multiply(435,24);

console.log(result); //10440

//JS의 독특한 방법
//익명함수를 변수에 할당하는 것처럼 사용 가능
var multiply = function(a,b){
    return a*b;
};
console.log(multiply(10,5)); //50

 

 

<함수(2)>

/**
 * 변수 키워드 - var, let, const
 */

var a = 10;

while (true){
    var a = 1000;
    break;
}
console.log(a);

//호이스팅
console.log(word); //undefinde
word = "happy"; 
console.log(word); //happy 
var word;  //나중에 쓰든 먼저 쓰든 JS가 var 키워드 인지

// let
let word;
console.log(word); //undefinde
word = "happy"; 
console.log(word); //happy

 

 

<함수(3)>

/**
 * 화살표 함수
 */

//첫번째 방법
// let plus = (a,b) => {
//     return a+b;
// };

// console.log(plus(2,3)); //5

//두번째 방법
let plus = (a,b) => a=b;
console.log(plus(2,3)); //5

//파라미터가 1개일 때
let print = word => {
    console.log(word);
};
print("Hello!"); //Hello!

//입력값이 없을 때
let myfunc = () => {
    return 1;
}

console.log(myfunc()); //1

 

'School > 멋쟁이사자처럼' 카테고리의 다른 글

멋쟁이사자처럼5주차스터디  (0) 2023.05.18
테킷-JavaScript Next Level  (0) 2023.05.12
테킷-프론트엔드 온보딩 트랙  (0) 2023.05.10
open API 실습  (0) 2023.05.07
python-크롤링  (0) 2023.05.07

'School/멋쟁이사자처럼' Related Articles

티스토리툴바