关键词：
javascript
大家好呀，我是小笙，我学习了韩老师VIP课程，以下是我的javascript学习笔记，和大家分享一下
javascript
基本概念
概念：JavaScript能改变 HTML内容，能改变 HTML属性，能改变 CSS 样式，能完成 页面的数据验证
特点:
-
JavaScript 是一种解释型的脚本语言，C、C++等语言先编译后执行，而 JavaScript 是在程序 的运行过程中逐行进行解释
-
JavaScript 是一种基于对象的脚本语言，可以创建对象，也能使用现有的对象(有对象)
-
JavaScript 是弱类型的，对变量的数据类型不做严格的要求，变量的数据类型在运行过程可以变化
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <!-- js 代码可以写在 script 标签中 --> <!-- type="text/javascript" 表示这个脚本(script)类型是 javascript --> <script type="text/javascript"> var age = 80; console.log(typeof age); age = "罗念笙"; console.log(typeof age); </script> </head> <body> </body> </html> -
跨平台性（只要是可以解释 JS 的浏览器都可以执行，和平台无关）
两种方式使用javascript语句
1.方式一：在script中书写
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<!-- 方式一：在script中书写：可以在head标签，body标签以及html标签之外 推荐放在head标签里 -->
<script type="text/javascript">
console.log("head内")
</script>
</head>
<body>
<script type="text/javascript">
console.log("body内")
</script>
</body>
</html>
<script type="text/javascript">
console.log("html外")
</script>
2.方式二：外部引入
// js文件
alert("外部引入");
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<!-- 2.方式二：外部引入 -->
<script type="text/javascript" src="js/demo.js"></script>
</head>
<body>
</body>
</html>
变量
概念:变量表示存储数据的容器
数据类型介绍
- 数值类型： number
- 字符串类型： string
- 对象类型：object
- 布尔类型： boolean
- 函数类型： function
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
var test = 100;
console.log(typeof test);
//注意：String 字符串可以双引号括起来，也可以单引号括起来 "a book of JavaScript"、'abc'、 "a"、""
test = "100";
console.log(typeof test);
test = document.getElementById("body");
console.log(typeof test);
test = true;
console.log(typeof test);
test = new Function();
console.log(typeof test);
</script>
</head>
<body id="body">
</body>
</html>
特殊值
- undefined 变量未赋初始值时，默认 undefined
- null 空值
- NaN Not a Number 非数值
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
var test;
console.log(test);
console.log(typeof test);
test = 1 + 'age';
console.log(test);
console.log(typeof test);
test = null;
console.log(test);
console.log(typeof test);
</script>
</head>
<body>
</body>
</html>
运算符
算术运算符
赋值运算符
关系运算符
注意区别 == 和 ===
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
a = "100";
b = 100;
// 等于： == 是简单的做字面值的比较
console.log(a == b);
// 全等于： === 除了做字面值的比较之外，还会比较两个变量的数据类型
console.log(a === b)
</script>
</head>
<body>
</body>
</html>
逻辑运算符
注意 && 和 | | 的使用
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
// 在 JavaScript 语言中，所有的变量，都可以做为一个 boolean 类型的变量去使用
// 0 、null、 undefined、NaN、""(空串) 都认为是 false
if(!0) console.log(0);
if(!null) console.log(null);
if(!undefined) console.log(undefined);
if(!"") console.log("");
// && 且运算，有两种情况 => 老韩解读(即 && 返回值是遵守短路与的机制)
// (1)当表达式全为真的时候,返回最后一个表达式的值
// (2)当表达式有假的时候,返回第一个为假的表达式的值
console.log(1 && 2); // 2
console.log(0 && null); // 0
console.log(1 && null); // null
// || 或运算, 有两种情况 => 老韩解读(即|| 返回值是遵守短路或的机制)
// (1)当表达式全为假的时候，返回最后一个表达式的值
// (2)当表达式有真的时候。返回第一个为真的表达式的值
console.log(0 || null); // null
console.log(1 || 2); // 1
console.log(0 || 2); // 2
</script>
</head>
<body>
</body>
</html>
条件符运算
类似Java的三元运算符
<script type="text/javascript">
varres = 5 > 0?"hello":"ok";
alert(res); // hello
</script>
数组
javascript数组定义使用的4种方式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
// 方式一
var cars = ["byd","xd","bwm"];
console.log(cars);
console.log(cars[0]);
// 方式二
var cars2 = []; // 空数组
cars2[0] = "byd";
cars2[1] = "xd";
cars2[2] = "bwm";
console.log(cars2);
// 方式三
var cars3 = new Array("byd","xd","bwm");
console.log(cars3)
// 方式四
var cars4 = new Array();
cars4[0] = "byd";
cars4[1] = "xd";
cars4[2] = "bwm";
console.log(cars4);
</script>
</head>
<body>
</body>
</html>
数组使用和遍历
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
var cars = ["byd","xd","bwm"];
console.warn("数组长度: " + cars.length)
for(i = 0;i< cars.length;i++)
console.log(cars[i]);
</script>
</head>
<body>
</body>
</html>
函数
函数概念
概念：函数是由事件驱动的，或者当它被调用时，执行的可重复使用的代码
在 js 中如果要执行函数，有两种方式
- 主动调用函数
- 通过事件去触发该函数
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
function f()
alert("调用方法f()");
// 主动调用f()
f();
</script>
</head>
<body>
<!-- 通过按钮事件去触发该函数 -->
<button type="button" onclick="f()">按钮</button>
</body>
</html>
函数定义方式
方式 1: function 关键字来定义函数
// 格式
function 函数名(形参列表)
函数体
return 表达式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
function f()
console.log("调用方法f()");
function f2(item)
console.log("调用方法f(item)"+item);
f();
f2(100);
</script>
</head>
<body>
</body>
</html>
方式 2: 将函数赋给变量
// 格式
var 函数名 = function(形参列表)
函数体
return 参数列表
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
var f = function()
console.log("f()被调用")
var f2 = function(item)
console.log("f(item)被调用")
f();
f2(100);
var f3 = f;
f3();
</script>
</head>
<body>
</body>
</html>
JavaScript 函数注意事项和细节
-
如果函数的函数名相同，形参列表个数最多的会覆盖掉其他相同名字的函数
<!DOCTYPE html> <html> 查看详情javascript（14）jquery（javascript库）
JavaScript框架（库）JavaScript高级程序设计（特别是对浏览器差异的复杂处理），通常非常困难也非常耗时。为了应对这些调整，很多的JavaScript(helper)库应运而生。这些JavaScript库常被称为JavaScript框架。jQueryjQuery是眼下最受欢迎的Ja... 查看详情
javascript基础(代码片段)
JavaScript基础HTMLJavaScriptJavaScript与PHP不同HTML<.script>标签JavaScript输出使用innerHTML写入HTML元素使用document.write()使用window.alert()JavaScript语句JavaScript语法JavaScript注释JavaScript关键词JavaScript标识符JavaScript 查看详情
javascript第07章javascript库
javascript
一、Javascript在网页的用法Javascript加入网页有两种方法：1、直接加入HTML文档这是最常用的方法，大部分含有Javascript的网页都采用这种方法，如：<scriptlanguage="Javascript"><!--document.writeln("这是Javascript！采用直接插入的方法！... 查看详情
javascript介绍(代码片段)
文章目录一.JavaScript介绍二.JavaScript的引入方式三.JavaScript的变量与数据类型四.JavaScript中的函数五.JavaScript变量的作用域六.JavaScript运算符七.JavaScript判断语句八.JavaScript数组九.JavaScript循环语句十.JavaScript获取页面标签十一.JavaScrip... 查看详情
JavaScript 闭包和 JavaScript 的区别？ [关闭]
】JavaScript闭包和JavaScript的区别？[关闭]【英文标题】：DifferencebetweenJavaScriptClosureandJavaScript?[closed]【发布时间】：2011-07-2721:58:02【问题描述】：我在JavaScript方面有一点经验，但JavaScriptClosure让我很困惑。【问题讨论】：Java闭包... 查看详情
javascript
javascript组成： 由核心语法(ECMAScript)、浏览器对象模型(BOM)、文档对象模型(DOM)3个不同部分组成什么是javaScript： javaScript主要用来向HTML页面中添加交互行为 javaScript是一种脚本语言，语法和java类似 javaScript一般用来... 查看详情
javascript.01--javascript基础
Javascript基础１ 聊聊Javascript１.1 Javascript的历史来源 94年网景公司 研发出世界上第一款浏览器。 95年sun公司 java语言诞生 查看详情
javascript之基础-1javascript(概述基础语法)
一、JavaScript概述JavaScript概念 -JavaScript是一种运行于JavaScript解释器/引擎中的解释型脚本语言 - JavaScript解释器作为JS脚本的运行环境，有如下两种呈现方式 -独立安装的JavaScript解释器; -嵌入在... 查看详情
javascript
1.JavaScript是一种基于对象和事件驱动的、并具有安全性能的脚本语言2.JavaScript组成JavaScript：由ECMAScript,DOM,BOM三个部分组成3.JavaScript的基本结构<scripttype=”text/javascript”> //内容</script>注意：JavaScript中的<!---->表示... 查看详情
javascript[最佳实践]适用于现代javascript#javascript#loop(代码片段)
javascript概述
初识JavaScrip1什么是JavaScript2JavaScript概述3网页组成4常见浏览器及特点5浏览器内核的分类6JavaScript的诞生和发展7JavaScript的用途8JavaScript的特点9JavaScript的组成1什么是JavaScript2JavaScript概述JavaScript：是Web开发领域中的一种功能强... 查看详情
javascript模板javascript(代码片段)
javascript使用javascript(代码片段)
javascript[测试]#javascript(代码片段)
javascript使用javascript(代码片段)
javascript承诺javascript(代码片段)