728x90
반응형
728x90
반응형
// 정규식(Regular Expression) : 일정한 패턴을 가진 문자열의 집합을 표현하기 위해 사용하는 형식
// 문자열 내에서 정규식에 맞는 패턴을 검색
// 정규식 플래그(flag) : i, g, m
// i : Ignore case -> 대소문자 구별없이 패턴 검색
// g : Global -> 대상 문자열에서 패턴과 일치하는 모든 문자열을 검색
// m : Multi line -> 문자열의 행이 바뀌더라도 패턴 검색을 계속함
// {숫자1, 숫자2} -> 최소 '숫자1'번 최대 '숫자2' 반복하는 문자열 ('숫자2' 생략시, 최소 '숫자1' 번 이상을 의미) /m{1,}/g 
// ? -> 앞의 패턴이 최대 한번 이상(0번 포함) 반복되는 문자열 
// 패턴1 | 패턴2 -> OR패턴. 패턴1에 해당하던지, 패턴2에 해당하던지. /m{1,}|la/g 
// [문자여러개] -> 범위검색. 해당 문자들에 해당하는 문자열을 찾음 /[sthi]/g, /[a-zA-Z]/g, /[0-9]/g, /[가-힣]/g, /[a-zA-Z0-9]/g 
// [^문자여러개] -> not 검색. 해당 문자에 해당하지 않는 것을 찾음 /[^a-zA-Z0-9]/g
// ^ -> []밖에 있을떄는 문자열의 시작을 의미. /^Is/g(Is로 시작하는가?)
// $ -> 문자열의 마지막을 의미함. 해당 문자 뒤에 쓸 것 \?$/g(?로 끝나는가?)
// 예제1) https:// 로 시작하거나, http:// 로 시작하는지 검사
let message = 'https://www.naver.com'; 
let regexp = /^https?:\/\//g
let result = regexp.test(message); 
// let result = regexp.test(message); // 찾았으면 true, 못찾았으면 false
// result = regexp.exec(message); // 찾은 문자열을 배열로 반환
// let result = message.match(regexp); // 문자열에서 정규식에 해당하는 부분을 배열로 반환
console.log(result);


// 예제2) 아이디가 적합한지 검사를 하자
// 알파벳 대소문자 또는 숫자로 시작하고, 끝나면서 5~10자리인가?
let id = 'test1234';
// /^[a-zA-Z0-9]$/ :알바벳 대소문자 또는 숫자로 시작하고 끝남
// {5,10} : 최소 5개 최대 10개
regexp = /^[a-zA-Z0-9]{5,10}$/g
result = regexp.test(id);
console.log(result);

// 예제3) 매일 주소 형식에 맞는지 검사를 해보자.
let mailAddress = 'test@naver.com';
regexp = /^[0-9a-zA-Z]*@[0-9a-zA-Z]*\.[a-zA-Z]{2,3}$/



let test = 'abcdefgabcdefg';
result = test.replace(/c/g,'');
console.log(result);


// Map은 jey 가 중복이 될 수 없다.
// value는 중복이 되어도 상관없음.
let map = new Map([[500, 10000], ['key2', 'value2']]);
map.set('key3', 'value3');
map.set('key3', 10000);
// map.delete('key2'); // 특정삭제
// map.clear();// 모두삭제
console.log('map : ', map);
map.forEach((v, k, map) =>{
    console.log('현재key : ', k);
    console.log('현재value : ', v);
});

for(let entry of map){
    console.log(entry)
}

console.log([...map]);

for(let k of map.keys()){
    console.log('key => ', k);
};
for(let v of map.values()){
    console.log('value => ', v);
};
for(let entry of map.entries()){
    console.log('enrty => ', entry);
};





let set = new Set([1, 2, 3, 4, 1, 2, 3, 4]);
let set2 = new Set('programming');
set.size
set.add(5);
set.add(4);
console.log(set);
console.log(set2);

set.forEach((v1, v2, set) => {
    console.log('v1: ', v1);
    console.log('v2: ', v2);
});

for(let x of set){
    console.log(x);
}






728x90
반응형

'정보 > WEB' 카테고리의 다른 글

js 기초5  (0) 2023.01.01
js 정규식 연습1  (0) 2023.01.01
js 연습2  (0) 2023.01.01
js 기초4  (1) 2023.01.01
js 연습1  (0) 2023.01.01
728x90
반응형
// 2016 년 1월 1일은 금요일입니다.
// 2016년 a월 b일은 무슨 요일일까요?
// 가능한 a, b를 함수에 전달했을 때,
// 2016년 a월 b일이 무슨 요일인지 리턴하는 함수 '요일탐색'을 완성하세요.
// 요
// 요일의 이름은 일요일부터 토요일까지 각각 "SUM", "MON", "TUE", "WED", "THU", "FRI", "SAT"
// 예를 들어 a = 5, b = 24 라면 5월 24일은 화요일이므로 문자열 'tue'를 반환 후 출력

