Web阶段:第三章:JavaScript语言(上)

简介: Web阶段:第三章:JavaScript语言



JavaScript介绍:

1.Javascript语言诞生主要是完成页面的数据验证。

2.它运行在客户端,需要运行浏览器来解析执行JavaScript代码。

3.JS是Netscape网景公司的产品,最早取名为LiveScript;为了吸引更多java程序员。更名为javascript。

4.JS是弱类型,Java是强类型。

JavaScript特点:

1.交互性(它可以做的就是信息的动态交互)

2.安全性(不允许直接访问本地硬盘)

3.跨平台性(只要是可以解释Js的浏览器都可以执行,和平台无关)

JavaScript和html代码的结合方式

第一种方式

只需要在head 标签中,或者在body标签中, 使用script 标签 来书写JavaScript代码

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Insert title here</title>
    <!-- 
      script 里面就是js代码
     -->
    <script type="text/javascript">
      // alert 是 js的警告框函数
      // 它可以接收任意类型的参数,你给它传什么,它就弹出来什么
      alert("js hello");
    </script>
  </head>
  <body>
  </body>
</html>

第二种方式

使用Script 标签引入 单独的JavaScript代码文件

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Insert title here</title>
    <!-- 
      script标签可以用来定义js代码,也可以用来引入单独的js文件
        src属性 设置需要引入的js的文件路径(相对路径或绝对路径)       
      一个script标签只能做一件事情 。要么用来定义js代码,要么用来引入js文件
     -->
    <script type="text/javascript" src="1.js"></script>
    <script type="text/javascript">
      alert(2222);
    </script>
  </head>
  <body>    
  </body>
</html>

变量

什么是变量?

变量是可以存放某些值的内存的命名。

javaScript的变量类型:

数值类型: number int short long float double byte

字符串类型: string

对象类型: object

布尔类型: boolean

函数类型: function

javascript里特殊的值:

undefined 未定义 所有未赋初始化的变量,默认值都是undefiend

null 空值

NAN not a number 非数值,非数字(做非法算术运算时,就会返回NAN)

JS中的定义变量格式:

var 变量名;

var 变量名 = 值;

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Insert title here</title>
    <script type="text/javascript">
      var i ;
//      alert(i);// undefiend
      i = 12 ;
      // typeof是一个函数。可以取变量的数据类型
//      alert( typeof(i) );// number
      i = "this is good boy!";
      alert( typeof(i) );//string
    </script>
  </head>
  <body>
  </body>
</html>

关系(比较)运算

等于: ==

全等于: ===

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Insert title here</title>
    <script type="text/javascript">
      var a = 12;
      var b = "12";
      // js中的等于,只是简单的做字面值的比较
      // alert( a == b );// true
      // 全等于,除了做字面值的比较之外,还会检查两个变量的数据类型
      alert( a === b );//false
    </script>
  </head>
  <body>
  </body>
</html>

逻辑运算

且运算: &&

或运算: ||

取反运算: !

0 、null、 undefined、””(空串) 都认为是 false;

&& 与运算。

有两种情况:

第一种:当表达式全为真的时候。返回最后一个表达式的值。

第二种:当表达式中,有一个为假的时候。返回第一个为假的表达式的值

|| 或运算

第一种情况:当表达式全为假时,返回最后一个表达式的值

第二种情况:只要有一个表达式为真。就会把回第一个为真的表达式的值

并且 && 与运算 和 ||或运算 有短路。

短路就是说,当这个&&或||运算有结果了之后 。后面的表达式不再执行

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Insert title here</title>
    <script type="text/javascript">
//    0 、null、 undefined、””(空串) 都认为是 false;
//      var a = 0;
//      if ( a ) {
//        alert("零为真");
//      } else {
//        alert("零为假");
//      }
//      var b = null;
//      if ( b ) {
//        alert("null为真");
//      } else {
//        alert("null为假");
//      }
//      var c = undefined;
//      if ( c ) {
//        alert("undefined为真");
//      } else {
//        alert("undefined为假");
//      }
//      var d = "";
//      if ( d ) {
//        alert("空串为真");
//      } else {
//        alert("空串为假");
//      }
    var a = "abc";
    var b = true;
    var d = false;
    var c = null;
//    && 与运算。
//    有两种情况:
//    第一种:当表达式全为真的时候。返回最后一个表达式的值。
  //    alert( b && a );//abc
  //    alert( a && b );//true
//    第二种:当表达式中,有一个为假的时候。返回第一个为假的表达式的值
  //    alert( d && c ); // false
  //    alert( a && c ); // null
//      || 或运算
//    第一种情况:当表达式全为假时,返回最后一个表达式的值
  //    alert( d || c ); // null
  //    alert( c || d ); // false
//    第二种情况:只要有一个表达式为真。就会把回第一个为真的表达式的值
//      alert( b || c ); // true
//      alert( d || a ); // abc
    </script>
</head>

数组

数组定义方式

Js 中 数组的定义:

格式:

var 数组名 = []; // 定义一个空数组

var 数组名 = [ 值1,值2,值3 ]; // 定义数组同时赋初始值

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Insert title here</title>
    <script type="text/javascript">
//    Js 中 数组的定义:
//    格式:
//    var 数组名 = []; // 定义一个空数组
    var arr = [];
//    alert( arr.length ); //0
    arr[0] = 12; // 通过数组下标给元素赋值
//    alert( arr[0] );//12
//    alert( arr.length );//1
    // js的数组在通过下载赋值的时候,会自动的根据最大下标 做扩容操作。
    arr[2] = "abc";
