본문 바로가기
반응형

분류 전체보기256

조건문 (feat. 조건문을 이용한 주간모드,야간모드 전환 버튼 생성) 조건문이란, 주어진 조건에 따라서 애플리케이션을 다르게 동작하도록 하는것이다. 조건문은 if로 시작하며, if 뒤의 괄호 안에 조건을 기입한다. (조건이 될 수 있는 값은 Boolean이다.) IF 뒤의 괄호 안에 조건이 true 이면, IF문 뒤의 중괄호 { } 구간이 실행되고, IF 뒤의 괄호 안에 조건이 false 이면 else문 뒤의 중괄호 { } 구간을 실행한다. 이 조건문을 이용하여 이전 "제어할 태그 선택하기" 강의에서 학습하였던 주간모드/야간모드 버튼을 하나로 통합하여 생성해보자. https://nossodia.tistory.com/117 제어할 태그 선택하기 (야간모드,주간모드 버튼 생성) https://www.w3schools.com/js/tryit.asp?filename=tryjs_d.. 2021. 9. 8.
비교연산자와 블리언 비교연산자는 좌항과 우항의 값을 비교하여 True나 False를 출력한다. 비교연산자에는 ===와 >이 있다. === 은 동등비교 연산자라고 하며, 좌항과 우항을 비교하여 같은값이면 True, 다른 값이면 False를 출력하는 연산자이다. html에 1===1, 1===2를 입력하면 입력한 그대로의 문자를 출력하지만, 자바스크립트에서 비교연산자를 기입하면 두값을 비교하여 True나 False를 출력한다. (Ex. 1===1 -> 1과 1은 같은값이므로 True, 1===2 -> 1과 2는 다른 값이므로 False를 출력.) 다음은 비교연산자 중 둘의 크기값을 비교하는 부등호를 살펴봅시다. 부등호에 대한 예시를 살펴보기에 앞서 미리 html의 문법 한가지를 참고하기 바랍니다. 보통 부등호는 로 표현하죠. .. 2021. 9. 8.
제어할 태그 선택하기 (야간모드,주간모드 버튼 생성) https://www.w3schools.com/js/tryit.asp?filename=tryjs_default Tryit Editor v3.7 Click the button to change the layout of this paragraph Click Me! function myFunction() { let x = document.getElementById("demo"); x.style.fontSize = "25px"; x.style.color = "red"; } www.w3schools.com 자바스크립트 공부 중 별도로 앱 구동하지 않고도 사이트 내에서 자바스크립트를 작성하고 바로 결과를 확인할 수 있다. 오늘의 학습목표 : 주간모드와 야간모드 전환 Night 버튼 클릭 시 야간모드 실행 : 배경은.. 2021. 9. 8.
CSS 기초 : 선택자 CSS 선택자 관련 상세 내용은 부스트코스 포스팅 참고할 것. https://nossodia.tistory.com/31?category=802521 CSS_ 선택자(selector) 1. 요소 선택자 선택자 중에 가장 기본이 되는 선택지이며, 태그 선택자라고도 합니다. 요소 선택자는 선택자부분에 태그 이름이 들어갑니다. 문서 내에 선택자에 해당하는 모든 요소에 스타일 nossodia.tistory.com https://nossodia.tistory.com/32?category=802521 CSS_문서 구조 관련 선택자 선택자 중에는 문서의 구조를 이용하여 요소를 선택하는 선택자도 있습니다. 문맥이나 요소의 구조를 기반으로 하여 선택자를 조합하는 것을 "조합자" 또는 "결정자" 라고 부릅니다. 이 조합자 .. 2021. 9. 8.
변수와 대입 연산자 콘솔에서 x와 y라는 변수를 생성하여 예를 들어보자. 예를 들어 콘솔에서 x=1, y=2을 입력했을 때 x+y를 실행하면 결과는 3이 된다. 그리고 다시 x=1000이라고 입력했을 때 x+y는 1002가 된다. 여기서 x, y를 변수(Variable)라고 하고 '='은 대입연산자 라고부른다. 그렇다면 '1=2;'를 대입하면 어떻게 될까? 숫자 1과 2는 변하지 않는 값, 상수(Constant)이기 때문에 오류가 발생된다. 변수는 왜 이용하는가? 예를들어 아래와 같은 내용의 alert창을 만들었다고 가정해보자. "Ester"이라는 이름이 중복해서 등장하도록 프로그래밍을 하였는데 이 Ester이라는 값이 수시로 변경되는 값이라면 어떻게될까? 변경될때마다 기존 "Ester"의 위치를 찾고 값을 수정해주어야한다.. 2021. 9. 6.
데이터타입-문자열과 숫자 https://developer.mozilla.org/ko/docs/Web/JavaScript/Data_structures 자바스크립트의 자료형 - JavaScript | MDN 모든 프로그래밍 언어는 내장 자료형이 있지만, 종종 이러한 내장 자료형은 언어마다 다르다. 이 문서에서는 자바스크립트의 내장 자료형과, 내장 자료형에서 사용할 수 있는 속성들에 대해 알 developer.mozilla.org 자바스크립트에는 6가지데이터 유형(Undefined, Boolean, Number, string, BigInt, Symbol)이 있다. 이 중 Number와 String에 대해 알아보자. - 웹페이지에서 마우스 우클릭 [검사]-[console] 탭에서 확인. 숫자(Number) 숫자(Number) 데이터의 .. 2021. 9. 5.
HTML과 JavaScript의 만남(Console) 자바스크립트 코드를 실행하기 위해서는 본래 웹페이지, 즉 파일을 생성하지만 경우에 따라서 파일이 아니더라도 간단하게 어떠한 코드를 실행해야 하는 상황이 있는데 이때 이용하는 것이 콘솔(Console) 입니다. 웹페이지에서 마우스 우클릭 후 [검사] 버튼을 누르고 console 탭을 누르면 아래와 같이 생성됩니다.(Chrome 기준) * 이 콘솔을 통해 자바스크립트 코드를 실행하면 현재 열려있는 웹페이지르 대상으로 자바스크립트 코드 실행. 이 콘솔을 이용하면 파일을 만들지않더라도 자바스크립트 코드를 즉석에서 실행할 수 있습니다. 예를 들어 계산이 필요할때 이 콘솔을 계산기로 쓸수도 있고, 데이터를 간단하게 처리할 수 있습니다. alert() 함수는 웹페이지에서 경고창을 띄워주는 함수입니다. alert() .. 2021. 9. 5.
HTML과 JavaScript의 만남 (script 태그, Event) 태그 안의 코드를 자바스크립트 코드로 해석한다. 위 예시는 Java Script와 HTML의 차이를 확인 할 수 있는 예시이다. 'Hello World' 라는 텍스트를 출력할때는 HTML과 Java Script 모두 동일한 기능을 수행하지만 HTML에서 1+1 은 '1+1' 문자 그대로를 출력하는 정적 역할을 수행하고 Java Script에서 1+1은 숫자 1과 1을 더한 값인 '2'로 만든 다음에 출력하는 동적 역할을 수행한다. Event (onclick,onchange,onkeydown) Java Script가 사용자와 상호작용을 할때 핵심적인 역할을 하는 것이 바로 '이벤트(Event)' 이다. 대표적인 이벤트로 onclick이 있다. onclick의 속성 값은 웹브라우저가 기억하고 있다가 사용자가.. 2021. 9. 5.
업무용 폴더 및 파일관리 2020. 6. 2.
성격심리학_빅 파이브에 근거하여 본인의 성격을 분석하고, 건강한 성격을 갖기 위해 필요한 요소들을 기술하시오. 빅 파이브에 근거하여 본인의 성격을 분석하고, 건강한 성격을 갖기 위해 필요한 요소들을 기술하시오. 2020. 6. 2.
반응형

티스토리툴바