function 요일탐색(a, b){
let week = ["SUM", "MON", "TUE", "WED", "THU", "FRI", "SAT"]
let date = new Date();
    date.setFullYear(2016, a-1, b);
    return week[date.getDay()];
}
console.log(요일탐색(5,24))


// 2번(https://school.programmers.co.kr/learn/courses/30/lessons/12903): 가운데 글자 가져오기
// 단어 s의 가운데 글자를 반환하는 함수, '중간문자열'을 만들어 보세요.
// 단어의 길이가 짝수라면 가운데 두글자를 반환하면 됩니다. 그리고 결과 출력하세요
// 함수를 호출할 때, 자신이 문자열을 바꿔가면서 테스트해봅니다.
// 예) 중간문자열("test") -> "es" 반환, 중간문자열("fat") -> "a" 반환

let 중간문자열 = (text) => {
    let arr = '';
    const len = text.length;
    if((((len)/2) % 2) == 0){
        arr += text[(len/2)-1];
        arr += text[(len/2)];
    }
    else if((((len)/2) % 2) != 0){
        arr += text[((len-1)/2)];
    }
    return console.log(arr);
}
중간문자열('test');


let s = 'fat';
let 중간문자열2 = (s) => {
    const len = s.length;
    return len % 2 === 0 ? s[len / 2 - 1] + s[len/2] : s[parseInt(len / 2)];
}
console.log(중간문자열2('fat'));



// 3번(https://school.programmers.co.kr/learn/courses/30/lessons/12935): 제일 작은 수 제거하기
// 정수를 저장한 배열, arr 에서 가장 작은 수를 제거한 배열을 리턴하는 함수, '작은수제거'을 완성해주세요. 
// 단, 리턴하려는 배열이 빈 배열인 경우엔 배열에 -1을 채워 리턴하세요. 그리고 결과 출력하세요
// 예를들어 arr이 [4,3,2,1]인 경우는 [4,3,2]를 리턴 하고, [10]면 [-1]을 리턴 합니다.
// 함수를 호출할 때, 자신이 전달하는 배열을 바꿔가면서 테스트해봅니다.
// 예) 작은수제거([1, 2, 3, 4]) -> [2, 3, 4] 반환, 작은수제거([5, 7, 3, 1, 5]) ->  [5, 7, 3, 5] 반환
// 예) 작은수제거([1]) -> [-1] 반환

let 작은수제거 = (...arr) => {
    arr.sort()
    arr.shift();
    console.log(arr[1] >= 1 ? arr : [-1]);
}
작은수제거(1, 2, 3, 4);


let arr = [5, 7, 3, 1, 5];
let 작은수제거2 = (arr) => {
    let min = arr[0];
    for (let i = 0; i < arr.length; i++) {
        if(arr[i] < min){
            min = arr[i];
        }
    }
    let newArr = [];
    for(let i=0; i < arr.length; i++){
        if(arr[i] !== min){
            newArr.push(arr[i])
        }
    }
    return newArr;
}
작은수제거2(arr);



// 4번 (https://school.programmers.co.kr/learn/courses/30/lessons/12916): 문자열 내 p와 y의 개수
// 대문자와 소문자가 섞여있는 문자열 s가 주어집니다. 
// s에 'p'의 개수와 'y'의 개수를 비교해 같으면 True, 다르면 False를 return 하는 '문자찾기' 함수를 완성하세요. 
// 'p', 'y' 모두 하나도 없는 경우는 항상 True를 리턴합니다. 단, 개수를 비교할 때 대문자와 소문자는 구별하지 않습니다.
// 예를 들어 s가 "pPoooyY"면 true를 return하고 "Pyy"라면 false를 return합니다. 그리고 결과를 출력하세요.

let PY = "pPoooyY";
s = PY.toLowerCase();
let 문자찾기 = (Str) => {
    let y1 = 0;
    let p1 = 0;
    for(let value of Str ){
        if(value == 'y'){
            y1++;
        }
        else if(value == 'p'){
            p1++;
        }   
    }
    return y1 == p1 ? true : false;
}
console.log(문자찾기(s));


let 문자찾기2 = (s1) => {
    s1 = s1.toUpperCase();
    let pCount = 0;
    let yCount = 0;
    for (let i = 0; i < s.length; i++) {
        if(s1[i] === 'P'){
            pCount++;
        }
        else if(s1[i] ==='Y'){
            yCount++;
        }
    }
    return pCount === yCount;
}
console.log(문자찾기2('pPoooyY'));

