简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）
Heim
Artikel
Fragen und Antworten
Kurs
Thema
Herunterladen
Spiel
Wörterbuch
kürzliche Updates

Heim  >  Artikel  >  Web-Frontend  >  JavaScript-Grundlagen verstehen (sehr detailliert)

JavaScript-Grundlagen verstehen (sehr detailliert)

coldplay.xixi
coldplay.xixinach vorne
2021-02-24 10:23:172346Durchsuche

JavaScript-Grundlagen verstehen (sehr detailliert)

Kostenlose Lernempfehlung: Javascript-Video-Tutorial

Was ist? avaScript ist ein objekt- und ereignisgesteuertes , und eine Skriptsprache mit Sicherheitsfunktionen, die in der Entwicklung von Webanwendungen weit verbreitet ist und häufig zum Hinzufügen verschiedener dynamischer Funktionen zu Webseiten verwendet wird, um Benutzern einen reibungsloseren und schöneren Browsing-Effekt zu bieten. Normalerweise realisieren JavaScript-Skripte ihre Funktionen, indem sie sie in HTML einbetten.

JavaScriptFunktionen

ist eine interpretierte Skriptsprache (der Code ist nicht vorkompiliert). wird hauptsächlich verwendet, um interaktives Verhalten zu HTML-Seiten (einer Anwendung unter Standard Universal Markup Language) hinzuzufügen.

    kann direkt in HTML-Seiten eingebettet werden, aber das Schreiben als separate JS-Datei ist für die Trennung von Struktur und Verhalten von Vorteil.

    2. Plattformübergreifende Funktion, mit Unterstützung der meisten Browser kann es auf mehreren Plattformen (wie Windows, Linux, Mac, Android, iOS usw.) ausgeführt werden.

  3. JavaScript

  4. bestehend aus

Tägliche Verwendung von JavaScript

zum Einbetten von dynamischem Text in HTML-Seiten.

Reagieren Sie auf Browserereignisse.

    HTML-Elemente lesen und schreiben.

    2. Validieren Sie Daten, bevor sie an den Server übermittelt werden.

    3. Erkennen Sie die Browserinformationen des Besuchers.

    4. Kontrollieren Sie Cookies, einschließlich Erstellung und Änderung.

    5. Serverseitige Programmierung basierend auf der Node.js-Technologie. Die Grundstruktur von

  6. JavaScript

  7. Überall im Dokument, stellen Sie einfach sicher, dass diese Codes vor der Verwendung gelesen und in den Speicher geladen wurden

Das Ausführungsprinzip von JavaScript

Auf Webseiten verwiesen

JavaScript

Weg 1.

verwenden Sie

3f1c4e4b6b16bbbd69b2ee476dc4f83a Tag 2.

ExternJS Datei

<script type="text/javascript">
    <!—
          JavaScript 语句;
    —>
</script >
3. Direkt im

​​

HTMLtag

……
<title>初学JavaScript</title>
</head>
<body>
<script type="text/javascript">
    document.write("初学JavaScript");
    document.write("<h1>Hello，JavaScript</h1>");
</script>
</body>
</html>
JavaScriptKernsyntax:

1. Variablen ①Erst Variablen deklarieren und dann Werte zuweisenvar width;

width = 5 ;

var – Schlüsselwörter gewohnt Variablen deklarierenwidth – Variablenname②Variablen gleichzeitig deklarieren und zuweisenvar catName= "Pipi";

<script src="export.js"  type="text/javascript"></script>

③Direkte Zuweisung ohne Deklaration [im Allgemeinen nicht verwendet]

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

Variablen können ohne Deklaration direkt verwendet werden , aber diese Methode ist fehleranfällig und schwer zu finden und zu beheben, daher wird sie nicht empfohlen.

2. Datentyp

①undefiniert: Beispiel: var width;

Die Variable width hat keinen Anfangswert und wird dem Wert undefiniert zugewiesen

②null: stellt einen Nullwert dar, der gleich ist undefinierter Wert

③Nummer:

var iNum=23 //integer

var iNum=23.0;    //浮点数

④Boolean：true和false   但是JS会把他们解析成1；0

⑤String：一组被引号（单引号或双引号）括起来的文本 var string1="This is a string";

 

3. typeof运算符

typeof检测变量的返回值；typeof运算符返回值如下：

①undefined：变量被声明后，但未被赋值.

②string：用单引号或双引号来声明的字符串。

③boolean：true或false。

④number：整数或浮点数。

⑤object：javascript中的对象、数组和null。

 

4. String对象

①属性：

字符串对象.length

var str="this is JavaScript";
var strLength=str.length;      //长度是18

②方法：

字符串对象.方法名();

split(str)：如果语法写成width.split(" ")【冒号中间有空格】此时：width height hello world会被拆分成：width,height,hello,world；如果语法写成width.split("")【冒号中间没有空格】此时：width height hello world会被拆分成：w,i,d,t,h, ,h,e,i,g,h,t, ,h,e,l,l,o, ,w,o,r,l,d

5. 数组：

①创建数组：

②为数组元素赋值：

方法一：

var fruit= new Array("apple", "orange", " peach","banana");

方法二：

var fruit = new Array(4);
fruit [0] = " apple ";
fruit [1] = " orange ";
fruit [2] = " peach ";
fruit [3] = " banana ";

 

③访问数组：

数组名[下标]

 

6. 数组的常用属性和方法：

7. 运算符号

8. 逻辑控制语句

①if条件语句

if(条件)

