Javascript教程

640 (1)
⚠阅前必读：图片如果模糊的话请点开查看
1、Javascript教程
JavaScript 是 web 开发者必学的三种语言之一：
  • HTML 定义网页的内容
  • CSS 规定网页的布局
  • JS 对网页行为进行编程

JavaScript 在 1995 年由 Brendan Eich 发明，并于 1997 年成为一部 ECMA 标准。

ECMA-262 是其官方名称。ECMAScript 6 （发布于 2015 年）是最新的 Javascript版本。

2、Javascript简介
什么是javascript?

JavaScript是internet上最流行的脚本语言

JavaScript能够让网页动起来，使网页中的HTML, CSS变得有思想，有灵魂

现在微信小程序的实现就是基于JavaScript来开发的

在互联网下岗位要求的变化，要求所有开发人员都要具备用户思维，考虑用户交互体验，而这些

都是基于JS语言来实现的;同时JS也是一门基于面向对象的高级语言，能够进一步强化编程思维，

所以作为世界上流行度最高的语言之一，同时作为让微软三次让步给予支持的一门语言JavaScript

的重要性不言而喻

3、Javascript使用
JavaScript在网页何处编写？

    第1种:在·<head></head>标签内部编写一段JS程序

    第2种:在<body></body>标签内部编写一段JS程序

    第3种：从外部文件引入JS程序

    在 HTML 中，JavaScript 代码必须位于 <script> 与 </script> 标签之间

1 <script>
2     alert("HelloWorld!")
3 </script>
4、Javascript输出

JavaScript 不提供任何内建的打印或显示函数

使用 window.alert() 弹出警告框

使用 document.write() 在浏览器上显示

使用innerHTML 写入 HTML 元素

使用 console.log() 在控制台输出

注意：如果在文档已完成加载后执行 document.write()，整个 HTML 页面将被覆盖

5、Javascript语句

JavaScript 语句由以下构成：值、运算符、表达式、关键词和注释

JavaScript 语句向浏览器发出的命令，语句的作用是告诉浏览器该做什么

下面的 JavaScript 语句就是向 id="item" 的 HTML 元素输出文本 "Hello World"

document.getElementById("item").innerHTML="Hello World";
分号:

分号用于分隔 JavaScript 语句

通常我们在每条可执行的语句结尾添加分号

使用分号的另一用处是在一行中编写多条语句，也可能看到不带有分号的案例

在 JavaScript 中，用分号来结束语句是可选的

空格 :

JavaScript 会忽略多余的空格。您可以向脚本添加空格，来提高其可读性。

下面的两行代码是等效的：

1 var color = "red";
2 var color = "  red";

在运算符旁边添加空格是个好习惯：如：（ = + - * / ）

var sum = x + y ;


JavaScript命名规范（对大小写特别敏感） 


大驼峰式命名法:首字母大写 StudentInfo、 UserInfo、 ProductInfo（构造函数）


小驼峰式命名法: 首字母小写 studentInfo、 userInfo、 productInfo（变量、函数）


常量命名采用全部大写的方法


三种将多个单词连为一个变量名的方法：连字符、下划线、驼峰式大小写(Camel Case)


类的成员命名：


①公共属性和方法:跟变量和函数的命名一样 


②私有属性和方法:前缀为_ (下划线) ,后面跟公共属性和方法一样的命名方式


QQ图片20200403182713


JavaScript 关键词


Javascript语句通常通过某个关键词来标识需要执行的Javascript动作


下面的表格列出了一部分将在教程中学到的关键词：


image


JavaScript 注释:


单行注释：以//开头


多行注释：以/*开始，以 */结尾


注释的作用：


    

  • 

    可以添加注释来对 JavaScript 进行解释，提高代码的可读性
    

    • 

  • 

    用于阻止其中一条代码行的执行（可用于调试）
    

    • 

  • 

    用于阻止代码块的执行（可用于调试）
    

    • 



6、Javascript数据类型


基本类型：String、Number、Boolean、Null、Undefined（另外，在ES6中新增了一种基本数据类型：symbol）



复杂的数据类型（也称引用数据类型）：Object、Function、Array


typeof 操作符 


        鉴于ECMAScript是松散类型的，因此需要有一种手段来检测给定变量的数据类型一typeof 就是负责提供这方面信息的操作符。对一个值使用typeof操作符可能返回下列某个字符串: 


        "undefined"——如果这个值未定义; 


        "boolean"—— 如果这个值是布尔值; 


        "string"——如果这 个值是字符串;


        "number "—— 如果这个值是数值; 


        "object"—— 如果这个值是对象或null;


        "function"—— 如果这个值是函数


    

  • 

    Undefined类型
    

    • 



Undefined中文翻译过来可以理解为“未定义”，在使用var操作符定义一个变量但是未给该变量赋值,也就是没有初始化,此时该变量的值就是undefined.它的类型只有一个值，那就是undefined,例如：




1 var message;
2 alert(message == undefined);  // true




不过，包含undefined值的变量与尚未定义的变量还是不一样的。看看下面这个例子:




1 var message; //这个变量声明之后默认取得了undefined值
2 //下面变量并没有声明
3 //var age;
4 alert(message); //"undefined"
5 alert(age);   //产生错误




