JavaScript基础，基础

作者: 幽默的bug | 来源:发表于2019-08-22 17:30 被阅读0次

原 javaScript学习笔记（一）js基础

一、简介

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、特点：

交互性（它可以做的就是信息的动态交互）

安全性（不允许直接访问本地硬盘）

跨平台性（只要是可以解析js的浏览器都可以执行，和平台无关

4、作用

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

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

5、书写位置

5.1、内嵌式：

理论上js可以书写在页面的任意位置。

alert("内嵌式")

</script>

5.2、外链式：

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

5.3、行内式：

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

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. 只能由字母、数字、_（下划线）、$（美元符号）组成。

2. 不能以数字开头。

3. 命名中不能出现-（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; 返回这个变量的类型.

说明 : 同一个变量, 可以进行不同类型的数据赋值.

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类型，不存在类似整数除以整数还是整数的结论。

2. 字符串和其他的数据使用+号运算，会连接成一个新的字符串。

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

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

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

// 请问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

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

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

演示一：

// 短路与 (一假即假)

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

// 请问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>

演示二:

// 短路或 : 一真即真.

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

// 请问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的结果

演示：

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

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

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

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

</script>

14、if条件语句

这个和Java中if语句一样。

演示：

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）、字符、字符串

演示：

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（...）; 以日志的形式在控制台输出结果！

演示：

// 需求 : 统计 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); //4

console.log显示如下：

17、循环嵌套

演示案例9*9乘法表

<style>

table {

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

border-collapse: collapse;

/*color: red;*/

border-color: red;

}

</style>

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

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) + "    ");

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

}

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

}

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

</script>

18、自定义函数

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

格式：

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

调用函数：函数名(实际参数);

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

18.2、如果函数需要返回值、直接使用return 返回、不会像java一样要考虑返回值的类型

// 定义一个函数 : function

function demo2() {

return 666;

}

// 调用函数 :

alert(demo2());

</script>

18.3、如果函数需要传递参数、不需要指定参数的类型、直接使用变量即可

// 定义一个函数 : function

function demo3(a, b) {

return a + b;

}

// 调用函数 :

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

</script>

18.4、js中出现二个重名的函数名、后者会把前面的覆盖掉

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

演示：

// 定义一个函数 : function

function demo4(a, b) {

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

}

function demo4() {

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

}

demo4(10, 20);

demo4();

</script>

会显示二次下面的图片：

19、匿名函数

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

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

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

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

调用函数：fn(实际参数);

演示：

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

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>

<style>

div {

width: 80%;

margin: 50px auto;

}

img {

width: 100%;

}

</style>

</head>

<body>

</div>

</body>

实现一：

// 需求 : 动态获取页面中的 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>

实现二：

// 需求 : 动态获取页面中的 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. 执行指令：事件触发后需要执行的代码，一般使用函数进行封装

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

21.2、常用的事件：

案例：

<!DOCTYPE html>

<head>

// 窗口 : 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>

</body>

</html>

网友评论

本文标题：JavaScript基础，基础

本文链接：https://www.haomeiwen.com/subject/jjlosctx.html

延伸阅读

深度阅读

您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！

JavaScript基础，基础

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读