let s5 = 'pPoooyY';
s5.match(/p/ig).length === s5.match(/y/ig).length;




// 반복문
// while > 조건식이 true라면, {}내의 명령을 순서대로 실행
let a = 0;
while(a < 10){
    console.log('test');
    a++;
}


//for - 조건식이 true일 떄 {}안에 있는 명령을 순선대로 실행
for(let i = 0; i < 10; i++){
    console.log('test2');
}






728x90
반응형

'정보 > WEB' 카테고리의 다른 글

js 정규식 연습1  (0) 2023.01.01
js 정규식  (1) 2023.01.01
js 기초4  (1) 2023.01.01
js 연습1  (0) 2023.01.01
js 기초 3  (1) 2023.01.01
728x90
반응형
// Data 객체
let date = new Date();
date.setFullYear(1999, 5, 24);
console.log(date);
console.log(date.toLocaleString());
console.log('현재 요일: ', date.getDay()) 
console.log('현재 일: ', date.getDate()) 
console.log('현재 월: ', date.getMonth())  // 0부터 시작
console.log('현재 연: ', date.getFullYear())  

// String 객체
let s = "This is String";
let s1 = new String("This is String"); // 마지막 순번 : 13, 문자의 개수 : 14
console.log(s.length);
console.log(s.charAt(8));
console.log(s.indexOf("is")); // is 문자열이 s 문자열에서 어디 위치?
console.log(s.includes("String")); // "String"문자열이 s안에 있는가?(숫자 넣으면 거기서 부터 찾아줌)
console.log(s.startsWith("This")); // s 가 "This" 문자열로 시작하는가?
console.log(s.endsWith("?")); // s가 "?" 로 끝나는가?
console.log(s.concat('test')); // s는 바뀌지않고 뒤에 test 연결해줌
console.log(s.replace('is','a')); // s에서 "is" 를 찾아 'a'로 변경
console.log(s.split('is')); //s에서 'is'를 찾아서 나눠 각 요소를 가지고 배열로 만들어준다
console.log(s.slice(0, 7)); // s에서 0번쨰 index부터 7번째 -1 index 까지 잘라서 가져옴
console.log(s.toLowerCase());// s문자열 전체를 소문자로 변경
console.log(s.toUpperCase()) // s문자열 전체를 대문자로 변경
let s2 = '               \t\t test \t\t           ';
console.log(s2.trim()); // 공백제거
console.log(s2.trimStart()); //앞에만 삭제
console.log(s2.trimEnd()); // 뒤에만 삭제
console.log()

// 배열(Array)
let arr = [1, 'true', true, "test", 5];
let arr2 = new Array(5);
console.log(typeof arr[3]); //typeof 타입을 알려줌
console.log(arr.length)
console.log(arr2.length)

arr.push(15);
console.log(arr);
arr2.push(5)
console.log(arr2);

let result = arr.pop(); //배열의 마지막 요소를 제거하고 가져온다
console.log(result);
console.log(arr);
result = arr.shift(); // 맨 처음 요소를 제거하고 가져온다 
console.log(arr);
console.log(result);
arr.unshift(100); // arr 배열의 맨 첫번째 요소로 값을 넣음
console.log(arr)

let newArray = new Array(3);
newArray[0] = 100;
newArray.push(5);
console.log(newArray);

for (let index = 0; index < newArray.length; index++) {
    newArray[index] = index * 10;
    
}
console.log(newArray);

newArray.reverse(); //역순
newArray.sort(); //오름 차순 정렬

// join : 구분자를 각 요소 사이에 넣어서 하나의 문자열로 만들어 줌
result = ['This', 'language', 'is', 'awesome'].join('_');
// slice : 배열을 원하는 길이만큼 잘라서 반환받음
let r = newArray.slice(1, 3); // 1번 index부터 2번 index까지 잘라서 가져옴
console.log(r);
console.log(result);
console.log(newArray);




















 

 

 

 

 

let arr = []; //빈 배열
for (let index = 0; index < 15; index++) {
    arr[index] = parseInt(Math.random() * 100);
    console.log(arr[index]);
}

for(let index in arr){// index 를 순서대로 가져옴
    console.log(index);
}
for(let value of arr){ // 값을 순서대로 가져옴
    console.log(value);

}
console.log('Foreach Start!')
arr.forEach(process);

console.log('Foreach Start!')
arr.forEach(number => {
    console.log(number + 10);
});

function process(number){
    console.log(number);
}

let result = arr.every(number => {
    if(number < 1000){
        return true;
    }
    return false;
});
console.log(result)

console.log('\n\n\n\nfilter! >>>')
result = arr.filter(x => x % 2 == 0).forEach(x => console.log(x));
console.log(result);


console.log('\n\n\n\nmap! >>>')
arr.map( x => {
    if(x < 10){
        return x / 100;
    }
    return x;
}).forEach(x => console.log(x));


let iter = arr.keys();
console.log(iter.next().value);
console.log(iter.next().value);
console.log(iter.next().value);
console.log(iter.next().value);
console.log(iter.next().value);




function a(z, ...x){
    console.log(z);
    console.log(x);
}
a(1, 2, 3, 4, 5, 6, 7);

































728x90
반응형

'정보 > WEB' 카테고리의 다른 글

js 정규식  (1) 2023.01.01
js 연습2  (0) 2023.01.01
js 연습1  (0) 2023.01.01
js 기초 3  (1) 2023.01.01
js 기초2  (0) 2023.01.01
728x90
반응형
// 1번 - 10부터 300까지 숫자 중 6의 배수만 전부 더해서 반환하는 함수를 만드세요 divisor 라는 이름의 함수를 생성하세요. 그리고 결과를 출력하세요.

let divisor = (a, b) => {
    let num = 0;
    for (; a <= b; a++) {
        if((a%6) === 0){  
            num += a;
        }
    }
    return num;
};
console.log(divisor(10,300));



// 2번 - 숫자 두개를 인자로 받아, 두 숫자의 최대 공약수와 최소 공배수를 반환하는 gcd_N_lcm 이라는 함수를 반환하세요. 반환할 떄, 문자열로 반환 "(최대공약수 최소공배수)" 의 형태로 반환하세요. 예) 숫자1 : 2, 숫자2: 6, 반환값: (2, 6)
// 최대공약수 : 두 숫자의 약수 중, 제일 큰 수
// 최소공배수 : 두 숫자의 배수 중, 제일 작은 수


function gcd_N_1cm(num1, num2){
    // 삼항연산자
    // 조건식 ? 참 : 거짓
    let min = num1 < num2 ? num1 : num2;
    for(let i = min; min >= i; i++){
        if(num1 % i === 0 && num2 % i === 0){
            return `(${i}, ${num1 * num2 / i})`;
        } 
    }
}
let result = gcd_N_1cm(6,8);
console.log(result);

function 최대공약수알고리즘(숫자1, 숫자2){
    if(숫자1 % 숫자2 === 0){
        return 숫자2; //최대 공약수
    }
    return 최대공약수알고리즘(숫자2, 숫자1 % 숫자2);
}
console.log(최대공약수알고리즘(1112, 695));




// 재귀함수 : 함수 안에서 자기 자신 함수를 호출하는 것

function recursive(number){
    if(number >= 10){
        return;
    }
    console.log('재귀실행', number)
    recursive(number + 1);
}
recursive(1);

function factorial(number){
    if(number ===1){
        return 1;
    }
    return number * factorial(number - 1);
}
console.log(factorial(3));








728x90
반응형

'정보 > WEB' 카테고리의 다른 글

js 연습2  (0) 2023.01.01
js 기초4  (1) 2023.01.01
js 기초 3  (1) 2023.01.01
js 기초2  (0) 2023.01.01
js 기초  (0) 2023.01.01
728x90
반응형
// 함수의 호출
func1();

//1. 함수 선언문
function func1() {
    console.log('this is func1');
}

// 2. 함수 리터럴

let func2 = function() {
    console.log('this is func2');
}
func2();

// 3. funtion 생성자로 정의(객체 생성자를 호출: new 키워드 사용)
let func3 = new Function('a, b, c',`
    console.log("this is func3"); 
    console.log("test")`
);
func3(15);

// 4.화살표 함수 => 다른 언어의 람다식과 비슷함
let func4 = () => {
    console.log('this is func4');
};
func4();


// 5. 즉시 실행 함수
let func5 = function(){
    console.log('this is func5');
}();
// 일회용 함수
(function(){
    console.log('this is func5');
})();


// 인수 : 함수에 전달하는 값
// 매개변수 : 전달받은 값을 저장하는 변수
// 반환값 : 함수 실행이 종료될 때 돌려주는 값(함수 자체의 값)


let arrow = (a, b, c, d) => {
    console.log(a, b, c, d);
    return true;
}
console.log(arrow(1, 2, 10, 100));


// 생략가능예시1
let arrow1 = a => true;
console.log(arrow1(1));
// 생략가능예시2
let arrow2 = a => console.log(a);
console.log(arrow2(100));


