乐趣区

关于javascript:在乐字节学习前端的第四天javaScript学习

jiezi

一、简介

1、概述：

JavaScript 是目前 web 开发中不可短少的 脚本 语言，js 不须要编译即可运行，运行在客户端，须要通过浏览器来解析执行 JavaScript 代码。

诞生于 1995 年，过后的次要目标是 验证表单的数据是否非法。

JavaScript 原本应该叫 Livescript，然而在公布前夕，想搭上过后超热的 java 逆风车，长期把名字改为了 JavaScript。（也就是说 js 跟 java 没有关系，过后只是想借助 java 的名气）。

js 组成部分：

（1）外围（ECMAScript）：这一部分次要是 js 的根本语法。

（2）BOM：Brower Object Model（浏览器对象模型），次要是获取浏览器信息或操作浏览器的，例如：浏览器的后退与后退、浏览器弹出提示框、浏览器地址栏输出网址跳转等操作等。

（3）DOM：Document Object Model（文档对象模型），此处的文档暂且了解为 html，html 加载到浏览器的内存中，能够应用 js 的 DOM 技术对内存中的 html 节点进行批改，用户从浏览器看到的是 js 动静批改后的页面。（增删改查）

2、特点：

  1. 交互性（它能够做的就是信息的动静交互）
  2. 安全性（不容许间接拜访本地硬盘）
  3. 跨平台性（只有是能够解析 js 的浏览器都能够执行，和平台无关）

3、和 Java 区别：

javascript：Netscape 公司的产品，最后叫 Livescript。是一门直译式脚步语言，弱类型语言

Java：Sun 公司的产品，当初是 Oracle 公司的产品。须要先编译成字节码文件再执行，强类型语言

4、作用

avaScript 被用来改良设计、验证表单、检测浏览器、创立 cookies，等等。JavaScript 是因特网上最风行的脚本语言，并且可在所有次要的浏览器中运行，比方：Internet Explorer、Maxthon、Mozilla、Firefox、Netscape、Chrome 和 Opera 等。

在目前学习阶段只有记住最罕用的二个：（1）运态批改 html 及 css 代码（2）验证表单

5、书写地位

5.1、内嵌式：

实践上 js 能够书写在页面的任意地位。

<script>

alert(“ 内嵌式 ”)

</script>

5.2、外链式：

首先新建一个文件类型为.js 的文件，而后在该文件中写 js 语句，通过 script 标签对引入到 html 页面中。

<script src=”js 文件门路地址 ”> 这里不能写 js 语句 </script>

5.3、行内式：

间接书写在标签身上，是一个简写的事件，所以又称之为事件属性。onclick 单击事件

<input type=”button” value=” 点我呀!” onclick=”alert(‘ 点我干啥!^6^’);”>
​
<button onclick=”alert(‘ 祝贺你, 中 500 万.’);”> 点我呀!</button>

6、正文：

单行正文：// 正文语句 快捷键 ctrl+/
​
多行正文：/ 正文语句 /   快捷键 ctrl+shift+/
​
留神：多行正文互相不能嵌套应用，只能在多行正文外面应用单行正文！

7、数据类型：

Js 中的数据类型：

数值型：number（但凡数字都是数值型，不辨别整数和小数）
​
字符串：string（但凡引号包裹起来的内容全部都是字符串）
​
布尔：boolean（true、false）
​
对象类型：object（非凡取值 null）
​
未定义型：undefined

比照 java 中的数据类型：

整数：byte short int long
​
小数：float double
​
字符：char
​
布尔：boolean
​
字符串：String

8、变量：

8.1、定义：就是存放数据的、内疗能够存储任意数据

8.2、申明变量：

var 变量名称 = 存储的数据;   (variable 变量)

8.3、变量命名标准：

  1. 只能由字母、数字、_（下划线）、$（美元符号）组成。

​

  1. 不能以数字结尾。

​

  1. 命名中不能呈现 -（js 会了解成减号进行减法的操作），不能和关键字抵触。

