16_Javascript 기본

문자열

var a = "hello world";
var b = "hello world";
console.log(a);
console.log(a[0]);		//charAt
console.log(a.length);	
console.log(a == b);
console.log(a.startsWith("hello"));
console.log(a.endsWith("world"));
console.log(a.indexOf("w"));    //a.contains(""); 없음
console.log(a.substring(0, 4));
console.log(a.toUpperCase());
//빈 문자열 판단
if (memberPw == "") {
if (memberPw.length == 0) {
if (memberPw==false) {
if (!memberPw) {

정규표현식 검사

var userId = "member1234";
var userIdRegex = /^[a-z][a-z0-9]{7,19}$/;
var userIdValid = userIdRegex.test(userId);
var regex = new RegExp(this.dataset.regex);		//정규표현식 내장객체(탐색해서 넣어줌)

문자 입력 및 반환

var input = document.querySelector(".input");
var div = document.querySelector(".view");
div.textContent = input.value;
var list = document.querySelectorAll(".form-input[name].valid");

인라인 스크립트

    <button> : onclick, ondblclick

    <input>   :  oninput, onblur, onfocus, onchange(checkbox)

    <form>    :  onsubmit

    required, selected, redadonly, checked, disabled

DOM(Document Object Model) 탐색

var span = document.querySelector("[name=id]").nextElementSibling;
var span = document.querySelector("[name=id]").previousElementSibling;
var span = document.querySelector("[name=id]").parentNode;
var span = document.querySelector("[name=id]").children[0];

클래스 사용

tag.className="red";	//red클래스 덮어씌움
tag.classList.add("yellow");
tag.classList.remove("blue");
memberPwInput.classList.contains("valid");

배열

var list = new Array(5);
var list = [10, 20, 30, 40, 50];
list.push(10);	//데이터 추가

확장 for문

list.forEach(function (element) {
	console.log(element);
});

내장객체

      - windows.  (생략가능)

alert	windows.alert("경고메세지")		location(현재창)	location="https://..." location.href="https:
confirm	confirm("확인메세지 true/false 반환")		history	history.back(); history.forward(); .go(-1);
prompt	prompt("입력창 메세지")		document	하단 참조
open(새창, 새탭)	open(url, 식별자(띄울 이름, 중복해서 열리는거 막아줌), 규격)			window.open("http://www.naver.com", "naver", "width=500, height=500")

    -windows.document

document.querySelector("input")
document.querySelectorAll("[name=fruit]:checked");
//classic 선택 명령 
document.getElementById("dummy");		// ID 기반 선택
document.getElementsByClassName("temp")[0];	// Class 기반 선택
document.getElementsByTagName("h1")[0];	// 태그명 선택
document.querySelector("[name=memberNick]").focus();		//커서 옮김
document.querySelector("[name=memberNick]").select();		//선택 옮김

선택자 사용 참고

target.style.fontSize = "16px";
target.style["font-size"] = "16px";
var input = document.querySelector(".form-input");
var textarea = document.querySelector("[name=q1]");
var span = document.querySelector("[name=q1]+span");
var checkboxes = document.querySelectorAll("[name=fruit]:checked");	 //상태선택자
var checkedCheckboxes = document.querySelectorAll(".check-unit:checked");

커스텀속성(dataset)

<input data-url="https://..">
var url = input.dataset.url;

a 태그 onclick="return  false" 변경

input.onclick = function () {
	return false;
};   //return 과 반환값이 있는 속성이므로 함수로 접근해야 한다