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>

相关文章
|
2月前
|
数据采集 Web App开发 JavaScript
Puppeteer的高级用法:如何在Node.js中实现复杂的Web Scraping
随着互联网的发展,网页数据抓取已成为数据分析和市场调研的关键手段。Puppeteer是一款由Google开发的无头浏览器工具,可在Node.js环境中模拟用户行为,高效抓取网页数据。本文将介绍如何利用Puppeteer的高级功能,通过设置代理IP、User-Agent和Cookies等技术,实现复杂的Web Scraping任务,并提供示例代码,展示如何使用亿牛云的爬虫代理来提高爬虫的成功率。通过合理配置这些参数,开发者可以有效规避目标网站的反爬机制,提升数据抓取效率。
209 4
Puppeteer的高级用法:如何在Node.js中实现复杂的Web Scraping
|
1月前
|
开发框架 JavaScript 前端开发
使用 Node.js 和 Express 构建 Web 应用
【10月更文挑战第2天】使用 Node.js 和 Express 构建 Web 应用
|
15天前
|
缓存 前端开发 中间件
go语言中Web框架
【10月更文挑战第22天】
26 4
|
1月前
|
XML JavaScript 前端开发
JavaScript控制台:提升Web开发技能的秘密武器
作为Web开发人员,掌握JavaScript控制台中的各种方法至关重要。本文介绍了22种实用的console方法,从基本的log()到高级的profile()和memory,每种方法都配有示例和说明,帮助开发者更高效地调试和记录信息。通过了解这些工具,您可以优化代码、提高开发速度,减少错误,使编码过程更加顺畅愉快。
40 1
JavaScript控制台:提升Web开发技能的秘密武器
|
25天前
|
JavaScript 前端开发 持续交付
构建现代Web应用:Vue.js与Node.js的完美结合
【10月更文挑战第22天】随着互联网技术的快速发展,Web应用已经成为了人们日常生活和工作的重要组成部分。前端技术和后端技术的不断创新,为Web应用的构建提供了更多可能。在本篇文章中,我们将探讨Vue.js和Node.js这两大热门技术如何完美结合,构建现代Web应用。
22 4
|
1月前
|
设计模式 JavaScript 前端开发
浅谈JavaScript 框架在现代 Web 开发中的作用
浅谈JavaScript 框架在现代 Web 开发中的作用
43 12
|
1月前
|
存储 JavaScript 前端开发
深入探索 Vue.js:构建现代 Web 应用的利器
【10月更文挑战第11天】深入探索 Vue.js:构建现代 Web 应用的利器
21 1
|
1月前
|
JavaScript 前端开发 网络架构
如何使用Vue.js构建响应式Web应用
【10月更文挑战第9天】如何使用Vue.js构建响应式Web应用
|
1月前
|
JavaScript 前端开发
如何使用Vue.js构建响应式Web应用程序
【10月更文挑战第9天】如何使用Vue.js构建响应式Web应用程序
|
2月前
|
数据采集 存储 JavaScript
Puppeteer的高级用法:如何在Node.js中实现复杂的Web Scraping
在现代Web开发中,数据采集尤为重要,尤其在财经领域。本文以“东财股吧”为例,介绍如何使用Puppeteer结合代理IP技术进行高效的数据抓取。Puppeteer是一个强大的Node.js库,支持无头浏览器操作,适用于复杂的数据采集任务。通过设置代理IP、User-Agent及Cookies,可显著提升抓取成功率与效率,并以示例代码展示具体实现过程,为数据分析提供有力支持。
103 2
Puppeteer的高级用法:如何在Node.js中实现复杂的Web Scraping

热门文章

最新文章

下一篇
无影云桌面