js 是弱类型语言，不器重类型的定义，但 js 会依据为变量赋值的状况自定判断该变量是何种类型：

数值型：var i = 1; var d = 2.35;
​
字符串：var str = “ 用心学习 ”;
​
布尔型：var b = true;

比照 Java:java 是强类型的语言，重视类型的定义，Java 定义类型如下：

整型：int i = 1;
​
浮点型：double d = 2.35;
​
字符串：String str =“用心学习”;
​
布尔型：boolean b = true;

总结：js 中变量的定义。只有加一个 var 就行。java 则应用什么类型的变量就要定义什么类型的。

9、检测数据类型：

typeof(value); 或者 typeof value;     返回这个变量的类型.
​
阐明 : 同一个变量, 能够进行不同类型的数据赋值.

<script type=”text/javascript”>

var a;
alert(typeof a);  // undefined
a = 998;
alert(typeof a); // number
a = “ 用心学习 ”;
alert(typeof a); // string
a = true;
alert(typeof a); // boolean
​
</script>

10、算术运算符

      • / % ++ —

留神：

  1. 因为 js 中的小数和整数都是 number 类型，不存在相似整数除以整数还是整数的论断。

​

  1. 字符串和其余的数据应用 + 号运算，会连接成一个新的字符串。

​

  1. 字符串应用除了 + 以外的运算符：如果字符串自身是一个数字，那么会主动转成 number 进行运算

​
，否则就会返回一个 NaN 的后果，示意这不是一个数字。NaN：not a number

<script>
​
alert(1234 / 1000 * 1000); // 1234
var s = “12”;
s -= 10;
alert(s);  // 2
var s = “aa”;
s -= 10;
alert(s);  // NaN       Not a Number 不是一个数字
var s = “12”;
s += 10;
alert(s);       // 1210
​
</script>

11、关系（比拟）运算符

= < <= !=
​
​
== 等于（只比拟内容）=== 恒等于（比拟内容的同时还要比拟数据类型）
​
​
留神：关系运算符返回的后果只有两个：true / false

<script>
​
// 请问 1 : 3 > 5, 后果为 ?
alert(3 > 5);   // false
​
// 请问 2 :“22”== 22 后果为 ?
alert(“22” == 22); // true (仅仅判断数值)
​
// 请问 3 :“22”=== 22 后果为 ?
​
alert(“22” === 22); // false (恒等于, 数值和类型都要相等)
​
​
</script>

12、逻辑运算符

&& 与 true&&false ====>false

|| 或 true||false ====>true

！非 !true ====>false

false（了解）：false, 0, null, undefined

true（了解）：true, 非 0, 非 null, 非 undefined

针对 && 顺口溜: 找第一个呈现的假值. (一假即假)

针对 || 顺口溜: 找第一个呈现的真值. (一真即真)

演示一：

<script>

// 短路与 (一假即假)

// 口诀 : 找第一个为假的值.

// 请问 1 :  8 < 7 && 3 < 4, 后果为 ?

alert(8 < 7 && 3 < 4);  // false

// 请问 2 :  -2 && 6 + 6 && null 后果为 ?

alert(-2 && 6 + 6 && null); // null

// 请问 3 :  1 + 1 && 0 && 5  后果为 ?

alert(1 + 1 && 0 && 5); // 0

</script>

演示二:

<script>

// 短路或 : 一真即真.

// 口诀 : 找第一个为真的值.

// 请问 1 :  0 || 23 后果为 ?

alert(0 || 23); // 23

// 请问 2 :  0 || false || true  后果为 ?

alert(0 || false || true); // true

// 请问 3 :  null || 10 < 8 || 10 + 10 后果为 ?

alert(null || 10 < 8 || 10 + 10);  // 20

// 请问 4 :  null || 10 < 8 || false 后果为 ?

alert(null || 10 < 8 || false); // false

</script>

13、三元运算符：

条件？表达式 1：表达式 2

如果条件为 true，返回表达式 1 的后果

