자바스크립트 모르는것들

안녕하세요 자바스크립트 배운지 얼마안되서 가위바위보같은걸 만드는데 아무리 생각해도 어떻게 해야될지 모를때에는 구글에 검색을 해봐도되나요??

자바스크립트 공부 중 모르는 부분이 있어서 질문 드립니다.

배운 강의속 코드를 주석으로 풀이 하면서 공부중입니다. 제가 이해가 안가는 부분이 있습니다. 주석으로 표시 해놓은 코드가 어떤 역할을 하는지 모르겠습니다. ${} 기능을 쓰면 변수나 연산을 삽일 할 수 있다는 것을 알고 있습니다. ${chosenImage}코드는 랜덤한 배열의 순서를 가지고 오는 기능인것 또한 알고 있습니다. 제가 모르는 부분은 bgImage.src=`img/` <- 이 부분입니다. 저 코드가 하는 역할이 어떤 역할을 하는지 궁금합니다.

객체배열 정렬하는 방법

carData: [ { "evcarno": “1”, "ev_main": false, }, { "evcarno": “2”, "ev_main": false, }, { "evcarno": “3”, "ev_main": true, }, { "evcarno": “4”, "ev_main": false, }, { "evcarno": “5”, "ev_main": false, } ] 위 객체 배열을 ev_main 이 true 인 값을 첫번째 순서로 가게끔 가공을 하고싶은데 어떻게 해야할까요..? **결과 carData: [ { "evcarno": “3”, "ev_main": true, }, { "evcarno": “1”, "ev_main": false, }, { "evcarno": “2”, "ev_main": false, }, { "evcarno": “4”, "ev_main": false, }, { "evcarno": “5”, "ev_main": false, } ]

input type="file" 사용법

<template> ...(생략) <label for="camera" class="btn btn-purple btn-square btn-lg col-6 right-border" v-if=" imageYn === 'N' && imageYn === null" > 사진 촬영 </label> //class가 조건에 따라 달라짐. <label for="camera" class="btn btn-secondary btn-square btn-lg col-6 right-border" v-if=" imageYn === 'Y' " > 사진 촬영 </label> <input type="file" id="camera" accept="image/*" capture="camera" style="display: none" @change="onFileSelected" /> <button class="btn btn-secondary btn-square btn-lg col-6 left-border" @click="rightButton" v-if="status === '방전 시작'" > 방전 완료 </button> ...(생략) </template> <script setup lang="ts"> const imageYn:string = ref('') console.log('2', imageYn.value) //사진촬영 const onFileSelected = event => { const file = event.target.files[0] if (file) { imageYn.value = 'Y' console.log('1') console.log('imageYn', imageYn.value) console.log('yes file', file) } else { imageYn.value = 'N' console.log('imageYn', imageYn.value) console.log('no image') } } </script> 결과 사진 찍기 전 -> imageYn ='N' 이거나 null일 경우-> class에 btn-purple 적용 카메라를 실행하여 사진을 찍었을 경우 -> imageYn='Y' -> class에 btn-secondary 적용 / disable처리도 되야함 문제점 사진촬영 후 console 1번은 'Y' 찍히되 2번엔 null입니다. 도와주세요!

두개의 객체 배열 비교

<template> {{ ?? }} </template> <script> temp = [ {name:"John1", status:"A"}, {name:"John2", status:"B"}, {name:"John3", status:"C"}, {name:"John4", status:"D"} ] code=[ {value:"A", label:"좋음"}, {value:"B", label:"나쁨"}, {value:"C", label:"보통"}, {value:"D", label:"기타"} ] </script> temp 배열에 있는 status값을 code배열의 value값에서 찾아 같으면 해당 code의 label값을 출력하고싶어요ㅜㅜ 도와주세요

(쌩초보,JS) 제가 무엇을 놓치고 있는걸까요? 수업 후 예시문제가 안풀립니다.

