🐹's tory

9장 🌭폼과 자바스크립트🌭 폼이란? 사용자가 정보를 입력할 수 있게 만들어 놓은 웹 요소 자바스크립트로 폼 요소의 내용을 가져오거나 수정하고 정해진 형식에 맞는지 확인함 🌭폼 요소에 접근하는 법 id, class 값을 이용 돔의 요소에 접근하는 것과 같이 querySelector(), querySelectorAll() 함수 사용 // id document.querySelector("#billingName") // class document.querySelectorAll(".input-box")[2] name 값을 이용 // 접근하는 방법 document.ship.shippingName document.forms["ship"].elements["shippingName"] * form 태그뿐만 아니라 접근하..

8장 🐠 문서 객체 모델 (DOM) 🐠 : 웹 문서의 모든 요소를 자바스크립트를 이용하여 조작할 수 있도록 객체를 사용해 문서를 해석하는 방법 DOM 트리 - 구조가 나무🌳처럼 생겼다 태그를 요소 노드로 표현 태그가 품고 있는 텍스트는 자식 노드인 텍스트 노드로 표현 태그의 속성은 요소노드의 자식 노드인 속성 노드로 표현 주석은 주석 노드로 표현 DOM 트리 구조를 보여주는 사이트! http://software.hixie.ch/utilities/js/live-dom-viewer/ Live DOM Viewer Live DOM Viewer ... Script not loaded. This script puts a function w(s) into the global scope of the test page,..

7장 🍮배열 Array🍮 : 하나의 변수에 여러 개의 항목 저장 배열 만드는 법 리터럴 표기법으로 배열 만들기 var A=[] // 배열 선언 var A=[1, 2, 3] // 선언과 할당을 동시에 Array 객체를 사용해서 인스턴스 만들기 var A=new Array(1,2,3); Array 객체의 함수 length: 요소의 개수 반환 var A=['1', '2', '3']; A.length; //3 concat: 배열 연결 var A=['1', '2', '3']; var B=['a', 'b', 'c']; A.concat(B); // [1 2 3 a b c] (콤마, 따옴표 생략) B.concat(A); // [a b c 1 2 3] (콤마, 따옴표 생략) join: 배열 요소 문자열로 연결 var A..

5장 🍮함수🍮 함수 선언 function addNum(a,b){ return a+b; } 함수 선언과 호출 위치에 관계없이 모두 실행된다 익명 함수 var add=function(a,b){ return a+b; } var num1=parseInt(prompt('첫 번째 숫자를 입력하시오')); var num2=parseInt(prompt('두 번째 숫자를 입력하시오')); //parseInt는 문자열로 입력받은 것을 정수로 변환 var result=add(num1, num2); console.log(sum); 함수 자체가 식이기 때문에 익명 함수를 변수에 할당할 수 있다 즉시 실행 함수 var sum=(function(a,b){ return a+b; }(10,20)); /* 이렇게도 가능 var sum=..

