자바스크립트와 html의 상호작용

console.log(1345);console.log(“나린이 최고”); // 콘솔에 log(또는 print)하는 것.console.log (‘ssss’); //const는 상수를 뜻함.const myName = “narin”; //camelCase。 보통 자바스크립트에선 이 방식을 사용.const my_name = “nanana”; // snake_case です。 보통 Python에서 이 방식을 사용.document : html코드인데, javascript관점으로 쓰여짐. (모두 object로 형태로 나타내어짐.)console.log(“asd”); : 콘솔에 출console.dir(원하는 것); : object가 무엇이 있는지 보는 법. console에 나타난다.document의 함수들 (document。함수()document.getElementById(“html 에 쓴 id”); : html 에서 쓴 id 에 해당하는 element 를 가져온다.idclass등 도 있음.document.getElementById(“~~”)”.innerText = “어쩌고!”; :해당element의 내용을 수정.getElementBy~~ : Id, ClassName(“)。같은 class가 여러개면, 걔네들이 array형태로 불러와진다。HTML 에 작성된 내용을 JS 로 수정해보기 (getElementById, innerText) です console.log(1345);console.log(“나린이 최고”); // 콘솔에 log(또는 print)하는 것.console.log (‘ssss’); //const는 상수를 뜻함.const myName = “narin”; //camelCase。 보통 자바스크립트에선 이 방식을 사용.const my_name = “nanana”; // snake_case です。 보통 Python에서 이 방식을 사용.document : html코드인데, javascript관점으로 쓰여짐. (모두 object로 형태로 나타내어짐.)console.log(“asd”); : 콘솔에 출console.dir(원하는 것); : object가 무엇이 있는지 보는 법. console에 나타난다.document의 함수들 (document。함수()document.getElementById(“html 에 쓴 id”); : html 에서 쓴 id 에 해당하는 element 를 가져온다.idclass등 도 있음.document.getElementById(“~~”)”.innerText = “어쩌고!”; :해당element의 내용을 수정.getElementBy~~ : Id, ClassName(“)。같은 class가 여러개면, 걔네들이 array형태로 불러와진다。HTML 에 작성된 내용을 JS 로 수정해보기 (getElementById, innerText) です

구성 제목 = document.getElementById(“title”);title.innerText = “new texttt”; 구성 제목 = document.getElementById(“title”);title.innerText = “new texttt”;

저장된 element의 클래스 이름을 출력합니다 저장된 element의 클래스 이름을 출력합니다

console.log(element가 저장된 변수.classname); console.log(element가 저장된 변수.classname);

query Selector : 하나의 객체만 선택하여 호출할 수 있다. 선택에 해당하는 오브젝트가 몇 개 있으면 맨 위의 오브젝트를 가져온다.(get Element By..의 기능을 CSS 방식으로 사용) 맨 위의 오브젝트(첫 번째)나 뒤의 오브젝트 “하나”를 가져오고 싶다면 #id:first-child #id:nth-child(3)로 쓸 수도 있다. query Selector : 하나의 객체만 선택하여 호출할 수 있다. 선택에 해당하는 오브젝트가 몇 개 있으면 맨 위의 오브젝트를 가져온다.(get Element By..의 기능을 CSS 방식으로 사용) 맨 위의 오브젝트(첫 번째)나 뒤의 오브젝트 “하나”를 가져오고 싶다면 #id:first-child #id:nth-child(3)로 쓸 수도 있다.

