Heim Web-Frontend js-Tutorial Tutorial zu den Grundlagen von JavaScript – ein Muss für den Einstieg

Tutorial zu den Grundlagen von JavaScript – ein Muss für den Einstieg

Jan 21, 2017 am 09:57 AM

JavaScript ist tatsächlich eine beschreibende Sprache. Solange Sie hart lernen, werden Sie meiner Meinung nach HTML gelernt haben Die Verwendung von JavaScript dient dazu, eine bessere Interaktion mit Webseiten zu ermöglichen. Kommen wir zum Thema.

1. JavaScript

1. Was ist JavaScript

JavaScript ist eine Beschreibungssprache, die ebenfalls auf Objekt- und Ereignissteuerung basiert und eine Skriptsprache mit Sicherheit ist.

2. Eigenschaften von JavaScript

JavaScript wird hauptsächlich zum Hinzufügen interaktiver Verhaltensweisen zu HTML-Seiten verwendet.

JavaScript ist eine Skriptsprache mit einer Java-ähnlichen Syntax.

JavaScript wird im Allgemeinen zum Schreiben clientseitiger Skripte verwendet.

JavaScript ist eine interpretierte Sprache.

3. Zusammensetzung von JavaScript

ECMScript-Standard (Standard, der alle Eigenschaften, Methoden und Objekte angibt)

BOM Browser Object Model: Interaktion mit HTML

DOM-Dokumentobjektmodell: Auf HTML-Dokumente zugreifen und diese bearbeiten

4. Grundstruktur von JavaScript

<script language=”javascript” type=”text/javascript”>
 
</script>
 
Language=”javascript”用来表示使用的语言是javascript
Nach dem Login kopieren

5.JavaScript-Ausführungsprinzip

1. Der Browser-Client sendet eine Anfrage an den Server. (Die vom Benutzer in die Adressleiste des Browsers eingegebene Adresse)

2. Datenverarbeitung: Die Serverseite verarbeitet eine Seite, die JavaScript enthält.

3. Antwort senden: Der Server verarbeitet die HTML-Datei mit JavaScript und sendet die Seite an den Browser-Client. Anschließend analysiert der Browser-Client die HTML-Tags und JavaScript-Tags einzeln von oben nach unten und präsentiert sie Seiteneffekt für Benutzer.

2. Möglichkeiten zur Einführung von JavaScript in Webseiten

1. Verwenden Sie das <script> </p><p>2. Verwenden Sie externe JavaScript-Dateien. </p><p>Wenn Sie JavaScript auf mehreren Seiten ausführen möchten, um den gleichen Effekt zu erzielen, verwenden Sie normalerweise externe .js-Dateien. </p><p>So verweisen Sie auf eine Datei mit der Erweiterung .js: </p><p><script src="../1.js"></script>

Hinweis : Externe Dateien dürfen kein <script></script> enthalten.

3. Direkt im HTML-Tag

<input name=&#39;btn&#39; type=”button” value=”弹出消息框” onclick=”javascript:alert(“欢迎你”);”/>
Nach dem Login kopieren

3. JavaScript-Kernsyntax

1. Deklaration und Zuweisung von Variablen

Variablen können nur mit var deklariert werden. Var num=1;

In JavaScript können Variablen direkt ohne Deklaration verwendet werden, diese Verwendung wird jedoch nicht empfohlen.

2. Datentyp

Undefiniert (undefinierter Typ)

Null (leerer Typ)

Zahl (numerischer Typ)

String (String-Typ)

Boolean (Boolescher Typ)

3. Der Unterschied zwischen undefiniert und null

null bedeutet „kein Objekt“, das heißt, es sollte keinen Wert geben Dort . Typische Verwendung ist:

(1) Als Parameter einer Funktion bedeutet dies, dass der Parameter der Funktion kein Objekt ist.

(2) dient als Endpunkt der Objektprototypkette.

Object.getPrototypeOf (Object.prototype)// null

undefiniert bedeutet „fehlender Wert“, das heißt, hier sollte ein Wert vorhanden sein, dieser wurde jedoch noch nicht definiert. Typische Verwendung ist:

