JS 코드 형식 지정 및 구문 색상 지정 V2_javascript 팁-JS 튜토리얼-php.cn

집

웹 프론트엔드

JS 튜토리얼

JS 코드 형식 지정 및 구문 색상 지정 V2_javascript 팁

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 07:25 PM

2차 버전으로 업그레이드 된 기념으로 포스팅을 열어봅니다 ㅎㅎ

Ver1.1에서 컨텐츠 업그레이드
1. 기능 목록 추가
2. 기능 추가
3. 분석 (다른 소프트웨어에서 이 기능을 구현한 것을 본 적이 없습니다. 저는 창의적이고 문제가 많습니다. 현재 분석 능력은 상대적으로 제한적입니다. 전역 함수 종속성만 분석할 수 있습니다. 복잡한 코드에서는 버그가 발생할 수 있습니다.)
4. for 문 분석 버그 수정
5. 구문 접기 버그 수정
6. 모두 축소 작업 방식 개선 ※ 행 개수가 너무 많을 때 충돌 방지를 위한 모두 확장 기능
7. 줄 번호 분석 메커니즘을 개선하여 줄 수가 너무 많을 때 충돌을 방지합니다

코드 복사 코드는 다음과 같습니다.

<머리>
JSer 버전 2.0

<스타일>
/* 전역 CSS */

* { padding:0px; 여백:0px; 글꼴 크기:13px; 글꼴 모음: Arial 宋体; }

본문 { overflow:auto; 테두리:0px 없음 검은색; 배경색:버튼면; }

li { 여백:0px 0px 0px 40px; 패딩:2px 4px; }

div { 글꼴 크기:13px; 줄 높이:14px; }

p { 글꼴 크기:13px; 줄 높이:14px; }

/* 클래스 CSS */

