bravo my life!

1. 개요 replace는 특정 문자열을 찾고, 내가 지정한 문자열로 변경하는 함수다. 특정 문자열을 찾을 때 동일한 문자열이 여러개라면 첫번째로 검색된 문자열만 변경이 된다. 이런 경우에는 정규식을 통해 검색된 모든 문자를 변경할 수 있다. 2.기본 사용 replace('찾을 문자열', '변경할 문자열') let string = 'hello world, JavaScript' string.replace('Java', 'Type') // 기대값 // string = 'hello world, TypeScript' 특정 문자열이 여러개라면 첫번째로 검색된 문자열만 변경이 된다. let string = 'hello world, JavaScript, JavaScript, JavaScript' string.repl..

Set 객체 자바스크립트의 표준내장객체로 원시값, 객체 모두 유일한 값을 저장할 수 있다. 사용 수단중 하나로 중복을 제거한 값을 저장하는 방법으로 사용될 수 있다. 사용방법 let numberArr = [39, 40, 41, 0, 1, 2, 40, 41, 0, 1] //중복된 값이 존재한다. 39, 40, 41, 0, 1 let newArr = new Set(numberArr) //기대값 //Set(6) { 39, 40, 41, 0, 1, 2 } let newArr = new Set(numberArr).size //Set의 요소의 개수는 .size를 사용한다. //기대값 //6 let newArr = new Set(numberArr).add(99) //Set의 요소의 추가는 .add를 사용한다. //기..

1. 개요 연속되는 요소가 있고 그 요소들의 CSS 속성을 다르게 지정하고 싶을 때, child 선택자를 사용하여 CSS의 속성을 다르게 줄 수 있다. 2. child 선택자의 종류 only-child 자식요소가 하나인 경우 적용이 된다. first-child 자식요소가 여러개인 경우 가장 첫번째 자식요소가 선택이 된다. last-child 자식요소가 여러개인 경우 가장 마지막 자식요소가 선택이 된다. nth-child() 자식요소가 여러개인 경우 소괄호 안에 지정한 숫자에 대응하는 순서인 요소가 선택이 된다. nth-last-child() 자식요소가 여러개인 경우 소괄호 안에 지정한 숫자에 역순으로 대응하는 순서인 요소가 선택이 된다. 이번 포스팅에서는 last-child를 다루어 보겠다. 3. 사용법..

1. 데이터 타입 JavaScript가 어떠한 데이터를 처리함에는 규칙이 존재한다. 기본적으로 지켜야 할 것은 데이터 타입을 지켜줘야 하는 것인데, 사용되는 데이터의 타입은 아래와 같다. ⚬ 원시데이터 - boolean - null - undefinded - number - string - symbol ⚬ object JavaScript를 하며 대표적으로 사용할 것은 number, string일 것이다. 2. number, string 숫자열이, 문자열이라고도 한다. 숫자열의 가장 큰 특징은 연산이 가능한 것이다. console창에 alert(1+1) 을 입력해보자. 브라우저에서 경고창이 뜨고 내용으로는 2가 표시될 것이다. alert의 인자로 숫자열을 입력했기 때문에 연산의 결과가 표시되는 것이다. 문..

앞으로 JavaScript를 배워보려 한다. 기초라 생각하고 가볍게 넘어간 부분이 너무 많기 때문에 복습겸 공부를 시작했다. 1. JavaScript? 유저와의 상호작용을 위한 언어. HTML은 정적인 언어이기 때문에 유저에게 정보를 전달하는 기능으로 제한된다. 하지만 JavaScript는 동적인 언어이기 때문에 유저와 상호작용을 하고 유저가 적극적으로 웹을 조작할 수가 있다. 2. 상호작용은 어떻게? 유저와 상호작용할 수 있는 이벤트는 여러가지가 있다. 그 중 가장 기본적인 세가지는 다음과 같다. onclick(): 클릭을 감지하는 속성. onchange(): 내용의 변경을 감지하는 속성. onkeydown(): 키보드의 키 입력을 감지하는 속성. 3. JavaScript의 작동은 브라우저에서 확인이 ..

