집 > 기사 > 웹 프론트엔드 > [자바스크립트 학습] js 문법 기초

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

php是最好的语言원래의: 2018-08-08 16:42:554428검색

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

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的长度

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

进阶内容

관련 기사