.codeRoot { line-height:14px; }
.quote { color:#999; }
.comments { color: #009090; }
.indent { margin-left:25px; }
.regexp { color:#F000F0; }
.keyWord { color:blue; }
.object { color:red; }
.method_property { color:#FF8000; }
.operator { color:#004000; }

.colsp { 글꼴 크기:12px; 너비:14px; 높이:14px; 오버플로:숨김; 테두리:1px 아웃셋 버튼페이스; 텍스트 정렬:가운데;
커서:포인터; 왼쪽 패딩:2px; }
.colsp2 { 글꼴 크기:12px; 너비:14px; 높이:14px; 오버플로:숨김; 테두리:1px 삽입 버튼페이스; 텍스트 정렬:가운데;
커서:포인터; 왼쪽 패딩:2px; 색상:빨간색!중요; 배경색:#E0FFF8!중요; }

/* 식별된 CSS */

#divTools { height:20px; border-bottom:1px solid #555; 왼쪽 패딩:15px; }

#divTools a { color:navy; 텍스트 장식:없음; 높이:20px; 줄 높이:20px; 패딩:0px 25px; }

#divTools a:hover { color:white; 배경색:네이비; 텍스트 장식:없음; 높이:20px; 줄 높이:20px; }

#divJSInput { display:none; 너비:600px; 높이:450px; 테두리:2px 시작 버튼페이스; 위치:절대; 배경-
color:buttonface; z-색인:2; }

#divJSInputTitle { color:white; 배경색:네이비; 높이:20px; 줄 높이:20px; 패딩:0px 10px; 커서:기본값; }

#txtJSInput { 너비:598px; 높이:406px; 오버플로:자동; 패딩:4px 8px; 배경색:흰색;}

#divJSInputBar { 높이:24px; 패딩:0px 4px; }

#divJSInputBar 입력 { 너비:110px; 높이:22px; 테두리:1px 솔리드 #555; 줄 높이:20px; }

#divMain { 너비:100%; 높이:500; 오버플로:숨김; 위치:상대적; }

#divJSOutputLineNo { 너비:32px; 높이:100%; 오버플로:숨김; 배경색:#DDD; 위치:절대; 왼쪽:0px; 상단:0px;
텍스트 정렬:오른쪽; }

#divJSOutputLineNo p { font-size:12px; 줄 높이:14px; }

#divJSOutputPlus { 너비:14px; 높이:100%; 오버플로:숨김; 배경색:#EEE; 위치:절대; 왼쪽:32px; 상단:0px; z
-색인:2; }

#divJSOutputPlus p { 글꼴 크기:12px; 줄 높이:14px; }

#divJSOutput { 배경색:흰색; 테두리:1px 삽입 버튼페이스; 높이:100%; 위치:절대; 왼쪽:45px; 상단:0px;
오버플로:스크롤; }

#divWaiting { display:none; 너비:400px; 높이:60px; 테두리:1px 솔리드 버튼페이스; 위치:절대; 배경-
색상:#E0F0F0; z-색인:3; 텍스트 정렬:가운데; 패딩 상단:10px; }

#div입력 대기 중 { width:140px; 높이:22px; 테두리:1px 솔리드 #555; 줄 높이:20px; 커서:기본값; 여백 상단:4px; }

#divJSExport { display:none; 너비:600px; 높이:450px; 테두리:2px 시작 버튼페이스; 위치:절대; 배경-
color:buttonface; z-색인:2; }

#divJSExportTitle { color:white; 배경색:네이비; 높이:20px; 줄 높이:20px; 패딩:0px 10px; 커서:기본값; }

#selJSExport { 너비:598px; 높이:406px; 오버플로:자동; 패딩:4px 8px; 배경색:흰색; }

#divJSExportContent { 너비:598px; 높이:406px; 오버플로:자동; 패딩:4px 8px; 배경색:흰색; 표시:없음; }

#divJSExportBar { 높이:24px; 패딩:0px 4px; }

#divJSExportBar 입력 { 너비:170px; 높이:22px; 테두리:1px 솔리드 #555; 줄 높이:20px; }

Input JS
Collapse All
Expand All
Export JS

Please Input the JS:

<br>/**********************
 Author: Hutia
 
*********************/

<br>window.onload=init;

//------------------
// Static Variable
//----- <br>------------- <br>

var KEYWORDS="abstract break byte case catch char class cons <br>t continue default delete do double else extends false final finally f <br>loat for function goto if implements import in instanceof int interface&nbs <br>p;long native null package private protected public reset return short stat <br>ic super switch synchronized this throw transient true try var void wh <br>ile with";
var OBJECTS="Anchor Applet Area Arguments Array Boolean  <br>;Button Checkbox Collection Crypto Date Dictionary Document Drive Drives Element <br> Enumerator Event File FileObject FileSystemObject FileUpload Folder Folders For <br>m Frame Function Global Hidden History HTMLElement Image Infinity Input Jav <br>aArray JavaClass JavaObject JavaPackage JSObject Layer Link Math MimeType Naviga <br>tor Number Object Option Packages Password Plugin PrivilegeManager Random RegExp <br> Screen Select String Submit Text Textarea URL VBArray Window WScript" <br>;
var METHODS_PROPERTIES="above abs acos action activeElement alert alinkCol <br>or all altKey anchor anchors appCodeName applets apply appName appVersion a <br>rguments arity asin assign atan atan2 atob  availHeight availLeft availTop& <br>nbsp;availWidth ActiveXObject back background below bgColor big blink blur bold& <br>nbsp;border borderWidths bottom btoa button call callee caller cancelBubble capt <br>ureEvents ceil charAt charCodeAt charset checked children classes className clea <br>r clearInterval clearTimeout click clientInformation  clientX clientY close clos <br>ed colorDepth compile complete concat confirm constructir contains contextual co <br>okie cos crypto ctrlKey current data defaultCharset defaultChecked defaultSelected&nb <br>sp;defaultStatus defaultValue description disableExternalCapture disablePrivilege document doma <br>in E Echo  element elements embeds enabledPlugin enableExternalCapture enablePri <br>vilege encoding escape eval event exec exp expando FromPoint fgColor fileNa <br>me find fixed floor focus fontColor fontSize form forms forward frames  <br>;fromCharCode fromElement  getAttribute get getClass getDate getDay getFullYear  <br>getHours getMember getMilliseconds getMinutes getMonth getSeconds getSelection getSlot&nbs <br>p;getTime getTimezoneOffset  getUTCDate getUTCDay getUTCFullYear getUTCHours getUTCMillise <br>conds getUTCMinutes getUTCMonth getUTCSeconds getWindow getYear global go HandleEvent <br> Height  hash hidden history home host hostName href hspace id id <br>s ignoreCase images index indexOf inner innerHTML innerText innerWidth insertAdj <br>acentHTML insertAdjacentText isFinite isNAN italics java javaEnabled join keyCode&nbs <br>p;Links LN10 LN2 LOG10E LOG2E  lang language lastIndex lastIndexOf lastMatc <br>h lastModified lastParen layers layerX layerY left leftContext length link  <br>linkColor load location locationBar log lowsrc MAX_VALUE MIN_VALUE  margins  <br>;match max menubar method mimeTypes min modifiers moveAbove moveBelow moveBy&nbs <br>p;moveTo moveToAbsolute multiline NaN NEGATIVE_INFINITY  name navigate navigator  <br>;netscape next number offscreenBuffering offset offsetHeight offsetLeft offsetParent  <br>offsetTop offsetWidth offsetX offsetY onabort onblur onchange onclick ondblclick  <br>;ondragdrop onerror onfocus  onHelp onkeydown onkeypress onkeyup onload onmoused <br>own onmousemove onmouseout onmouseover onmouseup onmove onreset onresize onsubmit&nbs <br>p;onunload open opener options outerHeight  outerHTML outerText outerWidth POSIT <br>IVE_INFINITY PI  paddings pageX pageXOffset pageY pageYOffset parent parentEleme <br>nt parentLayer parentWindow parse parseFloat parseInt pathname personalbar pixelDepth <br> platform plugins pop  port pow preference previous print prompt proto <br>col prototype push random readyState reason referrer refresh releaseEvents reloa <br>d removeAttribute removeMember replace resizeBy resizeTo returnValue reverse right&nb <br>sp;rightcontext round SQRT1_2 SQRT2  screenX screenY scroll scrollbars scrollBy& <br>nbsp;scrollIntoView scrollTo search select selected selectedIndex self setAttribute s <br>etDay setFullYear setHotkeys setHours setInterval  setMember setMilliseconds setMinut <br>es setMonth setResizable setSeconds setSlot setTime setTimeout setUTCDate setUTCFullY <br>ear setUTCHours setUTCMillseconds setUTCMinutes  setUTCMonth setUTCSeconds setYear se <br>tZOptions shift shiftKey siblingAbove siblingBelow signText sin slice smallsort  <br>source sourceIndex splice split sqrt src  srcElement srcFilter status statu <br>sbar stop strike style sub submit substr substring suffixes sun sup sy <br>stemLanguage TYPE  tagName tags taint taintEnabled tan target test text&nbs <br>p;title toElement toGMTString toLocaleString toLowerCase toolbar top toString toUpper <br>Case toUTCString type typeOf UTC unescape unshift untaint unwatch userAgent  <br>;userLanguage  value valueOf visibility vlinkColor vspace watch which width  <br>;window write writeln x y zIndex";
var OPS="! $ % <br> & * + - // / : < = > ? [ ] <br> ^ | ~ is  new sizeof  typeof unchecked";

var  <br>regKW=new RegExp("(\\W"+KEYWORDS.replace(/ /g,"$)|(\\W")+"$) <br>","g");
var regObj=new RegExp("(\\W"+OBJECTS.replace(/ /g,"$)| <br>(\\W")+"$)","g");
var regMP=new RegExp(" <br>(\\W"+METHODS_PROPERTIES.replace(/ /g,"$)|(\\W")+"$) <br>","g");
//var regOP=new RegExp("(\\W"+OPS.replace(/ /g,"$)|(\\W") <br>+"$)","g");

//------------------
// Global Variables
//-- <br>---------------- <br>
var divJSInput, txtJSInput, divMain, divJSOutputLineNo, divJSOutputPlus, divJSOutput, <br> divWaiting;
var spnProcess, cmdStop, divJSExport, selJSExport, divJSExportContent; <br>3;
var glbStr, glbP, glbRe, curRe, glbTimer, glbBusy, glbFuntionNames;

& <br>#10;
function init() <br>{
 // init global variables
 divJSInput=document.getElementById <br>("divJSInput");
 txtJSInput=document.getElementById <br>("txtJSInput");
 divMain=document.getElementById <br>("divMain");
 divJSOutputLineNo=document.getElementById <br>("divJSOutputLineNo");
 divJSOutputPlus=document.getElementById <br>("divJSOutputPlus");
 divJSOutput=document.getElementById <br>("divJSOutput");
 divWaiting=document.getElementById <br>("divWaiting");
 spnProcess=document.getElementById <br>("spnProcess");
 cmdStop=document.getElementById <br>("cmdStop");
 divJSExport=document.getElementById <br>("divJSExport");
 selJSExport=document.getElementById <br>("selJSExport");
 divJSExportContent=document.getElementById <br>("divJSExportContent");
 
 // 초기화 창 상태
 최대화W <br>indow();
 
 divMain.style.width=document.body.clientWidth- <br>4;
 divMain.style.height=document.body.clientHeight- <br>26;
 
 divJSOutput.style.width=document.body.clientWidth- <br>52;
 
 
 // 글로벌 이벤트 초기화
 divJSOutputLineNo.onse <br>lectstart=divJSOutputLineNo.onselect=divJSOutputPlus.onselectstart=divJSOutputPlus.onselect=cancelEvents;
 divJ <br>SOutput.onscroll=divJSOutput_onscroll;
 
 divJSInput.onkeydown=divJSInput_keydown;
  <br>;divJSExport.onkeydown=divJSExport_keydown;
 
}

//------ <br>
// 이벤트 스크립트
//------

함수 취소이벤트(e) <br>{
 var e=window.event?window.event:e;
 e.returnValue=false;
 반환 <br>(거짓);
}

함수 divJSInput_keydown(e){
 var e=window.event? <br>window.event:e;
 var srcEle=e.srcElement? <br>e.srcElement:e.target;
 var sel;
 if(e.keyCode==27)hideJSInput();
 if <br>(e.keyCode==13&&e.ctrlKey)execJSInput();
 if(e.keyCode==9&&srcEle==txtJSInput) <br>{
  document.selection.createRange().text="t";return <br>(false); // FF를 지원하지 않음 
 }
} <br>

함수 divJSExport_keydown(e){
 var e=window.event? <br>window.event:e;
 var srcEle=e.srcElement? <br>e.srcElement:e.target;
 var sel;
 if(e.keyCode==27)hideJSExport();
 if <br>(e.keyCode==13&&e.ctrlKey)hideJSExport();
}

함수 divJSOutput_onscroll() <br>{
 divJSOutputLineNo.scrollTop=divJSOutputPlus.scrollTop=divJSOutput.scrollTop;
} <br>

//------
// 기능적 스크립트
//------------ <br>-------

함수 showJSInput(){
 if(glbBusy)return;
 hideJSExport <br>();
 with(divJSInput.style){
  디스플레이="차단";
  왼쪽= <br>(document.body.clientWidth-divJSInput.offsetWidth)/2;
  top=(document.body.clientHeight- <br>divJSInput.offsetHeight)/2;
 }
 
 txtJSInput.focus <br>();
 
 반환(거짓);
}

함수 showJSExport() <br>{
 if(glbBusy)return;
 hideJSInput();
 with(divJSExport.style) <br>{
  디스플레이="차단";
  왼쪽=(document.body.clientWidth- <br>divJSExport.offsetWidth)/2;
  상단=(document.body.clientHeight</divjsoutputplus.buttons.length>
</div>

</div>
					</div>
					<div class="wzconShengming_sp">
						<div class="bzsmdiv_sp">본 웹사이트의 성명</div>
						<div>본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.</div>
					</div>
				</div>

<ins class="adsbygoogle"
     style="display:block"
     data-ad-format="autorelaxed"
     data-ad-client="ca-pub-5902227090019525"
     data-ad-slot="2507867629"></ins>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>

<ins class="adsbygoogle"
        style="display:block"
        data-ad-client="ca-pub-5902227090019525"
        data-ad-slot="3653428331"
        data-ad-format="auto"
        data-full-width-responsive="true"></ins>
    <script>
        (adsbygoogle = window.adsbygoogle || []).push({});
    </script>

<div class="phpgenera_Details_mainR3">
							<div class="phpmain1_4R_readrank">
								<div class="phpmain1_4R_readrank_top">
									<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
										onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
										src="/static/imghw/hottools2.png" alt="" />
									<h2>핫 AI 도구</h2>
								</div>
								<div class="phpgenera_Details_mainR3_bottom">
																		<div class="phpmain_tab2_mids_top">
											<a href="https://www.php.cn/ko/ai/undresserai-undress" title="Undresser.AI Undress" class="phpmain_tab2_mids_top_img">
												<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
													onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
													class="lazy"  data-src="https://img.php.cn/upload/ai_manual/001/246/273/173411540686492.jpg?x-oss-process=image/resize,m_fill,h_50,w_50" src="/static/imghw/default1.png" alt="Undresser.AI Undress" />
											</a>
											<div class="phpmain_tab2_mids_info">
												<a href="https://www.php.cn/ko/ai/undresserai-undress" title="Undresser.AI Undress" class="phpmain_tab2_mids_title">
													<h3>Undresser.AI Undress</h3>
												</a>
												<p>사실적인 누드 사진을 만들기 위한 AI 기반 앱</p>
											</div>
										</div>
																		<div class="phpmain_tab2_mids_top">
											<a href="https://www.php.cn/ko/ai/ai-clothes-remover" title="AI Clothes Remover" class="phpmain_tab2_mids_top_img">
												<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
													onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
													class="lazy"  data-src="https://img.php.cn/upload/ai_manual/001/246/273/173411552797167.jpg?x-oss-process=image/resize,m_fill,h_50,w_50" src="/static/imghw/default1.png" alt="AI Clothes Remover" />
											</a>
											<div class="phpmain_tab2_mids_info">
												<a href="https://www.php.cn/ko/ai/ai-clothes-remover" title="AI Clothes Remover" class="phpmain_tab2_mids_title">
													<h3>AI Clothes Remover</h3>
												</a>
												<p>사진에서 옷을 제거하는 온라인 AI 도구입니다.</p>
											</div>
										</div>
																		<div class="phpmain_tab2_mids_top">
											<a href="https://www.php.cn/ko/ai/undress-ai-tool" title="Undress AI Tool" class="phpmain_tab2_mids_top_img">
												<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
													onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
													class="lazy"  data-src="https://img.php.cn/upload/ai_manual/001/246/273/173410641626608.jpg?x-oss-process=image/resize,m_fill,h_50,w_50" src="/static/imghw/default1.png" alt="Undress AI Tool" />
											</a>
											<div class="phpmain_tab2_mids_info">
												<a href="https://www.php.cn/ko/ai/undress-ai-tool" title="Undress AI Tool" class="phpmain_tab2_mids_title">
													<h3>Undress AI Tool</h3>
												</a>
												<p>무료로 이미지를 벗다</p>
											</div>
										</div>
																		<div class="phpmain_tab2_mids_top">
											<a href="https://www.php.cn/ko/ai/clothoffio" title="Clothoff.io" class="phpmain_tab2_mids_top_img">
												<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
													onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
													class="lazy"  data-src="https://img.php.cn/upload/ai_manual/001/246/273/173411529149311.jpg?x-oss-process=image/resize,m_fill,h_50,w_50" src="/static/imghw/default1.png" alt="Clothoff.io" />
											</a>
											<div class="phpmain_tab2_mids_info">
												<a href="https://www.php.cn/ko/ai/clothoffio" title="Clothoff.io" class="phpmain_tab2_mids_title">
													<h3>Clothoff.io</h3>
												</a>
												<p>AI 옷 제거제</p>
											</div>
										</div>
																		<div class="phpmain_tab2_mids_top">
											<a href="https://www.php.cn/ko/ai/video-swap" title="Video Face Swap" class="phpmain_tab2_mids_top_img">
												<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
													onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
													class="lazy"  data-src="https://img.php.cn/upload/ai_manual/001/246/273/173414504068133.jpg?x-oss-process=image/resize,m_fill,h_50,w_50" src="/static/imghw/default1.png" alt="Video Face Swap" />
											</a>
											<div class="phpmain_tab2_mids_info">
												<a href="https://www.php.cn/ko/ai/video-swap" title="Video Face Swap" class="phpmain_tab2_mids_title">
													<h3>Video Face Swap</h3>
												</a>
												<p>완전히 무료인 AI 얼굴 교환 도구를 사용하여 모든 비디오의 얼굴을 쉽게 바꾸세요!</p>
											</div>
										</div>
																</div>
								<div class="phpgenera_Details_mainR3_more">
									<a href="https://www.php.cn/ko/ai">더보기</a>
								</div>
							</div>
						</div>

<div class="phpgenera_Details_mainR4">
						<div class="phpmain1_4R_readrank">
							<div class="phpmain1_4R_readrank_top">
								<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
									onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
									src="/static/imghw/hotarticle2.png" alt="" />
								<h2>인기 기사</h2>
							</div>
							<div class="phpgenera_Details_mainR4_bottom">
															<div class="phpgenera_Details_mainR4_bottoms">
									<a href="https://www.php.cn/ko/faq/1796797907.html" title="<garden> : 정원 재배 - 완전한 돌연변이 가이드" class="phpgenera_Details_mainR4_bottom_title"><garden> : 정원 재배 - 완전한 돌연변이 가이드</a>
									<div class="phpgenera_Details_mainR4_bottoms_info">
										<span>4 몇 주 전</span>
										<span>By DDD</span>
									</div>
								</div>
															<div class="phpgenera_Details_mainR4_bottoms">
									<a href="https://www.php.cn/ko/faq/1796797130.html" title="<gum> : Bubble Gum Simulator Infinity- 로얄 키를 얻고 사용하는 방법" class="phpgenera_Details_mainR4_bottom_title"><gum> : Bubble Gum Simulator Infinity- 로얄 키를 얻고 사용하는 방법</a>
									<div class="phpgenera_Details_mainR4_bottoms_info">
										<span>4 몇 주 전</span>
										<span>By 尊渡假赌尊渡假赌尊渡假赌</span>
									</div>
								</div>
															<div class="phpgenera_Details_mainR4_bottoms">
									<a href="https://www.php.cn/ko/faq/1796796926.html" title="Nordhold : Fusion System, 설명" class="phpgenera_Details_mainR4_bottom_title">Nordhold : Fusion System, 설명</a>
									<div class="phpgenera_Details_mainR4_bottoms_info">
										<span>1 몇 달 전</span>
										<span>By 尊渡假赌尊渡假赌尊渡假赌</span>
									</div>
								</div>
															<div class="phpgenera_Details_mainR4_bottoms">
									<a href="https://www.php.cn/ko/faq/1796797896.html" title="Mandragora : 마녀 트리의 속삭임 - Grappling Hook 잠금 해제 방법" class="phpgenera_Details_mainR4_bottom_title">Mandragora : 마녀 트리의 속삭임 - Grappling Hook 잠금 해제 방법</a>
									<div class="phpgenera_Details_mainR4_bottoms_info">
										<span>4 몇 주 전</span>
										<span>By 尊渡假赌尊渡假赌尊渡假赌</span>
									</div>
								</div>
															<div class="phpgenera_Details_mainR4_bottoms">
									<a href="https://www.php.cn/ko/faq/1796802048.html" title="<exp exp> 모호한 : 원정 33- 완벽한 크로마 촉매를 얻는 방법" class="phpgenera_Details_mainR4_bottom_title"><exp exp> 모호한 : 원정 33- 완벽한 크로마 촉매를 얻는 방법</a>
									<div class="phpgenera_Details_mainR4_bottoms_info">
										<span>2 몇 주 전</span>
										<span>By 尊渡假赌尊渡假赌尊渡假赌</span>
									</div>
								</div>
														</div>
							<div class="phpgenera_Details_mainR3_more">
								<a href="https://www.php.cn/ko/article.html">더보기</a>
							</div>
						</div>
					</div>

<div class="phpgenera_Details_mainR3">
							<div class="phpmain1_4R_readrank">
								<div class="phpmain1_4R_readrank_top">
									<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
										onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
										src="/static/imghw/hottools2.png" alt="" />
									<h2>뜨거운 도구</h2>
								</div>
								<div class="phpgenera_Details_mainR3_bottom">
																		<div class="phpmain_tab2_mids_top">
											<a href="https://www.php.cn/ko/toolset/development-tools/92" title="메모장++7.3.1" class="phpmain_tab2_mids_top_img">
												<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
													onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
													class="lazy"  data-src="https://img.php.cn/upload/manual/000/000/001/58ab96f0f39f7357.jpg?x-oss-process=image/resize,m_fill,h_50,w_72" src="/static/imghw/default1.png" alt="메모장++7.3.1" />
											</a>
											<div class="phpmain_tab2_mids_info">
												<a href="https://www.php.cn/ko/toolset/development-tools/92" title="메모장++7.3.1" class="phpmain_tab2_mids_title">
													<h3>메모장++7.3.1</h3>
												</a>
												<p>사용하기 쉬운 무료 코드 편집기</p>
											</div>
										</div>
																			<div class="phpmain_tab2_mids_top">
											<a href="https://www.php.cn/ko/toolset/development-tools/93" title="SublimeText3 중국어 버전" class="phpmain_tab2_mids_top_img">
												<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
													onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
													class="lazy"  data-src="https://img.php.cn/upload/manual/000/000/001/58ab97a3baad9677.jpg?x-oss-process=image/resize,m_fill,h_50,w_72" src="/static/imghw/default1.png" alt="SublimeText3 중국어 버전" />
											</a>
											<div class="phpmain_tab2_mids_info">
												<a href="https://www.php.cn/ko/toolset/development-tools/93" title="SublimeText3 중국어 버전" class="phpmain_tab2_mids_title">
													<h3>SublimeText3 중국어 버전</h3>
												</a>
												<p>중국어 버전, 사용하기 매우 쉽습니다.</p>
											</div>
										</div>
																			<div class="phpmain_tab2_mids_top">
											<a href="https://www.php.cn/ko/toolset/development-tools/121" title="스튜디오 13.0.1 보내기" class="phpmain_tab2_mids_top_img">
												<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
													onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
													class="lazy"  data-src="https://img.php.cn/upload/manual/000/000/001/58ab97ecd1ab2670.jpg?x-oss-process=image/resize,m_fill,h_50,w_72" src="/static/imghw/default1.png" alt="스튜디오 13.0.1 보내기" />
											</a>
											<div class="phpmain_tab2_mids_info">
												<a href="https://www.php.cn/ko/toolset/development-tools/121" title="스튜디오 13.0.1 보내기" class="phpmain_tab2_mids_title">
													<h3>스튜디오 13.0.1 보내기</h3>
												</a>
												<p>강력한 PHP 통합 개발 환경</p>
											</div>
										</div>
																			<div class="phpmain_tab2_mids_top">
											<a href="https://www.php.cn/ko/toolset/development-tools/469" title="드림위버 CS6" class="phpmain_tab2_mids_top_img">
												<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
													onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
													class="lazy"  data-src="https://img.php.cn/upload/manual/000/000/001/58d0e0fc74683535.jpg?x-oss-process=image/resize,m_fill,h_50,w_72" src="/static/imghw/default1.png" alt="드림위버 CS6" />
											</a>
											<div class="phpmain_tab2_mids_info">
												<a href="https://www.php.cn/ko/toolset/development-tools/469" title="드림위버 CS6" class="phpmain_tab2_mids_title">
													<h3>드림위버 CS6</h3>
												</a>
												<p>시각적 웹 개발 도구</p>
											</div>
										</div>
																			<div class="phpmain_tab2_mids_top">
											<a href="https://www.php.cn/ko/toolset/development-tools/500" title="SublimeText3 Mac 버전" class="phpmain_tab2_mids_top_img">
												<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
													onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
													class="lazy"  data-src="https://img.php.cn/upload/manual/000/000/001/58d34035e2757995.png?x-oss-process=image/resize,m_fill,h_50,w_72" src="/static/imghw/default1.png" alt="SublimeText3 Mac 버전" />
											</a>
											<div class="phpmain_tab2_mids_info">
												<a href="https://www.php.cn/ko/toolset/development-tools/500" title="SublimeText3 Mac 버전" class="phpmain_tab2_mids_title">
													<h3>SublimeText3 Mac 버전</h3>
												</a>
												<p>신 수준의 코드 편집 소프트웨어(SublimeText3)</p>
											</div>
										</div>
																	</div>
								<div class="phpgenera_Details_mainR3_more">
									<a href="https://www.php.cn/ko/ai">더보기</a>
								</div>
							</div>
						</div>

<div class="phpgenera_Details_mainR4">
						<div class="phpmain1_4R_readrank">
							<div class="phpmain1_4R_readrank_top">
								<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
									onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
									src="/static/imghw/hotarticle2.png" alt="" />
								<h2>뜨거운 주제</h2>
							</div>
							<div class="phpgenera_Details_mainR4_bottom">
															<div class="phpgenera_Details_mainR4_bottoms">
									<a href="https://www.php.cn/ko/faq/java-tutorial" title="자바 튜토리얼" class="phpgenera_Details_mainR4_bottom_title">자바 튜토리얼</a>
									<div class="phpgenera_Details_mainR4_bottoms_info">
										<div class="phpgenera_Details_mainR4_bottoms_infos">
											<img src="/static/imghw/eyess.png" alt="" />
											<span>1677</span>
										</div>
										<div class="phpgenera_Details_mainR4_bottoms_infos">
											<img src="/static/imghw/tiezi.png" alt="" />
											<span>14</span>
										</div>
									</div>
								</div>
															<div class="phpgenera_Details_mainR4_bottoms">
									<a href="https://www.php.cn/ko/faq/cakephp-tutor" title="Cakephp 튜토리얼" class="phpgenera_Details_mainR4_bottom_title">Cakephp 튜토리얼</a>
									<div class="phpgenera_Details_mainR4_bottoms_info">
										<div class="phpgenera_Details_mainR4_bottoms_infos">
											<img src="/static/imghw/eyess.png" alt="" />
											<span>1430</span>
										</div>
										<div class="phpgenera_Details_mainR4_bottoms_infos">
											<img src="/static/imghw/tiezi.png" alt="" />
											<span>52</span>
										</div>
									</div>
								</div>
															<div class="phpgenera_Details_mainR4_bottoms">
									<a href="https://www.php.cn/ko/faq/laravel-tutori" title="라라벨 튜토리얼" class="phpgenera_Details_mainR4_bottom_title">라라벨 튜토리얼</a>
									<div class="phpgenera_Details_mainR4_bottoms_info">
										<div class="phpgenera_Details_mainR4_bottoms_infos">
											<img src="/static/imghw/eyess.png" alt="" />
											<span>1333</span>
										</div>
										<div class="phpgenera_Details_mainR4_bottoms_infos">
											<img src="/static/imghw/tiezi.png" alt="" />
											<span>25</span>
										</div>
									</div>
								</div>
															<div class="phpgenera_Details_mainR4_bottoms">
									<a href="https://www.php.cn/ko/faq/php-tutorial" title="PHP 튜토리얼" class="phpgenera_Details_mainR4_bottom_title">PHP 튜토리얼</a>
									<div class="phpgenera_Details_mainR4_bottoms_info">
										<div class="phpgenera_Details_mainR4_bottoms_infos">
											<img src="/static/imghw/eyess.png" alt="" />
											<span>1278</span>
										</div>
										<div class="phpgenera_Details_mainR4_bottoms_infos">
											<img src="/static/imghw/tiezi.png" alt="" />
											<span>29</span>
										</div>
									</div>
								</div>
															<div class="phpgenera_Details_mainR4_bottoms">
									<a href="https://www.php.cn/ko/faq/c-tutorial" title="C# 튜토리얼" class="phpgenera_Details_mainR4_bottom_title">C# 튜토리얼</a>
									<div class="phpgenera_Details_mainR4_bottoms_info">
										<div class="phpgenera_Details_mainR4_bottoms_infos">
											<img src="/static/imghw/eyess.png" alt="" />
											<span>1257</span>
										</div>
										<div class="phpgenera_Details_mainR4_bottoms_infos">
											<img src="/static/imghw/tiezi.png" alt="" />
											<span>24</span>
										</div>
									</div>
								</div>
														</div>
							<div class="phpgenera_Details_mainR3_more">
								<a href="https://www.php.cn/ko/faq/zt">더보기</a>
							</div>
						</div>
					</div>
				</div>
			</div>
							<div class="Article_Details_main2">
					<div class="phpgenera_Details_mainL4">
						<div class="phpmain1_2_top">
							<a href="javascript:void(0);" class="phpmain1_2_top_title">Related knowledge<img
									src="/static/imghw/index2_title2.png" alt="" /></a>
						</div>
						<div class="phpgenera_Details_mainL4_info">

<div class="phphistorical_Version2_mids">
								<a href="https://www.php.cn/ko/faq/1796796853.html" title="Python vs. JavaScript : 학습 곡선 및 사용 편의성" class="phphistorical_Version2_mids_img">
									<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
										src="/static/imghw/default1.png" class="lazy"  data-src="https://img.php.cn/upload/article/001/253/068/174473354083140.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="Python vs. JavaScript : 학습 곡선 및 사용 편의성" />
								</a>
								<a href="https://www.php.cn/ko/faq/1796796853.html" title="Python vs. JavaScript : 학습 곡선 및 사용 편의성" class="phphistorical_Version2_mids_title">Python vs. JavaScript : 학습 곡선 및 사용 편의성</a>
								<span class="Articlelist_txts_time">Apr 16, 2025 am	 12:12 AM</span>
								<p class="Articlelist_txts_p">Python은 부드러운 학습 곡선과 간결한 구문으로 초보자에게 더 적합합니다. JavaScript는 가파른 학습 곡선과 유연한 구문으로 프론트 엔드 개발에 적합합니다. 1. Python Syntax는 직관적이며 데이터 과학 및 백엔드 개발에 적합합니다. 2. JavaScript는 유연하며 프론트 엔드 및 서버 측 프로그래밍에서 널리 사용됩니다.</p>
							</div>
														<div class="phphistorical_Version2_mids">
								<a href="https://www.php.cn/ko/faq/1796797846.html" title="JavaScript 및 웹 : 핵심 기능 및 사용 사례" class="phphistorical_Version2_mids_img">
									<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
										src="/static/imghw/default1.png" class="lazy"  data-src="https://img.php.cn/upload/article/001/253/068/174490675171406.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="JavaScript 및 웹 : 핵심 기능 및 사용 사례" />
								</a>
								<a href="https://www.php.cn/ko/faq/1796797846.html" title="JavaScript 및 웹 : 핵심 기능 및 사용 사례" class="phphistorical_Version2_mids_title">JavaScript 및 웹 : 핵심 기능 및 사용 사례</a>
								<span class="Articlelist_txts_time">Apr 18, 2025 am	 12:19 AM</span>
								<p class="Articlelist_txts_p">웹 개발에서 JavaScript의 주요 용도에는 클라이언트 상호 작용, 양식 검증 및 비동기 통신이 포함됩니다. 1) DOM 운영을 통한 동적 컨텐츠 업데이트 및 사용자 상호 작용; 2) 사용자가 사용자 경험을 향상시키기 위해 데이터를 제출하기 전에 클라이언트 확인이 수행됩니다. 3) 서버와의 진실한 통신은 Ajax 기술을 통해 달성됩니다.</p>
							</div>
														<div class="phphistorical_Version2_mids">
								<a href="https://www.php.cn/ko/faq/1796798357.html" title="자바 스크립트 행동 : 실제 예제 및 프로젝트" class="phphistorical_Version2_mids_img">
									<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
										src="/static/imghw/default1.png" class="lazy"  data-src="https://img.php.cn/upload/article/001/253/068/174499280060776.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="자바 스크립트 행동 : 실제 예제 및 프로젝트" />
								</a>
								<a href="https://www.php.cn/ko/faq/1796798357.html" title="자바 스크립트 행동 : 실제 예제 및 프로젝트" class="phphistorical_Version2_mids_title">자바 스크립트 행동 : 실제 예제 및 프로젝트</a>
								<span class="Articlelist_txts_time">Apr 19, 2025 am	 12:13 AM</span>
								<p class="Articlelist_txts_p">실제 세계에서 JavaScript의 응용 프로그램에는 프론트 엔드 및 백엔드 개발이 포함됩니다. 1) DOM 운영 및 이벤트 처리와 관련된 TODO 목록 응용 프로그램을 구축하여 프론트 엔드 애플리케이션을 표시합니다. 2) Node.js를 통해 RESTFULAPI를 구축하고 Express를 통해 백엔드 응용 프로그램을 시연하십시오.</p>
							</div>
														<div class="phphistorical_Version2_mids">
								<a href="https://www.php.cn/ko/faq/1796797281.html" title="JavaScript 엔진 이해 : 구현 세부 사항" class="phphistorical_Version2_mids_img">
									<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
										src="/static/imghw/default1.png" class="lazy"  data-src="https://img.php.cn/upload/article/001/253/068/174481955113957.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="JavaScript 엔진 이해 : 구현 세부 사항" />
								</a>
								<a href="https://www.php.cn/ko/faq/1796797281.html" title="JavaScript 엔진 이해 : 구현 세부 사항" class="phphistorical_Version2_mids_title">JavaScript 엔진 이해 : 구현 세부 사항</a>
								<span class="Articlelist_txts_time">Apr 17, 2025 am	 12:05 AM</span>
								<p class="Articlelist_txts_p">보다 효율적인 코드를 작성하고 성능 병목 현상 및 최적화 전략을 이해하는 데 도움이되기 때문에 JavaScript 엔진이 내부적으로 작동하는 방식을 이해하는 것은 개발자에게 중요합니다. 1) 엔진의 워크 플로에는 구문 분석, 컴파일 및 실행; 2) 실행 프로세스 중에 엔진은 인라인 캐시 및 숨겨진 클래스와 같은 동적 최적화를 수행합니다. 3) 모범 사례에는 글로벌 변수를 피하고 루프 최적화, Const 및 Lets 사용 및 과도한 폐쇄 사용을 피하는 것이 포함됩니다.</p>
							</div>
														<div class="phphistorical_Version2_mids">
								<a href="https://www.php.cn/ko/faq/1796801667.html" title="Python vs. JavaScript : 개발 환경 및 도구" class="phphistorical_Version2_mids_img">
									<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
										src="/static/imghw/default1.png" class="lazy"  data-src="https://img.php.cn/upload/article/001/253/068/174559739183083.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="Python vs. JavaScript : 개발 환경 및 도구" />
								</a>
								<a href="https://www.php.cn/ko/faq/1796801667.html" title="Python vs. JavaScript : 개발 환경 및 도구" class="phphistorical_Version2_mids_title">Python vs. JavaScript : 개발 환경 및 도구</a>
								<span class="Articlelist_txts_time">Apr 26, 2025 am	 12:09 AM</span>
								<p class="Articlelist_txts_p">개발 환경에서 Python과 JavaScript의 선택이 모두 중요합니다. 1) Python의 개발 환경에는 Pycharm, Jupyternotebook 및 Anaconda가 포함되어 있으며 데이터 과학 및 빠른 프로토 타이핑에 적합합니다. 2) JavaScript의 개발 환경에는 Node.js, VScode 및 Webpack이 포함되어 있으며 프론트 엔드 및 백엔드 개발에 적합합니다. 프로젝트 요구에 따라 올바른 도구를 선택하면 개발 효율성과 프로젝트 성공률이 향상 될 수 있습니다.</p>
							</div>
														<div class="phphistorical_Version2_mids">
								<a href="https://www.php.cn/ko/faq/1796798854.html" title="JavaScript 통역사 및 컴파일러에서 C/C의 역할" class="phphistorical_Version2_mids_img">
									<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
										src="/static/imghw/default1.png" class="lazy"  data-src="https://img.php.cn/upload/article/001/253/068/174507851090169.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="JavaScript 통역사 및 컴파일러에서 C/C의 역할" />
								</a>
								<a href="https://www.php.cn/ko/faq/1796798854.html" title="JavaScript 통역사 및 컴파일러에서 C/C의 역할" class="phphistorical_Version2_mids_title">JavaScript 통역사 및 컴파일러에서 C/C의 역할</a>
								<span class="Articlelist_txts_time">Apr 20, 2025 am	 12:01 AM</span>
								<p class="Articlelist_txts_p">C와 C는 주로 통역사와 JIT 컴파일러를 구현하는 데 사용되는 JavaScript 엔진에서 중요한 역할을합니다. 1) C는 JavaScript 소스 코드를 구문 분석하고 추상 구문 트리를 생성하는 데 사용됩니다. 2) C는 바이트 코드 생성 및 실행을 담당합니다. 3) C는 JIT 컴파일러를 구현하고 런타임에 핫스팟 코드를 최적화하고 컴파일하며 JavaScript의 실행 효율을 크게 향상시킵니다.</p>
							</div>
														<div class="phphistorical_Version2_mids">
								<a href="https://www.php.cn/ko/faq/1796799433.html" title="Python vs. JavaScript : 사용 사례 및 응용 프로그램 비교" class="phphistorical_Version2_mids_img">
									<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
										src="/static/imghw/default1.png" class="lazy"  data-src="https://img.php.cn/upload/article/001/253/068/174516487098713.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="Python vs. JavaScript : 사용 사례 및 응용 프로그램 비교" />
								</a>
								<a href="https://www.php.cn/ko/faq/1796799433.html" title="Python vs. JavaScript : 사용 사례 및 응용 프로그램 비교" class="phphistorical_Version2_mids_title">Python vs. JavaScript : 사용 사례 및 응용 프로그램 비교</a>
								<span class="Articlelist_txts_time">Apr 21, 2025 am	 12:01 AM</span>
								<p class="Articlelist_txts_p">Python은 데이터 과학 및 자동화에 더 적합한 반면 JavaScript는 프론트 엔드 및 풀 스택 개발에 더 적합합니다. 1. Python은 데이터 처리 및 모델링을 위해 Numpy 및 Pandas와 같은 라이브러리를 사용하여 데이터 과학 및 기계 학습에서 잘 수행됩니다. 2. 파이썬은 간결하고 자동화 및 스크립팅이 효율적입니다. 3. JavaScript는 프론트 엔드 개발에 없어서는 안될 것이며 동적 웹 페이지 및 단일 페이지 응용 프로그램을 구축하는 데 사용됩니다. 4. JavaScript는 Node.js를 통해 백엔드 개발에 역할을하며 전체 스택 개발을 지원합니다.</p>
							</div>
														<div class="phphistorical_Version2_mids">
								<a href="https://www.php.cn/ko/faq/1796800096.html" title="웹 사이트에서 앱으로 : 다양한 JavaScript 애플리케이션" class="phphistorical_Version2_mids_img">
									<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
										src="/static/imghw/default1.png" class="lazy"  data-src="https://img.php.cn/upload/article/001/253/068/174525132167312.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="웹 사이트에서 앱으로 : 다양한 JavaScript 애플리케이션" />
								</a>
								<a href="https://www.php.cn/ko/faq/1796800096.html" title="웹 사이트에서 앱으로 : 다양한 JavaScript 애플리케이션" class="phphistorical_Version2_mids_title">웹 사이트에서 앱으로 : 다양한 JavaScript 애플리케이션</a>
								<span class="Articlelist_txts_time">Apr 22, 2025 am	 12:02 AM</span>
								<p class="Articlelist_txts_p">JavaScript는 웹 사이트, 모바일 응용 프로그램, 데스크탑 응용 프로그램 및 서버 측 프로그래밍에서 널리 사용됩니다. 1) 웹 사이트 개발에서 JavaScript는 HTML 및 CSS와 함께 DOM을 운영하여 동적 효과를 달성하고 jQuery 및 React와 같은 프레임 워크를 지원합니다. 2) 반응 및 이온 성을 통해 JavaScript는 크로스 플랫폼 모바일 애플리케이션을 개발하는 데 사용됩니다. 3) 전자 프레임 워크를 사용하면 JavaScript가 데스크탑 애플리케이션을 구축 할 수 있습니다. 4) node.js는 JavaScript가 서버 측에서 실행되도록하고 동시 요청이 높은 높은 요청을 지원합니다.</p>
							</div>
													</div>