let person = {
    '이름':'김성우',
    '주소':'대구 동구',
    'run': function(){ // 프로퍼티가 함수의 이름이 된다.
        console.log('달리기를 시도합니다.')
    }
};
person.run();





let a = 'b'; // 전역변수
print_info(person);
function print_info(객체){
    let a = 'a'; // 지역변수
    console.log(객체.이름);
    console.log(객체.주소)
    console.log('함수안:', a);
}
console.log('함수밖:', a);



let func = function(x){
    test = 'test'; // let, var, const 안쓰면 전역변수가됨
    console.log(x); 
}
func(3);
console.log(test);


function testFunc(a, b, c, d){
    if(a ===3){
        return true;
    }
    return false;

    console.log(a);
    return 100;
    console.log('test');
}
let result = testFunc(15);
console.log(`result : ${result}`);



// 중첩 함수 : 함수 내부에 함수가 존재하는 함수
// 중첩 함수의 내부함수는 중첩함수 내부에서만 호출 가능( 외부 함수의 기능을 톱는 역할)
function outerFunc(){
    let x = 1;
    function innerFunc(){
        let y = 2;
        console.log('내부함수는 : ', x+y);
    }
    return innerFunc;
}
let r = outerFunc();
r();

// 콜백 함수 : 함수를 인자로 받아, 함수내부에서 인자로 받은 다른 함수를 실행시키는 함수
function testFunc2(함수명){
    함수명();
}
function 인자함수(a, b, c){
    console.log('인자함수가 실행되었습니다.');
}
testFunc2(인자함수);

console.log(인자함수.name);
console.log(인자함수.length);
console.log(인자함수.prototype);

function say(인삿말, 직급){
    console.log(인삿말 + ' ' + this.name + 직급);
}
let 강사 = { name : '김성우'};
say('안녕하세요', 강사,'강사님')
say.apply(강사, ['하이', '강사님!']);
say.call(강사, '하이', '강사님!');
let newFunction = say.bind(강사)
newFunction('하이', '강사님!');


function TEST(){
    this.a = 'A';
    this.b = 'B';
    this.inner = function(){
        console.log('inner');
    }
    console.log(`test: ${this.a}, ${this.b}`)
}
let t = new TEST();
console.log(t.a)
console.log(t.b)
t.inner();















728x90
반응형

'정보 > WEB' 카테고리의 다른 글

js 기초4  (1) 2023.01.01
js 연습1  (0) 2023.01.01
js 기초2  (0) 2023.01.01
js 기초  (0) 2023.01.01
요소 정렬 방법  (0) 2023.01.01
728x90
반응형
// 1번 15부터 30까지 순서대로 값을 출력하세요 
// 그리고 15부터 30까지의 합계와 평균을 출력하세요.

let num = 0;

for (let i = 15; i <= 30; i++) {
    num += i;
};
console.log(`합계 ${num}  평균 ${num / 16}`)


// 2번 3단 구구단을 출력하세요. 3x1 부터 3x9.까지 
// 여기서 곱의 결과가 9의 배수는 제외하고 출력하세요
// 3 x 1 = 3
// 3 x 2 = 6
// 3 x 8 = 24

for (let i = 1; i < 10; i++) {
    if((3 * i) % 9 !== 0){
        console.log(`3 x ${i} = ${3 * i}`)
    }
};


let i = '2';

// 묵시적 : 프로그램이 알아서
console.log(i + 'test');
console.log(i - 0 + 5);
console.log(+i);

// 명시적 : 프로그래머가 직접 작성
let result = parseInt(i);
console.log(result);
Number(10);
Number('10');
Number(true);
//  숫자를 문자열로
Number.toString(12344);
let n = 26;
n.toString();
n.toFixed(); // 소수점 0 번쨰 자리까지 문자열



// 심볼(Symbol)
let sym = Symbol();
let sym2 = Symbol();
console.log(sym == sym2);
let sym3 = Symbol("테스트");
console.log(sym == sym3);
console.log(sym3.toString());
sym3 = Symbol.for('테스트');
console.log(Symbol.keyFor(sym3));


let message = 'This \
is test';
message = `This
is test`;
message = String.raw`This
is test`;
console.log(message);


let card = { 
    'rank' : "A", 
    price : "1500"
};
card.rank = 'B';
card.price = 3000;
console.log('rank' in card);
card.name = '푸른 눈의 백룡'
delete card.price;
console.log(card.price);
console.log(card["rank"]);
console.log(card.name);

loop1:while(true){
    while(true){
        console.log(1);
        break loop1;
    }
};

