IT 관련/개발(Codecademy) 41

Javascript(생활코딩) 브라우저 제어하기

JavaScript(브라우저) BOM DOM window window 객체(전역객체) alert(’ ‘), confirm(’ ‘), prompt(’ ‘) location 객체 location.host location.port location.pathway location.search location.hash location.href location.reload() 새로고침 효과의 메소드인데 , location.href=location.href 도 같은 뜻임 location.href = “url” 로 하면 해당 url 로 로드됨. 등의 속성와 메소드를 가진다. Navigator 객체 크로스 브라우징 : 각각의 브라우저의 동작방법은 W3C , ECMA 표준화기구에서 정의한 스펙에 따라 브라우저를 만든다. 브..

자바스크립트(object 심화) this 키워드 , 오브젝트 빌트인 메소드 등

JavaScript(오브젝트 심화) 오브젝트 심화 how to use the this keyword. conveying privacy in JavaScript methods. defining getters and setters in objects. creating factory functions. using destructuring techniques. This 키워드 const goat = { dietType: 'herbivore', makeSound() { console.log('baaa'); }, diet() { console.log(dietType); } }; goat.diet(); // Output will be "ReferenceError: dietType is not defined" 위의 예..

javascript error : SyntaxError: Invalid left-hand side in assignment . 할당 에러 발생시 해결법

const menu = { _meal : '', _price : 0, set meal(mealToCheck) { if(typeof mealToCheck ='string'){ //"이 줄이 문제입니다" '='연산자가 아니라 비교연산자 '==='필요 return this._meal = mealToCheck; } } }; console.log(menu); 출력 : SyntaxError: Invalid left-hand side in assignment 해결법은 잘못 쓰인 = 을 ===으로 고친다. 자주 실수하는 것인데 =은 할당하는 것이고 ===이 비교하는 것이다. SyntaxError: Invalid left-hand side in assignment "이 포스팅은 쿠팡 파트너스 활동의 일환으로, 이에 따른..

Javascript 자바스크립트 Object / 오브젝트 정리 / for in 구문 오브젝트 정리

Java Script(오브젝트) Creating Object Literals Key는 스트링이지만, 아무 문자가 없으면 key를 생략할 수 있다.(확인필요) Key는 변수이름? 아래 예시의 경우 빈공간(스페이스 바)을 가지고 있어서 “”안에 표시해야한다. // An object literal with two key-value pairs //아래의 코드는 2개의 properties를 가지고 있다. 1)Fuel type 2) color let spaceship = { 'Fuel Type': 'diesel', color: 'silver' }; Accessing Properties . 으로 spaceship이라는 오브젝트에 접근할 수 있다. 점을 찍고 property name(key)를 작성하여 호출한다. le..

Javascript(어레이) / 자바스크립트 어레이 개념 정리

Javascript(어레이) Array 어레이는 일련의 자료들을 정렬 한것이다. 어떠한 데이터 타입이라도 올 수 있다. 예시 let concepts = ['creating arrays', 'array structures', 'array manipulation']; Array 만들기 (array literal) const hobbies = ['nothing', 'nothing', 'nothing']; console.log(hobbies) ; // ['nothing', 'nothing', 'nothing'] 출력 다른방법 const classArray = new Array(0, 1, 2, 3); Array에 접근하기 어레이는 zero index 를 사용한다. 제일 처음오는게 0번으로, 어레이이름[번호] 식으..

Javascript (스코프)

Java Script(스코프) Scope 스코프를 이해하기 위해서는 먼저 block을 이해 해야 한다. 일단 Scope 자체는 비유를 들면, 우리가 살고 있는 도시의 경관을 들 수 있다. 우리가 도시에 살고 있다면 밤에 도시의 스카이 라인을 볼 수 있는데, 이 스카이 라인은 이 도시가 아니라면 볼 수 없다. 하지만 밤 하늘의 별은 어딜 가더라도 똑같이 볼 수 가 있다. 이 경우 스카이라인은 local scope가 되고, 보다 큰 범주인 밤하늘은 어디에서도 접근이 가능한 global scope가 된다. 중간에 샜지만, block이라는 것은 중괄호로 둘러싸인 코드 스니펫(코드 덩어리) 라고 생각하면 된다. if 절의 {} 중괄호나, 함수 생성의 {} 중괄호 모두 block이 된다. const city = '..

Javascript 자바스크립트 (함수)

Function 선언 함수의 기본 선언 function 함수이름() { 코드 ; } 위와 같이 선언한다. hoisting 이라고 하는 기능이 있는데, 이는 함수가 선언되기 전에 함수를 사용해도 함수가 동작하는 것을 의미한다. 다만 좋은 방식은 아니라 비추천 된다. 함수를 호출 할 때는 함수() ; 식으로 호출하면 된다. 몇 번이고 사용할 수 있다. Parameters and Arguments Parameter 라고 하는 것은, 함수안에 전달 될 입력값이 들어가는 자리(placeholder)를 말한다. 함수를 호출 할 때, 함수 속으로 전달되는 입력 값 자체를 Argument 라고 한다. 함수 내에서는 변수나 값으로 활용 될 수 있다. 예시 function sayThanks(name) { console.l..

자바스크립트 Java script(조건문) 총정리

노션으로 작성해서 복사. Java Script(조건문) 조건문 조건문의 구조는 다음과 같다. if (true) { console.log('This message will print!'); } // Prints: This message will print! 괄호 안에는 참, 거짓이 결과인 조건이 들어가고(그 자체가 들어가도 됨) 참이 들어가면 중괄호 안의 내용을 실행 시키고, 거짓이라면 실행하지 않는다. else 문 예시 if (false) { console.log('The code in this block will not run.'); } else { console.log('But the code in this block will!'); } // Prints: But the code in this blo..

JS 자바스크립트 (1)

Java script 자바 스크립트 사용의 배경 때는 1990년대, 넷스케이프와 마이크로소프트 사의 브라우저 주도권 전쟁이 벌어지고 있었다. 넷스케이프에서는 당시 사용되던 종래의 어려운 언어 대신 새로운 언어를 브라우저 개발용으로 개발하기로 한다. 바로 모카라고 불리는 언어였는데 후에 이 언어는 자바스크립트가 된다 . 1995년, 넷스케이프의 직원인 브렌던 아이치는 회사가 준 10일의 시간 동안 새로운 언어 개발에 착수했다. 그 결과 아이히는 나중에 자바스크립트로 이름이 바뀐 모카를 만들었다. 결론적으로, 자바스크립트는 결코 웹의 표준 언어가 되기 위해 만들어진 것이 아니었다! 하지만 넷스케이프가 브라우저 전쟁에서 승리하면서 자바스크립트의 인기가 높아졌고 점점 더 많은 사이트들이 자바스크립트를 사용하기 ..

개인 프로젝트 Reedio 웹페이지 만들기

코드카데미 과제로 홈페이지를 만드는 게 있었는데, 그냥 깔끔하게 무시하고 어차피 이 과제가 끝나면 JS로 들어가다보니 개인적으로 구상하고 있던 Chrome extension을 만들기 위한 landing page 제작에 바로 들어가기로 했다. 서비스의 이름과 로고부터 정하려고하니 Figma나 Canva를 이용하는 것이 좋을 것 같아서, 많이 들어본 Figma를 간단하게 학습한 후 아무렇게나 휘갈겨서 로고를 만들었다. 개인 프로젝트 주소 https://kimhajoon.github.io/reedio.github.io/ Reedio Make Youtube videos more comprehensive This service gives you a real-time translated subtitles on ev..