전체 글 25

[JavaScript] Booleans

Booleans - true, false 두가지 진리값만 존재 - 사용 예시 : 로그인, 동영상 재생 등 예시 const cuteCat = true; console.log(cuteCat); 결과 : true const cuteCat = null; console.log(cuteCat); 결과 : null 값이 없다고 정의가 되어있다는 뜻, 자연발생하지 않음, 어떤 것이 없다는 것을 확실하게 할 때 사용 let something; // 값을 지정하지 않음 console.log(something); 결과 : undefined something 이라는 함수를 지정했지만 값을 지정하지 않아서 값이 비어있는 상태

JavaScript 2023.11.07

[JavaScript] Variables(변수 : var, let, const)

Variables - 기본적으로 const 사용, 필요할 때만 let 사용 - const를 사용한 코드는 절대 바뀌지 않는 것을 알 수 있고, let을 사용한 코드는 바뀔 가능성이 있다는 것을 알게해줌 문제 제기 console.log(5+2); console.log(5*2); console.log(5/2); // 결과 7 10 2.5 위에서 아래 순서대로 출력 문제점 : 바꾸고 싶은 숫자가 있으면 직접 다 바꿔줘야함 해결방안 : 변수를 사용해서 바꾸기 간단하게 변경 var - 가장 기본적인 변수 선언 방식, 재할당이 가능하고 중복 선언이 가능하기때문에 더 늦게 선언된 변수가 적용된다 - 아무런 규칙이 없음 - 문제점 : 실수로 값을 업데이트해도 알려주지 않아서 처음 지정한 값 보호 불가능 - 이러한 문제..

JavaScript 2023.11.05

[JavaScript] 객체(Object)

객체란 코드가 많아지면 함수를 써서 정리하는데, 그 함수가 많아지면 객체를 활용해서 정리 예시 : document.querySelector document ➝ 객체 querySelector ➝ Method 기본 var coworkers = { "programmer" : "marmot", "designer" : "gooma" }; document.write("programmer : "+ coworkers.programmer+" "); document.write("designer : "+ coworkers.designer+" "); coworkers.bookkeeper = 'ada'; document.write("bookkeeper : "+ coworkers.bookkeeper+" "); /* 위 아래 같은..

JavaScript 2023.11.04

CSS 주요 특징

캐스케이딩 하나의 태그에 적용되는 스타일이 여러 개 일때 우선순위에 따라 스타일이 적용되는 원칙 여러 스타일이 동시 적용 되어도 오류 발생x 우선순위 : 중요도, 명시성, 작성 순서 중요도 !important 키워드 붙이면 가장 높은 우서순위 가짐, 여러개 사용시 작성 순서 늦은 것이 우선 적용 명시성 인라인 선택자 : 1000 아이디 선택자 : 100 클래스 선택자, 가상 클래스 선택자, 속성 선택자 : 10 요소 선택자, 가상 요소 선택자 : 1 총합 높은 스타일 우선 적용 작성순서 마지막으로 적용되는 원칙, 늦게 작성된 속성 우선 적용

CSS 2023.11.03

[JavaScript] 함수(Function)

기본 문법 결과 : 1 2-1 2-2 3 2-1 2-2 함수 function에 two 를 지정하고 출력시 2-1, 2-2가 출력되게 하고 two();로 출력 2-1, 2-2가 불규칙적으로 반복되어야 하는 경우 반복문을 사용하기 어렵거나 힘들기 때문에 사용하는 것이 함수 매개변수 & 인자(Parameter & Argument) 결과 : 2 2 결과 : 5 7 function sum(left, right) : left, right에 해당하는 것은 매개변수 sum(2,3) : 2,3에 해당하는 것은 인자 출력(Return) 결과 : 5 5 5

JavaScript 2023.11.03

JavaScript 배열, 반복문의 활용

document.querySelector('a') : 제일 처음 나오는 a 태그 출력 document.querySelectorAll('a') : 문서에 존재하는 전체 a (노드 리스트) 출력 ➝ 배열은 아니지만 배열이라고 생각 alist[n]에 들어간 수의 순서에 맞는 a 태그 출력 반복문 while을 활용하여 a 태그를 모두 출력 활용 var alist = document.querySelectorAll('a'); var i = 0; while(i < alist.length) { alist[i].style.color = 'powderblue'; i = i + 1; } 위 코드를 클릭시 버튼의 이름과 배경, 글씨색이 바뀌는 if 조건문에 대입시 글씨색을 바꿀 수 있음 예시 결과 : (작동 x) 클릭시 da..

JavaScript 2023.11.02

HTML 태그 정리

HTML은 뼈대가 되는 마크업 언어 링크 추가( ) 블로그 이동 , anchor href="링크 위치" : 어느 링크로 이동할지 설정 target="_blank" : 새창에서 열기 target="_self" : 현재창에서 열기 목록(, ) : ordered list, 순서가 있는 목록 : unordered list, 순서가 없는 목록 marmot leon chris ada 결과 : 1. marmot 2. leon 3. chris 4. ada marmot leon chris ada 결과 : • marmot • leon • chris • ada 이미지 삽입() 이미지를 삽입하는 태그, width 로 크기 설정 가능 , 두 태그 모두 의미는 없지만 다른 태그들을 묶는 부모의 역할을 하는 태그 차이점 : : 행..

HTML 2023.11.02

[JavaScript] 배열과 반복문

Array(배열) var coworkers = ["marmot", "leon"]; var : 변수 선언문 coworkers : 변수 이름 (다른 이름도 상관없음) "marmot" : index1, 0번 "leon" : index2, 1번 "marmot", "leon" 등의 항목은 배열에서 원소(element) 라고 지칭 document.write(coworkers[0]); document.write(coworkers[1]); 결과 : marmotleon 변수 coworkers의 0번인 marmot과 1번인 leon의 순서대로 값을 가져옴 coworkers.push('chris'); coworkers.push('ada'); *.push : coworkers에 chris, ada를 추가하는 태그 변수 안의 ..

JavaScript 2023.11.02
let textNodes = document.querySelectorAll("div.tt_article_useless_p_margin.contents_style > *:not(figure):not(pre)"); textNodes.forEach(function(a) { a.innerHTML = a.innerHTML.replace(/`(.*?)`/g, '$1'); });