// 예외 처리 try-catch
// try 안에는 처리해야 할 코드를 작성
// catch에는 에러(예외)가 발생했을 경우 처리할 코드를 작성
try{ // 안에 있는 구문을 시도함.. 시도하다가 에러 발생 시 catch 문으로 이동함
    console.log('시도합니다');
    console.log(card[aaa]);
    console.log('완료했습니다.');
}
catch(e){ // 에러가 발생하면 실행됨
    console.log('에러가 발생했습니다.')
    console.log(e);
}
finally{ // 에러가 발생 하든 안하든 무조건 실행됨.
    console.log('프로그램 종료')
}





let computer = {
    'cpu' : 'i5',
    'ram' : '16GB',
    'graphic' : 'Gforce-1000'

};
// pro 라는 이름의 변수에 compute의 프로퍼티가 순선대로 저장되면서 실행됨
for(let pro in computer){
    //computer.pro
    console.log(`프로퍼티: ${pro}, 값: ${computer[pro]}`)  
};

let arr = [10, 20, 30, 40, 50];
//  in 인덱스 / of 벨류 가져옴
for(let value of arr){
    console.log(value)
};





























728x90
반응형

'정보 > WEB' 카테고리의 다른 글

js 연습1  (0) 2023.01.01
js 기초 3  (1) 2023.01.01
js 기초  (0) 2023.01.01
요소 정렬 방법  (0) 2023.01.01
flex 설명  (0) 2023.01.01
728x90
반응형
// 변수 var, let, const 키워드를 사용해서 변수를 생성
// const : 상수. 변수를 생성했을 때 값을 할당해야 한다.
// boolean : true / false (참, 거짓)
// 

// var v1 = 2.5
// v1 = 3;
// var v1 = 44;
// console.log(v1);

// let v2 = true;
// v2 = 4;
// console.log(v2);


// let massage = 'This is test';
// console.log(massage);

// // 공백문자 == 띄어쓰기
// let version = 'ECMAScript';
// let versionNumber = 6; 
// console.log('C:\\Users\\Administrator')
// console.log('This script is ' + version + versionNumber);


/*********** 연산자 ***************/
// +, -, /, *, %(나머지 연산)
// 5 % 2 => 몫:2, 나머지:1
// const a1 = 5;
// const a2 = 2;
// console.log(a1 + '/' + a2 + '-> 몫: ' + (a1 / a2) + '나머지 : ' + (a1 % a2));

// console.log(`${a1} / ${a2} -> 몫: ${a1/a2}, 나머지: ${a1%a2}`)





// const v3 = 0x10; // -> 10진수로 16


// 변수 명명규칙 CamelCase, PascalCase, SnakeCase
// LowerCamelCase: 단어마다 대문자, 시작은 소문자
// thisIsCamelCase
// PascalCase, UppwerCamelCase: 단어마다 대문자, 시작도 대문자
// ThisIsCamelCase
// SnakeCase: 단어마다 _ 로 잇기 (전부 소문자)
// this_is_snake_case 
// JS에서 권고하는 방식 
// 함수, 변수 => 카멜케이스로 작성
// 클래스 => 파스칼케이스

//  변수 > 카멜,  함수 > 스네이크, 클래스 > 파스칼



/*--- 220927 ---*/

// 조건문, 절 (if, switch)
// JS에서의 비교 연산
// a == b : a값이 b값과 동일한가 ? 에 대한 결과를 반환. 단, 형변환을 할 수 있다면 형변환 후 판단
// a != b : a값이 b값과 동일하지않은가 ? 에 대한 결과를 반환. 단, 형변환을 할 수 있다면 형변환 후 판단
// a === b : a값이 b값과 동일한가? 에 대한 결과를 반환, 형변환하지 않고 그 값 그대로 판단
// a !== b : a값이 b값과 동일하지않은가? 에 대한 결과를 반환, 형변환하지 않고 그 값 그대로 판단
// true == '1'
let num1 = 10;
const num2 = 5;
console.log(`num1 < num2 -> ${num1 < num2}`);
console.log(`num1 <= num2 -> ${num1 <= num2}`); 

// if(조건) {
//     조건이 참일때 실행할 실행문
// }
// if - else if - else
if(num1 < num2) {
    console.log('참')
} 
else if(num1 === num2){
    console.log('같다')
}

else{
    console.log('거짓')
}

// && : AND, ||: OR, !: NOT


// switch : 하나의 데이터 값을 다른 여러 데이터랑 비교 연산을 함
// switch(판단하고 싶은 데이터){
//     case 데이터와 비교할값:
//         break;
//     defaule:
//         break;
// }

num1 = 5;
switch(num1){
    case 1:
        console.log(1);
        break;
    case 2:
        console.log(5);  
    case num2:
        console.log('num2');
    default:
        console.log('해당없음');
}