运行以上代码，第一个警告框会显示变量message的值，即"undef ined"。而第二个警告框一由于传递给alert ()函数的是尚未声明的变量age——则会导致一个错误。 对于尚未声明过的变量,只能执行一项操作， 即使用typeof操作符检测其数据类型(对未经声明的变量调用delete不会导致错误，但这样做没什么实际意义，而且在严格模式下确实会导致错误)


    

  • 

    Null类型
    

    • 



Null类型与Undefined类型一样，也是只有一个值，那就是null。从逻辑角度来看, null 值表示一个空对象指针，而这也正是使用typeof操作符检测null值时会返回"object"的原因，如下面的例子所示:




1 var maps = null;
2 alert(typeof maps); //"object"




    

  • 

    Boolean类型
    

    • 



Boolean类型只有两个值,分别是true和false,注意在javascript中是严格区分大小写的，写法不能改变，如果写成TRUE或者True都不再表示布尔类型


    

  • 

    Number类型
    

    • 



Number 类型来表示整数和浮点数,其中字面量格式有三种,分别是十进制整数、八进制整数以及十六进制整数


    

  • 如果某次计算的值超过了javascript 数值范围，如果是正数，那么将表示为Infinity；例一个数除以0,如果是负数，那么表示为-Infinity。例：
    • 





1 var a = -10;
2 var b = 0;
3 console.log(a / b);   //在控制台输出内容为-infinity






    

  • 如果出现了Infinity 就不能再进行下一次计算
    • 

  • 如果要确定一个数值是否处于javascript 的数值范围期间,可以使用isFinite()函数。在数值范围区间内，返回true,否则返回false
    • 



在javascript中有一个特殊的数值NaN,表示一个本来要返回数值的操作数未返回数值的情况，在ECMAScript中，任何数值除以非数值都会返回NaN, ECMAScript 中使用isNaN()函数确定传入的任何类型的参数是否“不是数值”，如果不是数值，则返回true；如果是数值，则返回false


Javascript中使用三个函数可以将非数值转换数值，三个函数分别是:




Number()
parselnt()
parseFloat()




例：




1 var c = "11.111";    //定义的是一个字符串
2 console.log("非数值类型转换成数值类型：" + Number(c));          //转换成功，显示11.111
3 console.log("非数值类型转换成数值类型：" + parseInt(c));      //转换成功，显示11
4 console.log("非数值类型转换成数值类型：" + parseFloat(c));    //转换成功，显示11.111




    

  • 

    String类型
    

    • 



String类型由零或者多个16位Unicode字符组成，是一个字符序列,即字符串


String类型的变量在赋值时候，需要用双引号


字符串的长度可以通过length 属性取得，注意是length属性,而不是length()方法，两者不能混淆


String数据类型中包含一些特殊字符字面量，也称之为转义序列。


例：




1 var a = "ilikeyoumom";
2 console.log("a的长度为："+a.length)；//结果为11




 特殊字面量


image


    

  • 

    object类型
    

    • 



ECMAScript中的对象其实就是一组数据和功能的集合。对象可以通过执行new操作符后跟要创建的对象类型的名称来创建。而创建object类型的实例并为其添加属性和(或)方法，就可以创建自定义对象。


    

  • 

    函数
    

    • 



函数是由事件驱动的或者当它被调用时执行的可重复使用的代码块


关键词为 function，当调用改函数时，会执行里面的代码




1 function functioname(参数)
2 {
3 这里是要执行的代码
4 }




1、调用带参数的函数


在调用函数时，您可以向其传递值，这些值被称为参数。


这些参数可以在函数中使用。


您可以发送任意多的参数，由逗号 (,) 分隔：




myFunction(_argument1_,_argument2_)




当您声明函数时，请把参数作为变量来声明：




1 function myFunction(`var1`,`var2`)
2 {
3 这里是要执行的代码
4 }




变量和参数必须以一致的顺序出现




1 <button onclick="myFunc('Kitty','cat')">点击这里</button>
2 <script>
3 function myFunc(name,type)is
4 {
5 alert("This is " + `name` + ", a" + `type`);
6 }
7 </script>




2、带有返回值的函数


有时，我们会希望函数将值返回调用它的地方。


通过使用 return 语句就可以实现。


在使用 return 语句时，函数会停止执行，并返回指定的值。


语法




1 function myFunction()
2 {
3 var x = 7;
4 var y = 8;
5 return x * y;
6 }




上面的函数会返回值 56。


即使不把它保存为变量，您也可以使用返回值：




document.getElementById("demo").innerHTML=myFunction();




"demo" 元素的 innerHTML 将成为 56，也就是函数 "myFunction()" 所返回的值。


您可以使返回值基于传递到函数中的参数：


局部 JavaScript 变量


在 JavaScript 函数内部声明的变量（使用 var）是局部变量，所以只能在函数内部访问它


全局 JavaScript 变量


在函数外声明的变量是全局变量，网页上的所有脚本和函数都能访问它


    

  • 

    数组
    

    JavaScript 数组用于在单一变量中存储多个值
    

    • 





1 var array = new Array(); //创建一个数组
2 array.push(100); //添加第一个元素
3 array.push(99); //添加第二个元素
4 console.log(array[0] + "" + array[1]); // 返回10099




后面会详细讲解数组的功能和应用


今天先发在这，明天继续补充。



640





        

	      

	    

	  

	  

	    
      
        【推广】
        免费学中医，健康全家人
      
	  

    

    

          原文地址：https://www.cnblogs.com/qimuz/p/12628817.html