javascript

틸드(tilde, ~) 연산자1. 개념틸드(~)는 비트 NOT(Bitwise NOT) 연산자로, 숫자의 모든 비트를 반전(invert)시킨 값을 반환한다.2. 동작 방식숫자의 2진수 비트 표현을 반전한다. (0 → 1, 1 → 0)반전된 값은 2의 보수(컴퓨터에서 음수를 표현하는 방식)로 해석된다.5 → 0000 0101~5 → 1111 1010 (이진수 음수 표현: -6)indexOf("banana") → 1~1 → -2 (Truthy, 값이 존재함)indexOf("orange") → -1~-1 → 0 (Falsy, 값이 없음)3. 활용틸드(~) 연산자는 비트 연산자이므로 정수 연산만 수행할 수 있는데, 이를 이용해 소수점 이하를 강제로 버리는 효과를 만들 수 있다.✅ 소수점 버리기console..

인프런 "웹 프론트엔드를 위한 자바스크립트 첫 걸음" 강의를 듣고 학습한 내용을 정리했습니다. 강의 내용 자바스크립트 자바스크립트란? 웹페이지를 동적으로 만들어주기 위한 프로그래밍 언어 동적인 웹페이지란? 키보드의 입력이나 마우스클릭 같은 이벤트에 반응하고, 파일을 업로드와 같은 다양한 기능이 있는 웹페이지 모던 자바스크립트란? 자바스크립트의 버전은 ES 뒤에 숫자를 사용해 나타내는데, 모던 자바스크립트는 자바스크립트 ES6과 그 이후의 버전들을 모두 포함한 자바스크립트이다. 자바스크립트의 동작 자바스크립트 엔진이 들어있는 모든 곳에서 동작한다. 대표적으로는 크롬 브라우저의 V8 엔진이 있다. 이런 사람들에게 추천 프로그래밍을 처음 접하는 분들 프론트엔드 개발자를 희망하는 분들 자바스크립트 기초를 빠르고..

✍🏻 programmers의 AI서비스와 함께 누구나 만드는 웹 프로젝트! feat. ChatGPT 강의를 바탕으로 작성된 코드입니다. 목표 기본 소스코드에서 버튼의 이벤트 리스너를 등록해 특정 동작을 수행하는 코드를 작성합니다. 우선, 우리가 원하는 해당 버튼의 결과는 다음과 같습니다. "이미지 만들기" 버튼을 클릭하면, 이미지를 보여준다. 30개의 이미지가 생성되면, 경고창이 표시된다. 사용자의 응답에 따라 새로운 이미지가 생성되지 않거나, 생성된 30개의 이미지가 화면에서 삭제된다. 이미지 가져오기 버튼 클릭 시 이미지를 가져오는 코드는 다음 로직대로 실행됩니다. 이벤트 대상을 선택한다. 여기서 이벤트 대상은 "이미지 만들기" 버튼입니다. html 파일에 있는 해당 button의 요소를 JavaSc..

🖥️ Udemy의 "JavaScript 완벽 가이드" 강의를 보고 정리한 내용입니다. 함수(Function) 추후에 실행할 수 있는 코드를 정의한다. JavaScript에서의 함수 정의 function 키워드를 사용하고 원하는 함수 이름을 적는다. 함수는 매개변수를 가질 수 있다. function functionName(params) { /** 함수 본문 * 실행하고자 하는 코드 */ } JavaScript는 함수가 정의되면 즉시 실행시키지 않고 메모리에 저장을 해둔다. 함수가 호출되었을 때, 함수 내의 코드를 실행한다. 함수 이름과 괄호를 추가하여 호출할 수 있다. 한 번 정의된 함수는 원하는 만큼 원하는 위치에서 호출해서 사용할 수 있다. JavaScript는 실행 전에 파일 전체를 읽어 자동으로 함..

🖥️ Udemy의 "JavaScript 완벽 가이드" 강의를 보고 정리한 내용입니다. 브라우저에 JavaScript 가져오기 HTML 파일의 섹션에서 * head에 script를 작성하면, 스크립트가 완료되기 전까지는 페이지가 렌더링 되지 않는다. 페이지가 먼저 로드되도록 하려면 body 끝 부분으로 스크립트 태그를 이동한다. * 또한 여러 JavaScript 파일을 가져오는 경우에는 작성 순서에 유의해야 한다. 의존할 내용이 있으면 먼저 작성한다. 변수(Variables)와 상수(Constants) 변수(Variables) 데이터 컨테이너, 데이터 저장소 let 키워드로 변수를 생성한다. 변수가 생성되면 언제든지 새로운 값을 변수에 재할당할 수 있다. 변수가 생성된 후 그 변수를 사용할 때는 let 없..

