JS系列之——基本语法

1. HTML中嵌入JS代码的三种方式

1、JS是一门事件驱动型的编程语言,依靠事件去驱动,然后执行对应的程序。
在JS中有很多事件,其中有一个事件叫做:鼠标单击,单词:click。并且任何
事件都会对应一个事件句柄叫做:onclick。
注意:事件和事件句柄的区别是:事件句柄是在事件单词前添加一个on,而事件句柄是以HTML标签的属性存在的。
2、οnclick="js代码"的执行原理:
页面打开的时候,js代码并不会执行,只是把这段JS代码注册到按钮的click事件上了。
等这个按钮发生click事件之后,注册在onclick后面的js代码会被浏览器自动调用。
3、怎么使用JS代码弹出消息框?
在JS中有一个内置的对象叫做window,全部小写,可以直接拿来使用,window代表的是浏览器对象。window对象有一个函数叫做:alert,用法是:window.alert(“消息”);这样就可以弹窗了。
4、JS中的字符串可以使用双引号,也可以使用单引号。
5、JS中的一条语句结束之后可以使用分号“;”,也可以不用。

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>HTML中嵌入JS代码的第一种方式</title>
    </head>>
    <body>
     <!-- window. 可以省略。-->
     <input type="button" value="hello" onclick="window.alert('hello js')"/>
     <input type="button" value="登录" onclick="alert('Hello World !')
                                                alert('Hello zhangsan')
                                                alert('Hello lisi')"/>
    </body>
</html>
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>HTML中嵌入JavaScript代码的第二种方式</title>
    </head>
    <body>
        <!--
        第二种方式:脚本块的方式  位置可以随意放置
        -->
        <script type="text/javascript">
         /*
        暴露在脚本块当中的程序,在页面打开的时候执行,
        并且遵守自上而下的顺序依次逐行执行。(这个代
        码的执行不需要事件)
        */
            alert("hello tom");// alert函数会阻塞整个HTML页面的加载
            // JS代码的注释,这是单行注释。
         /*
            JS代码的多行注释。和java一样。
         */
        </script>
    </body>
</html>
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>HTML中嵌入JavaScript代码的第三种方式</title>
    </head>
    <!--在需要的位置引入js脚本文件-->
    <!--引入外部独立的js文件的时候,js文件中的代码会遵循自上而下的顺序依次逐行执行。-->
    <script type="text/javascript" src="1.js"></script>
    <!--同一个js文件可以被引入多次。但实际开发中这种需求很少。-->
    <script type="text/javascript" src="1.js"></script>

    <!--这种方式不行-->
    <script type="text/javascript" src="1.js">
        alert("啦啦啦啦啦");
    </script>
    <!--这种方式不行
    <script type="text/javascript" src="1.js"/>
    -->
    <!--这种方式行-->
    <script type="text/javascript" >
        alert("啦啦啦啦啦");
    </script>
    <body>        
    </body>
</html>

2. JS的变量

javascript是一种弱类型语言,没有编译阶段,一个变量可以随意赋值,赋什么类型的值都行。
var 变量名;

<!DOCTYPE html>
<html>
    <head>
    	<title>JS的变量</title>
    </head>
    <body>
    	<script type="text/javascript">
    	    // 在JS当中,当一个变量没有手动赋值的时候,系统默认赋值undefined
	    var i;
	    // undefined 在JS中是一个具体存在值.
	    alert("i = " + i); // i = undefined
	    alert(undefined);//undefined
	    var k = undefined;
	    alert("k = " + k);//undefined
    	</script>
    </body>
</html>

3. JS的函数

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

  • 第一种方式:
    function 函数名(形式参数列表){
    函数体;
    }
  • 第二种方式:
    函数名 = function(形式参数列表){
    函数体;
    }
    JS中的函数不需要指定返回值类型,返回什么类型都行。
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>JS函数初步</title>
    </head>
    <body>
        <script type="text/javascript">
      
            function sum(a, b){
            // a和b都是局部变量,他们都是形参(a和b都是变量名,变量名随意。)
            alert("a+b=" + (a + b));
            }
         // 函数必须调用才能执行的.
         sum(10, 20);
         
         // 定义函数sayHello
         sayHello = function(username){
            alert("hello " + username);
         }
         // 调用函数
         sayHello("zhangsan");
      </script>
        <input type="button" value="hello" onclick="sayHello('jack');" />
        <input type="button" value="计算10和20的求和" onclick="sum(10, 20);" />
    </body>
