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

42次阅读

共计 7333 个字符,预计需要花费 19 分钟才能阅读完成。

一、简介

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>

到此基础完结。

正文完
 0