안녕하세요. 비전공자 취준생 입니다. 한 달 정도 전에 개발 공부를 막 시작해서 국비지원 부트캠프에 들어가려고 사전에 독학 중 입니다. 자바스크립트를 배우고 있는데요... 분명 인터넷 강의에서 선생님이 말씀 해 주셨지만 수업이 끝나마자마 문제를 풀면 코딩이 안됩니다... 예시입니다. 오늘은 10분정도 인터넷강의로 문자열 메서드를 배웠습니다. 변수 str1="Hello world"; 라고 했을 때 .length 를 사용하면 변수의 길이를 확인할 수 있다고 배웠습니다. 저는 이 수업을 들으면서 크롬 개발자 도구를 켜서 따라 쳤고 딱 srt1.length; 만 쓰고 엔터를 치니 바로 다음 줄에 11이 짠 하고 떴습니다. 기분이 좋았습니다. 그러나 수업이 끝나고 예시 문제에선 변수를 document.write() 로 출력해서 데이터(변수의 길이)를 확인하라고 했습니다. 저는 첫 번째로. var str1 = "Hello world"; str1.length; 를 쓰고 엔터를 쳤습니다. (아까 크롬에서 했던 것과 똑같이요) 그런데 아무 일도 일어나지 않았습니다. <수업 끝나고 문제푸는 자체 프로그램이 있습니다> 그래서 '아 document를 이용해 출력하라고 하셨지' 해서 다시 var str1 = "Hello world"; str1.length; document.wirte(str1); 을 했습니다. 그런데 역시 아무 일이 일어나지 않았습니다... 지금까지 자바스크립트에서 console.log 나 document.write 뒤에 오는 괄호 안에 이 전줄에 썼던 변수명을 넣고 ; 를 쓰면 출력이 됐던 기억이 있어 저렇게 했는데 해설지를 보니 var str1 = "Hello world"; str1.length; document.wirte(str1.length); 이거더라구요... 뭔가 제가 큰 기초 개념을 놓치고 있는 것 같아서 이대로면 모래성 쌓기가 되는 것 같아 무섭습니다. 답답하기도 하구요. 제가 응용력이 없는 걸까요...? 더 두려운건 구체적으로 제가 뭘 놓치고 있는지 모르겠습니다 ㅠㅠ 혹시 이런 저에게 들을만한 기초 강의나 개념 강의가 있다면 추천 부탁드립니다. 현재 자바스크립트 책을 보고 있는데도 코드 예시나 간단한 설명만 있을 뿐이더라구요. 유료 강의여도 강의가 좋다면 얼마든지 결제해서 들을 의향이 있습니다. 긴 글 읽어주셔서 감사합니다.

HTML div contenteditable=true로 에디터 만드는데

div 태그에서 contenteditable=true를 적용하여 에디터를 만드는데 볼드체와 글꼴색상만 필요합니다~ 근데 볼드체 적용하면 글꼴색상(빨간색)은 적용안되고, 글꼴색상(빨간색)을 적용하면 볼드체는 또 적용안되고.. 즉, 빨간색+볼드체가 동시에 적용이 안되는데, 어떻게 코드를 작성해야 좋을까요 ㅠㅠ 고수님들 답변 부탁드립니다! const btnBold = document.getElementById('btn-bold'); btnBold.addEventListener('click', function () { setStyle('bold'); }); function setStyle(style) { document.execCommand(style); focusEditor(); } function focusEditor() { editor.focus({preventScroll: true}); } const selectFontColor = document.getElementById('select-font-color'); selectFontColor.addEventListener('change', function () { setFontColor(this.value); }); function setFontColor(color) { document.execCommand('foreColor', false, color); focusEditor(); }

바닐라 자바스크립트가 무엇인가요??

코딩에 이제 막 관심을 가지고 배워보기 시작하려고 하는 고등학생입니다!!! 처음에 자바스크립트를 시작하려고 하는데 코드 입력창에 그냥 자바스크립트는 없고 바닐라 자바스크립트만 있더라구요...! 그냥 자바스크립트랑 바닐라 자바스크립트가 뭐가 다른지, 그리고 왜 하필 이름이 바닐라인지 궁금합니당!!! 감사합니닷!!!!

Html css 어느정도까지 알고 자바스크립트 시작하면 좋을까요..

군입대전 html css 좀 공부했었는데요(초보) 지금 찍턴휴가 나와있는데 군대에 있는 기간동안 까먹은 것도 좀 있는 것 같고 가물가물한게 많아서 첨부터 다시 공부 해보려고 합니다 자바스크립트를 배울때 html과 css에 대해 어느정도 숙지하고 있는 상태에서 시작하는게 좋다고 많이들 그러시는 것 같은데 html css를 어느정도 까지 알고있는 상태에서 자바스크립트 공부를 시작하는게 좋을까요 html css는 w3schools에서 연습하고 있기는 한데 주제가 너무 많아서 '이걸 언제 다 하고 자바스크립트 시작하지' 라는 생각이 드네요..

자바스크립트에서 타입스크립트로..

프론트엔드 개발자 목표로 일단 html css js 공부중인데 자바스크립트는 어느정도까지 공부하고 나서야 타입스크립트 공부 시작하면 좋을까요

자바스크립트 this에 대해서

Javascript 공부를 하던 중에 궁금한 것이 생겨서 질문 남깁니다. 아래의 코드에서 일반 function으로 정의했을때는 this가 window로 설정되고 Arrow function으로 정의했을때는 undefined로 나오는 이유가 뭔가요? const x = 10; setTimeout(function test() { console.log(this); // Window 객체 console.log(x); // 10 }, 1000); setTimeout(() => { console.log(this); // undefined console.log(x); // 10 }, 1000);