<a href="https://www.php.cn/ko/web-designer.html" class="phpgenera_Details_mainL4_botton">
								<span>See all articles</span>
								<img src="/static/imghw/down_right.png" alt="" />
							</a>
											</div>
				</div>
					</div>
	</main>
	<footer>
    <div class="footer">
        <div class="footertop">
            <img src="/static/imghw/logo.png" alt="">
            <p>공공복지 온라인 PHP 교육，PHP 학습자의 빠른 성장을 도와주세요！</p>
        </div>
        <div class="footermid">
            <a href="https://www.php.cn/ko/about/us.html">회사 소개</a>
            <a href="https://www.php.cn/ko/about/disclaimer.html">부인 성명</a>
            <a href="https://www.php.cn/ko/update/article_0_1.html">Sitemap</a>
        </div>
        <div class="footerbottom">
            <p>
                © php.cn All rights reserved
            </p>
        </div>
    </div>
</footer>

<input type="hidden" id="verifycode" value="/captcha.html">
<script>layui.use(['element', 'carousel'], function () {var element = layui.element;$ = layui.jquery;var carousel = layui.carousel;carousel.render({elem: '#test1', width: '100%', height: '330px', arrow: 'always'});$.getScript('/static/js/jquery.lazyload.min.js', function () {$("img").lazyload({placeholder: "/static/images/load.jpg", effect: "fadeIn", threshold: 200, skip_invisible: false});});});</script>

