Heim  >  Artikel  >  Web-Frontend  >  [Javascript-Lernen] Grundlagen der js-Syntax

[Javascript-Lernen] Grundlagen der js-Syntax

php是最好的语言
php是最好的语言Original
2018-08-08 16:42:554428Durchsuche

Dieser Artikel organisiert die Syntax von JavaScript sehr vollständig und kann als Referenz beim Lernen verwendet werden. Es ist nicht erforderlich, Bücher zu lesen in Büchern sind sehr verstreut. Wenn es Ihnen nichts ausmacht, können Sie es zum späteren Nachschlagen speichern. Ich freue mich auch, meine Artikel weiterzugeben Wissen mit allen.

1-1 Der Ausgangspunkt für das Erlernen von JavaScript ist die Verarbeitung von Webseiten. Lassen Sie uns zunächst lernen, wie man DOM für einfache Vorgänge verwendet.

<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 Interner Verweis

1-3 Externer Verweis

1-4 wird im Allgemeinen im Kopf- oder Körperteil der Webseite platziert:

wird im

Am häufigsten wird es verwendet Der Kopfteil der Seite Platziert das <script>-Element, und der Browser führt diesen Code aus, wenn er den Kopfteil analysiert, und analysiert dann den Rest der Seite. </script>

wird im Abschnitt

platziert

Der JavaScript-Code wird ausgeführt , wenn die Webseite diese Anweisung liest. Wenn die Funktion über einen Ereignisaufruf ausgeführt wird, ist der Standort nicht erforderlich.

1-5 JavaScript-Anweisungen sind Befehle, die an den Browser gesendet werden.

1-6 Kommentare // oder /* */

1-7 var-Variablennamen unterscheiden zwischen Groß- und Kleinschreibung

1-8 if-Anweisung

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

1-9 Funktion

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

Aufruf: add2()

1-10 String-Methode +

2-2 Warnung

  1. Es können keine weiteren Vorgänge ausgeführt werden, bevor im Dialogfeld auf die Schaltfläche „OK“ geklickt wird.

  2. Meldungsdialogfelder können häufig zum Debuggen von Programmen verwendet werden.

  3. Warnungsausgabeinhalt, der eine Zeichenfolge oder eine Variable sein kann, ähnlich wie document.write.

2-3 Bestätigen

Das Dialogfeld „Bestätigungsmeldung“ wird normalerweise verwendet, um dem Benutzer die Durchführung einer Auswahlaktion zu ermöglichen , wie zum Beispiel: „Hast du recht?“ usw. Öffnet ein Dialogfeld (einschließlich einer Schaltfläche „OK“ und einer Schaltfläche „Abbrechen“).

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

2-4 promte

Popup eines Nachrichtendialogfelds, das normalerweise verwendet wird, um nach Informationen zu fragen, die mit dem Benutzer interagiert werden müssen. Öffnet ein Meldungsdialogfeld (einschließlich einer Schaltfläche „OK“, einer Schaltfläche „Abbrechen“ und einem Texteingabefeld).

prompt(str1, str2);

Parameter:

  • str1: Der Text, der im Nachrichtendialogfeld angezeigt werden soll, kann nicht geändert werden

  • str2 : Text Der Inhalt des Felds kann geändert werden

Klicken Sie im Dialogfeld auf die Schaltfläche „OK“. Der Inhalt des Textfelds wird als Rückgabewert der Funktion verwendet. Klicken Sie auf „Abbrechen“. Schaltfläche im Dialogfeld, und null

wird zurückgegeben

2-5 Neues Fenster öffnen

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

Parameter:

URL: Optionaler Parameter, im Fenster Die URL oder der Pfad der anzuzeigenden Webseite. Wenn dieser Parameter weggelassen wird oder sein Wert eine leere Zeichenfolge ist, wird kein Dokument im Fenster angezeigt.

Fenstername: Optionaler Parameter, der Name des geöffneten Fensters.

  1. Der Name besteht aus Buchstaben, Zahlen und Unterstrichen.

  2. „_top“, „_blank“, „_self“ sind Namen mit besonderer Bedeutung.

    _blank: Zielseite in einem neuen Fenster anzeigen

    _self: Zeigt die Zielwebseite im aktuellen Fenster an

    _top: Zeigt die Zielwebseite im oberen Fenster in der Frame-Webseite an

  3. Es kann nur ein Fenster mit demselben Namen erstellt werden. Wenn Sie mehrere Fenster erstellen möchten, dürfen die Namen nicht identisch sein.

  4. Der Name darf keine Leerzeichen enthalten.

Parameterzeichenfolge : optionaler Parameter, Fensterparameter festlegen, jeder Parameter wird durch Kommas getrennt.

[Javascript-Lernen] Grundlagen der js-Syntax

<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 Fenster schließen

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

SchließenNeues Fenster

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

Hinweis: Der obige Code schließt das Fenster, während ein neues Fenster geöffnet wird, und das geöffnete Fenster ist nicht sichtbar.

2-7 leicht

3-1

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

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

  1. 元素节点:上图中、

    等都是元素节点,即标签。

  2. 文本节点:向用户展示的内容,如

  3. ...
  4. 中的JavaScript、DOM、CSS等文本。
  5. 属性节点:元素属性,如标签的链接属性href="http://www.imooc.com"

3-2 通过ID获取元素

[Javascript-Lernen] Grundlagen der js-Syntax

 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是获取的元素对象

[Javascript-Lernen] Grundlagen der js-Syntax

3-5 显示和隐藏

Object.style.display = value

[Javascript-Lernen] Grundlagen der js-Syntax

3-6 控制class属性元素

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

进阶内容

2-2

变量取名规则:

  1. 必须以字母、下划线或美元符号开头,后面可以跟字母、下划线、美元符号和数字。如下:

  2. 变量名区分大小写,如:A与a是两个不同变量。

  3. 不允许使用JavaScript关键字和保留字做变量名。

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

2-10 "||" 或

2-11 "!" 否

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

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

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

3-1 数组

[Javascript-Lernen] Grundlagen der js-Syntax

3-2

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

注意:

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

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

3-3 添加元素

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

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

3-6 length属性

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

 相关推荐:

JavaScript学习笔记之基础语法

整理Javascript基础语法学习笔记

Das obige ist der detaillierte Inhalt von[Javascript-Lernen] Grundlagen der js-Syntax. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn