WINK-(Web & App) (425) 썸네일형 리스트형 [2023 신입부원 기초 스터디] 최종은 #5주차 JS 입문 1. 변수와 상수 변수: 변할 수 있는 값 let: 변수 작성 상수: 변할 수 없는 값(변수와 다르게 수정 불가능) const: 상수 선언 *변수 이름 규칙* 1.첫글자는 영어,$,_만 가능 2.첫글자 이외에는 숫자도 사용 가능 (Ex: _1234, &1234 등) 3.대소문자 구분 4.예약어 (Ex: let,const)사용 불가능 5.공백 불가능 기본적으로 const를 사용하고 값 변경이 필요하다면 let 사용 권장 var을 사용하지 않는 이유: var에서 개선된 const,let이 있기에 딱히 사용할 이유가 없음 2.원시 데이터 타입 number: 정수 bigint: -(2^53-1) ~ (2^53-1) 까지의 범위 표현 string: 문자열 문자열 따옴표: "" , '' 둘 다 사용 가능 백틱(ba.. [2023 신입부원 기초 스터디] 정찬우 4주차 안녕.js. html이랑 css은 살짝 맛을 봤고, 드디어 js를 배웠다. 프리코스때 살짝 했었어서 강의 듣는데 반가웠다 가장 먼저 js에서 변수 선언하는 방법은 3가지가 있다. 1. var(요즘에는 잘 안쓴다고 한다) 2. let - let은 말 그대로 우리가 평소에 사용하는 int, string처럼 사용하는 js용어이다. 하지만 let은 변수가 선언된 블록, 구문 또는 표현식 내애에서만 유효한 변수를 선언한다. 3. const -블록 범위의 상수를 선언한다. (let과 같은 블록 유효범위) 상수의 값은 재할당할 수 없으며 다시 선언할 수도 없다. 그래서 처음 선언할 때, 반드시 초기화를 해야한다. 원시 데이터타입 vs 참조 데이터타입 원시 데이터타입 변수에 할당될 때, 메모리의 고정 크기로 원시 값을 저장하고 해.. [2023 신입부원 심화 스터디] 이정욱 #4주차 - 예제 만들기(연습 문제) 1. modal창 만들기 const openButton = document.querySelector(".open"); //open 버튼 불러오기 const container = document.querySelector(".container"); // close 버튼을 담은 container const closeButton = document.querySelector(".close"); // close 버튼 openButton.addEventListener("click", () => { //openButton 에서 click 이벤트 발생하면 container.style.display = "flex"; //container를 보여주고 openButton.style.display = "none"; //open.. [2023 신입부원 심화 스터디] 황현진 #4주차 - 예제 만들기(연습 문제) 1️⃣ 모달 만들기🔘 const openButton = document.querySelector(".open"); const container = document.querySelector(".container"); const closeButton = document.querySelector(".close"); openButton.addEventListener("click", () => { // open 버튼을 눌렀을 경우 container.style.display = "flex"; openButton.style.display = "none"; // open 버튼을 없애주는 기능 }); closeButton.addEventListener("click", () => { // close 버튼을 눌렀을 경우 c.. [2023 신입부원 심화 스터티] 박지민 #4주차 Part. 6 예제 만들기 (연습문제) 그동안 강의를 통해 배운 js를 이용하여 예제 만들기 1. 모달 만들기 👉 Click 버튼을 누르면 모달 내용만 보이고 Close 버튼 누르면 👉 Click 버튼만 보이기 - index.html 👉 Click Lorem, ipsum dolor. Lorem, ipsum dolor sit amet consectetur adipisicing elit. Reiciendis, excepturi? Close - style.css ... .container { position: absolute; top: 0; left: 0; width: 100vw; height: 100vh; display: none; // 기본 container 클래스의 display는 none 속성 -> 첫 화면에 보임 X flex-directi.. [2023 신입부원 심화 스터디] 신진욱 #4주차 - Part 6 그동안 강의를 통해 배운 js를 이용하여 예제 만들기 실습 1. 모달 만들기 - 모달 만들기는 👉 Click 버튼을 누르면 모달 내용만 보이고 Close 버튼을 누르면 👉 Click 버튼만 보이게 하기 index.html 👉 Click Lorem, ipsum dolor. Lorem, ipsum dolor sit amet consectetur adipisicing elit. Reiciendis, excepturi? Close style.css - 기본 container class의 display는 none 속성이기에 모달 내용이 첫 화면에 보이지 않는다. ... .container { position: absolute; top: 0; left: 0; width: 100vw; height: 100vh; di.. [2023 신입부원 심화 스터디] 조현상 4주차 - Part 6 그동안 배운 js를 가지고 연습 문제들 만들어보기 1.모달 만들기 2.할 일 앱 만들기 3.디지털 시계 만들기 4.가위바위보 게임 만들기 5.업그레이드 된 할 일 앱 만들기 1.모달 만들기 모달 만들기는 버튼을 통해서 내용이 보이고 안 보이는 기능을 만들어주는 예제였다. 👉 Click Lorem, ipsum dolor. Lorem, ipsum dolor sit amet consectetur adipisicing elit. Reiciendis, excepturi? Close 우리는 open 클래스에 버튼을 통해서 container 클래스 속 내용들이 보여주고 안 보여주는 기능을 만들 것이다. .container { position: absolute; top: 0; left: 0; width: 100vw; .. [2023 신입부원 심화 스터디] 김윤희 #3주차 - Part 4, Part 5 11강 문자열 메소드 1. 대소문자 변환 const str = ‘Hello World!’; console.log(str.toUpperCase()); → 대문자로 바꾸어주기 console.log(str.toLowerCase()); → 소문자로 바꾸어주기 2. 문자열 공백 제거 const str = ‘ haha ’; console.log(str.trim()); → 공백을 제거해줌 (haha가 출력) console.log(str.trimStart()); → 앞쪽 공백 제거 console.log(str.trimEnd()); → 뒤쪽 공백 제거 3. 새로운 문자열 생성 const str = ‘Hello’; console.log(str.repeat(3)); → str을 세 번 반복함. 하지만 원본 객체는 변함x c.. 이전 1 ··· 43 44 45 46 47 48 49 ··· 54 다음