</html>
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>JS函数初步二</title>
    </head>
    <body>
        <script type="text/javascript">
              function sum(a,b){
               return a+b;
            }
            alert(sum(10,20));
            var retValue = sum("jack");//jack赋值给a变量,b变量没有赋值系统默认赋值undefined
            alert(retValue);  //jackundefined
            alert(sum(1));//NAN (NaN是一个具体存在的值,该值表示不是数字。Not a Number)
            alert(sum());//NAN
            alert(sum(1,2,3));//3
           /*
         在JS当中,函数的名字不能重名,当函数重名的时候,后声明的函数会将之前声明的同名函数覆盖。
         */
        </script>
    </body>
</html>

4. JS的局部变量和全局变量

全局变量:
在函数体之外声明的变量属于全局变量,全局变量的生命周期是:
浏览器打开时声明,浏览器关闭时销毁,尽量少用。因为全局变量会一直在浏览器的内存当中,耗费内存空间。
能使用局部变量尽量使用局部变量
局部变量:
在函数体当中声明的变量,包括一个函数的形参都属于局部变量,
局部变量的生命周期是:函数开始执行时局部变量的内存空间开辟,函数执行结束之后,局部变量的内存空间释放。
局部变量生命周期较短。

// 全局变量
var i = 100;
function accessI(){
 // 访问的是全局变量
 alert("i = " + i);
}
accessI();
var username = "jack";
function accessUsername(){
 // 局部变量
 var username = "lisi";
 // 就近原则:访问局部变量
 alert("username = " + username);
}
accessUsername();
function myfun(){
 // 当一个变量声明的时候没有使用var关键字,那么不管这个变量是在哪里声明的,都是全局变量.
 myname = "dujubin";
}
// 访问函数
myfun();
alert("myname = " + myname);

5. JS中的数据类型

1、虽然JS中的变量在声明的时候不需要指定数据类型,但是在赋值,每一个数据还是有类型的, JS中数据类型有:原始类型、引用类型。
原始类型:Undefined、Number、String、Boolean、Null
引用类型:Object以及Object的子类
2、ES规范(ECMAScript规范),在ES6之后,又基于以上的6种类型之外添加了一种新的类型:Symbol
3、JS中有一个运算符叫做typeof,这个运算符可以在程序的运行阶段动态的获取变量的数据类型。
typeof运算符的运算结果是以下6个字符串之一:注意字符串都是全部小写。
“undefined”
“number”
“string”
“boolean”
“object”
“function”
4、在JS当中比较字符串是否相等使用“==”完成。没有equals。

      function sum(a,b){
          if(typeof a == "number" && typeof b == "number"){
              return a + b;
          }
          alert(a + "," + b + "必须为数字")
      }
      var t = sum("jack",20)
      alert(t);//"undefined"
      var a;
      alert(typeof a);//"undefined"
      var b = 10;
      alert(typeof b);//"number"
      var c = false;
      alert(typeof c);//"boolean"
      var d = "Jack";
      alert(typeof d);//"string"
      var e = null;
      alert(typeof e);//"object"
      var f = new Object();
      alert(typeof f);//"object"
      function sayHello(){}
      alert(typeof sayHello); // "function"

5.1 Undefined类型

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

var i; // undefined
var k = undefined; // undefined
alert(i == k); // true

var y = "undefined"; // "undefined"
alert(y == k); // false

5.2 Number类型

1、Number类型包括哪些值?
-1 0 1 2 2.3 3.14 100 … NaN Infinity
整数、小数、正数、负数、不是数字、无穷大都属于Number类型。
以下都是Number类型

var v1 = 1;
var v2 = 3.14;
var v3 = -100;
var v4 = NaN;
var v5 = Infinity;

NaN*
表示Not a Number,不是一个数字,但属于Number类型。
运算结果本来应该是一个数字,最后算完不是一个数字的时候,结果是NaN
Infinity
当除数为0的时候,结果为无穷大
alert(10 / 0);

2、isNaN() :
结果是true表示不是一个数字,结果是false表示是一个数字。

function sum(a, b){
 if(isNaN(a) || isNaN(b)){
  alert("参与运算的必须是数字!");
  return;
 }
 return a + b;
}
sum(100, "abc");//"参与运算的必须是数字!"
alert(sum(100, 200));//300