{  //JavaScript代码;  }

else

{  //JavaScript代码;  }

If·中0，null，” ”，undefined，NaN，false--------结果是false；其他的都是true！

②switch多分支语句

switch (表达式)

{  case 常量1 :

      JavaScript语句1;

  break;

   case 常量2 :

        JavaScript语句2;

  break;

default :

      JavaScript语句3;  }

③for、while循环语句

for(初始化;  条件;  增量)

 {  JavaScript代码;  }

while(条件)

 {  JavaScript代码;  }

④for-in

var fruit=[ "apple", "orange", "peach","banana"];

for(var i in fruit){

   document.write(fruit[i]+"<br/>");  }

i就是数组的下标，in这个数组要查询所有的数组下标

 

9. 循环中断

①break

<script type="text/javascript">

var i=0;

for(i=0;i<=5;i++){

if(i==3){  break;  }

  document.write("这个数字是："+i+"<br/>");  }

</script>

②continue

<script type="text/javascript">

var i=0;

for(i=0;i<=5;i++){

if(i==3){  continue;  }

  document.write("这个数字是："+i+"<br/>");  }

</script>

 

10. 注释

①单行注释以 // 开始，以行末结束：

//alert("恭喜你！注册会员成功");

//在页同上弹出注册会员成功的提示框

//注释

如果在页面里单行注释中回车打一些东西此时就会报错：Uncaught ReferenceError: XXXX is not defined

②多行注释以 /* 开始，以 */ 结束，符号 /*…… */ 指示中间的语句是该程序中的注释

/*   使用for循环运行“document.write("684271ed9684bde649abda8831d4d355Hello World39528cedfa926ea0c01e69ef5b2ea9b0");”5次

使用document.write在页面上输出“Hello World”   */

 

11. 常用的输入/输出

【输出一般使用alert；输入使用prompt；但是后期不建议使用alert，在真实的开发中一般使用console.Log( )】

①alert()【一般用在一些警告或者提示中】：

alert("提示信息");

②prompt()

prompt("提示信息", "输入框的默认信息");

prompt("请输入你喜欢的颜色","红色");

prompt("请输入你喜欢的颜色","");

 

12. 语法约定

①代码区分大小写

小写写成大写会报错：Uncaught SyntaxError: Unexpected identifier

②变量、对象和函数的名称

当声明变量、对象和函数的名称时大小写，数字，下划线，美元符号都可以，但是必须以字母，下划线，美元符号开头

否则会报错：Uncaught SyntaxError: Invalid or unexpected token

 

③分号

如果不写会报错：Uncaught SyntaxError: Invalid or unexpected token

 

程序调试：

Chrome开发人员工具：

  1. 停止断点调试
  2. 单步调试，不进入函数体内部
  3. 单步调试，进入函数体内部
  4. 跳出当前函数
  5. 禁用所有的断点，不做任何调试

alert()方法：

直接打印信息，直接在页面上看到具体信息

【但是一般使用console.Log( )，因为使用alert( )很容易忘掉删除，当使用alert( )进行弹出时，最后产品上线后，会降低用户体验，所以使用console.Log( )就会避免这个问题】

 

函数：

什么是函数？

函数的含义：类似于Java中的方法，是完成特定任务的代码语句块；使用更简单：不用定义属于某个类，直接使用；函数分类：系统函数和自定义函数

 

常用系统函数：

parseInt ("字符串")：将字符串转换为整型数字

如: parseInt ("86")将字符串“86“转换为整型值86

当为parseInt ("86a")时输出还是86

当为parseInt ("86a21")时输出还是86

当为parseInt ("a86a")时输出NaN

 

parseFloat("字符串")：将字符串转换为浮点型数字

如: parseFloat("34.45")将字符串“34.45“转换为浮点值34.45

isNaN( )：用于检查其参数是否是非数字

isNaN("111")会输出false

isNaN(true)会输出false

isNaN("true")会输出true

isNaN("aaa")会输出true

isNaN("111a")会输出true

自定义函数

1.定义函数

2.调用函数

函数调用一般和表单元素的事件一起使用，调用格式

事件名＝ "函数名( )" ;

一、调用无参函数

调用无参函数，输出5次“欢迎学习JavaScript”

示例：

function study( ){
        for(var i=0;i<5;i++){
            document.write("<h4>欢迎学习JavaScript</h4>");
        }
    }

单击此按钮时，调用函数study( )，执行函数体中的代码

<input name="btn" type="button"
   value="显示5次欢迎学习JavaScript"  onclick="study( )" />

二、调用有参函数

根据输入的次数，显示“欢迎学习JavaScript“

示例：

function study(count){
        for(var i=0;i<count;i++){
            document.write("<h4>欢迎学习JavaScript</h4>");
        }
    }

单击此按钮时，调用函数study (count )，执行函数体中的代码

<input name="btn" type="button" value="请输入显示欢迎学习JavaScript的次数"
  onclick="study(prompt(&#39;请输入显示欢迎学习JavaScript的次数:&#39;,&#39;&#39;))" />

变量的作用域:

  1. 全局变量
  2. 局部变量
<body onload="second( )">

    var i=20;    【这是一个全局变量】

    function first( ){

        var i=5;    【这是一个局部变量】

        for(var j=0;j<i;j++){

            document.write("    "+j);  }  }

    function second( ){

        var t=prompt("输入一个数","")

        if(t>i)     【此时t和全局变量i作比较】

            document.write(t);

        else

            document.write(i);

        first( );  }

事件

相关免费学习推荐：javascript（视频）

Das obige ist der detaillierte Inhalt vonJavaScript-Grundlagen verstehen (sehr detailliert). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：
Dieser Artikel ist reproduziert unter:csdn.net. Bei Verstößen wenden Sie sich bitte an admin@php.cn löschen
Vorheriger Artikel：Eine eingehende Analyse von Objektliteralen in JavaScriptNächster Artikel：Eine eingehende Analyse von Objektliteralen in JavaScript

In Verbindung stehende Artikel

Mehr sehen