웹코딩 배우기/· JavaScript69 숫자 메서드 - 자바스크립트 See the Pen 숫자메서드 by nilgi (@nilgi) on CodePen. 캬캬캬컄캬캬~ 아핳핳핳핳~ 어렵다~ 아하하하하핳~ 2021. 12. 3. 숫자 연산 - 자바스크립트 See the Pen 자바스트립트 숫자 쓰는 방법 by nilgi (@nilgi) on CodePen. let x = 12; let y = 12.24; // 숫자는 소수를 포함하거나 포함하지 않는다. let a = 100; let b = 200; let c = a + b; > 결과 300 // 숫자로 인식 let a = "100"; let b = "200"; let c = a + b; > 결과 100200 // 문자로 인식 let a = 100; let b = "200"; let c = a + b; > 결과 100200 // 문자로 인식 let a = "100"; let b = 200; let c = a + b; > 결과 100200 // 문자로 인식 let a = 100; let b = 200; let.. 2021. 12. 2. 문자 템플릿``과 문자 대체$( ) See the Pen 문자 대체하기 보간 by nilgi (@nilgi) on CodePen. let st1 = `문자 템플릿은 역따옴표로 묶는다.`; // 문자 템플릿은 역따옴표를 사용한다. Esc키 아래에 있다. // 역따옴표 안에 따옴표를 표시하려면 `문자 "문자"` 이렇게 쓴다. // 역따옴표 안의 문자는 여러 줄로 쓸 수 있다. // let text = `이렇게 여러 줄로 사용 가능 하다` document.getElementById("st").innerHTML = st1; let svt1 = "언제 죽을지 결정할 수 있다면"; let svt2 = "행복할 것이다."; let svt3 = "아뮈터블~" let svt = `내가 ${svt1} ${svt2} ${svt3}`; // 문자 대체는 $(내.. 2021. 11. 26. 문자가 있는지 확인 - match, includes, startsWith, endsWith See the Pen match, includes by nilgi (@nilgi) on CodePen. let text = "닐기의 블로그는 닐기입니다. 참 닐기스럽지요."; document.getElementById("tm1").innerHTML = text.match(/닐기/g); // 문자에 '닐기'를 찾아 모두 표시 let text2 = "NilGi's blog is nilgi. It's so nifty."; document.getElementById("tm2").innerHTML = text2.match(/nilgi/g); // 문자에 nilgi를 찾아 모두 표시. 대소문자 구분 let text3 = "NilGi's blog is nilgi. It's so nifty."; document.get.. 2021. 11. 25. 문자 검색, 검사 / indexOf(), lastIndexOf() - 자바스크립트 See the Pen 문자 검색, 검사 by nilgi (@nilgi) on CodePen. let io = "닐기의 블로그는 카카오의 티스토리"; document.getElementById("io1").innerHTML = io.indexOf("카카오"); // 지정한 문자가 처음 나오는 위치를 표시 let li = "닐기의 블로그는 카카오의 티스토리 블로그다"; document.getElementById("li1").innerHTML = li.lastIndexOf("블로그"); // 지정한 문자가 마지막에 나오는 위치를 표시 let ilno = "닐기의 블로그는 카카오의 티스토리 블로그다"; document.getElementById("ilno1").innerHTML = ilno.indexOf("일기.. 2021. 11. 24. 문자 method #2 - 자바스크립트 See the Pen 문자열 메서드 by nilgi (@nilgi) on CodePen. let t1 = "닐기"; let t2 = "티스토리 블로그"; let t3 = t1.concat(" ",t2); // 문자 합치기 document.getElementById('cc1').innerHTML = t3; let t3 = t1.concat(" ",t2); let t3 = "닐기" + " " + "티스토리 블로그"; // concat()은 '+' 연산과 같다. let tr1 = " 닐기 "; document.getElementById('tr1').innerHTML = tr1; // 공백을 없애고 표시한다. let ps1 = "1"; document.getElementById('ps1').innerHTML =.. 2021. 11. 23. 문자 바꾸기 - 자바스크립트 See the Pen 문자 대체 by nilgi (@nilgi) on CodePen. replace()는 문자를 바꿈 인생은 찰나다. 삶의 선택 text.replace("닐기", "우주"); // 첫번째 문자부터 바꾼다. text.replace("ab", "A+B"); // 대소문자를 구별한다. text.replace(/ab/i, "A+B"); // 대소문자를 구별하지 않으려면 /문자/i text.replace(/AB/g, "ab"); // 모든 글자를 바꾸려면 /문자/g text.toUpperCase(); // 소문자를 대문자로 text.toLowerCase(); // 대문자를 소문자로 어렵다... 그만할까? ㅠ-ㅠ 2021. 11. 22. 문자 method #1 - 자바스크립트 See the Pen string method by nilgi (@nilgi) on CodePen. • 문자의 길이(수) : length let ng = "본디 인간은 외롭고 태어나 어느 누군가의 사랑을 받고 자란다. 인간은 기억을 잊게 또는 잊을 수 있게 태어났다. 그리하여 죽는 날까지 외롭다고 착각한다." document.getElementById('tl1').innerHTML = ng.length; • 문자 선택 3가지 방법 - slice(시작n, 끝n+1) : n은 음수 허용 - substring(시작n, 끝n+1) : 음수 없음 - substr(시작n, 글자수) : 음수 허용 - 자바스크립트 첫 번째는 0이다. 끝n의 숫자는 +1이라 생각한다. - slice(시작n, 끝n+1) let ng = .. 2021. 11. 19. 문자(strings) - 자바스크립트 See the Pen 문자열 by nilgi (@nilgi) on CodePen. ▶ 문자열(strings) - 텍스트를 저장하고 설정 • 문자는 " ", ' '안에 쓰고 0개 이상 글자 let text = "nilgi"; let text = 'nilgi'; • 문자 안에 ", '를 표시하려면 ' ', " " 쓴다. let text = "nilgi 'tistory blog'"; let text = 'nilgi "tistory blog"'; • 글자수 length let text = "akdjklajflkjf98019238174jaslkdjalsdj"; document.getElementById('tl').innerHTML = text.length; • \ 쓰는 방법 let ng1 = "큰따옴표 문자열 안.. 2021. 11. 19. Event - 자바스크립트 See the Pen event by nilgi (@nilgi) on CodePen. Event는 HTML 페이지 반응을 위해 사용합니다. HTML 웹 페이지 로드될 때, HTML 입력 필드가 변경됐을 때, HTML 버튼을 클릭했을 때 등등 코드를 실행합니다. 쓰는 방법은 나 처럼 '. "를 사용합니다. 눌러 ◀ id를 사용하여 html 요소를 변경 눌러보시게~ ◀ this로 자체 요소를 변경 눌러줘ㅠ-ㅠ • event 종류 onchange : HTML 요소 변경 onclick : HTML 요소 클릭 onmouseover : HTML 요소 위에 마우스를 올렸을 때 onmouseout : 마우스가 HTML 요소에서 나올 때 onkeydown : 키를 누를 때 onload : 페이지가 로딩될 때 2021. 11. 18. 개체(Object) - 자바스크립트 See the Pen 자바스크립트 개체 by nilgi (@nilgi) on CodePen. • 자바스크립트 개체(object) let menu = "lucy" // menu 변수에 lucy라는 값을 할당 const ng = {name:"nilgi", Btype:"AB", blog:"tistory"}; // 개체도 변수이며 많은 값을 가진다. const ng = { name:"nilgi", Btype:"AB", blog:"tistory" }; // 보기 편하게 줄 바꿈을 사용해도 된다. • 개체 속성 엑세스 objectname.propertyname objectname["propertyname"] // 개체 속성은 이렇게 쓴다. 개체 속성은 css와 비슷하다. class를 css에서 .classname으.. 2021. 11. 17. 이전 1 2 3 4 5 6 7 다음