document.addEventListener("DOMContentLoaded", (event) => {
			// 定义一个函数来处理滚动链接的点击事件
			function setupScrollLink(scrollLinkId, targetElementId) {
				const scrollLink = document.getElementById(scrollLinkId);
				const targetElement = document.getElementById(targetElementId);

if (scrollLink && targetElement) {
					scrollLink.addEventListener("click", (e) => {
						e.preventDefault(); // 阻止默认链接行为
						targetElement.scrollIntoView({
							behavior: "smooth"
						}); // 平滑滚动到目标元素
					});
				} else {
					console.warn(
						`Either scroll link with ID '${scrollLinkId}' or target element with ID '${targetElementId}' not found.`
						);
				}
			}

// 使用该函数设置多个滚动链接
			setupScrollLink("Article_Details_main1L2s_1", "article_main_title1");
			setupScrollLink("Article_Details_main1L2s_2", "article_main_title2");
			setupScrollLink("Article_Details_main1L2s_3", "article_main_title3");
			setupScrollLink("Article_Details_main1L2s_4", "article_main_title4");
			setupScrollLink("Article_Details_main1L2s_5", "article_main_title5");
			setupScrollLink("Article_Details_main1L2s_6", "article_main_title6");
			// 可以继续添加更多的滚动链接设置
		});

window.addEventListener("scroll", function () {
			var fixedElement = document.getElementById("Article_Details_main1Lmain");
			var scrollTop = window.scrollY || document.documentElement.scrollTop; // 兼容不同浏览器
			var clientHeight = window.innerHeight || document.documentElement.clientHeight; // 视口高度
			var scrollHeight = document.documentElement.scrollHeight; // 页面总高度

// 计算距离底部的距离
			var distanceToBottom = scrollHeight - scrollTop - clientHeight;

// 当距离底部小于或等于300px时，取消固定定位
			if (distanceToBottom <= 980) {
				fixedElement.classList.remove("Article_Details_main1Lmain");
				fixedElement.classList.add("Article_Details_main1Lmain_relative");
			} else {
				// 否则，保持固定定位
				fixedElement.classList.remove("Article_Details_main1Lmain_relative");
				fixedElement.classList.add("Article_Details_main1Lmain");
      		}
    	});

</script>

</body>

</html>