Javascript学习 --------- ECMAScript语法

Posted 2021-11-10 在森林中麋了鹿

目录

• 一、JS代码嵌入的三种方式
• 二、变量
• 三、函数
• 四、数据类型
• 五、 JS中的类
• 六、JS中的事件
• 七、JS中的控制语句
• 八、数组

---

ECMAScript语法即为Javacript核心语法，通过对ECMAScript语法的学习，可以初步使用javascript进行编程。

一、JS代码嵌入的三种方式

1.方法一 ： 内联样式

JS代码嵌套在html标签内部

<input type = "button" value = "hello" onclick = "window.alert('hello, js')"/>

// JS中的字符串可以使用双引号，也可以使用单引号.
// JS中的一条语句结束之后可以使用分号“;”，也可以不用.
// S是一门事件驱动型的编程语言，依靠事件去驱动，然后执行对应的程序。在JS中有很多事件，其中有一个事件叫做：鼠标单击，单词：click。并且任何事件都会对应一个事件句柄叫做：onclick。【注意：事件和事件句柄的区别是：事件句柄是在事件单词前添加一个on。】，而事件句柄是以HTML标签的属性存在的。

2.方法二 ： 内部样式

用代码块将JS代码包裹起来

<script type = "type/javascript">
      window.alert("hello, js") 
</script>

3. 方法三：外联样式
   将JS代码放于外部一个单独的.js脚本文件中，通过

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

//引入外部独立的js文件的时候，js文件中的代码会遵循自上而下的顺序依次逐行执行。
//如若引入js文件之后，还有其他<script>代码块，其他的JS代码块不会执行，只会执行从外部引入的那一部分

二、变量

1.变量概述

(1) 变量未赋值，系统默认赋值undefined
(2) JS是一种弱类型编程语言，一个变量可以接收任何类型的数据
(3) 一行上也可以声明多个变量

2.变量声明与赋值

var 变量名 = 值;

3.局部变量与全局变量

