본문 바로가기

Programing/JavaScript64

[코드팩토리] Operators : 연산자 연산자의 종류 산술 연산자 덧셈 (+) 뺄셈 (-) 곱셈 (*) 나눗셈 (/) 나머지 (나눗셈을 하고 났을 때의 나머지를 의미함, %) 아래처럼 괄호를 써서 우선 계산해야 하는 것도 표현 가능하다. 괄호가 없었으면 110이 나와야 하는 값이다. 증가와 감소 이미 담아둔 변수의 값에 +나 -의 기호로 수치를 더하는 방법이다. 연산자의 위치에 따른 계산 순서 연산자를 어디에 쓰느냐에 따라 계산 순서가 정해진다. number와 result라는 변수에는 각각 1이라는 값을 담았다. 3번째줄에서 로그로 result나 number의 값을 출력하라고 하면 당연히 1이라는 값이 출력된다. 그리고 5번째줄에서 result의 값을 변경한다. (const로 선언하면 값을 못바꾼다. 예제는 let으로 선언했기에 가능하다.) .. Programing/JavaScript 2024. 3. 2.
[코드팩토리] 호이스팅:Hoisting 개념 모든 변수 선언문이 코드의 최상단으로 이동되는 것처럼 느껴지는 현상을 이야기한다. 모든 프로그래밍 언어들은 Top to Bottom의 개념이다. 이것은 위에서 쓰인 함수부터 차례대로 실행한다는 의미인데, 호이스팅은 변수를 선언하면 그 변수들을 미리 메모리에 저장해두고, 나중에 호출이 되면 값을 출력해주는 방식을 일컫는다. 위의 코드는 정상적이다. fruit라는 변수에 사과라는 값을 담았고 이를 콘솔에 출력했더니 정상적으로 사과라는 string이 출력됐다. 그런데 이 경우를 보면 1번줄의 console.log(fruit);는 분명히 변수가 선언되기도 전에 쓴 함수이기 때문에 에러가 출력되어야 하는데 변수의 초기화를 의미하는 undefined가 출력됐다. 2번째 줄에서 변수를 선언한 것인데 변수를 최상.. Programing/JavaScript 2024. 3. 2.
[코드팩토리] 자바스크립트의 데이터 타입 자바스크립트의 데이터 타입 Primitive Type:원시타입 (6개) 1. Number (숫자) 2. String (문자열) 3. Boolean (불리언, 참과 거짓) 4. undefined (정의가 되지 않은 상태) 5. null (정의가 되지 않은 상태) 6. Symbol Object Type (1개) 7. Object (객체) : object, array, function(이 글에서 다루진 않음) 1. Number (숫자) const age = 32; 위 변수는 Number 타입으로 선언한 모습이다. const temperature = -10;와 같이 음수로도 선언 가능하다. 해당 변수가 어떤 타입인지 확인하고 싶을 때 console.log(typeof age);로 콘솔에 띄워볼 수 있다. 2. .. Programing/JavaScript 2024. 3. 1.
[코드팩토리] JavaScript 세팅, 콘솔에 로그 띄우기, 변수 선언하기 출처 : https://www.youtube.com/watch?v=ZOVG7_41kJE&t=8556s 자바스크립트 세팅하기 설치하기 Visual Studio Code 사용 익스텐션 Live Server, Code Runner 사용 Console.log('Hello, World!'); 콘솔에 무언가를 띄우기 주석 작성하기 한 줄만 넣을 때 // 여러 줄 넣을 때 /* */ 변수 선언하기 var, let, const 세 가지가 있다. 현업에서는 var은 잘 사용하지 않는다. let과 const가 그 이후에 보완해서 나왔기 때문.그러나 배우는 단계에서는 알고는 있어야 한다. var로 짜여진 스크립트가 많기 때문. 처음에는 console.log('자바스크립트'); 와 같이 '' 따옴표로 묶어서 텍스트를 표현했지.. Programing/JavaScript 2024. 3. 1.
기존에 있던 텍스트 지우고 input에 있는 이미지 링크로 이미지 출력하여 대체하기 상황 html 어딘가 샘플 텍스트가 입력되어 있고, (또는 없더라도 정해진 구역이 있고) 웹 사용자가 input이나 textarea에 이미지링크 (웹주소 또는 로컬 주소)를 적고 버튼의 onclick 이벤트를 발생시켜 해당 위치에 이미지로 대체하고자 한다. 문제 해결 이 자바스크립트 함수에선 JQuery를 혼용 사용한다. JQuery 사용을 위한 CDN을 입력한다. 이따가 기존 텍스트를 지우는 과정에서 JQuery의 empty 함수를 이용하여 JQuery 함수만 사용하는 것이 깔끔하겠지만 본인은 코딩 7일차라 잘 모르는 내용으로 이렇게 해결했다. 이미지를 대체시킬 구획을 로 만들어 id를 부여한다. 아래 예제에선 을 사용했지만 안의 내용은 전부 사라지기 때문에 어떠한 내용이나 형식이어도 상관없다. 아래 .. Programing/JavaScript 2024. 2. 29.

티스토리툴바