// ++, -- 증감연산
// +=, -=. *=, /=, %=, &=, |=, ??= 대입연산
// a &= b   >   a && b 여부를 a에게 대입
// a |= b   >   a || b 여부를 a에게 대입
// a ??= b  > a가 null이거나 undefined 일 때만 b 값을 a에게 대입
// 증감연산, 1 ( 한 단계) 증가, 또는 감소시킨다
let n1 = 4;
++n1;
n1++; // n1 은 5가 된다 > n1 = n1 + 1; > n1 += 1;
n1--; // n1은 4가 된다 > n1 = n1 - 1; > n1 -= 1;
--n1;


let number1 = 1;
let number2 = 1;
let result1 = number1++; //후위: 현재 명령(연산)을 끝낸 후, 증가
let result2 = ++number2; //전휘: 현재 명령(연산)을 하기 전에 증가
console.log(`number1 : ` + number1)
console.log(`number2 : ` + number2)
console.log(`result1 : ` + result1)
console.log(`result2 : ` + result2)

// 반복절 (문)
// for - 반복횟수가 있을 때 사용하면 좋음, while - 조건이 있을 떄 사용하면 좋다.

// while(조건){ 조건이 맞을 떄 실행 할 명령문 }
let number = 0;
while(number < 10){
    console.log(number);
    number++;
}

// for(초기화식; 조건식; 증감식) { 조건이 true 일 떄 실행할 명련문}
// 초기화식 : 변수를 생성하거나 변수에 값을 대입함
// 조건식: for 반복을 언제까지 진행할지에 대한 조건식
// 증감식 : 변수의 값을 변경하거나 증감/감소 시킴
for(let a = 1; a < number; a++){
    console.log(`실행${a}`);
}







 

 

 

 

 

// 출력 ( 모니터 결과를 보여주세요.)
// stdout(standard out.) 기본 출력 -> 모니터
// 자바스크립트 : 웹 브라우저의 콘솔창.
// 자바 : 이클립스 혹은 인텔리제이 등의 콘솔창.
// console.log(데이터)


//산술연산자(+, -, /, *, &)
//대입연산자(+=, -=, *=, /=, %=)
// 자기 자신에게 연산해줌
let a = 10;
a += 3; // a = a + 3;
//증감연산자(++, --)
// ++, -- 가 앞에 있으면 전위 , 뒤에 있으면 후위 연산
a++;
++a;
//관계연산자(>, <, <=, >=, ==, !=)
// 자바스크립트는 + (===, !==)
// === 실제 그대로 값을 비교
// == 형변환 가능하면 형변환 후 비교
//논리연산자(&&, ||, !)


//조건(if, switch)
let c = 10;
if(c == 10){
    console.log('10과 같아요');
}


// 조건문(switch)
let e = 50;
switch(e){
    case 50:
        console.log('50입니다.');
        break;
    case 70:
        console.log('70입니다.');
    default :
        console.log('아무 값도 해당없습니다.')

}

//반복문 (while)
let f = 10;
while(f < 20){
    console.log(f);
    f++;
}

//반복문 (for)

for (let i = 0; i < 10; i++) {
    console.log(i);
}

// 다중(중첩) while, for

// 반복문 내부에 반복문 존재...
let g = 0;
while(g < 10){
    let f = 0;
    while(f < 10){
        console.log(`g: ${g}`);
        console.log(`f: ${f}`);
        f++;        
    }
    g++;
}


for (let i = 0; i < 10; i++) {
    for (let j = 0; j < 10; j++) {
        console.log(`i: ${i}`);
        console.log(`j: ${j}`);
    }
}




//배열(값을 여러 개 가지는 하나의 구조)
// let 변수명 = [값1, 값2, 값3 ...]
let arr = [1, 2, 3, 4, 5, 6];
let s = "string";
//index : 배열 혹은 반복가능객체(문자열)에 저장되어 있는 값의 위치 번호(0부터 시작)
// 배열에서 값 가져오기 : 배열이름[index번호]
// 배열의 값 변경하기 : 배열이름[index] = 새로운값
console.log(arr[4]);
console.log(s[3]); // 자바에서는 불가능
arr[5] = 500;
console.log(arr[5]);

arr.push(800); //배열의 마지막 요소로 값을 추가
arr.unshift(1000);// 배열의 첫 요소로 값을 추가
console.log(arr.pop()); // 배열의 마지막 요소를 제거하고 가져옴
console.log(arr.shift()); // 배열의 첫 요소를 제거하고 가져옴
console.log(arr);