(1) Wenn eine Variable deklariert, aber kein Wert zugewiesen ist, ist sie gleich undefiniert.

(2) Beim Aufruf der Funktion wird der Parameter, der bereitgestellt werden soll, nicht bereitgestellt und der Parameter ist gleich undefiniert.

(3) Dem Objekt ist kein Attribut zugewiesen und der Wert dieses Attributs ist undefiniert.

(4) Wenn die Funktion keinen Wert zurückgibt, gibt sie standardmäßig undefiniert zurück.

4. Es gibt nur 6 Situationen und das Ergebnis ist falsch.

null,false,undefined,0,"",NaN

5. Einige gängige Methoden von Strings

toString(); 🎜>toLowerCasee(); Konvertieren Sie die Zeichenfolge in Kleinbuchstaben.

toUpperCase(); Konvertieren Sie die Zeichenfolge in Großbuchstaben

charAt(index); Geben Sie die Zeichenfolge an der angegebenen Position zurück.

indexOf(str, index); Position, an der die angegebene Zeichenfolge zum ersten Mal in der Zeichenfolge erscheint

Substring(index,index); gibt die Zeichenfolge zurück, die sich zwischen dem angegebenen Index index1 und index2 befindet (einschließlich index1, aber ohne index2)

Split( str); Teilen Sie die Zeichenfolge in ein Zeichenarray auf

Drei Möglichkeiten, ein Array zu erstellen und dem Array Werte zuzuweisen

01 ') ;

02.var num=new Array(2);

Num[0]=1;

Num[1]=2;

03.var num=['1','2'];

Gemeinsame Methoden und Eigenschaften von Arrays

Länge: Legt die Anzahl der Elemente im Array fest oder gibt sie zurück


Join(): Fügen Sie alle Sprachraten des Arrays in einen String ein und teilen Sie sie durch Trennzeichen.

Sort(): Sortieren Sie das Array

Push(): Fügen Sie ein oder mehrere Elemente am Ende des Arrays hinzu und geben Sie die neue Länge zurück.

7.运算符

Tutorial zu den Grundlagen von JavaScript – ein Muss für den Einstieg

8 程序调试

方案一:在VS中调试

步骤:01.将要调试的页面设置成起始页

02.设置断点

03.按F5启动调试

方案二:chrome浏览器调试

步骤:01.点击F12,将工具调出

02.设置断点

03.刷新页面

方案三:IE浏览器

步骤:01.F12,开发人员工具

02.切到脚本选项卡

03.设置断点

04.启动调试

05.刷新

四.JavaScript中的函数

1.常用的系统函数

01. parseInt(“字符串”);

parseInt()函数首先查看位置为0处的字符,判断他是否为一个有效数字,如果不是则返回NaN,不在执行其他操作,但如果该字符是有效参数,则该函数将查看位置为1处的字符,进行同样的测试,这一过程将持续到发现该字符是有效字符为止,此时该字符将之前的字符串转换成数字。

eg:

var num1=parseInt(“78.9”)//返回值为78

var num2=parseInt(“afa78.9”)//返回值为NaN

02.parseFloat(“字符串”);

他的用法和parseInt类似,只不过字符串中出现的第一个点将被认为是有效字符.

eg:

var num1=parseInt(“78.9”)//返回值为78

var num2=parseInt(“afa78.9”)//返回值为NaN

2.自定义函数

在JavaScript中,自定义函数是由function,函数名,一组以参数以及置于括号中待执行的JavaScript语句组成。

下面来看一看语法:

function 函数名(参数1,参数2,..)

{

//JavaScript语句

[return 返回值]

}

function是定义函数的关键字,必须有。

参数1,和参数2是该函数的参数,因为JavaScritp他本省的类型是弱类型,所有在给定参数时没有必要提供类型

{}定义的函数的开始和结尾.

return 语句用来规定函数返回的值.

2.调用函数

要执行一个函数,首先肯定要调用这个函数,必须制定函数名和其后的参数。

eg:

