전체 글35 javaScript DOM 객체와 이벤트 처리(1) javaScript DOM 객체와 이벤트 처리를 하는 방법, 여기서 부터는 조금은 복잡한 개념들과 순서, 그리고 방법들이 들어가니 집중하길 바랍니다. 서론 (1) 주문하는 대학교 CC 커플의 체크박스를 누를 시 생기는 이벤트와 주문한 메뉴를 정리하기. 객체의 이벤트 처리 (1) 아래와같은 예제에서 뭐 먹을까 안에는 코드 체크박스가 포함되어 있는데요. 이렇게 포함된 체크박스를 클릭하면, 색깔이 변하면서 전체적인 폰트색깔이 변하는 효과를 주고 싶습니다. 객체의 이벤트 처리 (2) 클릭이 발생한 메뉴를 [] 이 주문되었습니다의 대괄호 안에 넣어주기 (2) 이를 풀기 위한 자바스크립트와 부트스트랩이 연동된 코드를 나열해보겠습니다. 코드를 나열한 후 코드를 분석하는 시간을 가지도록 합니다. 아래는 객체와 이벤트처.. JavaScript 2023. 11. 23. JavaScript 기본개념(3) 상속과 상속의 실습예제 JavaScript 상속 Java의 상속과 매우 유사한 점을 볼 수 있는데요. 기존 클래스 내용을 그대로 상속받아, 새로운 클래스를 만들어, 중복적인 변수들이나 메서드들을 제거하기 위해 사용합니다. 그럼 간단한 예시와 함께 말씀드려 볼게요. 동물 클래스를 만들고 멤버 함수를 만들어주면 자바스크립트에서 자동으로 프로퍼티 타입(Prototype)으로 등록을 하게 됩니다. 서론 : 1. 자바스크립트는 클래스에 멤버 함수를 만들게 되면 프로퍼티 타입으로 등록해 줍니다. * 프로퍼티 타입이란 자바스크립트 내에서 객체 내부의 속성을 말하는 것으로, 객체는 곧 프로퍼티라고 할 수 있습니다. 프로퍼티는 키(Key)와 속성(Value)으로 이루어진 형식으로 할당되는데 여기서 키(Key)는, 문자열로만 가능하고, 따옴표가.. JavaScript 2023. 11. 23. JavaScript 기본개념(2) 연산자의 종류 JavScript의 기본개념인 연산자의 종류를 알아볼텐데요. 연산자를 표로 정리하기보다, 실제로 연산자를 어떻게 사용하는지에 대해서 작성해보도록 하겠습니다. 서론 연산자의 종류에 대해서 연산자의 종류에는 산술 연산자(+할당연산자) 연결 연산자 논리 연산자가 있는데요. 사실 우리가 스크립트에서 많이 사용하는 것은 할당연산자 부분과 연결 연산자가 아닌가 싶습니다. 아, 물론 학원 수업의 일부분을 보았을 때 말이죠. 그래서 가장 헷갈리는 부분인 '연산자'를 정리해보기로 했습니다. 일단 자바에서도 그렇듯, 연산자를 사용하기 전에, 우리는 값을 할당해야하는데요. 상수는 최초 선언 시 값을 할당해놓습니다. 본론 1. 문자열 연산자 문자열연산자는 문자열을 연결할 때 사용하는 연산자로, 두 문자열의 값을 서로 연결한 .. JavaScript 2023. 11. 23. JavaScript의 간단 정리와 출력 JavaScript가 프론트엔드에서 중요한 이유는 정적페이지가 아닌 조금 더 동적인 페이지를 만들기 위함이죠. 항상 일정하게 똑같은 페이지만 보여주는 HTML과 CSS는 사용자의 인터페이스로 하여금 지루함을 느낄 수 있을텐데요. HTML과 CSS을 포함해 JavaScript를 활용하면 웹 페이지 내에서 복잡한 기능을 구현할 수 있도록 도와주니, 사람들은 이를 스크립팅 언어라고도 부릅니다. 한줄 요약으로 정리하자면 자바스크립트로 구현할 수 있는 것은 우리가 옛날에 즐겨 보았던 네이버의 실시간 검색어, 혹은 현재 자주 사용하는 실시간 날씨, 주식 등이죠. 1. JavaScript 의 사용 JavaScript에서는 중복 값의 변수를 사용할 때 에러를 발생시키지 않는 경우가 종종 있는데요 이를 방지하기 위해서 .. JavaScript 2023. 11. 22. Programmers 첫 번째, 부분 문자열 contains() 함수 Programmers 첫 번째 문제 풀이, 부분 문자열 contain을 알아보도록 할게요. contains() 함수는 문자열에 특정 문자열이 포함되어 있는지 확인하는 함수이며, 대 소문자를 구분합니다. 아래의 문제들은 프로그래머스에 출처에 있습니다. 문제 소지가 발생할 시 프로그래머스와 관련된 내용을 모두 삭제할 것을 약속드립니다. 프로그래머스 보러 가기 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr 서론 contains() 기본 사용법 contains는 ture 값과 false 값으로 리턴해주는데, str이라는 변수에 문자열 "abcd"를 선언하고, s.. 알고리즘의 확장 2023. 11. 17. CSS 정렬 (1) float 수평 정렬의 방법과 예제 CSS 요소 정렬에 대해 이야기 나눠보도록 할게요. 정렬 PART는 꽤 많은 비중으로 정리해 보겠습니다. 정렬은 여러 가지 방법이 있는데요 그중에서도 float 함수인 수평 정렬에 대해서 이야기 나눠보겠습니다. 서론 float 요소들 요소 (1) none 기본 값의 요소 띄움 없음. 요소 (2) left 왼쪽으로 띄우기 요소 (3) right 오른쪽으로 띄우기 요소 (4) claer 텍스트에 float으로 정렬된 값을 해제시킬 때 사용하는 명령어 div에 예제를 위한 기본 값 설정하기 Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature fro.. HTML.CSS 2023. 11. 16. CSS 가상 클래스 선택자 선택자 뒤에, 가상 이벤트를 붙이게 되면, 설정한 이벤트마다 스타일을 적용할 수 있습니다. 가상 클래스 선택자로 마우스 포인터 이벤트, 혹은 애니메이션 등의 설정, 그리고 대화형 컨텐츠를 제작할 수 있어,웹 사이트를 관리하시는 분들이라면 알면 유용한 기능이니 꼭 참고해주시길 바랍니다. 서론 1. 가상 클래스 선택자의 종류 hover : 마우스 포인터가 올라가 있는 동안 설정한 이벤트가 발생하는 것을 말합니다. transition-duration : 마우스 포인터가 올라갈 때 애니메이션 이벤트가 발생하는 것을 말합니다. (전환속성 중 일부) active : 마우스로 누르고 있는 동안 이벤트가 발생하는 것을 말합니다. focus : 선택자가 포커스 된 동안에만 시행되며 대화형 컨텐츠 (input, img, .. HTML.CSS 2023. 11. 16. HTML 스타일의 우선순위 결정 HTML 스타일의 우선순위 결정에 대해 알아보도록 하겠습니다. 웹 페이지를 만들다가, 혹시 어떠한 문구에 강조를 넣고 싶다거나, 혹은 삭제하고 싶을 때 우리는 스타일을 지정하여 부호를 만들어주는데요. 하지만, 많은 양의 HTML 코드를 작성하다 보면, 중복되는 스타일의 형태도 많아질 뿐만이 아니라, 우리가 코드를 작성하며, 이미 만들어놓았던 스타일에 덮어씌워지는 경우도 있어, 스타일을 입력이 끝난 후에는 한번 더 꼼꼼히 체크하고는 해야 합니다. 서론 생략 본론 1. HTML 우선순위를 알기 전에 블록타입과 인라인타입의 비교를 알아보자. HTML 모든 요소는 해당 요소가 웹 브라우저에 어떻게 보이는가를 결정짓는 DISPLAY 속성을 가지는데요. HTML에서는 이러한 디스플레이의 "속성" 값으로 "두 가지".. HTML.CSS 2023. 11. 15. Oracle 글자 찾는 함수 LENGTH, INSTR, LIRIM, RTRIM, TRIM Oracle 글자 찾는 함수 INSTR, LITRM에 대해서 이야기 해보도록 하겠습니다. 우리가 문자의 시작 위치를 반환하거나, 아니면 데이터의 값이 어느 위치에 있는지 반환하고자 할 때 사용하는 함수는 많지만, 많은 데이터를 처리할 때 필요한 함수를 기억하는 것도 괘 좋은 방법이겠죠. 그래서 오늘은 INSTR과 LTRIM 그리고 RITRIM에 대해 정리해보았습니다. 서론 LENGTH : 문자의 길이를 찾을 수 있는 함수 LENGTH는 문자의 길이를 찾을 수 있는 함수로서, 사용하는 방법은 간단합니다. SELECT문에 찾고자 하는 컬럼명을 기재해주면 되는데요. 아래의 코드를 참조해주세요. ex) employee 테이블에 있는, 이메일 컬럼의 길이를 찾고싶다고 한다. SELECT length(email) .. Oracle 2023. 11. 10. Oracle 비교 연산자와 LIKE, NOT LIKE Oracle 비교 연산자에 대해 알아보도록 하겠습니다. Oracle 비교 연산자는 MySQL이랑 크게 달라진 점은 없습니다. 비교연산자를 정리한 표를 함께 올리도록 할게요. 연산자 설명 = 같다 >.=,= Oracle 2023. 11. 10. Oracle 기본 개념 : 시퀀스 설정 서론 : 오라클의 시퀀스를 간단히 표현하면 일련번호를 부여하는 설정이다. 오라클에서는 자동 증가 칼럼을 사용할 수 없기 때문에 별도로 설정해주어야 하는 것이 시퀀스 설정인데요. 다른 데이터베이스와 달리 오라클에서는 시퀀스를 설정해서 일련번호를 부여하는 방법을 씁니다. 자동으로 숫자를 증가시키기 위해서 간단한 명령어가 필요할 텐데요. 이때 사용하는 것이 바로 시퀀스입니다. 본론 1. 시퀀스 설정하는 방법 시퀀스는 간단히 아래와 같이 작성할 수 있습니다. 시퀀스명을 먼저 생성해 주고, start를 작성해 주는 데, 만일 아무런 숫자도 지정하지 않으면 자동으로 정수 1로 부여가 됩니다. 그리고 INCREMENT BY을 작성해 줍니다. 만일 본인이 최솟값과 최댓값을 설정하고 싶다면 최솟값을 설정하고 최댓값을 설.. Oracle 2023. 11. 10. Oracle 필수 개념 : 테이블, 따옴표, 컬럼 추가, 제약조건 Oracle는 대기업에서 많이 사용하는 데이터베이스라고 하죠. 사실 MySQL과 비슷한 듯 하지만, 조금은 다른 함수인데요. Oracle이 조금 더 기능이 많고, 유용하다고 합니다. 공부를 조금 더 오래 하고 싶으신 분들은 Oracle을, 간단한 데이터베이스 사용을 희망한다면 MySQL을 선택해서 사용하시면 될 듯합니다. 오라클의 테이블 생성 오라클 테이블은 MySQL의 테이블과 비슷합니다. 'create table 테이블명'을 통해서 작성하게 됩니다. 예를 들면 우리가 student라는 테이블을 생성하고자 할 때는 create 테이블을 생성하면 되는데요. 숫자는 number로, 문자는 varchar로 받는다는 것인데요. 이 점은 잘 기억해두셔야 할 듯싶습니다. 1. 오라클 필수 개념: 데이터타입 입력 .. Oracle 2023. 11. 9. 이전 1 2 3 다음