졸꾸 코딩일기 21.6.27

22511 단어 코드스테이츠JavaScript졸꾸 코딩일기htmlcss코딩JavaScript

건강관리

  • 산책
  • 스트레칭 V
  • 감사일기 V

코딩기록

Javascript 코플릿 H - 1+(5)

function c(obj, property, value) {
 obj[property] = value
}
function a(obj, property) {
  return obj[property]
}
function k(num, obj) {
  for(let el in obj){
    if(typeof obj[el] === 'number' && obj[el] > num){
      delete obj[el]
    }
}
function b(obj, property) {
  obj[property] = true
  // TODO: 여기에 코드를 작성합니다.
}
//return이 없으면 객체에 결과값이 적용되지만 함수의 결과값은 undefined
//return이 있어야 함수는 결과값을 낸다. 
function d(obj1, property, obj2) {
  obj1[property] = obj2
}
function e(obj, property) {
  delete obj[property]
}
function f(obj) {
  for(let key in obj){
    if(typeof obj[key] === 'number'){
      delete obj[key];
    } // 키값은 변수일 뿐이어서 객체의 속성값을 삭제하고 싶다면 속성값을 삭제해야한다 객체의 속성이 본체이다!! 기억!!
  }
  return obj;
}
//반복문의 반복은 어떤 장치가 없다면 그 자체만으로 보이지는 않는다.
//그래서 코드의 작동을 모두 기록하는 console.log()를 사용하면 안보이는 동작들을 확인할 수 있다
//ex) for(let key in obj){ obj.[key] } ---> 마지막 키값의 속성만 보여준다 // 3
//ex) for(let key in obj){ console.log(obj.[key]) } ---> 모든 속성이 찍힌다 // 123
// obj[key] 객체의 키값의 속성 // key 객체의 키값
// 배열 객체 함수(메서드)는 참조타입 
// 참조타입은 특정 자료의 주소를 내부로 가져와 직접적으로 접근하여 변경이 가능
// 원시자료형은 직접적 변경불가능 그저 그 위에 변경사항을 덮어쓸 뿐
function M(obj){
  let result = ''
  for(let el in obj){
    result = result + el + ': ' + obj[el] + '\n'
  }
  return result
  // TODO: 여기에 코드를 작성합니다.
}
// Question
//왜 '\n'는 console.log()에서만 적용되는 것일까?
function g(obj) {
  for(let el in obj){
    if(Array.isArray(obj[el])){
      delete obj[el]
    }
  }
}
function h(obj) {
  for(let el in obj){
    if(typeof obj[el] === 'number' && obj[el] % 2 !== 0){
      delete obj[el]
    }
  }
}
function I(person) {
  for(let el in person){
    if(person[el] >= 18){
      return true
    }else{
      return false
    }
  }
}
function j(obj) {
  let fullName = '';
  obj.fullName = obj.firstName + ' ' + obj.lastName;
 return obj;
  // TODO: 여기에 코드를 작성합니다.
}
//obj[key] 브라켓은 변수 생성하여 이중으로 키값에 접근하기 때문에 키값을 키 할당을 할 수없다
//하지만 obj.fullName 닷은 해당 키네임을 입력해 키에 바로접근하기 때문에 키 할당이 가능하다.
function L(obj) {
  let count = 0;
  for(let key in obj){
    count = count + 1;
  }
  return count;
}
function L(obj) {
  return Object.keys(obj).length;
}
//새로운 메서드 발견
function N(obj, key, index) {
  let arrProperty = obj[key];
  if(Array.isArray(arrProperty)){
   return arrProperty[index]
  }
}
function select(arr, obj) {
  let result = {}
  for(let el of arr){
    for(let key in obj){
      if(el === key){
        result[el] = obj[key]
      }
    }
  }
  return result
}

HTML/CSS 따라하기

<!DOCTYPE html>
<html lang="en" >
<head>
	<meta charset="UTF-8"></meta>
	<title>CodePen - Slide Sign In/Sign Up form</title>
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
  <link rel="stylesheet" href="./style.css">
</head>
<body>
	<!--partial:index.partial.html-->
	<div class="container right-panel-active">
		<!-- Sign Up -->
		<div class="container__form container--signup">
			<form action="#" class="form" id="form1">
				<h2 class="form__title">Sign Up</h2>
				<input type="text" placeholder="User" class="input" />
				<input type="email" placeholder="Email" class="input" />
				<input type="password" placeholder="Password" class="input" />
				<button class="btn">Sign Up</button>
			</form>
		</div>
		<!-- Sign In -->
		<div class="container__form container--signin">
			<form action="#" class="form" id="form2">
				<h2 class="form__title">Sign In</h2>
				<input type="email" placeholder="Email" class="input" />
			    <input type="password" placeholder="Password" class="input" />
				<a href="#" class="link">Forgot your password?</a>
				<button class="btn">Sign In</button>
			</form>
		</div>
		<!-- Overlay -->
		<div class="container__overlay">
			<div class="Overlay">
				<div class="overlay__panel overlay--left">
					<button class="btn" id="signIn">Sign In</button>
				</div>
				<div class="overlay__panel overlay--right">
					<button class="btn" id="signUp">Sign Up</button>
				</div>
			</div>
		</div>
    </div>
<!-- partial -->	
    <script src="./script.js"></script>
</body>	
</html>
:root{
	/* COLORS */
	--white: #e9e9e9;
	--gray: #333;
	--blue: #0367a6;
	--lightblue: #008997;
	/* RADII */
	--button-radius: 0.7rem;
	/* SIZES */
	--max-width: 758px;
	--max-height: 420px;
	font-size: 16px;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
	Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
}
body{
	align-items: center;
	background-color: var(--white);	
	background: url("https://res.cloudinary.com/dci1eujqw/image/upload/v1616769558/Codepen/waldemar-brandt-aThdSdgx0YM-unsplash_cnq4sb.jpg");
    background-attachment: fixed;
	background-position: center;
	display: grid;
	height: 100vh;
	place-items: center;
}
.container{
	background-color: var(--white);
	border-radius: var(--button-radius);
	box-shadow: 0 0.9rem 1.7rem rgba(0, 0, 0, 0.25),
	        0 0.7rem 0.7rem rgba(0, 0, 0, 0.22);
	height: var(--max-height);	
	max-width: var(--max-width);	
	width: 100%;
}
.container__form{
}
08장 - 제어문 [모던 자바스크립트 Deep Dive]

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage