[자바스크립트 학습] js 문법 기초-JS 튜토리얼-php.cn

집

웹 프론트엔드

JS 튜토리얼

[자바스크립트 학습] js 문법 기초

php是最好的语言

Aug 08, 2018 pm 04:42 PM

이 글은 자바스크립트의 문법을 체계적으로 정리한 것입니다. 지식 포인트는 매우 완벽하고 비교적 기초적이어서 공부할 때 참고할 수 있습니다. 책에서 지식 포인트를 읽을 필요도 없습니다. 매우 흩어져서 읽어 보는 것은 낭비입니다. 시간이 괜찮다면 알림을 위해 저장해 두세요. 모든 사람에게 도움이 된다는 것은 제가 계속해서 기사를 쓰는 동기이기도 합니다. 모든 사람.

1-1 JavaScript 학습의 출발점은 먼저 웹 페이지를 처리하는 것부터 간단한 작업을 위해 DOM을 사용하는 방법을 알아보겠습니다.

<body>
  <p id="p1">我是第一段文字</p>
  <p id="p2">我是第二段文字</p>

  <script type="text/javascript">
    document.write("hello");  # 输出文本
    document.getElementById("p1").style.color="blue";  # 第一段文字变蓝色了
  </script>
</body>

1-2 내부 참조

1-3 외부 참조

1-4 일반 배치 웹 페이지의 헤드 또는 본문 부분:

부분에 넣습니다

가장 일반적인 방법은 페이지의 헤드 부분에 <script> 요소를 배치하는 것입니다. 머리 부분을 파싱할 때 코드를 분석한 다음 페이지의 나머지 부분을 파싱합니다. </script>

섹션에 배치하세요

웹페이지에서 이 명령문을 읽으면 JavaScript 코드가 실행됩니다. 이벤트 호출을 통해 함수가 실행되는 경우 위치에 대한 요구 사항이 없습니다.

1-5 JavaScript 문은 브라우저로 전송되는 명령입니다.

1-6 Comments // 또는 /* */

1-7 var 변수 이름은 대소문자를 구분합니다

1-8 if 문

if(条件)  注意：没有分号哦。
{ 条件成立时执行的代码 }
else
{ 条件不成立时执行的代码 }

1-9 Function

function add2(){
   var sum = 3 + 2;
   alert(sum);
}

Call: add2 ()

1-10 문자열 방식 +

2-2 alert

대화 상자에서 "확인" 버튼을 클릭하기 전에는 다른 작업을 수행할 수 없습니다.
메시지 대화 상자는 종종 프로그램을 디버깅하는 데 사용될 수 있습니다.
document.write와 유사하게 문자열이나 변수일 수 있는 경고 출력 콘텐츠입니다.

2-3 confirm

확인 메시지 대화 상자는 일반적으로 "당신이 맞습니까?"와 같은 사용자가 선택하도록 허용하는 데 사용됩니다. 대화 상자를 표시합니다(확인 버튼 및 취소 버튼 포함).

var mymessage=confirm("你喜欢JavaScript吗?");

2-4 promte

는 일반적으로 사용자와 상호 작용해야 하는 일부 정보를 요청하는 데 사용되는 메시지 대화 상자를 표시합니다. 메시지 대화 상자(확인 버튼, 취소 버튼, 텍스트 입력 상자 포함)를 표시합니다.

prompt(str1, str2);

매개변수:

str1: 메시지 대화 상자에 표시될 텍스트, 수정할 수 없음
str2: 텍스트 상자의 내용, 수정 가능

에서 확인 버튼을 클릭하세요. 대화 상자, 텍스트 상자의 내용은 함수 반환 값으로 사용됩니다. 대화 상자에서 취소 버튼을 클릭하면 null이 반환됩니다

2-5 새 창 열기

window.open([URL], [窗口名称], [参数字符串])

매개변수:

URL : 창에 필요한 선택적 매개변수 웹페이지의 URL 또는 경로를 표시합니다. 이 매개변수가 생략되거나 해당 값이 빈 문자열인 경우 창에 문서가 표시되지 않습니다.

Window name: 선택적 매개변수, 열린 창의 이름.

이름은 문자, 숫자, 밑줄 문자로 구성됩니다.
"_top", "_blank", "_self"는 특별한 의미를 지닌 이름입니다.

_blank: 새 창에 대상 페이지를 표시합니다

_self: 현재 창에 대상 웹페이지를 표시합니다

_top: 프레임 웹페이지 상단 창에 대상 웹페이지를 표시합니다
동일한 이름의 창은 하나만 생성할 수 있습니다. 여러 개의 창을 생성하려는 경우 이름이 동일할 수 없습니다.
이름에는 공백이 포함될 수 없습니다.

매개변수 문자열: 선택적 매개변수, 창 매개변수 설정, 각 매개변수는 쉼표로 구분됩니다.

[자바스크립트 학습] js 문법 기초

<script type="text/javascript"> 
window.open(&#39;http://www.imooc.com&#39;,&#39;_blank&#39;,&#39;width=300,height=200,menubar=no,toolbar=no, status=no,scrollbars=yes&#39;)
</script>

2-6 창 닫기

window.close();   //关闭本窗口 或 window.close();   //关闭本窗口

새 창을 닫으세요

<script type="text/javascript">
   var mywin=window.open(&#39;http://www.imooc.com&#39;); //将新打的窗口对象，存储在变量mywin中
   mywin.close();
</script>

주의: 위 코드는 새 창을 열면서 창을 닫아 열려있는 창을 볼 수 없습니다.

2-7 살짝

3-1

认识DOM文档对象模型DOM（Document Object Model）定义访问和处理HTML文档的标准方法。DOM 将HTML文档呈现为带有元素、属性和文本的树结构（节点树）。

HTML文档可以说由节点构成的集合，三种常见的DOM节点:

元素节点：上图中、
、
等都是元素节点，即标签。
文本节点:向用户展示的内容，如
...
属性节点:元素属性，如标签的链接属性href="http://www.imooc.com"

3-2 通过ID获取元素

[자바스크립트 학습] js 문법 기초

 document.getElementById(“id”)

该示例打印并非理想结果，是因为从浏览器读取html文件来说，是从上到下读取的：如果将JavaScript放在head中，HTML文件读取时会先读取并执行JavaScript的内容，然后才会执行body标签内的内容；如果放在body标签内，HTML文件读取时，会先读取在JavaScript前面的内容，再读取JavaScript的内容；

从上面这个原理与课程结合进行分析：

结果为null是因为，JavaScript没有找到id名为“con”的标签，所以返回null。

结果为[object HTMLParagraphElement]，则说明JavaScript找到了id名为“con”的标签，以对象的形式返回该标签

但是我们发现在HTML中明明存在id=“con”的标签，这又是怎么回事？这是因为，前面说的浏览器读取HTML文件，是从上到下读取的：

如果将JavaScript放在id=“con”的标签之前，这就导致了浏览器在读取HTML文件时，JavaScript先读取，读取完JavaScript后，才开始读取到id=“con”的标签，这就是说JavaScript读取时是没有读取到id=‘con’的标签，只能返回null，表示没有读取到该标签

如果将JavaScript放在id=“con”的标签之后，在浏览器读取HTML文件时，先读取到了id="con"的标签，才读取JavaScript，这时由于id="con"的标签名存在，JavaScript可以发现，所以以对对象的形式（[object HTMLParagraphElement]）返回该标签

要返回正确的结果应该在前后加双引号或者在mychar变量后加上.innerHTML

3-3 innerHTML属性

获取元素内容

  var mychar= document.getElementById("con");  
  document.write("原标题:"+mychar.innerHTML+"<br>"); //输出原h2标签内容
  mychar.innerHTML = &#39;Hello world!&#39;
  document.write("修改后的标题:"+mychar.innerHTML); //输出修改后h2标签内容

3-4 改变HTML样式

Object.style.property=new style;  //Object是获取的元素对象

[자바스크립트 학습] js 문법 기초

3-5 显示和隐藏

Object.style.display = value

[자바스크립트 학습] js 문법 기초

3-6 控制class属性元素

object.className = classname 注意中间有个大写的N

进阶内容

2-2

变量取名规则：

必须以字母、下划线或美元符号开头，后面可以跟字母、下划线、美元符号和数字。如下:
变量名区分大小写，如:A与a是两个不同变量。
不允许使用JavaScript关键字和保留字做变量名。

2-9 “&&”表示and操作符

2-10 "||" 或

2-11 "!" 否

2-12 操作符之间的优先级（高到低）:

算术操作符 → 比较操作符 → 逻辑操作符 → "="赋值符号

如果同级的运算是按从左到右次序进行,多层括号由里向外。

3-1 数组

[자바스크립트 학습] js 문법 기초

3-2

var myarray= new Array(8); //创建数组，存储8个数据。

注意：

1.创建的新数组是空数组，没有值，如输出，则显示undefined。

2.虽然创建数组时，指定了长度，但实际上数组都是变长的，也就是说即使指定了长度为8，仍然可以将元素存储在规定长度以外。

3-3 添加元素

只需使用下一个未用的索引，任何时刻可以不断向数组增加新元素。

myarray[5]=88; //使用一个新索引，为数组增加一个新元素

3-6 length属性

myarray.length; //获得数组myarray的长度

관련 기사

JavaScript 엔진 : 구현 비교Apr 13, 2025 am 12:05 AM

각각의 엔진의 구현 원리 및 최적화 전략이 다르기 때문에 JavaScript 엔진은 JavaScript 코드를 구문 분석하고 실행할 때 다른 영향을 미칩니다. 1. 어휘 분석 : 소스 코드를 어휘 단위로 변환합니다. 2. 문법 분석 : 추상 구문 트리를 생성합니다. 3. 최적화 및 컴파일 : JIT 컴파일러를 통해 기계 코드를 생성합니다. 4. 실행 : 기계 코드를 실행하십시오. V8 엔진은 즉각적인 컴파일 및 숨겨진 클래스를 통해 최적화하여 Spidermonkey는 유형 추론 시스템을 사용하여 동일한 코드에서 성능이 다른 성능을 제공합니다.

브라우저 너머 : 실제 세계의 JavaScriptApr 12, 2025 am 12:06 AM

실제 세계에서 JavaScript의 응용 프로그램에는 서버 측 프로그래밍, 모바일 애플리케이션 개발 및 사물 인터넷 제어가 포함됩니다. 1. 서버 측 프로그래밍은 Node.js를 통해 실현되며 동시 요청 처리에 적합합니다. 2. 모바일 애플리케이션 개발은 재교육을 통해 수행되며 크로스 플랫폼 배포를 지원합니다. 3. Johnny-Five 라이브러리를 통한 IoT 장치 제어에 사용되며 하드웨어 상호 작용에 적합합니다.

Next.js (백엔드 통합)로 멀티 테넌트 SAAS 애플리케이션 구축Apr 11, 2025 am 08:23 AM

일상적인 기술 도구를 사용하여 기능적 다중 테넌트 SaaS 응용 프로그램 (Edtech 앱)을 구축했으며 동일한 작업을 수행 할 수 있습니다. 먼저, 다중 테넌트 SaaS 응용 프로그램은 무엇입니까? 멀티 테넌트 SAAS 응용 프로그램은 노래에서 여러 고객에게 서비스를 제공 할 수 있습니다.

Next.js (Frontend Integration)를 사용하여 멀티 테넌트 SaaS 응용 프로그램을 구축하는 방법Apr 11, 2025 am 08:22 AM

이 기사에서는 Contrim에 의해 확보 된 백엔드와의 프론트 엔드 통합을 보여 주며 Next.js를 사용하여 기능적인 Edtech SaaS 응용 프로그램을 구축합니다. Frontend는 UI 가시성을 제어하기 위해 사용자 권한을 가져오고 API가 역할 기반을 준수하도록합니다.

JavaScript : 웹 언어의 다양성 탐색Apr 11, 2025 am 12:01 AM

JavaScript는 현대 웹 개발의 핵심 언어이며 다양성과 유연성에 널리 사용됩니다. 1) 프론트 엔드 개발 : DOM 운영 및 최신 프레임 워크 (예 : React, Vue.js, Angular)를 통해 동적 웹 페이지 및 단일 페이지 응용 프로그램을 구축합니다. 2) 서버 측 개발 : Node.js는 비 차단 I/O 모델을 사용하여 높은 동시성 및 실시간 응용 프로그램을 처리합니다. 3) 모바일 및 데스크탑 애플리케이션 개발 : 크로스 플랫폼 개발은 개발 효율을 향상시키기 위해 반응 및 전자를 통해 실현됩니다.

JavaScript의 진화 : 현재 동향과 미래 전망Apr 10, 2025 am 09:33 AM

JavaScript의 최신 트렌드에는 Typescript의 Rise, 현대 프레임 워크 및 라이브러리의 인기 및 WebAssembly의 적용이 포함됩니다. 향후 전망은보다 강력한 유형 시스템, 서버 측 JavaScript 개발, 인공 지능 및 기계 학습의 확장, IoT 및 Edge 컴퓨팅의 잠재력을 포함합니다.

Demystifying JavaScript : 그것이하는 일과 중요한 이유Apr 09, 2025 am 12:07 AM

JavaScript는 현대 웹 개발의 초석이며 주요 기능에는 이벤트 중심 프로그래밍, 동적 컨텐츠 생성 및 비동기 프로그래밍이 포함됩니다. 1) 이벤트 중심 프로그래밍을 사용하면 사용자 작업에 따라 웹 페이지가 동적으로 변경 될 수 있습니다. 2) 동적 컨텐츠 생성을 사용하면 조건에 따라 페이지 컨텐츠를 조정할 수 있습니다. 3) 비동기 프로그래밍은 사용자 인터페이스가 차단되지 않도록합니다. JavaScript는 웹 상호 작용, 단일 페이지 응용 프로그램 및 서버 측 개발에 널리 사용되며 사용자 경험 및 크로스 플랫폼 개발의 유연성을 크게 향상시킵니다.

Python 또는 JavaScript가 더 좋습니까?Apr 06, 2025 am 12:14 AM

Python은 데이터 과학 및 기계 학습에 더 적합한 반면 JavaScript는 프론트 엔드 및 풀 스택 개발에 더 적합합니다. 1. Python은 간결한 구문 및 풍부한 라이브러리 생태계로 유명하며 데이터 분석 및 웹 개발에 적합합니다. 2. JavaScript는 프론트 엔드 개발의 핵심입니다. Node.js는 서버 측 프로그래밍을 지원하며 풀 스택 개발에 적합합니다.

See all articles

핫 AI 도구

Undresser.AI Undress

사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover

사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

AI 옷 제거제

AI Hentai Generator

AI Hentai를 무료로 생성하십시오.

뜨거운 도구

WebStorm Mac 버전

유용한 JavaScript 개발 도구

스튜디오 13.0.1 보내기

강력한 PHP 통합 개발 환경

DVWA

DVWA(Damn Vulnerable Web App)는 매우 취약한 PHP/MySQL 웹 애플리케이션입니다. 주요 목표는 보안 전문가가 법적 환경에서 자신의 기술과 도구를 테스트하고, 웹 개발자가 웹 응용 프로그램 보안 프로세스를 더 잘 이해할 수 있도록 돕고, 교사/학생이 교실 환경 웹 응용 프로그램에서 가르치고 배울 수 있도록 돕는 것입니다. 보안. DVWA의 목표는 다양한 난이도의 간단하고 간단한 인터페이스를 통해 가장 일반적인 웹 취약점 중 일부를 연습하는 것입니다. 이 소프트웨어는