신입개발자를 희망하는 오시리엔

DOCTYPE html> 회원가입 /* 성공/실패에 대한 스타일 구현 */ .success-feedback { color: #00b894; display: none; } .fail-feedback, .fail2-feedback { color: #d63031; display: none; } .success ~ .success-feedback { display: block; } .fail ~ .fail-feedback { display: block; } .fail2 ~ .fail2-feedback { display: block; } .success { /* important는 우선순위를 최상위로 올린다 */ border-color: #00b894 !important; background-image: url(..

DOCTYPE html> 정규 표현식 //자바스크립트에서 정규표현식으로 문자열 검사하기 //정규표현식을 생성하는 방법은 두 가지가 있다 //1. 직접 작성해서 정규표현식 객체를 생성 //2. 문자열을 이용하여 정규표현식 객체를 생성 //1. var idRegex = /^[a-z0-9]{8,20}$/; console.log(idRegex.test("test1234"));//true console.log(idRegex.test("test123"));//false, 글자수 미달 console.log(idRegex.test("Test1234"));//false, 형식 위반 //2. var nickRegexStr = "^[가-힣0-9]{2,10}$"; //console.log(nickRegexStr.test("안..

DOCTYPE html> 글자수 입력제한 //[1] .form-input의 글자 수를 읽어 .form-input-length에 출력 //[2] 글자수가 초과되는 입력이 이루어지지 않도록 구현 function checkLength() { var textarea = document.querySelector(".form-input"); //만약에 1000글자가 넘어간다면...? // -> 1000글자가 될때까지 잘라서 덮어쓰기 // -> IME 방식의 글자들까지 고려하여 처리 if(textarea.value.length > 1000) { var copy = textarea.value; while(copy.length > 1000) { copy = copy.substring(0, copy.length - 1);..

DOCTYPE html> 글자 크기 조절 //(주의) 자바스크립트 기본 함수명과 충돌할 우려가 있으니 가급적 길게 이름을 지을 것 // - 예) open, close, alert, confirm, ... //(주의) 미리 태그를 선택하지 말 것 //var tag = document.querySelector(".target"); //console.log(tag); function small(){ var tag = document.querySelector(".target"); tag.style.fontSize = "12px"; } function normal(){ var tag = document.querySelector(".target"); tag.style.fontSize = "16px"; } funct..

DOCTYPE html> 색상 바꾸기 function black(){ var h1 = document.querySelector("#h1") h1.style="color: black;"; h1.style.borderColor= 'red'; } function blue(){ var h1 = document.querySelector("#h1") h1.style.color= 'blue'; h1.style.borderColor= 'blue'; } function red(){ var h1 = document.querySelector("#h1") h1.style.color= 'red'; h1.style.borderColor= 'red'; } hello Javascript! 검정으로 변환 파랑으로 변환 빨강으로 변환

DOCTYPE html> Javascript Event //Event란? //- 일반적이지 않은 특별한 상황 //- click, focus, input, 등 다양한 상황이 존재 //Event Handling이란? //- 발생한 이벤트를 통제하여 원하는 작업을 실행하는 것 //- onclick, onfocus, oninput 등에 함수 호출 코드를 작성 //- 함수에서 필요한 나머지 처리를 수행하도록 구현 function changeImage() { //console.log("실행!"); //이미지 태그를 참조할 수 있도록 탐색(cf. CSS 선택자) var tag = document.querySelector("#target"); //이미지의 src를 다른 값으로 변경 tag.src = "https://p..

DOCTYPE html> 함수(Function) //자바스크립트(EcmaScript5) 에는 클래스가 없다 //- 자바스크립트에서는 함수로 모든것을 처리 //- 자바스크립트에는 접근제한도 없다ㅌ // static void show(int a) { // System.out.println("Hello!"); // } function show(a) { console.log("Hello"); console.log(a); } //자바스크립트 함수는 아무렇게나 불러도 실행이 된다 //- 매개변수에 값이 안들어가면 undefined //- 오버로딩이 불가능하다 show(); show(100); show('hello'); show(100, 200, 300); //함수의 궁극적인 목적은 화면과 연결된 기능을 구현하는 것..

DOCTYPE html> 변수 //int a = 10; //System.out.println(a); var a = 10; console.log(a); //자바스크립트에서는 변수를 var 키워드로 생성한다 //- 자료형에 관계 없이 하나의 키워드로 사용 //- 계산 등은 프로그래밍 상식에 따라 처리 var b = "hello"; console.log(b); var c = 'hello';//문자열이 외따옴표도 가능 console.log(c); //세미콜론이 없어도 실행이 가능(비추천) var d = 'goodbye' console.log(d) var v1 = 10; var v2 = 20; console.log(v1 + v2); console.log(v1 / v2);//정수 실수 구분이 없음 console.l..

DOCTYPE html> Javascript alert("hello Javascript!!"); before Javascript! after Javascript!

/* 자주 사용하는 디자인 코드를 모아놓은 파일 */ @charset "UTF-8"; * { box-sizing: border-box; font-family: 'Noto Sans KR', sans-serif; } /* 컨테이너(Container) - 화면의 단위 - 가운데 정렬되도록 구현 - 내부에 행(row)을 배치하여 원하는 화면을 구성 */ .container { margin-left: auto; margin-right: auto; } /* 자주 사용할 것으로 예상되는 폭을 클래스로 지정 - 최소 300px, 최대 1200px까지 100px 단위로 설정 - 100부터는 비율(%)로 설정 */ .w-100 { width:100%; } .w-300 { width:300px; } .w-400 { widt..