3、parseInt()函数
可以将字符串自动转换成数字,并且取整数位.
alert(parseInt(“3.9999”)); // 3
alert(parseInt(3.9999)); // 3
4、parseFloat()函数
可以将字符串自动转换成数字.
alert(parseFloat(“3.14”) + 1); // 4.14
alert(parseFloat(“3.2”) + 1); // 4.2
5、Math.ceil() 函数
Math是数学类,数学类当中有一个函数叫做ceil(),作用是向上取整。
alert(Math.ceil(“2.1”)); // 3

5.3 Boolean类型

JS中的布尔类型永远都只有两个值:true和false
在Boolean类型中有一个函数叫做:Boolean() ,将非布尔类型转换成布尔类型。

自动调用boolean()函数将username转换为boolean类型,因此一般不写boolean()函数

 if(username){
  alert("欢迎你" + username);
 }else{
  alert("用户名不能为空!");
 }

规律:“有"就转换成true,"没有"就转换成false.

alert(Boolean(1)); // true
alert(Boolean(0)); // false
alert(Boolean("")); // false
alert(Boolean("abc")); // true
alert(Boolean(null)); // false
alert(Boolean(NaN)); // false
alert(Boolean(undefined)); // false
alert(Boolean(Infinity)); // true

死循环:自动转为true

while(10 / 3){
 alert("hehe");
}

Null类型只有一个值,null
null值表示一个空对象指针,而这也正是typeof 检测null值时会返回object的原因

alert(typeof null); // "object"

5.4 String类型

1、在JS当中字符串可以使用单引号,也可以使用双引号。
var s1 = ‘abcdef’;
var s2 = “test”;
2、在JS当中,怎么创建字符串对象呢?

  第一种:var s = "abc";
  第二种(使用JS内置的支持类String): var s2 = new String("abc");

需要注意的是:String是一个内置的类,可以直接用,String的父类是Object。
3、无论小string还是大String,他们的属性和函数都是通用的。
4、关于String类型的常用属性和函数
常用属性:length 获取字符串长度
常用函数:

  indexOf           获取指定字符串在当前字符串中第一次出现处的索引
  lastIndexOf       获取指定字符串在当前字符串中最后一次出现处的索引
  replace           替换
  substr            截取子字符串
  substring         截取子字符串
  toLowerCase       转换小写
  toUpperCase       转换大写
  split             拆分字符串
// 小string(属于原始类型String)
var x = "king";
alert(typeof x); // "string"

// 大String(属于Object类型)
var y = new String("abc");
alert(typeof y); // "object"

// 获取字符串的长度
alert(x.length); // 4
alert(y.length); // 3

alert("http://www.baidu.com".indexOf("http")); // 0
alert("http://www.baidu.com".indexOf("https")); // -1

// 判断一个字符串中是否包含某个子字符串?
alert("http://www.baidu.com".indexOf("https") >= 0 ? "包含" : "不包含"); // 不包含

// replace (注意:只替换了第一个)
alert("name=value%name=value%name=value".replace("%","&")); // name=value&name=value%name=value

// 继续调用replace方法,就会替换第“二”个.
// 想全部替换需要使用正则表达式.
alert("name=value%name=value%name=value".replace("%","&").replace("%", "&")); // name=value&name=value&name=value

// 考点:经常问 substr和substring的区别?
// substr(startIndex, length)
alert("abcdefxyz".substr(2,4)); //cdef
// substring(startIndex, endIndex) 注意:不包含endIndex
alert("abcdefxyz".substring(2,4)); //cd

5.5 Object类型

1、Object类型是所有类型的超类,自定义的任何类型,默认继承Object。
2、Object类包括哪些属性?

  • prototype属性(常用的,主要是这个):作用是给类动态的扩展属性和函数。
  • constructor属性

3、Object类包括哪些函数?

  • toString()
  • valueOf()
  • toLocaleString()

4、在JS当中定义的类默认继承Object,会继承Object类中所有的属性以及函数。
换句话说,自己定义的类中也有prototype属性。

5、在JS当中怎么定义类?怎么new对象?
定义类的语法:
第一种方式:
function 类名(形参){

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

}
创建对象的语法:
new 构造方法名(实参); // 构造方法名和类名一致。