如果条件为 false，返回表达式 2 的后果

演示：

<script>

// 请问 1 :  3 ?“aaa”:“bbb”后果为 ?

alert(3 ? "aaa" : "bbb");       // aaa

// 请问 2 :  0 ?“ccc”:“ddd”后果为 ?

alert(0 ? "ccc" : "ddd");       // ddd

</script>

14、if 条件语句

这个和 Java 中 if 语句一样。

演示：

<script>

  var score = 59;

  if (score >= 90) {alert("优良");

  } else if (score >= 80) {alert("良好");

  } else if (score >= 60) {alert("及格");

  } else {alert("不及格");

  }

</script>

15、switch 分支构造

这个和 java 中 switch 构造一样。只是 Java 中表达式为：常量 整型（去 long）、字符、字符串

演示：

<script>

  var score = 59;

  // 需要 : 将须要一个整型数值, 不想要小数点.

  // window 对象的 parseInt 办法.

  score = window.parseInt(score / 10 + "");

  // alert(score);

  switch (score) {

      case 10:

      case 9:

          alert("优良!");

          break;

      case 8:

          alert("良好!");

          break;

      case 7:

      case 6:

          alert("及格!");

          break;

      default:

          alert("不及格!");

          break;

  }

</script>

16、循环构造 while、do-while. for;

while(循环条件){循环体;}

do{循环体;}while(循环条件);

for(循环变量赋初值；循环条件；循环变量增值){循环语句;}

console.log（…）; 以日志的模式在控制台输入后果！

演示：

<script>

// 需要 : 统计 1~100 之间可能被 3 和 7 整除的数字个数
var count = 0;


// 1. 遍历 1~100 之间的所有整型数值

for (var i = 1; i <= 100; i++) {

    // 2. 判断

    if (i % 3 == 0 && i % 7 == 0) {// alert(i);

        console.log(i);

        // 3. 累加个数

        count++;

    }

}







// 4. 查看后果

// alert(count);

console.log(count);

console.log 显示如下：

21 42 63 84 4

17、循环嵌套

演示案例 9 * 9 乘法表

<style>

    table {

        /* 将 table 表格的线变成了细线 */

        border-collapse: collapse;

        /*color: red;*/

        border-color: red;

    }

</style>

<script>







    // 需要 : 九九乘法口诀表

    document.write("<table border='1px solid red'cellspacing='0'cellpadding='8px'>");

    document.write("<caption> 九九乘法口诀表 </caption>");

    for (var i = 1; i <= 9; i++) {document.write("<tr>");

        for (var j = 1; j <= i; j++) {document.write("<td>");

            document.write(j + "*" + i + "=" + (j*i) + "&nbsp;&nbsp;&nbsp;&nbsp;");

            document.write("</td>");

        }

        document.write("</tr>");

    }

    document.write("</table>");

</script>

18、自定义函数

函数是命名的独立的语句段，这个语句段能够被当作一个整体来援用和执行：

格局：

function 函数名(形式参数){函数体}

调用函数：函数名(理论参数);

18.1、函数只有被调用后才会执行

18.2、如果函数须要返回值、间接应用 return 返回、不会像 java 一样要思考返回值的类型

<script type=”text/javascript”>

// 定义一个函数 : function

function demo2() {return 666;}

// 调用函数 :

alert(demo2());

</script>

18.3、如果函数须要传递参数、不须要指定参数的类型、间接应用变量即可

<script type=”text/javascript”>

// 定义一个函数 : function

function demo3(a, b) {return a + b;}

// 调用函数 :

alert(demo3(10, 20));// 显示 30

</script>

18.4、js 中呈现二个重名的函数名、后者会把后面的笼罩掉

比照 java、java 有重载（同名不同参）、重写（同名同参同返回值类型、办法体不一样）

演示：

<script type=”text/javascript”>

// 定义一个函数 : function


function demo4(a, b) {alert("调用 1...");

}

function demo4() {

   alert("调用 2...");

}

