유튜브 클론코딩 강의를 보고 StackOverflow 클론을 진행해보려고 합니다.
| Node JS 설치하는법(Mac OS) + Express (0) | 2022.08.24 |
|---|
함수에 인수를 전달하려면 ? ⇒ 함수를 호출할 때 전달해야 한다.
이벤트 핸들러 어트리뷰트 방식은 함수 호출문 방식을 사용할 수 있기 때문에 인수를 전달할 수 있지만 이벤트 핸들러 프로퍼티 방식과 addEvenetListener 메서드 방식의 경우 이벤트 핸들러 브라우저가 호출하기 때문에 함수 호출문이 아닌 함수 자체를 등록해야한다. 따라서 인수를 전달할 수 없다.
<!DOCTYPE html>
<html>
<body>
<label>User Name</label>
<em class="message"></em>
<script>
const MIN_USER_NAME_LENGTH = 5; //이름 최소 길이
const $input = document.querySelector('input[type=text]');
const $msg = document.querySelector('.message');
const checkUserNameLenght = min => {
$msg.textContent
= $input.value.length < Min ? `이름은 ${min}자 이상 입력해 주세요 ` : '';
}
//이벤트 핸들러 내부에서 함수를 호출하면서 인수를 전달한다.
$input.onblur = () => {
checkUserNameLenght(MIN_USER_NAME_LENGTH);
};
</script>
</body>
</html>
또는 이벤트 핸들러를 반환하는 함수를 호출하면서 인수를 전달할 수도 잇ㅆ다.
<!DOCTYPE html>
<html>
<body>
<label>User Name</label>
<em class="message"></em>
<script>
const MIN_USER_NAME_LENGTH = 5; //이름 최소 길이
const $input = document.querySelector('input[type=text]');
const $msg = document.querySelector('.message');
//이벤트 핸들러를 반환하는 함수
const checkUserNameLenght = min => e => {
$msg.textContent
= $input.value.length < Min ? `이름은 ${min}자 이상 입력해 주세요 ` : '';
};
//이벤트 핸들러 내부에서 함수를 호출하면서 인수를 전달한다.
$input.onblur = checkUserNameLenght(MIN_USER_NAME_LENGTH)
</script>
</body>
</html>
checkUserNameLenght 함수는 함수를 반환한다. 따라서, $input.onblur 에는 결국 checkUserNameLenght 함수가 반환하는 함수가 바인딩한다.
| [JS]-JavaScript -dataset 속성 (0) | 2022.08.18 |
|---|
//HTML
<div id='user' data-id='1' data-user='xyz' data-age='19'>user1</div>
<div id='bevarage' data-id='coffee' data-category='hot-brewed' data-isCaffein='non-caffeine'>Decaffeine Hot Americano</div>//JavaScript
const person = document.querySelector('#user')
//person.dataset.id = 1
//person.dataset.user = 'xyz'
console.log(person.dataset.user)
console.log(person.dataset.age)
const cafe = documemnt.quuerySecector('#category')
//cafe.dataset.id = coffee
//cafe.dataset.category = 'hot-brewed'
console.log(cafe.dataset.id)
console.log(cdafe.dataset.iscaffin)
=== xyz
===19
=== coffee
=== non-caffein
| [JS]-JavaScript 이벤트 핸들러에 인수 전달 (0) | 2022.08.18 |
|---|
remove untracked files, stash or commit any changes, and try again.npm i react-scripts-cssmodules 를 하려했을 때 오류를 마주한 상황.
$ npm i uninstall react-scripts
$ npm i react-scripts cssmodules
$ git add .
$ git commit -m " before ejecting "
$ yarn eject | TIL (2022. 12. 06) (0) | 2022.12.06 |
|---|---|
| [JS]-JavaScript 즉시실행함수 표현식을 쓰는 이유 (0) | 2022.08.17 |
| Vercel에서 연결된 레포지토리 삭제하는법 (0) | 2022.08.09 |
| React_Cunstom_Hooks 적용_(1)react.lazy와 Suspense (0) | 2022.07.31 |
| BlogDetail 컴포넌트(BlogDetail.js) (0) | 2022.07.29 |
const calculator = {
plus: function (a,b) {
return a+b;
},
minus: function (a,b) {
return a-b;
},
divide: function (a,b) {
return a/b;
},
powerof: function (a,b) {
return a**b;
},
};
const plusResult = calculator.plus(2,3);
console.log(plusResult);(1) console.log() : 콘솔에 () 안의 매개변수를 출력하라는 의미.
(2) minus = function 일 때 syntaxError 가 발생한 이유 는 :가 들어가야 할 자리에 = 가 들어가서임.
그러니까. 꼭 {} 안의 함수는 문법이 다르다는 것을 인지하고 있어야 이런 오류가 안나.
SyntaxError: Invalid shorthand property initializer
| #바닐라_자바스크립트_7 (0) | 2021.12.27 |
|---|---|
| #바닐라_자바스크립트_7 (0) | 2021.12.27 |
| #바닐라_자바스크립트_4 (0) | 2021.12.26 |
| #바닐라_자바스크립트_3 (0) | 2021.12.26 |
| #바닐라_자바스크립트_2 (0) | 2021.12.24 |
object를 추가,업데이트 _2
const player = {
name: "aeong",
points: 10,
fat: true,
};인 상황에서,
player에 15점을 추가해서 업데이트 하고 싶을 때
->
console.log(player);
player.points = player.points + 15;
console.log(player.points);
player.points = player.points + 15;
Q : 우리가 넘겨주는 어떠한 이름이든, Hello를 해주는 function을 작성해보자
(1) function이 없는 세상 버전
= console.log("Hello my name is Nico";
console.log("Hello my name is Nico";
console.log("Hello my name is Nico";
console.log("Hello my name is Nico";
console.log("Hello my name is Nico";
console.log("Hello my name is Nico";이름 자리에 이름만 바뀌고 오지게 중복되는 코드를 작성하게 된다.
(2) function 이 있는 세상
*function은 어떤 코들를 캡슐화해서, 실행을 여러 번 할 수 있게 해준다.
*규칙 .()를 사용해야 한다. 실행하게 될 코드블록이 필요하다. {} 안에 작성하는 것이 .
sayHello 를 실행할 때마다 실행되는 거다.
function sayHello(){
console.log("Hello!"); // array.push (), alert()
}() 이 괄호표시가 펑션의 플레이버튼이다.
sayHello();
sayHello();
sayHello();
sayHello();
이렇게 작성하면,
Hello!
Hello!
Hello!
Hello!
이렇게 출력됨.
"Hello my name is C" 를 출력하려면??
*argument, : function 을 실행하는 동안 어떤 정보를 function 에게 보낼 수 있는 방법
function sayHello(nameofPerson,age) {//2개의 argyment를 받고있다.
console.log("Hello my name is"+nameofPerson+" and I',"+age)
}
sayHello("nico",10);
sayHello(" dag",23);
sayHello("lynn",21);
| #바닐라_자바스크립트_7 (0) | 2021.12.27 |
|---|---|
| #바닐라_자바스크립트_6 (0) | 2021.12.27 |
| #바닐라_자바스크립트_3 (0) | 2021.12.26 |
| #바닐라_자바스크립트_2 (0) | 2021.12.24 |
| #바닐라 자바스크립트_1 (0) | 2021.12.24 |