function sayHello(){
}

把sayHello当作一个普通的函数来调用
sayHello();
把sayHello当作一个类来创建对象
var obj = new sayHello();//obj是一个引用,保存内存地址指向堆中的对象

//定义一个学生类
function Student(){
    alert("Student...");
}

//当做普通函数调用
Student();//Student...

//当做类来创建对象
var stu = new Student();//Student...
alert(stu);//object Object

JS中的类的定义,同时又是一个构造函数的定义。在JS中类的定义和构造函数的定义是放在一起来完成的。

function User(a, b, c){ // a b c是形参,属于局部变量.
// 声明属性 (this表示当前对象)
// User类中有三个属性:sno/sname/sage
this.sno = a;
this.sname = b;
this.sage = c;
}

创建对象

var u1 = new User(111, "zhangsan", 30);

访问对象的属性

alert(u1.sno);
alert(u1.sname);
alert(u1.sage);

访问一个对象的属性,还可以使用这种语法

alert(u2["sno"]);
alert(u2["sname"]);
alert(u2["sage"]);

定义类的另一种语法

Product = function(pno,pname,price){
            //属性
            this.pno = pno;
            this.pname = pname;
            this.price = price;
            //函数
            this.getPrice = function(){
                    return this.price;
            }
}
var xigua = new Product(111, "西瓜", 4.0);
var pri = xigua.getPrice();
alert(pri); // 4.0

  // 可以通过prototype这个属性来给类动态扩展属性以及函数
  Product.prototype.getPname = function(){
         this.pname;
  }

// 调用后期扩展的getPname()函数
var pname = xigua.getPname();
alert(pname)

5.6 null NaN undefined这三个值有什么区别

数据类型不一致

alert(typeof null);//"object"
alert(typeof NaN);//number
alert(typeof undefined);//undefined

在JS当中有两个比较特殊的运算符

  • 等同运算符:只判断值是否相等
  • 全等运算符:既判断值是否相等,又判断数据类型是否相等
alert(null == NaN);//false
alert(null == undefined);//true
alert(undefined == NaN);//false

alert(null === NaN);//false
alert(null === undefined);//false
alert(undefined === NaN);//false

// == 是等同运算符
alert(1 == true);//true
alert(1 === true);//false

6. JS的常用事件

blur失去焦点
focus获得焦点

click鼠标单击
dblclick鼠标双击

keydown键盘按下
keyup键盘弹起

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

reset表单重置
submit表单提交

change下拉列表选中项改变,或文本框内容改变
select文本被选定
load页面加载完毕(整个HTML页面中所有的元素全部加载完毕之后发生。)

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

回调函数的特点:
自己把这个函数代码写出来了,但是这个函数不是自己负责调用,由其他程序负责调用该函数
注册事件的两种方式

//注册事件的第一种方式:直接在标签中使用事件句柄
<script type="text/javascript">   
   function sayHello(){
      alert("hello js!");
   }
</script>     
      <input type="button" value="hello" onclick="sayHello()"/>
      <input type="button" value="hello2" id="mybtn" />
      <input type="button" value="hello3" id="mybtn1" />
      <input type="button" value="hello4" id="mybtn2" />

      <script type="text/javascript">
          function doSome(){
      		alert("do some!");
      }
   /*
      第二种注册事件的方式,是使用纯JS代码完成事件的注册。
   */

   // 第一步:先获取这个按钮对象(document是全部小写,内置对象,可以直接用,document就代表整个HTML页面)
   var btnObj = document.getElementById("mybtn");
   // 第二步:给按钮对象的onclick属性赋值
   btnObj.onclick = doSome;// 注意:千万别加小括号. btnObj.onclick = doSome();这是错误的写法.
                     // 这行代码的含义是,将回调函数doSome注册到click事件上.

   var mybtn1 = document.getElementById("mybtn1");
    mybtn1.onclick = function(){ // 这个函数没有名字,叫做匿名函数,这个匿名函数也是一个回调函数.
       alert("test.........."); // 这个函数在页面打开的时候只是注册上,不会被调用,在click事件发生之后才会调用.
    }

    document.getElementById("mybtn2").onclick = function(){
                      alert("test2......");
    }
 </script>

7. JS代码的执行顺序

