var i="5";
var j=5;
if(i==j) alert(""hello);
if(i===j) alert("world");
로그인 후 복사
//위 코드만 i와 j의 값은 동일하지만 i와 j의 데이터 유형이 동일하지 않기 때문에 실행 후 hello가 팝업됩니다. 따라서 ==에는 동일한 값만 필요하지만 ===에는 동일한 값이 필요할 뿐만 아니라 동일한 데이터 유형도 필요합니다.
셋, 예외 캡쳐
try{
if() throw "";
}catch(err){
alert(throw);
}
로그인 후 복사
넷, 이벤트 onload 웹 페이지 로딩 이벤트 onclick 클릭 이벤트 onfocus 커서 수집 이벤트 onselect 텍스트 상자 선택 이벤트 onmouseover 마우스 통과 이벤트 onmouserout 마우스 아웃 이벤트
five, dom 연산 1, 소개: 웹 페이지가 로드되면 브라우저는 페이지의 문서 객체 모델을 생성합니다.
2. DOM 작업 HTML 1) js는 페이지의 모든 HTML 요소를 변경할 수 있습니다. ①출력 스트림 변경: document.write()는 문서의 모든 내용을 덮어씁니다. 주의해서 사용하세요! ②요소 가져오기: document.getElementById(); document.getElementByTagName() 등
그 중에서 여러 요소를 가져올 수 있는 이 메소드는 다음과 같은 배열이 됩니다. 객체, 순서대로 정렬
document.getElementById("btn").addEventListener("click",function(){
var x=document.getElementsByName("people");
var y=x[2].value;
alert(y);
});
로그인 후 복사
③Html 내용 변경: innerHTML;
4속성 내용 변경: 객체를 얻은 후 속성 = "속성 값"이면 setAttribute() 메서드를 사용할 수도 있습니다. 첫 번째 매개 변수는 속성 이름입니다. , 두 번째 매개변수는 속성 값입니다 document.getElementById("pid").setAttribute("class","pid2");
3) js는 페이지의 모든 CSS 스타일을 변경할 수 있습니다document.getElementById("pid") .style.backgrouneColor ="red";4) js는 페이지의 모든 이벤트에 반응할 수 있습니다5) DOM 개체는 HTML을 제어합니다6. 이벤트 핸들 EventListener
이벤트 핸들은 이벤트를 트리거하는 작업입니다. 예를 들어 onclick은 클릭할 때의 핸들입니다. 이벤트 핸들러를 js에 추가하면 많은 코드를 줄일 수 있습니다. 예를 들어 다음은 전통적인 이벤트 트리거 방법입니다
추가 기능 js 코드 이벤트 핸들은 다음과 같습니다. 처리 함수는 () 대괄호를 추가할 수 없습니다! var x=document.getElementById("btn"); x.addEventListener("click",demo);//여기에는 두 개의 매개변수가 있습니다. 하나는 이벤트 핸들이고 후자는 이벤트를 처리하는 함수입니다. event
Delete Handle RemoveEventListener() 사용 Seven, event
1. 이벤트 흐름: 페이지에서 이벤트가 수락되는 순서는 이벤트 버블링(내부에서 외부로)과 이벤트 캡처( 외부에서 내부로).
2. 이벤트 처리:
1) HTML 이벤트 처리: HTML 구조에 직접 추가
<button onclick="demo()"><button>
로그인 후 복사
2) dom 레벨 0 이벤트 처리: 이벤트 핸들러 속성에 함수 지정
<button id="btn"></button>
<script>
var btn1=document.getElementById("btn");
btn1.onclick= function () {
document.getElementById("pid").style.backgroundColor="red";
};
</script>
로그인 후 복사
//레벨 0 이벤트 처리 이벤트 지우기 처리는 onclick을 비우도록 할당하는 것만 큼 간단합니다. 설정시 객체가 아닌 객체의 시간이 null로 설정됩니다!
btn1.onclick=null;
//동일한 이벤트에 여러 핸들러가 있는 경우 이전 핸들러는 이후 이벤트 핸들러에 의해 지워집니다.
btn1.onclick= function () {
document.getElementById("pid").style.backgroundColor="red";//被覆盖
};
btn1.onclick= function () {
document.getElementById("pid").style.backgroundColor="blue";
};
로그인 후 복사
3) dom 레벨 2 이벤트 처리:
addEventListener("事件名"，“事件处理函数”，“true/false”)；
로그인 후 복사
true: 이벤트 캡처
false: 이벤트 버블링 이벤트 처리를 지우려면 RemoveEventListener()를 사용하세요.
//dom 2 레벨 이벤트 핸들러는 덮어쓰지 않지만 덮어쓰이게 됩니다. 단계별로 분석하고 실행해야 합니다. 4) IE 이벤트 핸들러. (IE8 이하 버전에서 사용되며, addEventListener 사용과 유사합니다.)이벤트 추가attachEvent
document.getElementById("btn").addEventListener("click",showType);
function showType(e){
alert(e.type);
}
로그인 후 복사
2) 대상: 이벤트 가져오기 대상: 이벤트가 트리거되는 위치, 즉 이 이벤트의 개체가 html 요소의 어떤 요소인지 .
document.getElementById("btn").addEventListener("click",showTarget);
function showTarget(e){
alert(e.target);
}
로그인 후 복사
3) stopPropagation(): 이벤트 버블링 방지: 가장 안쪽 요소의 이벤트가 발생하지만, 이 이벤트가 발생한 후에는 이 요소가 포함된 상위 요소의 이벤트도 발생합니다! 따라서 때때로 우리는 이런 일이 발생하는 것을 원하지 않으며, 이는 이벤트 버블링이 발생하는 것을 방지합니다.
event.stopPropagation();
4) PreventDefault(): 이벤트 기본 동작 방지
event.preventDefault();
//dom 0级事件处理 // var btn1=document.getElementById("btn"); // btn1.onclick= function () { // document.getElementById("pid").style.backgroundColor="red"; // }; // // btn1.onclick=null; ////dom 2级事件处理,处理函数不能加（）括号符！ //
document.getElementById("btn").addEventListener("click",creat);
function creat(){
var name= document.getElementById("name").value;
if(name.match("krys")){
alert("r所在的位置是"+name.indexOf("r"));
}else{
alert("sorry~you didnt have rights!")
}
}
document.getElementById("btn").addEventListener("click",creat);
function creat(){
var name= document.getElementById("name").value;
if(name.match("krys")){
alert(name);
}else{
alert("sorry~you didnt have rights!")
}
}
로그인 후 복사
replace(a,b) a是要替换掉的原来的字符或字符串，b是新的字符或字符串
document.getElementById("btn").addEventListener("click",creat);
function creat(){
var name= document.getElementById("name").value;
if(name.match("krys")){
alert(name.replace("krys","krys小仙女"));
}else{
alert("sorry~you didnt have rights!")
}
}
5.数组对象： 1)数组的创建：var a=["1","krys","ok"]; var a=new Array(); a[0]="hell0"; a[1]="world"; var a=new Array("hello","world","welcome"); 2)数组常用的方法： concat()合并数组如 a=["krys"];b=["tal"];a.concat(b)=krystal; sort()排序数组 var a=["a","c","b"];a.sort();->a b c (默认从低到高排序) 设置为降序：a.sort(funtion(a,b){return a-b;}) push()在数组末尾添加一个元素var a=["a","c","b"]; a.push("d"); reverse()翻转，对称中心点相互交换：a.reverse()= c b a ;
3. Timer js를 사용하면 함수 호출 직후가 아닌 설정된 시간 간격 후에 코드가 실행됩니다. 하나는 setInterval()입니다. 간격은 밀리초 단위로 지정됩니다. 지정된 코드 One은 setTimeout()입니다. - 지정된 밀리초 동안 일시 중지한 후 지정된 코드를 실행합니다. setTimeout을 사용하여 setInterval() 함수를 구현할 수 있습니다. 호출 함수 코드에서 자신을 호출하면 됩니다! setInterval(funtion(){},1000); setTimeout(funtion(){},1000);
clearInterval(),clearTimeout()을 사용하여 이 호출을 삭제할 수 있습니다.
4, Location 객체
가 사용됩니다. 현재 페이지의 주소를 얻고 브라우저를 새 페이지로 리디렉션합니다(실제로 내 이해는 현재 주소를 구문 분석하는 것입니다)
Location 개체의 속성:
location.hostname: 웹 호스트의 도메인 이름을 반환합니다.
location .pathname: 현재 페이지를 반환합니다. 경로 및 파일 이름을 반환합니다. location.port: 웹 호스트의 포트를 반환합니다. location.protocol: 사용된 웹 프로토콜을 반환합니다. location.href: 현재 페이지의 URL을 반환합니다. location.sign ()는 새 문서를 로드하며 매개변수는 필수입니다. 문서를 로드할 경로입니다.
window.location.hostname;
5, 화면 객체
window.screen 객체에는 사용자 화면
screen.avaiilWidth; //사용 가능한 화면 높이 screen.availHeight; //화면 높이 screen.width;//화면 너비
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