구성 제목 = 문서 qu 쿼리 셀렉터(“#id.class my”); 구성 제목 = 문서 qu 쿼리 셀렉터(“#id.class my”);

 

関数핸들TitleClick(){title.style.color = “blue”;}title.addEventListner(“클릭”,handleTitleClick); 関数핸들TitleClick(){title.style.color = “blue”;}title.AddEventListner(“클릭”,handleTitleClick);

 

関数 loginComplete(){const username = loginInput.value;if (username === “”){alert(“ユーザー名を書いてください。”)}else if(username.length > 15){alert(” あなたの名前は長すぎます!!”;}else {alert(” hello}, 値);}loginButton.addEventListener(“click”, loginComplete); 関数 loginComplete(){const username = loginInput.value;if (username === “”){alert(“ユーザー名を書いてください。”)}else if(username.length > 15){alert(” あなたの名前は長すぎます!!”;}else {alert(” hello}, 値);}loginButton.addEventListener(“click”, loginComplete);

HTML로 로그인 창 만들기(JS 부분은 삭제.) : 이미 있는 기능이기 때문에 JS보다 더 쉬운 코드로 표현할 수 있습니다. HTML로 로그인 창 만들기(JS 부분은 삭제.) : 이미 있는 기능이기 때문에 JS보다 더 쉬운 코드로 표현할 수 있습니다.

<form class=”login-form”><입력 필요 최대 길이 = ’15’형 =”텍스트” 플레이스홀더=”お名前は何ですか?”><ボタン>ログイン</버튼><form class=”login-form”><입력 필요 최대 길이 =’15’형 =”텍스트” 플레이스홀더=”お名前は何ですか?”><ボタン></버튼>/form>

form으로 둘러싸면 input 안에 들어있는 조건이 실행되는 것처럼? 해줄게. form이 submit이 되는 것.. form으로 감싼 것들.. 즉, input창을 엔터하거나 button을 클릭하면 그 폼이 submit이 된다는 것. 둘 중에 뭐든 하면 돼. =>js에서는 click에 신경을 써야 했는데 html에서는 submit만 신경 쓰면 돼. 하지만 submit를 하면 페이지가 갱신된다. but 우리가 필요한 것 인풋 속의 내용을 submit에 의한 갱신 전에 해 정보를 저장할 것. element. addEventListner(“submit”, functionName); submit을 이벤트로 받을 때, 실행되는 함수를 정의할 때 argument를 받으면 외부에서 인수를 받을 수 있는 공간이 생기며, 이 argument 공간에는 js에 의해 “방금 일어난 일”이 저장된다. 그래서 이름을 입력하는 프로그램을 예로 들면 「이름을 입력한 이벤트」라고..하는 것이 좋을까. 그리고 argunemt(인수로 받은 event). preventDefault(); 이벤트의 「기본행동」이 일어나지 않도록 멈추는 것. 기본 행동이란, 사이트를 갱신하는 것과 같다. *보통 이때 argument 이름은 event로 작성하는 것이 관행. form으로 둘러싸면 input 안에 들어있는 조건이 실행되는 것처럼? 해줄게. form이 submit이 되는 것.. form으로 감싼 것들.. 즉, input창을 엔터하거나 button을 클릭하면 그 폼이 submit이 된다는 것. 둘 중에 뭐든 하면 돼. =>js에서는 click에 신경을 써야 했는데 html에서는 submit만 신경 쓰면 돼. 하지만 submit를 하면 페이지가 갱신된다. but 우리가 필요한 것 인풋 속의 내용을 submit에 의한 갱신 전에 해 정보를 저장할 것. element. addEventListner(“submit”, functionName); submit을 이벤트로 받을 때, 실행되는 함수를 정의할 때 argument를 받으면 외부에서 인수를 받을 수 있는 공간이 생기며, 이 argument 공간에는 js에 의해 “방금 일어난 일”이 저장된다. 그래서 이름을 입력하는 프로그램을 예로 들면 「이름을 입력한 이벤트」라고..하는 것이 좋을까. 그리고 argunemt(인수로 받은 event). preventDefault(); 이벤트의 「기본행동」이 일어나지 않도록 멈추는 것. 기본 행동이란, 사이트를 갱신하는 것과 같다. *보통 이때 argument 이름은 event로 작성하는 것이 관행.

error: Content is protected !!