<!-- load事件什么时候发生?页面全部元素加载完毕之后才会发生。-->
  <body onload="ready()">
      <script type="text/javascript">
   /*
   // 第一步:根据id获取节点对象
   var btn = document.getElementById("btn"); // 返回null(因为代码执行到此处的时候id="btn"的元素还没有加载到内存)

   // 第二步:给节点对象绑定事件
   btn.onclick = function(){
      alert("hello js");
   }
   */
   function ready(){
      var btn = document.getElementById("btn");
      btn.onclick = function(){
          alert("hello js");
      }
   }
</script>
      <input type="button" value="hello" id="btn" />
  </body>

页面加载的过程中,将a函数注册给了load事件
页面加载完毕之后,load事件发生了,此时执行回调函数a
回调函数a执行的过程中,把b函数注册给了id="btn"的click事件
当id="btn"的节点发生click事件之后,b函数被调用并执行.

<script type="text/javascript">
   window.onload = function(){ // 这个回调函数叫做a
      document.getElementById("btn").onclick = function(){ // 这个回调函数叫做b
         alert("hello js..........");
      }
   }
</script>
      <input type="button" value="hello" id="btn" />

8. JS代码设置节点的属性

<script type="text/javascript">
   window.onload = function(){
      document.getElementById("btn").onclick = function(){
         var mytext = document.getElementById("mytext");
         // 一个节点对象中只要有的属性都可以"."
         mytext.type = "checkbox";
      }
   }
</script>
      <input type="text" id="mytext"/>
      <input type="button" value="将文本框修改为复选框" id="btn"/>

9. JS代码捕捉回车键

回车键的键值是13
ESC键的键值是27

 <script type="text/javascript">
   window.onload = function(){
      var usernameElt = document.getElementById("username");
      /*
      usernameElt.onkeydown = function(a, b, c){
         // 获取键值
         // alert(a); // [object KeyboardEvent]
         // alert(b);
         // alert(c);
      }
      */
      /*
      usernameElt.onkeydown = function(event){
          // 获取键值
          // 对于“键盘事件对象"来说,都有keyCode属性用来获取键值.
      alert(event.keyCode);
      }
      */
     usernameElt.onkeydown = function(event){
        if(event.keyCode === 13){
           alert("正在进行验证....");
        }
     }
   }
   </script>
     <input type="text" id="username"/>

10. JS的void运算符

void运算符的语法:void(表达式)
运算原理:执行表达式,但不返回任何结果。
javascript:void(0)
其中javascript:作用是告诉浏览器后面是一段JS代码。
以下程序的javascript:是不能省略的。

<a href="javascript:void(0)" onclick="window.alert('test code')">
    既保留住超链接的样式,同时用户点击该超链接的时候执行一段JS代码,但页面还不能跳转。
</a>

<br>

<a href="javascript:void(100)" onclick="window.alert('test code')">
    既保留住超链接的样式,同时用户点击该超链接的时候执行一段JS代码,但页面还不能跳转。
</a>

<br>

<!--void() 这个小括号当中必须有表达式-->
<!--
<a href="javascript:void()" onclick="window.alert('test code')">
    既保留住超链接的样式,同时用户点击该超链接的时候执行一段JS代码,但页面还不能跳转。
</a>
-->

11. JS的控制语句

1、if
2、switch

3、while
4、do … while…
5、for循环

6、break
7、continue

8、for…in语句(了解)
9、with语句(了解)

// 创建JS数组
var arr = [false,true,1,2,"abc",3.14]; // JS中数组中元素的类型随意.元素的个数随意.
// 遍历数组
for(var i = 0; i < arr.length; i++){
 alert(arr[i]);
}

// for..in
for(var i in arr){
 //alert(i);
 alert(arr[i]);
}

// for..in语句可以遍历对象的属性
User = function(username,password){
 this.username = username;
 this.password = password;
}

var u = new User("张三", "444");
alert(u.username + "," + u.password);
alert(u["username"] + "," + u["password"]);

for(var shuXingMing in u){
 //alert(shuXingMing)
 //alert(typeof shuXingMing) // shuXingMing是一个字符串
 alert(u[shuXingMing]);
}

alert(u.username);
alert(u.password);

with(u){
 alert(username + "," + password);
}
已标记关键词 清除标记
相关推荐
©️2020 CSDN 皮肤主题: 深蓝海洋 设计师:CSDN官方博客 返回首页