<script type=”text/javascript”>
 
function show(){
 
 
 
}
 
show();
 
</script>
Nach dem Login kopieren

3.匿名函数

匿名函数就是没有名字的函数了,也叫闭包函数(closures),允许 临时创建一个没有指定名称的函数。最经常用作回调函数(callback)参数的值,很多新手朋友对于匿名函数不了解。这里就来分析一下。

function 函数名(参数列表){函数体;}

如果是创建匿名函数,那就应该是:

function(){函数体;}

因为是匿名函数,所以一般也不会有参数传给他。

为什么要创建匿名函数呢?在什么情况下会使用到匿名函数。匿名函数主要有两种常用的场景,一是回调函数,二是直接执行函数。

eg:

<script language="javascript">
var a = "a";
(function(){
  var a="b";
  alert(a);
})();
alert(a);
</script>
Nach dem Login kopieren

在上面这段代码中,会顺序输出两个alert框。第一个alert框内容为b,第二个为a。以为该Script标签中有一个匿名方法时自调用的,所有首先弹出b,然后碰到匿名方法后的alert(a)则弹出a。

以上这篇JavaScript基础教程——入门必看篇就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持PHP中文网。

更多Tutorial zu den Grundlagen von JavaScript – ein Muss für den Einstieg相关文章请关注PHP中文网!

Erklärung dieser Website
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

Heiße KI -Werkzeuge

Undresser.AI Undress

Undresser.AI Undress

KI-gestützte App zum Erstellen realistischer Aktfotos

AI Clothes Remover

AI Clothes Remover

Online-KI-Tool zum Entfernen von Kleidung aus Fotos.

Undress AI Tool

Undress AI Tool

Ausziehbilder kostenlos

Clothoff.io

Clothoff.io

KI-Kleiderentferner

AI Hentai Generator

AI Hentai Generator

Erstellen Sie kostenlos Ai Hentai.

Heißer Artikel

R.E.P.O. Energiekristalle erklärten und was sie tun (gelber Kristall)
3 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Beste grafische Einstellungen
3 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. So reparieren Sie Audio, wenn Sie niemanden hören können
3 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌
WWE 2K25: Wie man alles in Myrise freischaltet
4 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌

Heiße Werkzeuge

Notepad++7.3.1

Notepad++7.3.1

Einfach zu bedienender und kostenloser Code-Editor

SublimeText3 chinesische Version

SublimeText3 chinesische Version

Chinesische Version, sehr einfach zu bedienen

Senden Sie Studio 13.0.1

Senden Sie Studio 13.0.1

Leistungsstarke integrierte PHP-Entwicklungsumgebung

Dreamweaver CS6

Dreamweaver CS6

Visuelle Webentwicklungstools

SublimeText3 Mac-Version

SublimeText3 Mac-Version

Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

Wie erstelle ich meine eigenen JavaScript -Bibliotheken? Wie erstelle ich meine eigenen JavaScript -Bibliotheken? Mar 18, 2025 pm 03:12 PM

In Artikel werden JavaScript -Bibliotheken erstellt, veröffentlicht und aufrechterhalten und konzentriert sich auf Planung, Entwicklung, Testen, Dokumentation und Werbestrategien.

Wie optimiere ich den JavaScript -Code für die Leistung im Browser? Wie optimiere ich den JavaScript -Code für die Leistung im Browser? Mar 18, 2025 pm 03:14 PM

In dem Artikel werden Strategien zur Optimierung der JavaScript -Leistung in Browsern erörtert, wobei der Schwerpunkt auf die Reduzierung der Ausführungszeit und die Minimierung der Auswirkungen auf die Lastgeschwindigkeit der Seite wird.

Was soll ich tun, wenn ich auf den Codendruck auf Kleidungsstücke für Front-End-Thermalpapier-Quittungen stoße? Was soll ich tun, wenn ich auf den Codendruck auf Kleidungsstücke für Front-End-Thermalpapier-Quittungen stoße? Apr 04, 2025 pm 02:42 PM

