JavaScript基础知识总结
一、概述：
JavaScript是目前web开发中不可缺乏的脚本语言，js不须要编译便可运行，运行在客户端，须要经过浏览器来解析执行JavaScript代码。javascript
诞生于1995年，当时的主要目的是验证表单的数据是否合法。css
JavaScript原本应该叫Livescript，可是在发布前夕，想搭上当时超热的java顺风车，临时把名字改成了JavaScript。（也就是说js跟java没有关系，当时只是想借助java的名气）。html
js组成部分：java
- ECMA： Script:构成了JS核心的语法基础
- BOM：Brower Object Model 浏览器对象模型
- DOM: Document Object Model 文档对象模型
（1）核心（ECMAScript）：这一部分主要是js的基本语法。web
（2）BOM：Brower Object Model（浏览器对象模型），主要是获取浏览器信息或操做浏览器的，例如：浏览器的前进与后退、浏览器弹出提示框、浏览器地址栏输入网址跳转等操做等。浏览器
（3）DOM：Document Object Model（文档对象模型），此处的文档暂且理解为html，html加载到浏览器的内存中，可使用js的DOM技术对内存中的html节点进行修改，用户从浏览器看到的是js动态修改后的页面。（增删改查）安全
二、特色：
- 交互性（它能够作的就是信息的动态交互）
- 安全性（不容许直接访问本地硬盘）
- 跨平台性（只要是能够解析js的浏览器均可以执行，和平台无关）
三、和Java区别：
- java：须要先编译成字节码文件，再执行
- JavaScript：直译式脚本文件
四、做用
avaScript 被用来改进设计、验证表单、检测浏览器、建立cookies，等等。JavaScript 是因特网上最流行的脚本语言，而且可在全部主要的浏览器中运行，好比： Internet Explorer、 Maxthon、Mozilla、Firefox、Netscape、Chrome和 Opera等。cookie
在目前学习阶段只要记住最经常使用的二个：
（1）运态修改html及css代码
（2）验证表单函数
五、书写位置
5.一、内嵌式：学习
理论上js能够书写在页面的任意位置。
<script>
alert("内嵌式")
</script>
5.二、外链式：
首先新建一个文件类型为.js的文件，而后在该文件中写js语句，经过script标签对引入到html页面中。
<script src="js文件路径地址">这里不能写js语句</script>
5.三、行内式：
直接书写在标签身上，是一个简写的事件，因此又称之为事件属性。 onclick单击事件
<input type="button" value="点我呀!" onclick="alert('点我干啥!^6^');">
<button onclick="alert('恭喜你,中 500 万.');">点我呀!</button>
六、注释：
单行注释： // 注释语句 快捷键ctrl+/ 多行注释： /* 注释语句 */ 快捷键ctrl+shift+/ 注意：多行注释相互不能嵌套使用，只能在多行注释里面使用单行注释！
七、数据类型：
Js中的数据类型：
数值型：number（凡是数字都是数值型，不区分整数和小数） 字符串：string（凡是引号包裹起来的内容所有都是字符串） 布尔：boolean（true、false） 对象类型：object（特殊取值null） 未定义型：undefined
对比java中的数据类型：
整数：byte short int long 小数：float double 字符：char 布尔：boolean 字符串：String
八、变量：
8.一、定义：就是存放数据的、内疗能够存储任意数据
8.二、声明变量：
var 变量名称 = 存储的数据; (variable 变量)
8.三、变量命名规范：
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则使用什么类型的变量就要定义什么类型的。
九、检测数据类型：
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>
十、算术运算符
+ - * / % ++ --
注意：
1. 因为js中的小数和整数都是number类型，不存在相似整数除以整数仍是整数的结论。 2. 字符串和其余的数据使用+号运算，会链接成一个新的字符串。 3. 字符串使用除了+之外的运算符：若是字符串自己是一个数字，那么会自动转成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>
十一、关系（比较）运算符
> >= < <= != == 等于（只比较内容） === 恒等于（比较内容的同时还要比较数据类型） 注意：关系运算符返回的结果只有两个：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>
十二、逻辑运算符
&& 与 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>
1三、三元运算符：
条件？表达式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>
1四、if条件语句
这个和Java中if语句同样。
演示：
<script>
var score = 59;
if (score >= 90) {
alert("优秀");
} else if (score >= 80) {
alert("良好");
} else if (score >= 60) {
alert("及格");
} else {
alert("不及格");
}
</script>
1五、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>
1六、循环结构 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);
1七、循环嵌套
演示案例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) + " ");
document.write("</td>");
}
document.write("</tr>");
}
document.write("</table>");
</script>
1八、自定义函数
函数是命名的独立的语句段，这个语句段能够被看成一个总体来引用和执行：
格式：
function 函数名(形式参数){函数体}
调用函数：函数名(实际参数);
18.一、函数只有被调用后才会执行
18.二、若是函数须要返回值、直接使用return 返回、不会像java同样要考虑返回值的类型
<script type="text/javascript">
// 定义一个函数 : function
function demo2() {
return 666;
}
// 调用函数 :
alert(demo2());
</script>
18.三、若是函数须要传递参数、不须要指定参数的类型、直接使用变量便可
<script type="text/javascript">
// 定义一个函数 : function function demo3(a, b) {
return a + b;
}
// 调用函数 :
alert(demo3(10, 20));//显示30
</script>
18.四、js中出现二个重名的函数名、后者会把前面的覆盖掉
对比java、java有重载（同名不一样参）、重写（同名同参同返回值类型、方法体不同）
演示：
<script type="text/javascript">
// 定义一个函数 : function
function demo4(a, b) {
alert("调用1...");
}
function demo4() {
alert("调用2...");
}
demo4(10, 20);
demo4();
</script>
1九、匿名函数
匿名函数是没有名字的函数
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>
2一、js事件
21.一、事件概述：
事件三要素： 1. 事件源：被监听的html元素（就是这个事件加给谁），就是某个（某些）html标签 2. 事件类型：某类动做，例如点击事件，移入移除事件，敲击键盘事件等 3. 执行指令：事件触发后须要执行的代码，通常使用函数进行封装 语法格式：事件源.事件类型=执行指令
21.二、经常使用的事件：
案例：
<!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>
相关文章
- 1. JavaScript基础知识总结
- 2. javascript基础知识总结
- 3. javascript基础知识点总结
- 4. JavaScript中BOM的基础知识总结
- 5. JavaScript基础知识易错点总结
- 6. 【JavaScript】基础知识点总结
- 7. javascript基础知识总结（概念篇）
- 8. javascript基础知识点总结（二）
- 9. JavaScript基础知识总结笔记
- 10. javascript基础知识点总结（一）
- 更多相关文章...
- • Kotlin 基础语法 - Kotlin 教程
- • Scala 基础语法 - Scala教程
- • 算法总结-双指针
- • 算法总结-回溯法
相关标签/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
最新文章
- 1. Window下Ribbit MQ安装
- 2. Linux下Redis安装及集群搭建
- 3. shiny搭建网站填坑战略
- 4. Mysql8.0.22安装与配置详细教程
- 5. Hadoop安装及配置
- 6. Python爬虫初学笔记
- 7. 部署LVS-Keepalived高可用集群
- 8. keepalived+mysql高可用集群
- 9. jenkins 公钥配置
- 10. HA实用详解
欢迎关注本站公众号,获取更多信息