for (let i = 0; i < arr.length / 2; i++) {
    let num1 = arr[i];
    let num2 = arr[arr.length - 1 - i];
    arr[0] = num2;
    arr[arr.length - 1 - i] = num1;
}
console.log(arr)


function welcome() {
    console.log('안녕하세요!');
}
welcome();

function greet(name, message='하이') {
    console.log(`${name}씨, ${message}`);
}
greet('김김김', '안녕하세요~');

function get_message(){
    return "System - 오류입니다.";
}
let m = get_message();
console.log(m);


function sum(num1, num2){
    return num1 + num2;
}
console.log(sum(10, 100));




let test = () => {
    console.log('test실행')
}
test();

// 숫자 2개를 함수에 전달하고 숫자 2개의 사이 값들을 전부 합한
// 결과를 반환하는 함수 calc를 생성하세요.

let calc = (num1, num2) => {
    if(num1 > num2){
        let tmp = num1;
        num1 = num2;
        num2 = tmp;
    }
    let sum = 0;
    for (let i = num1+1; i < num2; i++) {
        sum += i;
    }
    return sum;
}
console.log(calc(1,4));






728x90
반응형

'정보 > WEB' 카테고리의 다른 글

js 기초 3  (1) 2023.01.01
js 기초2  (0) 2023.01.01
요소 정렬 방법  (0) 2023.01.01
flex 설명  (0) 2023.01.01
grid실습  (0) 2023.01.01
728x90
반응형
<!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>
    <style>
        /* 
            요소의 정렬 방법들...
            *Flexbox를 사용하여 정렬 (전부 가능)*
                - 부모 요소에 justify-content: center
                - 부모 요소에 align-items: center
                ====> 정 중앙 정렬
            인라인 요소의 정렬 방법(수평)
                - 정렬 대상 요소의 부모 요소에 text-align: center를 지정
            인라인 요소의 정렬 방법(수직)
                1) 한줄일 때
                    - 정렬 대상 부모 요소에 padding-topm padding-bottom을 동일하게 적용
                    - padding 적용이 불가능할 경우, 정렬할 요소에 line-height, height값을 동일하게 적용해줌
                    - 여러 줄일떄는 line-height 비추천
                    2) 여러 줄일 때
                    - 정렬 대상 부모 요소에 padding-top, padding-bottom을 동일하게 적용
                    - vertical-align을 적용할 요소에 middle로 지정 (table에서 가능)


            블럭 요소의 정렬 방법(수평)
                - 정렬 대상 요소에 width값을 지정하고, margin-left, margin-right에 auto를 해준다.
                블럭 요소의(여러개)의 정렬 방법(수평)
                - 정렬 대상 요소에 display: inline-block 으로 변경 후 부모 요소에 text-align: center를 지정
            블럭 요소의 정렬 방법(수직)
                1) 부모 요소를 기준을 ㅗ절대 위치 지정(position지정 필수 > 자식: absolute 부모: static이 아니여야됨)
                - 자식에게 top : 50%, margin-top : - (자신의 height 값 / 2)px; <- height가 존재할 경우
                - 자식에게 top: 50%, transform: translateY(-50%);
            블럭 요소의 정렬 방법(수평 수직)
                1) 요소의 width, height 값 있을 경우에 가능
                    - 자식에게 top:50%, left:50%, transform: translate(-50%, -50%);
            
            
         */
        div {
            position: relative;
            width: 200px;
            height: 200px;
            line-height: 10px;
            box-sizing: border-box;
            border: 1px solid black;
            background-color: rgb(243, 233, 138);
            text-align: center;    
        }

        span{
            background-color: darkcyan;
            vertical-align: middle; /* 요소를 정렬할 기준이 있어야 함*/
        }

        div > div {
            position: absolute;
            background-color: cornflowerblue;
            margin: 0 auto;
            width: 50px;
            height: 50px;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }

    </style>
    <link rel="stylesheet" href="../../A1/페이지/랜딩페이지.css">
</head>
<body>
    <div>
        <!-- 인라인요소 -->
        <span>Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestiae, atque corporis alias optio vel dicta omnis odio dolores quaerat earum nobis, accusamus autem. Quaerat ipsum numquam quisquam a dolores deleniti.</span>
    </div>
    <div>
        <!-- 블럭요소 -->
        <div>BOX</div>
        <div>BOX</div>
    </div>
</body>
</html>
728x90
반응형

'정보 > WEB' 카테고리의 다른 글

js 기초2  (0) 2023.01.01
js 기초  (0) 2023.01.01
flex 설명  (0) 2023.01.01
grid실습  (0) 2023.01.01
grid예제2  (0) 2023.01.01

+ Recent posts

728x90
반응형
">