[JavaScript] html태그 name과 id로 접근하기 ( document.getElementById('id') )
·
프로그래밍 언어/JavaScript
객체 접근 : document.getElementById('id') Hello JS CSS 적용 document.getElementById('id')를 통해서 하나의 객체 그 자체의 값을 넘겨받을 수 있다. 객체 자체를 받아와서 변수 obj에 값을 넣어주면 변수 obj를 통해서 객체의 값을 set 할 수 있다. let obj = document.getElementById('demo'); console.log(obj); 출력결과 Hello JS CSS Hello JS CSS 적용 적용버튼 누른 결과 func()에서 set 한 값들이 적용된다. name으로 접근 라면 타이머 원하는 시간을 선택해 주십시오(기본 시간 3분) 5분 3분 2분 1분 30초 time selected close 라면 타이머 원하는 시..
[JavaScript] id, class, name 식별자 예제를 통해서 확인하기
·
프로그래밍 언어/JavaScript
식별자 id 고유한 식별을 목적으로 하는 경우 사용 페이지에서 하나의 요소만 지정 가능 class 재사용을 목적으로 하는 경우 사용 여러 개의 요소에 지정 가능 name form 컨트롤 요소의 값(value)을 서버로 전송하기 위해 필요한 속성 여러 개의 요소에 지정 가능 id : javascript에서 접근 목적. 현 페이지에서 한 개만이 유효 == Javascript class : js에서도 접근이 가능하지만, 일단은 css에서 디자인적인 요소인 경우가 많다. == css 쪽에서 주로 사용, 현 페이지에서 다중으로 설정이 가능하다. name : 값을 전달하기 위한 목적을 가지고 있는 경우가 많다. 다중 설정이 가능하다. 즉, A페이지에서 B페이지로 이동하는 경우 값을 넘겨준다. id : 여러 개의 요..
[JavaScript] html 문서에 JavaScript를 포함할때 어떻게 포함하는게 효율적일까? (head,body,defer, async)
·
프로그래밍 언어/JavaScript
blocked -> fetching.js -> executing.js -> parsing.html head blocked -> fetching.js -> executing.js -> parsing.html 1.parsing html 사용자가 html 파일을 다운로드하였을 때 브라우저가 1줄씩 parsing 하게 된다. 이때 css와 병합해서 dom요소로 변환하게 된다. 2.blocked html을 쭉 parsing 하다가 script 태그가 보이면 main.js를 다운로드해야 되네?라고 이해하고 html parsing을 멈추게 된다. 3.fetching.js script 태그에 해당되는 main.js 파일을 서버에서 다운로드 받게 된다. 4.executing.js 다운로드가 완료되면 main.js파일을 ..
[프로그래머스] Level 1 : 시저 암호(JAVA)
·
코딩 테스트/Java
시저 암호 문제 설명 어떤 문장의 각 알파벳을 일정한 거리만큼 밀어서 다른 알파벳으로 바꾸는 암호화 방식을 시저 암호라고 합니다. 예를 들어 "AB"는 1만큼 밀면 "BC"가 되고, 3만큼 밀면 "DE"가 됩니다. "z"는 1만큼 밀면 "a"가 됩니다. 문자열 s와 거리 n을 입력받아 s를 n만큼 민 암호문을 만드는 함수, solution을 완성해 보세요. 제한 조건 공백은 아무리 밀어도 공백입니다. s는 알파벳 소문자, 대문자, 공백으로만 이루어져 있습니다. s의 길이는 8000이하입니다. n은 1 이상, 25이하인 자연수입니다. 입출력 예 s n result "AB" 1 "BC" "z" 1 "a" "a B z" 4 "e F d" 코드 class Solution { public String soluti..
[프로그래머스]Level 1 : 서울에서 김서방 찾기(JAVA)
·
코딩 테스트/Java
서울에서 김서방 찾기 문제 설명 String형 배열 seoul의 element중 "Kim"의 위치 x를 찾아, "김서방은 x에 있다"는 String을 반환하는 함수, solution을 완성하세요. seoul에 "Kim"은 오직 한 번만 나타나며 잘못된 값이 입력되는 경우는 없습니다. 제한 사항 seoul은 길이 1 이상, 1000 이하인 배열입니다. seoul의 원소는 길이 1 이상, 20 이하인 문자열입니다. "Kim"은 반드시 seoul 안에 포함되어 있습니다. 입출력 예 seoul return ["Jane", "Kim"] "김서방은 1에 있다" 코드 class Solution { public String solution(String[] seoul) { for(int i = 0 ; i < seoul...
[프로그래머스]Level 1 : 문자열 내 p와 y의 개수(JAVA)
·
코딩 테스트/Java
문자열 내 p와 y의 개수 문제 설명 대문자와 소문자가 섞여있는 문자열 s가 주어집니다. s에 'p'의 개수와 'y'의 개수를 비교해 같으면 True, 다르면 False를 return 하는 solution를 완성하세요. 'p', 'y' 모두 하나도 없는 경우는 항상 True를 리턴합니다. 단, 개수를 비교할 때 대문자와 소문자는 구별하지 않습니다. 예를 들어 s가 "pPoooyY"면 true를 return하고 "Pyy"라면 false를 return합니다. 제한사항 문자열 s의 길이 : 50 이하의 자연수 문자열 s는 알파벳으로만 이루어져 있습니다. 입출력 예 s answer "pPoooyY" true "Pyy" false 입출력 예 설명 입출력 예 #1 'p'의 개수 2개, 'y'의 개수 2개로 같으므로..
[프로그래머스]Level 1 : 약수의 개수와 덧셈(JAVA)
·
코딩 테스트/Java
약수의 개수와 덧셈 문제 설명 두 정수 left와 right가 매개변수로 주어집니다. left부터 right까지의 모든 수들 중에서, 약수의 개수가 짝수인 수는 더하고, 약수의 개수가 홀수인 수는 뺀 수를 return 하도록 solution 함수를 완성해주세요. 제한사항 1 ≤ left ≤ right ≤ 1,000 입출력 예 left right result 13 17 43 24 27 52 입출력 예 설명 입출력 예 #1 다음 표는 13부터 17까지의 수들의 약수를 모두 나타낸 것입니다. 수 약수 약수의 개수 13 1, 13 2 14 1, 2, 7, 14 4 15 1, 3, 5, 15 4 16 1, 2, 4, 8, 16 5 17 1, 17 2 따라서, 13 + 14 + 15 - 16 + 17 = 43을 r..
[HTML] <form>, 다양한 input type, 식별자(id, class, name), <a> vs <form>
·
프로그래밍 언어/html
식별자 id 고유한 식별을 목적으로 하는 경우 사용 페이지에서 하나의 요소만 지정 가능 class 재사용을 목적으로 하는 경우 사용 여러 개의 요소에 지정 가능 name form 컨트롤 요소의 값(value)을 서버로 전송하기 위해 필요한 속성 여러 개의 요소에 지정 가능 id : javascript에서 접근 목적. 현 페이지에서 한 개만이 유효 == Javascript class : js에서도 접근이 가능하지만, 일단은 css에서 디자인적인 요소인 경우가 많다. == css 쪽에서 주로 사용, 현 페이지에서 다중으로 설정이 가능하다. name : 값을 전달하기 위한 목적을 가지고 있는 경우가 많다. 다중 설정이 가능하다. 즉, A페이지에서 B페이지로 이동하는 경우 값을 넘겨준다. vs 두 태그의 공통점..
[HTML] 리스트 만들기 <ul>, <ol>, <li>
·
프로그래밍 언어/html
: unordered list (순서 없는 목록) 속성 disc : 검정원, default circle : 하얀원 square : 네모 none : 글자만 나타내기 : ordered list (순서 있는 목록) 속성 type : 순서를 어떤 식으로 표시할지 타입을 정할 수 있다. 1 a A i I start : 시작하고 싶은 번호를 정할 수 있다. default로 1부터 시작하지만, 100번 혹은 30번부터 시작하고 싶을 때 사용 list안에 list 또한 사용이 가능하다. 안에 사용 가능, 반대로도 사용이 가능하다. 예제1 : coffee tea milk coffee tea milk 예제2 : attribute coffee tea milk 예제3 : type coffee tea milk 예제3 : ty..
[HTML] 테이블 만들기 <table>tag, <tr>, <th>, <td>
·
프로그래밍 언어/html
테이블 만들기 태그 설명 테이블을 만드는 태그 테이블의 헤더부분을 만드는 태그 defalut값 : , 가운데정렬 테이블의 행을 만드는 태그 테이블의 열을 만드는 태그 속성 border : 테이블의 라인을 나타낸다. border설정을 안 하는 경우 테이블의 형태만 보인다. bgcolor : 테이블의 색상을 설정 행과 열의 색상도 따로 정할 수 있다. width : 테이블의 가로 크기를 설정 칼럼의 폭도 조절할 수 있다. height : 테이블의 세로 크기를 설정 colspan : 가로 합치기(열 합병) rowspan : 세로 합치기(세로 합병) rules : rows, cols, all 등등 다양한 속성 값들이 있다. rows는 테이블의 세로줄을 없애고 가로줄만 나타냄 cols는 테이블의 가로줄을 없애고 ..