스파르타코딩클럽 웹개발 강의 결제 전, HTML의 초반을 잠시 복습해 보았다. ​ 1. HTML 요소의 구조. pjm : 속성값 pjm : 내용 : 종료 태그 속성명은 언제나 소문자로 입력할 것. 속성값은 언제나 따옴표로 감쌀 것. 2. HTML TEXT 요소 ㄱ. 제목 표현뿐만 아니라, 검색엔진이 검색할 수 있는 키워드가 된다. 제목 부분은 , 태그의 사용을 지양한다. ㄴ. , : 폰트를 단순하게 굵은 폰트로 표현한다. : 폰트를 굵게 표현하고 중요한 내용이라는 의미를 갖게 한다. 검색엔진은 태그를 사용한 텍스트를 더 중요하게 인식한다. ㄷ. , : 폰트를 단순하게 기울인다. : 폰트를 기울여 표현하고 중요한 내용이라는 의미를 갖게 한다. 검색엔진은 태그를 사용한 텍스트를 더 중요하게 인식한다. ㄹ. ..

3주차부터는 css로 작성한 html을 꾸며보기 시작했다. html만 공부할 때는 해 볼만하다고 느꼈는데, css 시작하고 나서 '아 내가 잘못 생각했구나.'라는 생각이 들었다. ​ html은 구성만 짜는것이라면 굉장히 쉽고 단순했는데, css로 꾸미기 위해서는 생각해 볼 것이 많았다. 예제를 보고 html로 구성하는것은 어떠한 방법으로 어떠한 태그로 어떻게 하던 예제와 비슷하게 만들수가 있다. 그런데 css로 꾸미기 위해서는 적절한 태그나 적절한 구성요소의 선택, 그리고 코드의 순서들이 중요했다. 일례로, css파일을 링크하는 태그도 순서가 중요했는데, style.css, reset.css 이 두가지를 링크할 때 reset.css 를 먼저 코딩해주어야 정상적인 출력물이 나온다. 위의 내용과 같이 res..

패스트캠퍼스에서 듣고 있는 프로그래밍 첫걸음 강의가 2주차에 접어들면서 html로 간단한 웹사이트 만들기가 시작되었다. 2주차가 시작되기 전에는 내가 하던 plc랑 크게 다르지는 않을 것이라는 생각이 있었지만, 달랐다. 많이 달랐다. plc는 위 그림과 같은 환경을 가진 프로그램으로 작업을 하는데, 작업이 직관적이다. 상단의 도구모음에 있는 펑션키 아이콘들이 있고, 이 것들로 프로그램을 작성하게 된다. 예를 들어 f3은 접점회로 추가이고, f5는 회로선 추가인데 직관적인 작업 아이콘들과 직관적으로 보여주는 작업결과로인해 사용하기가 편리한 편이다. 지금 생각해보면 wysiwyg와 비슷한 작업프로그램이라고 생각이 든다. ​ 그런데 위 사진과 같이 vscode는 명령어 도구모음이 없으니, 프로그램을 실행시킨 ..

패스트캠퍼스에서 제공하는 프로그래밍 첫걸음 시작하기 강의를 신청하였다. html, css, java script에 대한 기본개념을 알 수 있는 강의라 소개되어 있었고, 프로그래밍에 생경한 나에게는 적합한 강의라 생각되었다. ​ 본래 하던일은 전기, plc였다. 그 중 plc는 programmable logic control 이라고 하는데 산업자동화를 위해서 사용되는 기기 및 프로그래밍이다. ​ ​ 위 그림과 같은게 plc인데, ladder 형식으로 작성되어 있는 프로그램이다. 나도 프로그래밍을 해보았던 사람으로서 어느정도 자신감 있게 새로운 배움을 시작하였다. ​ 1주차때의 커리큘럼은 그렇게 어렵지 않았다. 프로그래밍을 배워야 하는 이유, 프로그래밍이 대략적으로 어떻게 작성되는지, 그 작성되는것을 승강기..