2024/07 20

240731 걷기반 수업

오늘은 논리곱 연산자(&&), 논리합 연산자(||), find 메서드, sort 메서드 이렇게 4가지에 대해서 배웠다.논리곱 연산자와 논리합 연산자는 javascript 문법 강의에서 나왔어서 익숙하지만 find와 sort 메서드는 처음 보기에 논리 연산자보다 메서드에 더 집중을 했던것 같다.(물론 둘 다 집중했지만...^^)    1. 논리곱 연산자 ( && ) 논리곱 연산자는 모든 조건이 참(true)이여야 참(true)이다.true && true // turetrue && false // falsefalse && true // falsefalse && false // false    2. 논리합 연산자 ( | | )논리합 연산자는 둘 중 하나가 참(true)이면 참(true)이다.true || tr..

개인과제 2024.07.31

240730 걷기반 실습

오늘은 어제 강의를 바탕으로 실습문제 총 4개를 풀어보았다.난이도 '하' 2문제와 '중' 2문제로 이루어져 있었다!그래서 실습하기 전에 한 20분 정도 어제 배웠던 내용을 복습하고 실습에 참여하였다.    문제 1. 쇼핑 목록 수정하기*1.js 파일을 만들어 변수* shoppingList 의 요소를 수정해주세요.let shoppingList = ['우유', '계란', '아이스크림', '목살'];// 여기에 코드를 작성하세요....console.log(shoppingList);// 출력 : [ '우유', '계란', '아이스크림', '삼겹살' ] 배열의 마지막 요소인 '목살' 을 제거한 후, '삼겹살' 을 추가해주세요.출력 결과   나의 답let shoppingList = ["우유", "계란", "아이스크림..

개인과제 2024.07.30

240729 걷기반 수업

오늘은 배열메서드 총 5가지에 대해서 배워보았다..push().pop().forEach().map().filter()    1. push 메서드: 배열의 마지막에 새로운 요소를 추가한 후, 변경된 배열을 반환 2. pop 메서드: 배열의 마지막 요소를 제거한 후, 제거한 요소를 반환 하거나 변경된 배열을 반환const fruits = [30, 1, 2, 5, 40];fruits.push(100); // 100을 끝에 넣기 -> [30, 1, 2, 5, 40, 100]const pop = fruits.pop(); // 100을 빼내서(pop) 변수에 할당하기console.log(pop); // 할당한 100을 console.log();에 찍어보기 -> 100      3. forEach 메서드- 배열의 메..

카테고리 없음 2024.07.29

240726 걷기반 실습

오늘은 어제 걷기반 수업에서 들었던 함수, 조건문, 반복문에 대해 문제를 풀어보겠다.    문제1. 함수호출하기해당 함수를 실행시켜 "제가 좋아하는 과일은 사과, 오렌지입니다."를 출력하는 코드를 작성해보세요.function printFruits(a, b) { return "제가 좋아하는 과일은 " + a + "," + b + "입니다.";}console.log(printFruits(...)); printFruits 함수가 사과, 오렌지를 매개 변수로 받아 “제가 좋아하는 과일은 사과, 오렌지입니다.”의 문장을 콘솔에 출력할 수 있도록 해주세요.  나의 답function printFruits(a, b) { return "제가 좋아하는 과일은 " + a + "," + b + "입니다.";}console..

개인과제 2024.07.26

조건문과 반복문 문제 풀어보기