🖥️ Udemy의 "JavaScript 완벽 가이드" 강의를 보고 정리한 내용입니다. Javascript란 무엇인가? JavaScript는 런타임에 컴파일되는 동적 약형 프로그래밍 언어이다. 브라우저에서 웹페이지의 일부로 실행될 수도 있고, 모든 머신(호스트 환경)에서 직접 실행될 수도 있다. JavaScript는 웹페이지를 보다 동적으로 만들기 위해 만들어졌다. 최초에는 "LiveScript"라고 불렸으나 Java의 대중적 인기에 편승하기 위해 "JavaScript"로 이름을 바꾸었다. JavaScript의 실행 과정 html 파일이 호스팅 된 웹페이지가 있는 인터넷의 컴퓨터로 전송(request) 서버가 그 웹페이지를 로드한다. 응답(response)을 나의 브라우저로 전송한다. JavaScript의..

"[Study/JavaScript] - 자바스크립트 기초 정리 4. 조건문과 반복문" 글에서 이어집니다. 10. 기타 변수의 scope 변수의 scope: 선언한 변수가 유효한 영역 function scope 변수의 scope는 function의 scope를 따른다. 선언된 변수는 선언된 함수 안에서 접근 가능하다. 함수 안에 선언된 함수(nested function)에서도 접근 가능하다. 예시 코드 function a() { var v_a = "a"; function b() { var v_b = "b"; console.log("b : ", typeof v, typeof v_a, typeof v_b); // b : string string string } b(); console.log("a : ", ty..

"[Study/JavaScript] - 자바스크립트 기초 정리 3. 문자열과 배열" 글에서 이어집니다. 7. 주석 주석: 코드에 대한 설명 등의 이유로 작성하는 프로그램의 동작과 무관한 코드 한 줄 주석 두 개의 슬래시 // 이후에 작성되는 주석 여러 줄 주석 /*으로 시작해서 */으로 끝나는 주석 여러 줄에 걸쳐서 활용 가능 8. 조건문 조건문: 조건에 따라 프로그램의 흐름을 분기해서 특정 코드가 실행되도록 한다. if, else if, else if(/*조건식*/){ // 참인경우 실행될 코드 } else if( /*조건식*/ ){ // if 문의 조건이 거짓이고, 위의 조건식이 참인경우 실행될 코드 } else if( /*조건식*/ ){ // 위의 if, else if문의 모든 조건이 거짓이고, 위..

"[Study/JavaScript] - 자바스크립트 기초 정리 2. 연산자와 함수" 글에서 이어집니다. 5. String 문자열의 길이 문자열의 length 속성을 이용한다. str.length 문자열 붙이기 concat 함수 (concatenate) str1.concat(str2) str1.concat(str2).concat(str3) 더하기(+) 연산자 str1 + str2 특정 위치의 문자 charAt 함수 str.charAt(index) 범위를 벗어난 경우 빈 string("") 반환 대괄호([]) str[index] 범위를 벗어난 경우 undefined 반환 부분 문자열 구하기 문자열의 연속된 일부분을 구하는 함수 str.substring(pos1, pos2): pos1에서 pos2까지의 부분 ..

"[Study/JavaScript] - 자바스크립트 기초 정리 1. 변수와 자료형" 글에서 이어집니다. 3. 연산자 산술 연산자(Arithmetic operator) 이항연산자 (binary operator) 두 개의 피연산자(A, B)를 가지는 연산자 피연산자는 변수나 숫자가 될 수 있다. +: 더하기 -: 빼기 *: 곱하기 /: 나누기 %: 나머지 단항연산자(unary operator) 하나의 피연산자(A)를 가지는 연산자 대표적으로 -연산자가 있으며, -A의 꼴로 사용하는 경우 -는 이항 연산자가 아닌, 단항연산자이다. A변수에 -1을 곱한 효과가 발생한다. 증감연산자(++, --) 표현식 안에서 변수의 값을 증가하거나 감소시킨다. 연산자를 변수 앞에 사용한 경우와 변수 뒤에 사용한 경우에 따라 변..