cari

Rumah >hujung hadapan web >tutorial js >【javascript学习】js语法基础大全

【javascript学习】js语法基础大全

php是最好的语言
php是最好的语言asal
2018-08-08 16:42:554491semak imbas

本文系统的整理了javascript的语法，知识点很全，较基础，在学习的时候可以作为参考，复习也很系统，不用去翻看书籍了，书籍的知识点很散乱，翻看完很浪费时间，如果不嫌弃可以收藏下来以防备忘，能对大家有帮助就是我继续写文章的动力，我也很乐意同大家分享我的知识。

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 内部引用 5cd6e472395e766622bc5d31b556eb7a

1-3 外部引用 f79278f13a3f6fb16017953210ffd5452cacc6d41bbb37262a98f745aa00fbf0

1-4 一般放在网页的head或者body部分：

放在93f0f5c25f18dab9d176bd4f6de5d30e部分

最常用的方式是在页面中head部分放置3f1c4e4b6b16bbbd69b2ee476dc4f83a元素，浏览器解析head部分就会执行这个代码，然后才解析页面的其余部分。

放在6c04bd5ca3fcae76e30b72ad730ca86d部分

JavaScript代码在网页读取到该语句的时候就会执行。果是通过事件调用执行的function那么对位置没什么要求的。

1-5 JavaScript语句是发给浏览器的命令。

1-6 注释 // or /* */

1-7 var 变量名 区分大小写

1-8 if语句

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

1-9 函数

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

调用： add2()

1-10 字符串方法+

2-2 alert

  1. 在点击对话框"确定"按钮前，不能进行任何其它操作。

  2. 消息对话框通常可以用于调试程序。

  3. alert输出内容，可以是字符串或变量，与document.write 相似。

2-3 confirm

confirm 消息对话框通常用于允许用户做选择的动作，如：“你对吗？”等。弹出对话框(包括一个确定按钮和一个取消按钮)。

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

2-4 promte

弹出消息对话框，通常用于询问一些需要与用户交互的信息。弹出消息对话框（包含一个确定按钮、取消按钮与一个文本输入框）。

prompt(str1, str2);

参数：

  • str1: 要显示在消息对话框中的文本，不可修改

  • str2：文本框中的内容，可以修改

对话框中点击确定按钮，文本框中的内容将作为函数返回值；对话框中点击取消按钮，将返回null

2-5 打开新窗口

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

参数：

URL：可选参数，在窗口中要显示网页的网址或路径。如果省略这个参数，或者它的值是空字符串，那么窗口就不显示任何文档。

窗口名称：可选参数，被打开窗口的名称。

  1.     该名称由字母、数字和下划线字符组成。

  2.  "_top"、"_blank"、"_self"具有特殊意义的名称。

           _blank：在新窗口显示目标网页

           _self：在当前窗口显示目标网页

           _top：框架网页中在上部窗口中显示目标网页

  3.   相同 name 的窗口只能创建一个，要想创建多个窗口则 name 不能相同。

  4.  name 不能包含有空格。

参数字符串：可选参数，设置窗口参数，各参数用逗号隔开。

1.png

<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节点:

  1. 元素节点：上图中100db36a723c770d327fc0aef2ce13b1、6c04bd5ca3fcae76e30b72ad730ca86d、e388a4556c0f65e1904146cc1a846bee等都是元素节点，即标签。

  2. 文本节点:向用户展示的内容，如25edfb22a4f469ecb59f1190150159c6...bed06894275b65c1ab86501b08a632eb中的JavaScript、DOM、CSS等文本。

  3. 属性节点:元素属性，如3499910bf9dac5ae3c52d5ede7383485标签的链接属性href="http://www.imooc.com"

3-2 通过ID获取元素

1.png

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

1.png

3-5 显示和隐藏

Object.style.display = value

1.png

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 数组

1.png

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基础语法学习笔记

Atas ialah kandungan terperinci 【javascript学习】js语法基础大全. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

JavaScript css html Object NULL if 字符串 class Length var JS undefined function 对象 事件 dom href innerHTML alert li http
Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：js常用对象有哪些？详解js对象的属性及方法Artikel seterusnya：js运算符优先级的比较及js逻辑运算符的解析

Artikel berkaitan

Lihat lagi