기본형태if (표현식1){ 실행문1;}else if (표현식2){ 실행문2;}else{ 실행문3;} 표현식1이 참이면 -> 실행문1 실행표현식1이 거짓이면 -> 표현식2로 넘어감 -> 표현식2가 참이면 -> 실행문2 실행표현식1, 2가 모두 거짓이면 -> 실행문3 실행이때 else if 는 여러번 써도 무관하다!   문제1. 나이를 매개변수로 받아, 나이가 18이상이면 "Access granted"를, 그렇지 않으면 "Access denied"를 콘솔에 출력하는 함수 checkAge를 작성해 보세요. function checkAge(age) { if (age >= 18) { console.log("Access granted"); } else { console.log("Acces..

개인과제 2024.07.25

JavaScript 문법 걷기반 실습(백틱 사용법, 깃허브 처음연결코드)

총 4문제를 풀어보겠습니다. 목차는 다음과 같습니다 :) 1. 문자열 합치기2. 객체 만들기3. 문자열 조작하기4. 함수 사용하기       문제 1. 문자열 합치기문자열  'Hello World' 를 출력하는 코드를 작성해보세요.const greeting = "Hello";const name = "World";console.log( ... ) // "Hello World" 출럭  1. 문자열 변수 greeting 과 name 을 합쳐 ‘Hello World’를 출력해보세요.2. 중간에 공백(띄어쓰기)도 구현을 해보세요!   내가 푼 답const greeting = "Hello";const name = "World";const no = " "; // 단어 사이에 띄어쓰기를 포함하기 위해 추가함const ..

개인과제 2024.07.24

문자열 길이 문제풀기

문자열 길이를 구하는 방법은  문자열변수.length 를 해주면 된다. Q. 문자열 길이에 1을 더한 값을 알려주는 함수를 만들어보세요.function getStringLengthPlusOne(str) {// 여기에 코드를 작성하세요}// 예시 출력console. log(getStringLengthPlusOne("hello")); // 출력: 6console.log(getStringLengthPlusOne("JavaScript")); // 출력: 11  내가 풀은 방식이다.function getStringLengthPlusOne(str) { return str.length + 1;}// 예시 출력console.log(getStringLengthPlusOne("hello")); // 출력: 6cons..

개인과제 2024.07.23

JavaScript 기본 문법 숙제

1. 문자열 연습하기  문제대문자와 소문자가 섞여있는 문자열 s가 주어집니다. s에 'p'의 개수와 'y'의 개수를 비교해 같으면 True, 다르면 False를 return 하는 solution를 완성하세요. 'p', 'y' 모두 하나도 없는 경우는 항상 True를 리턴합니다. 단, 개수를 비교할 때 대문자와 소문자는 구별하지 않습니다. 예를 들어 s가 "pPoooyY"면 true를 return하고 "Pyy"라면 false를 return합니다.  제한 사항- 문자열 s의 길이 : 50 이하의 자연수- 문자열 s는 알파벳으로만 이루어져 있습니다.  입출력 예sanswer"pPoooyY"true"Pyy"false   풀이function solution(s) { var answer = true; // 1...

개인과제 2024.07.23

미니프로젝트 "누구인가?"

내가 맡은 부분상세페이지(subPage)개인소개부분 레이아웃 및 수정개인소개부분 화살표 그림 클릭시 페이지 연결디자인 래퍼런스 참고하여 전체적인 방명록 CSS   # 개인소개부분  레이아웃 및 수정 (문제점과 해결방안)창 크기를 조절하면 개인소개부분의 위치가 바뀌는 문제점display: flex;            ->   부모 안에 있는 자식요소들의 정렬을 위해 사용Flex-direction: row;                ->  자식요소 수평정렬Justify-content: center;         -> 주축에서 가운데 정렬Align-items: center;                -> 교차점에서 가운데 정렬 이 네가지 코드를 사용하였더니 창크기가 달라져도 개인소개부분 위치가 정가운데..

개인과제 2024.07.19

display: flex에 대해서 익혀보자!

Flex는 레이아웃 배치 전용 기능으로 고안되었다. 그래서 레이아웃을 만들 때 훨씬 강력하고 편리한 기능들이 많다.  flex는 부모 요소에서 display: flex; 를 적용하는게 시작이다. display: flex;: 가로방향으로 자식요소의 너비만큼 차지 display: block;: 세로방향으로 줄바꿈이 들어가 자식요소들이 한줄씩 차지 display: inline-flex;display: inline-block;: inline이 추가되면 자식요소들 크기만큼만 차지   flex-direction: row;: 자식요소를 가로 방향으로 배치 flex-direction: row-reverse;: 자식요소를 역순으로 가로 방향으로 배치 flex-direction: column;:자식요소를 세로 방향으로 배..

개인과제 2024.07.18