Häufig gestellte Fragen und Lösungen für das Ticket-Ticket-Ticket-Ticket in Front-End im Front-End-Entwicklungsdruck ist der Ticketdruck eine häufige Voraussetzung. Viele Entwickler implementieren jedoch ...

Wie debugge ich den JavaScript -Code effektiv mithilfe von Browser -Entwickler -Tools? Wie debugge ich den JavaScript -Code effektiv mithilfe von Browser -Entwickler -Tools? Mar 18, 2025 pm 03:16 PM

In dem Artikel werden effektives JavaScript -Debuggen mithilfe von Browser -Entwickler -Tools, der Schwerpunkt auf dem Festlegen von Haltepunkten, der Konsole und der Analyse der Leistung erörtert.

Wie benutze ich Javas Sammlungsrahmen effektiv? Wie benutze ich Javas Sammlungsrahmen effektiv? Mar 13, 2025 pm 12:28 PM

In diesem Artikel wird der effektive Gebrauch des Sammlungsrahmens von Java untersucht. Es betont die Auswahl geeigneter Sammlungen (Liste, Set, Karte, Warteschlange) basierend auf Datenstruktur, Leistungsanforderungen und Thread -Sicherheit. Optimierung der Sammlungsnutzung durch effizientes Gebrauch

Wie verwende ich Quellkarten zum Debuggen, um den JavaScript -Code zu debuggen? Wie verwende ich Quellkarten zum Debuggen, um den JavaScript -Code zu debuggen? Mar 18, 2025 pm 03:17 PM

In dem Artikel wird erläutert, wie Quellkarten zum Debuggen von JavaScript verwendet werden, indem er auf den ursprünglichen Code zurückgegeben wird. Es wird erläutert, dass Quellenkarten aktiviert, Breakpoints eingestellt und Tools wie Chrome Devtools und WebPack verwendet werden.

TypeScript für Anfänger, Teil 2: Grundlegende Datentypen TypeScript für Anfänger, Teil 2: Grundlegende Datentypen Mar 19, 2025 am 09:10 AM

Sobald Sie das Typscript-Tutorial für Einstiegsklasse gemeistert haben, sollten Sie in der Lage sein, Ihren eigenen Code in eine IDE zu schreiben, die TypeScript unterstützt und in JavaScript zusammenfasst. Dieses Tutorial wird in verschiedenen Datentypen in TypeScript eingetaucht. JavaScript hat sieben Datentypen: NULL, UNDEFINED, BOOLEAN, NUMMER, STRING, SYMBOL (durch ES6 eingeführt) und Objekt. TypeScript definiert mehr Typen auf dieser Grundlage, und dieses Tutorial wird alle ausführlich behandelt. Null -Datentyp Wie JavaScript, null in TypeScript

Erste Schritte mit Chart.js: Kuchen-, Donut- und Bubble -Diagramme Erste Schritte mit Chart.js: Kuchen-, Donut- und Bubble -Diagramme Mar 15, 2025 am 09:19 AM

In diesem Tutorial wird erläutert, wie man mit Diagramm.js Kuchen-, Ring- und Bubble -Diagramme erstellt. Zuvor haben wir vier Chart -Arten von Charts gelernt. Erstellen Sie Kuchen- und Ringdiagramme Kreisdiagramme und Ringdiagramme sind ideal, um die Proportionen eines Ganzen anzuzeigen, das in verschiedene Teile unterteilt ist. Zum Beispiel kann ein Kreisdiagramm verwendet werden, um den Prozentsatz der männlichen Löwen, weiblichen Löwen und jungen Löwen in einer Safari oder den Prozentsatz der Stimmen zu zeigen, die verschiedene Kandidaten bei der Wahl erhalten. Kreisdiagramme eignen sich nur zum Vergleich einzelner Parameter oder Datensätze. Es ist zu beachten, dass das Kreisdiagramm keine Entitäten ohne Wert zeichnen kann, da der Winkel des Lüfters im Kreisdiagramm von der numerischen Größe des Datenpunkts abhängt. Dies bedeutet jede Entität ohne Anteil

See all articles