demo4(10, 20);

demo4();

</script>

网页会显示 调用 2 …

19、匿名函数

匿名函数是没有名字的函数

function(形式参数){函数体}

调用形式：将匿名函数赋值给一个变量，通过变量名调用函数

定义函数并赋值给变量：var fn = function(形式参数){函数体}

调用函数：fn(理论参数);

演示：

<script type=”text/javascript”>

// 匿名函数 : 没有名称的函数

var func = function(i, u) {alert(i + "love" + u);

}

// 调用函数 :

func(“ 柳岩 ”, “ 小白 ”);// 显示柳岩 love 小白

</script>

20、案例 - 轮播图

阐明 1 : script 标签须要放在 body 标签之后.

阐明 2 : window.setInterval(“字符串函数名称()”, 工夫毫秒数);

阐明 3 : window.setInterval(函数名称, 工夫毫秒数);

阐明 4 : window.setInterval(匿名函数, 工夫毫秒数); 举荐应用

<head>

<meta charset="UTF-8">

<title> 轮播图 </title>

<style>

    div {

        width: 80%;

        margin: 50px auto;

    }

    img {width: 100%;}

</style>

</head>

<body>

<div class="container">

    <img src="../img/01.jpg" alt="图片">

</div>

</body>

实现一：

<script>

// 需要 : 动静获取页面中的 img 标签, 而后批改 img 标签的 src 属性.

// 1. 获取 img 标签

var img = document.getElementById("img");

// alert(img);

// 定义一个变量

var count = 1;

// 1.2 定义一个函数

function changeImageSrc() {

    count++;

    img.src = "../img/0"+count+".jpg";

    // 判断

    if (count == 8) {count = 0;}

}

// 2. 循环切换图片

// window.setInterval(函数, 工夫毫秒); 在指定的工夫毫秒距离, 一直调用第一个参数传入的函数.

// 调用形式一 :

// window.setInterval("changeImageSrc()", 1000);

// 调用形式二 :

window.setInterval(changeImageSrc, 1000);

</script>

实现二：

<script>

// 需要 : 动静获取页面中的 img 标签, 而后批改 img 标签的 src 属性.

// 1. 获取 img 标签

var img = document.getElementById("img");

// alert(img);

// 定义一个变量

var count = 1;

// 2. 循环切换图片

// window.setInterval(匿名函数, 工夫毫秒); 在指定的工夫毫秒距离, 一直调用第一个参数传入的匿名函数.

window.setInterval(function() {

    count++;
    
    img.src = "../img/0"+count+".jpg";

    // 判断

    if (count == 8) {count = 0;}

}, 1000);

</script>

21、js 事件

21.1、事件概述：

事件三要素：

  1. 事件源：被监听的 html 元素（就是这个事件加给谁），就是某个（某些）html 标签
  2. 事件类型：某类动作，例如点击事件，移入移除事件，敲击键盘事件等
  3. 执行指令：事件触发后须要执行的代码，个别应用函数进行封装

语法格局：事件源. 事件类型 = 执行指令

案例：

<!DOCTYPE html>

<html lang=”en”>

<head>

<meta charset="UTF-8">

<title> 事件 </title>

<script>

    // 窗口 : window 对象提供了一个事件类型  onload 页面加载实现事件.

    // 事件源 : window    事件类型 : 页面加载实现事件 (onload)  执行指令: 就是赋值的 function 函数.

    window.onload = function () {

        // 获取页面的 btn 按钮

        var btn = document.getElementById("btn");

        // alert(btn);


        // 给 btn 按钮绑定一个事件 (单击事件 onclick)

        // 事件源 : btn 按钮    事件类型 : 单击事件 (onclick)  执行指令: 就是赋值的 function 函数.

        btn.onclick = function () {alert("祝贺你, 中了 500 万!");

        }

    }
</script>

</head>
<body>

<button id="btn"> 按钮 </button>

</body>

</html>

到此基础完结。

退出移动版