4장 🐨 조건문 if(score>60){ alert("통과"); } else{ alert("실패"); } 🐨 조건 연산자 score>60 ? alert("통과") : alert("실패"); 🐨 falsy 값 0 ""(빈 문자열) NaN(숫자가 아님) unfined(값이 할당되지 않음) null(유효하지 않은 값) 🐨 switch문 *case 뒤에 문자열로 처리해야 함 (case문 끝날 때마다 break, 마지막에 default 꼭 써주기) switch(num){ case "1": document.write("1번을 선택하셨습니다"); break; case "2": document.write("2번을 선택하셨습니다"); break; case "3": document.write("3번을 선택하셨습니다"); ..

1장은 개념이라서 읽고 넘겼다! JavaScript는 끝에 꼭 ; 붙여야 함!!! 2장 일단 js 파일과 html 파일 연동시키는 방법! body 태그 내의 어디서나 여러 번 사용할 수 있지만 닫는 body 태그 바로 위에 사용하는 습관을 들이는 것이 좋다 live server를 실행시킨 후 크롬 브라우저에서 ctrl + shift + J를 누르면 콘솔 창이 뜨게 된다! 입력값 받는 함수 prompt() prompt("이름을 입력하세요.","고양이"); 입력창에 "이름을 입력하세요."라는 설명이 뜨고 기본값은 "고양이"로 지정된다. 알림 창으로 출력하는 함수 alert() alert("고양이는 귀여워"); 웹 브라우저 화면에 출력하는 함수 document.write() var name = prompt("..

css는 html 파일에서 head 부분에 style이라는 태그를 추가해서 사용하거나 style 속성을 이용해서 사용할 수 있다 (css에서의 주석은 /* */) * style 태그를 이용하는 방법 * style 속성을 이용하는 방법 선택자의 종류 * 같은 종류의 선택자라면 가장 아래의 코드를 따름 #id: 단 한 번만 사용할 수 있고 우선순위가 가장 높음 .class: 클래스로 지정한 것들에 대해 설정 가능 tag: 우선 순위 가장 낮음 일단 내가 css 개념 공부하면서 두드려 본 코드 (좀 따 다 바꿀거라서 일단 여기다 저장!) 더보기 아 근데 진짜 이해가 안 되는 게 WEB 위의 코드는 색이 제대로 바뀌는데 WEB 이 코드는 h1 색이 안 바뀜,,, 왠지 진짜 모르겠다 아직 ;ㅅ; 왜 WHYㅠㅠㅠㅠ..

진짜 내가 나중에 보려고 정리하는 거라서 엄청 두서없을 듯,,, 이제 시작🙀🙀🤍🤍 HTML은 웹페이지의 내용과 구조를 담당하는 언어! 웹페이지에 보이고 싶은 내용 non_sementic 요소: 콘텐츠에 대한 설명이 없음 sementic 요소: 콘텐츠에 대한 의미를 포함함 -> sementic 요소를 잘 사용하면 의미가 잘 파악되기 때문에 가독성이 좋고 유지보수가 쉬운 코드가 된다 여러 가지 태그들 🐰살짝 기본적인 태그!🐰(*: 어트리뷰트 언급) h1~h6 제목 태그 h1부터 h6까지 있으며 숫자의 크기가 커질수록 글자의 크기가 줄어듬 (중요한 의미로 받아들임!) b 볼드체로 지정 strong 볼드체로 지정(중요한 의미로 받아들임!) i 이탈릭체 em 이탈릭체 (중요한 의미로 받아들임!) small 글씨 ..

우선 모든 html 태그들을 외울 필요는 전혀 없다 사용하고 싶을 때마다 검색해서 사용하면 되는 것이기 때문에! 아주 기본적인 태그들 ~ ~ ... ~ 진하게 표시하고 싶은 내용 밑줄치고 싶은 내용 한 단락 ㅎㅅㅎ ㅇㅅㅇ ㅋㅅㅋ ㅎㅅㅎ ㅇㅅㅇ ㅋㅅㅋ 창의 이름(?)으로 쓰이고 싶은 글 hello web 더 많은 태그들이 있지만 그것은 따로 정리하고 외우지는 않을 것이다! (좀 이따 한 번씩 적용해보면서 실습해볼 예정) 아래는 html 태그들이 사용 빈도에 따라 잘 정리되어있는 사이트이다! 이 사이트의 통계 결과를 보고 어떤 태그들을 공부하는 것이 좋을지 알 수 있다 https://www.advancedwebranking.com/html/ The average web page from top twenty ..

제주도 여행하다가 인스타에서 삼성 SDS 멘토링 광고를 보고 여행이 끝나자마자 지원서를 열심히 작성해서 제출하고! 참석자를 추첨한다고 하긴 했는데 떨어진 사람이 있는지는 잘 모르게따,,! 이번엔 코로나 때문에 오프라인이 아닌 온라인으로 진행하게 되었다 삼성 SDS에서 사용하는 Brity meeting으로 진행되었다 OT도 있었고 이 땐 정말 다 들어와서 카메라 잘 켜지는지 확인하고 끝났던 것 같다 그리고 삼성 SDS 멘토링 당일! 처음에 이런저런 IT 동향에 대해 이야기하고 솔루션 개발자와 데이터 분석가님(,,?)의 이야기를 들을 수 있었다 나는 완전 개발자 쪽으로 희망하고 있어서 그런지 솔루션 개발자님의 이야기가 더 흥미롭게 들렸던 것 같다 일단 많은 언어를 다 다루지 못해도 괜찮고 한 가지 기술의 언..