Js(一)

JavaScript介绍

1.JavaScript是互联网上最流行的脚本语言,这门语言可用于web和html,更可广泛用于服务器,PC端,移动端。
2.JavaScript脚本语言
JavaScript是一种轻量级的编程语言。
JavaScript是可插入HTML页面的编程代码
JavaScript插入HTML页面后,可由所有的浏览器执行

JavaScript实现

1.JavaScript用法
HTML中的脚本必须位于之间写代码
3.JavaScript使用限制
在HTML中,不限制脚本数量。
通常会把脚本放置于标签中,以不干扰页面内容。

JavaScript使用限制
1.JavaScript通常用来操作HTML
2.文档输出:
Document.write(“

this is my first JavaScript.

”);

JavaScript语法

1.js语句
JavaScript 语句向浏览器发出的命令。语句的作用是告诉浏览器该做什么。
2.分号:
语句之间的分割是分号(;)
注意:分号是可选项,有时候看不到不以分号隔开。
3.JavaScript代码
按照编写顺序依次执行
4.标识符
JavaScript表示符必须以字母下划线或**美元符号 $**开始
JavaScript关键字

5.JavaScript对大小写敏感
6.空格
JavaScript会忽略多余的空格
7.代码换行
8.保留字

JavaScript注释
1.单行注释 //
2.多行注释 /**/
JavaScript变量
变量是用来存储信息的“容器”

      例如:   var x = 10;
               var y = 10;
               var z = "Hello";

JavaScript数据类型
1.字符串 string
2.数字 number
3.布尔 boolean
4.数组 array
5.对象 object
6.空 null
7. undefined
8. 可以通过赋值为null的方式清除变量

JavaScript语法
JavaScript运算符
1.算法运算符
+、-、*、/、++、–
2.赋值运算符
=、+=、-=、
=、/=、%=

 var j=i++; ++在后,先赋值,再运算。
 var j=++i;++在前,先运算,再赋值。

3.字符串操作
任何数据类型和字符串相加都会变成字符串类型

+符号的2种含义
①运算相加
②连接
4.比较运算符

   ==、===、!=、!==、>、<、>=、<=

5.逻辑运算符
&&与 ||或 !非
6.条件运算符:
eg:x<10?“x比10小”:“x比10大”

JavaScript条件语句

1.if…else
2.switch

   <script>
   var i=5;
   switch(i){
       case 1: 
        document.write("i=1");
        break;
       case 2:
         document.write("i=2");
         break;
       default:
         document.write("条件不满足case");
         break;
   }
</script>

JavaScript循环语句

1.for循环、for/in

  <script>
    var i=[1,2,3,4,5,6];
    for(var j=0;j<6;j++){
        document.write(i[j]);
    }
</script>

<script>
  var i=[1,2,3,4,5,6];
  var j;
  for(j in i){
      document.write(i[j]+"<br/>");
  }
</script>

2.while循环 先判断再执行
3.do…while 先执行后判断 至少执行一次

JavaScript跳转语句

1.break
2.continue

break:从当前跳出

<script>
  for(var i=0;i<10;i++){
      if(i==5){
          break;
      }
      document.write("i="+i+"<br/>");//0 1 2 3 4
  }
</script>

continue:跳过当前

<script>
  for(var i=0;i<10;i++){
      if(i==5){
          continue;
      }
      document.write("i="+i+"<br/>");//0,1,2,3,4,6,7,8,9
  }
</script>

了解函数的用途概要:

1.了解函数
2.定义函数
3.函数调用
4.带参数的函数
5.带返回值的函数

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

2.定义函数
(1)定义函数
function 函数名(){
函数体;(代码块)
}

<script>
   var a1 = 10;
   var a2 = 20;
   var sum = a1+a2;
   alert(sum);
</script>

(2)注意
JavaScript对大小写敏感,所以这里的function必须小写。在函数调用时,也必须按照函数的相同名称来调用函数。

3.函数调用
(1)函数在定义好之后,不能自动执行,需要进行调用。

   <script>
   function demo(){
       var a=10;
       var b=10;
       var sum=a+b;
       alert(sum);
   }

   function tell(){
       var n=10;
       var m=10;
       var vl = n*m;
       alert(vl);
   }
   tell();
</script>

(2).调用方式

   (1)在<script>标签内调用。
   (2)在html文件中调用。



  <script>
      function demo(){
          var a = 10;
          var b = 20;
          var sum = a+b;
          alert(sum);
      }
    //   demo();  第一种
    </script>

<!-- 第二种 -->
<!-- <form>
    <input type="button" value="按钮" onclick="demo()">
</form> -->

<!-- 第三种 -->
<button onclick="demo()">按钮</button>

4.JavaScript带参数的函数
(1).函数参数
在函数的调用中,也可以传递值,这些值被称为参数。
eg:demo(arg1,arg2);
(2).参数的个数可以任意多,每个参数通过","隔开。
(3).注意:
参数在传递时,其顺序必须一致。
(4).参数意义:
通过传递参数的个数以及参数的类型不同完成不同的功能。

 <script>
   function demo(name,age){
       alert("Hello:"+name+",我的年龄是:"+age);
   }
</script>
<button onclick="demo('iwem',21)">按钮</button>
<button onclick="demo('nam',19)">按钮2</button>

5.带返回值的函数
返回值
有时,我们需要将函数的值返回给调用它的地方。
通过return语句就可以实现
注意:在使用return语句时,函数会停止执行,同时返回值。

 <p id="pid"></p>
  <script>
   function demo(a,b){
       if(a>b){
           return "a比较大";
       }else{
           return "b比较大";
       }
   }
   document.getElementById("pid").innerHTML =demo(12,100900);
</script>

全局变量和局部变量

<script>
   var n=10;m=10;//全局变量   任何地方+都可以使用
   function demo(){
       var i=10;//局部变量  只能在当前函数中使用
       x=10;// 只有在调用demo后   x是  全局变量
   }
   demo();
   alert(x);
</script>

异常捕获

1.异常
当javascript引擎执行javascript代码时,发生了错误,导致程序停止执行。
2.异常抛出:
当异常产生,并将这个异常生成一个错误信息。
3.异常捕获
try{
发生异常的代码块;
}catch(err){
错误信息处理;
}

4.throw语句:
通过throw语句创建一个自定义错误

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>异常捕获</title>
</head>
<body>
    <form>
        <input id="txt" type="text">
        <input id="btn" type="button" onclick="demo()" value="按钮">
    </form>   
    <script>
       function demo(){
           try{
               var e = document.getElementById("txt").value;
               if(e==""){
                   throw "第一个用户输入异常==空";
               }
           }catch(err){
               alert(err);
           }
       }
    </script>
</body>
</html>
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章