INTP의 멋대로 개발 세상

이번 포스팅은 조건문이라는 아주아주 중요한 개념을 배워볼 것이다😎 조건문이라는 것은, 하나의 프로그램이 하나의 흐름으로 가는 것이 아니라 조건에 따라서 다른 순서의 기능들이 실행되도록 하는 것❗ 이전 강의에서 만든 예제. 주간모드와 야간모드 버튼을 만들었는데, 하나의 버튼으로 만들어보고 싶다면? (밝은 상태에서 클릭하면 깜깜하게, 깜깜한 상태에서 클릭하면 밝은 상태로) (= 이런 걸 토글이라고 한다) (문법XXX 조건문이 이렇게 생겼다라는 것만 보자!) 토글의 코드는 이렇게 생겼다. if 조건에 'day' 모드이면 if {} 중괄호 안의 코드가 실행되고, else, 즉 night 모드이면 else {} 중괄호 안의 코드가 실행된다는 뜻이다. 영어랑 똑같이 해석되기 때문에 의미 파악은 어렵지 않다😎 비교연..

8~11강 까지는 자바스크립트 사용을 위한 기본적인 CSS 강의라서 따로 정리를 하지 않겠습니다😎 CSS를 아예 접하지 않으신 분은 8강부터 보시면 됩니다 예제에 night, day 버튼 코드를 지우고 이때까지 배운 개념을 토대로 다시 한 번 만들어 보자! (위 사진처럼!) // 버튼 만들기 그럼 이 버튼이 클릭됐을 때 태그의 스타일 속성을 동적으로 변하게 하고 싶다. 그렇다면 자바스크립트 문법에 따라 웹 브라우저에게 태그를 선택하도록 해야겠지? 이런 식으로 공식 문서를 활용하자! (해석) document.querySelector라는 명령문을 이용해서 selector를 넣으라 되어있는데 예시를 보니 ".myClass" 라고 되어 있고 .myClass 라는 것은 이 웹 페이지에 있는 모든 태그 중에 클래스..

이번 포스팅에서는 자바스크립트의 변수와 대입연산자에 대해서 알아볼 것이다🎓 변수는 학교 수학시간에 많이 들어봤을 것이다! "바뀔 수 있는 값" 우선 아무 홈페이지에서 콘솔 창을 열어보자😙 x를 1, y를 1로 선언했다. 그렇다면 x + y 는?? 똑똑한 자바스크립트가(?) 답을 계산해 준다😎 x를 1000으로 바꾸어 선언하고 다시 x + y 를 계산했더니 바뀐 x의 값으로 계산해 준다 더보기 여기서 x는 변수 (Variable) "=" 은 대입 연산자 라고 한다 오른쪽 항에 있는 값을 왼쪽에 있는 변수에 대입한다는 개념 (X라는 대입연산자를 통해서 값이 바뀔 수 있다 = 변수) 방금 논리를 적용하면 1에다가 2를 대입한다는 뜻인데, 당연히 1은 언제나 1이기 때문에 2를 대입하니 에러가 뜬다. (X와 달..

이번 포스팅은 6강은 자바스크립트 언어에 어떤 형태의 데이터들이 있는지 살펴보고, 그 중 대표적인 '문자'와 '숫자'에 대해 알아보는 내용인데 🤗 너무 쉬운 내용이라 (특히 다른 언어공부를 한 사람이라면) 강의 내용 전체를 정리하진 않았다 (정리하다보니 생각보다 긴 거 같은데.. 모든 내용을 정리하진 않았으니 필요한 사람이 있다면 아래 영상 참고!) 데이터 타입(Data Type) = 한국어로는 "자료형" 자바스크립트에서는 6개의 데이터타입과 + 객체(Object)가 있다 1. String 2. Number 3. Boolean 4. Null 5. Undefined 6. Symbol + Object 그리고 재미있는(?) String 메서드 2가지!✌ 1. toUpperCase() : 문자열을 모두 대문자로..

자바스크립트를 실행하는 또 다른 방법을 알아보고자 한다. 이전 포스팅까지는 자바스크립트를 사용하기 위해 웹 페이지를 만들었다.(HTML을 만들었으니까) 하지만, 꼭 파일이 아니더라도 그냥 단순 코드만 실행해야 되는 가벼운 상황들이 있다. 그런 경우에는 Console 을 이용한다. 웹 페이지에서 마우스 오른쪽 클릭 -> 검사를 눌러 개발자 도구를 열면, Console 탭을 찾을 수 있다 🔎 콘솔창을 열면 창에 커서가 깜빡일텐데 저기서 바로 자바스크립트 코드를 실행할 수 있다! 🔎 예시로!! 이런 화면이 있다고 해 보자. 이 화면의 글자수를 알고 싶다면?! (직접 셀 수 없으니까) 개발자 도구의 콘솔창을 열어서! 세고 싶은 텍스트를 작은 따옴표 (' ') 로 감싼 뒤, length 함수를 써 주면 986자라..

저번 포스트에 이어, HTML과 JavaScript가 만나는 방법을 계속 알아볼 것이다 😎 바로바로 ⭐이벤트⭐ 를 배워볼 것이다! 이벤트는 아주 중요함!!! 🙄 모르면 나중에 피를 보게 된다(내 얘기) DOCTYPE html> Document HTML 의 input 태그를 이용해서 버튼을 하나 만들어 보자! (input 태그의 type을 button으로 하면 버튼이 만들어 진다. value는 버튼 안에 적힐 값을 넣는다) 근데 hi 버튼을 클릭하면 경고창을 뜨게 하고 싶어졌다🤔 경고창은 alert 라는 기능을 사용한다. Window alert() Method W3Schools offers free online tutorials, references and exercises in all the major ..