(1）局部变量：函数的形参是局部变量，另外使用var关键字在函数体中声明的变量是局部变量，函数执行结束之后，局部变量的内存就释放了。
(2）全局变量：在函数体外声明的变量属于全局变量，另外不使用var关键字声明的变量无论位置在哪，它都是全局变量，全局变量在浏览器关闭时销毁。

三、函数

1.定义：

等同于java语言中的方法，函数也是一段可以被重复利用的代码片段。函数一般都是可以完成某个特定功能的。

2.语法格式

第一种格式：
     function 函数名(形参列表) {
           函数体;
     }

第二种方式：
     函数名 = function(形式参数列表) {
           函数体;
     }
//把函数的声明当做类进行定义这种方式较多

3. 注意：

1.函数必须调用才能执行的.
2.JS中没有函数重载机制, 如后面出现相同的函数名，后面的函数会覆盖前面的函数
3.JS当中的函数在调用的时候，参数的类型没有限制，并且参数的个数也没有限制，如sum(a, b)函数有两个形参，若是调用是只传一个参数，这个参数会自动赋值给第一个形参，第二个形参系统默认赋值undefined

4. 如何调用?

<script> 
     sayHello = function(username) {
         alert("hello" + username);
     }
</script>

<input type="button" value="hello" onclick="sayHello('jack');"/>

四、数据类型

1.分类

JS中数据类型分为两种： 基本类型与引用类型

基本类型： Undefined、Number、String、Boolean、Null

引用类型：Object以及Object的子类

2.typeof运算符

typeof运算符可以在程序的运行阶段动态的获取变量的数据类型

返回值：以下六种字符串
   "undefined"
   "number"
   "string"
   "boolean"
   "object"
   "function"

3.undefined类型

Undefined类型只有一个值，这个值就是 undefined
当一个变量没有手动赋值，系统默认赋值undefined
或者也可以给一个变量手动赋值undefined。

var i; // undefined
var k = undefined;

4.Number类型

包括哪些值?

-1、0、1、2、2.3、3.14、100 … NaN、Infinity
整数、小数、正数、负数、不是数字、无穷大都属于Number类型。

isNaN()函数

结果是true表示不是一个数字，结果是false表示是一个数字。
NaN 表示Not a Number，不是一个数字，但属于Number类型

isNaN(100 / "abc"); // true

parseInt()函数

可以将字符串自动转换成数字,并且取整数位.

parseInt("3.99999"); //3
parseInt(3.99999); //3

parseFloat()函数

可以将字符串自动转换成数字.

parseFloat("3.14" + 1); // 4.14
parseFloat("3.2" + 1); // 4.2

Math.ceil()函数

向上取整

Math.ceil("2.1");// 3

5.Boolean类型

在JS中布尔类型只有两个值：true 、 false

关于Boolean()函数：将非布尔类型转换成布尔类型

规则为：Boolean()传入0、""(空串)、null、NaN、undefined转换后为false，其他都为true

6.String类型

声明：

var s = 'abcd';
var s1 = "abcde"; // 在JS当中字符串可以使用单引号，也可以使用双引号

创建字符串对象：

第一种：
var s = "abc";

第二种：
var s1 = new String("abc");
//String是一个内置的类，可以直接用，String的父类是Object.

---

String类型常用的属性与函数

属性：
    length 获取字符串长度
    
常用函数：
    indexof("字符串") //获取指定字符串在当前字符串中第一次出现处的索引
    lastIndexOf("字符串") //获取指定字符串在当前字符串中最后一次出现处的索引
    replace("原字符", "替换字符") //替换，调用一次替换一次
    substr(开始下标, 截取字符串的长度) // 截取字符串
    substring(开始下标, 结束下标) // 不包含结束下标那个字符 

7.Object类型

①Object类型是所有类型的超类，自定义的任何类型，默认继承Object。

②Object类包括哪些属性？
prototype属性（常用的，主要是这个）：作用是给类动态的扩展属性和函数。
constructor属性

③bject类包括哪些函数？

toString()
valueOf()
toLocaleString()

④在JS当中定义的类默认继承Object，会继承Object类中所有的属性以及函数。自己定义的类中也有prototype属性。

8.null、NaN、 undefined这三个值有什么区别?

数据类型不同

typeof null; // "object"
typeof NaN; // "number"
typeof undefined; // "undefined"

null 和 undefined 可以等同

null == undefined); // true
null == NaN; // false
undefined == NaN; // false

在JS当中有两个比较特殊的运算符
== 为 等同运算符：只判断值是否相等
=== 为 全等运算符：既判断值是否相等，又判断数据类型是否相等

五、 JS中的类

1.JS中如何定义类

第一种方式：
    function 类名(形参) {}
 
第二种方式：
    类名 = function(形参) {}

JS中的类与函数定义相同

2.创建对象语法

new 类名(实参)

3.构造函数

function User(no, name, age) {
    this.sno = no;
    this.sname = name;
    this.sage = age;
}
// JS中的类的定义,同时又是一个构造函数的定义
// 在JS中类的定义和构造函数的定义是放在一起来完成的.

4.访问对象属性

var u = new User(111, "jack", 17);
u["sno"] = "222";

5.给类动态拓展属性及函数

User.prototype.getName = function() {
     return this.sname;
}
User.prototype.loc = "Peking";

六、JS中的事件

blur 失去焦点
focus 获得焦点

click 鼠标点击
dblclick 鼠标双击

keydown 键盘按下
keyup 键盘弹起

mousedown 鼠标按下
mouseover 鼠标经过
mousemove 鼠标移动
mouseout 鼠标离开
mouseup 鼠标弹起

reset 表单重置
submit 表单提交

change 下拉列表选中项改变, 文本框中内容改变
select 文本被选定

load 页面加载完毕,其中的代码整个HTML页面中所有的元素全部加载完毕之后发生

任何一个事件都会对应一个事件句柄，事件句柄是在事件前添加on。on+事件名，这个事件句柄出现在一个标签的属性位置上。即事件句柄以属性的形式存在。

回调函数

自己把这个函数代码写出来了,但是这个函数不是自己负责调用,由其他程序负责调用该函数, 这就叫回调函数.

注册事件

第一种方式： 直接在标签中使用事件句柄
<script> 
       function sayHello() {
           alert("hello, js");
       }
</script>     
<input type = "button" value = "hello" onclick = "sayHello()"/>
//将sayHello函数注册到按钮上，等待click事件发生之后，该函数被浏览器调用。我们称这个函数为回调函数

第二种注册方式： DOM编程
<script> 
    var btnObj = document.getElementById("mybtn");
    btnObj.onclick = sayHello;
</script>

window.onload

window.onload = function() {
     函数体;
}//此函数中的代码在整个页面加载完后执行

设置节点属性

<script> 
     window.onload = function() {
          document.getElementById("btn").onclick = function() {
              btn.type = "checkbox";
          }
     }
</script>
<input type = "btn" value = "修改为复选框" id = "btn"/>

捕捉事件

<script>
      window.onload = function() {
          var btn = document.getElementById("btn");
          btn.onkeydown = function(event) {
               if(event.keyCode == 13) {// 回车键的键值为13
                   alert("正在进行验证")
               }
          }
      }   
</script>
<input type = "button" id = "btn"/>

上述代码中onkeydown是keydown的事件句柄， 且有一个funciton注册于该事件上。当keydown事件发生时，会自动给此函数传一个事件对象，我们在function写个形参event来接收该事件对象

void运算符

语法：
    void(表达式)
运算原理： 
    执行表达式，但不返回任何结果。

在<a>的href中写入javascript:void(0), 点击超链接时不会发生跳转

七、JS中的控制语句

分支语句：
1、if
2、switch
				
循环语句：
3、while
4、do .. while..
5、for循环
				
跳转语句：
6、break
7、continue

其他：				
8、for..in语句
   即为for的层次遍历
9、with语句
   with语句可以方便地用来引用某个特定对象中已有的属性，但是不能用来给对象添加属性。要给对象创建新的属性，必须明确地引用该对象。
   with(objInstance) 
   { 
       var str = 属性1; 
       ..... 
   } 去除了多次写对象名的麻烦。 

八、数组

与Java中的数组大致相同

定义:
var  arr = [false,true,1,2,"abc",3.14];

遍历数组:
for (var i = 0; i < arr.length; i ++ ) {
   //操作
}