//    alert( arr.length ); //3
//    alert( arr[1] ); //undefined    
    // 数组的遍历
//    for (var i = 0; i < arr.length; i++) {
//      alert( arr[i] );
//    }   
//    var 数组名 = [ 值1,值2,值3 ]; // 定义数组同时赋初始值
    var arr2 = [12,"abc",true];
//    alert(arr2.length); // 3
    arr2[9] = 12;
    alert(arr2.length);
    </script>
  </head>

函数:

函数的二种定义方式

函数的第一种定义方式,使用function关键字进行定义函数。

格式如下:

function 函数名(形参列表){

函数体

}

如何访问函数:

函数名( 实参列表 );

如何定义带有返回值的函数?

答:只需要在函数体内直接使用return语句返回值即可。

<script type="text/javascript">
//    格式如下:
//    function  函数名(形参列表){
//      函数体
//    }
//    无参函数定义
//    function fun(){
//      alert("无参函数被调用了");
//    }
//    有参函数
//    function fun2( a , b ){
//      alert("有参函数被调用 a=>" + a + ",b=>" + b);
//    }
    // 带有返回值的函数定义
    function sum( num1, num2 ){
      return num1 + num2;
    }
//    如何访问函数: 函数名( 实参列表 );    
//    alert( sum("abc",100) );
    </script>

函数的第二种定义方式是:

var 函数名 = function(参数列表){函数体}

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <title>Insert title here</title>
  <script type="text/javascript">
    var fun = function(num){
      alert("函数第二种定义方式 : " + num);
    }
    fun(123);
  </script>
</head>

注:在Java中函数允许重载。但是在Js中函数的重载会直接覆盖掉上一次的定义

<script type="text/javascript">
      function fun(a,b){
        alert(a);
        alert(b);
        alert("有参函数被调用");
      }
      function fun(){
        alert("无参函数被调用");
      }
      fun(12,"abc",true);
</script>

函数的 arguments 隐形参数(只在function函数内)

可变长参数:public void fun( int a , Object … args )……

args就是可变长参数

它本身是一个数组。

js中函数自带有一个隐形参数arguments ,基本上使用跟java的可变长参数一样。

都是用来接收任意多个参数。它的使用跟数组一样。

<script type="text/javascript">
      function fun(a,b){
        alert(a);
        alert(b);
        alert("有参函数被调用");
      }   
      function fun(pa,pb){
        alert( arguments.length );//3
        alert( arguments[0] );//12
        alert( arguments[1] );//abc
        alert( arguments[2] );//true
        alert("=====================");
        alert( pa );//12
        alert( pb );//abc
        alert("无参函数被调用");
      }
//      fun(12,"abc",true);     
      //需求:现在需要有一个方法,可以计算传递进来的所有参数(只相加数字)相加的和并返回
      function sum(){
        var result = 0;
        for (var i = 0; i < arguments.length; i++) {
          if ( typeof(arguments[i]) == "number" ) {
            result +=  arguments[i];
          }
        }
        return result;
      }
      alert( sum(100,"abc",100,1000) );
</script>

相关文章
|
1月前
|
JavaScript 前端开发 测试技术
使用Selenium执行JavaScript脚本:探索Web自动化的新领域
本文介绍了如何在Selenium中使用JavaScript解决自动化测试中的复杂问题。Selenium的`execute_script`函数用于同步执行JS,例如滑动页面、操作时间控件等。在滑动操作示例中,通过JS将页面滚动到底部,点击下一页并获取页面信息。对于只读时间控件,利用JS去除readonly属性并设置新日期。使用JS扩展了Selenium的功能,提高了测试效率和精准度,适用于各种自动化测试场景。
46 1
|
3月前
|
前端开发 JavaScript 开发者
Web前端开发中的JavaScript闭包应用
JavaScript闭包是Web前端开发中常见的概念,它可以帮助开发者解决作用域问题,提高代码的可读性和可维护性。本文将介绍JavaScript闭包的基本概念和应用,以及如何在Web前端开发中使用闭包。
30 3
|
2天前
android-agent-web中js-bridge案例
android-agent-web中js-bridge案例
10 2
|
15天前
|
JavaScript 前端开发 API
Vue.js:构建高效且灵活的Web应用的利器
Vue.js:构建高效且灵活的Web应用的利器
N..
|
1月前
|
存储 JavaScript 前端开发
JavaScript语言的基本结构
JavaScript语言的基本结构
N..
15 1
|
1月前
|
运维 JavaScript 前端开发
发现了一款宝藏学习项目,包含了Web全栈的知识体系,JS、Vue、React知识就靠它了!
发现了一款宝藏学习项目,包含了Web全栈的知识体系,JS、Vue、React知识就靠它了!
|
1月前
|
JavaScript 前端开发 API
Vue.js:构建现代化Web应用的灵活选择
Vue.js:构建现代化Web应用的灵活选择
40 0
|
1月前
|
JSON JavaScript 前端开发
javascript语言ES5版本详解(一)
javascript语言ES5版本详解(一)
|
1月前
|
前端开发 JavaScript 开发者
编程笔记 html5&css&js 064 JavaScript 语言规则
编程笔记 html5&css&js 064 JavaScript 语言规则
|
2月前
|
存储 缓存 网络协议
Go语言并发编程实战:构建高性能Web服务器
【2月更文挑战第6天】本文将通过构建一个高性能的Web服务器实战案例,深入探讨如何在Go语言中运用并发编程技术。我们将利用goroutine和channel实现高效的请求处理、资源管理和并发控制,以提升Web服务器的性能和稳定性。通过这一实战,你将更好地理解和掌握Go语言在并发编程方面的优势和应用。