22-javaScript基础(前端)
感谢你的路过，希望学生的笔记能给你一点微不足道的参考
Java基础思维导图，完整Java体系的链接
目录标题
-
- 一，概述
-
- 1.1什么是JavaScript？
- 1.2JavaScript的作用？
- 1.3JavaScript的历史（了解）？
- 二，JavaScript的用法
-
- 2.1HTML页面中的JavaScript
- 2.2外部的JavaScript
- 2.3标签属性中的JavaScript
- 三，JavaScript显示数据
- 四，JavaScript基本语法
-
- 4.1JavaScript变量
- 4.2JavaScript的语句
- 五，JavaScript的数据类型
-
- 5.1基本类型
- 5.2引用数据类型：
- 六，JavaScript对象
-
- 6.1JavaScript的String对象
- 6.2JavaScript的Array对象
- 6.3JavaScript的Date对象
- 6.4JavaScript的Math对象
- 七，JavaScript的函数
-
- 7.1isNaN(param)
- 7.2parseFloat(String)
- 7.3parseInt(string,radix)
- 7.4JavaScript的自定义函数
- 7.5JavaScript的匿名函数
- 八，JavaScript变量的作用域
-
- 8.1局部 JavaScript 变量
- 8.2全局 JavaScript 变量
- 8.3变量的生命周期
- 九，JavaScript自定义对象
- 十，JavaScript Window--浏览器对象模型
-
- 10.1浏览器对象模型 (BOM)
- 10.2BOM：
- 10.3window对象
- 10.4window对象属性
- 10.5history对象
- 10.6location对象
- 10.7window对象方法
- 十一，JavaScript之事件
-
- 11.1HTML事件
- 11.2常用的HTML事件
- 十二，JavaScript之DOM模型
- 十三，HTML DOM 元素 (节点)
- 十四，补充：
-
- 14.1正则表达式
- 14.2动态表格
- 练习
- 作业
一，概述
1.1什么是JavaScript？
JavaScript 是脚本语言，是一种解释性脚本语言（代码不进行预编译），一种轻量级的编程语言。可插入 HTML 页面的编程代码。插入 HTML 页面后，可由所有的现代浏览器执行。很容易入门。
1.2JavaScript的作用？
1、为网页添加各式各样的动态功能,
2、为用户提供更流畅美观的浏览效果。 通常JavaScript脚本是通过嵌入在HTML中来实现自身的功能的。
1.3JavaScript的历史（了解）？
1. 1992年，Nombase公司，开发出第一门客户端脚本语言，专门用于表单的校验。命名为 ： C-- ，后来更名为：ScriptEase
2. 1995年，Netscape(网景)公司，开发了一门客户端脚本语言：LiveScript。后来，请来SUN公司的专家，修改LiveScript，命名为JavaScript
3. 1996年，微软抄袭JavaScript开发出JScript语言
4. 1997年，ECMA(欧洲计算机制造商协会)，制定出客户端脚本语言的标准：ECMAScript，就是统一了所有客户端脚本语言的编码方式。
二，JavaScript的用法
2.1HTML页面中的JavaScript
在html页面中的脚本必须位于script围堵标签之间，script标签放在head中可以，body中也可以， 放在最后也可以，对位置要求不严格。
有些案例中可能会在 script 标签中出现type=“text/javascript”。现在完全可以省略了，JavaScript已 经 是所有现代浏览器以及 HTML5 中的默认脚本语言。
代码：
DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>js脚本位置-html页面中title>
<script>
alert("hello JavaScript1-1");
script>
<script>
alert("hello JavaScript1-2");
script>
head>
<body>
<script>
alert("hello JavaScript2-1");
script>
<script>
alert("hello JavaScript2-2");
script>
body>
html>
<script>
alert("hello JavaScript3-1");
script>
<script>
alert("hello JavaScript3-2");
script>
2.2外部的JavaScript
可以把脚本保存到外部文件中。外部文件通常包含被多个网页使用的代码。
外部 JavaScript 文件的文件 扩展名是 .js。
当我们使用外部文件时，在HTML页面的script 标签的 “src” 属性中设置该 .js 文件：
外部脚本不能包含 script 标签。
代码：
DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>引用外部文件title>
<script type="text/javascript" src="js/myScript.js" >script>
<script>
fun1();
script>
head>
<body>
body>
html>
2.3标签属性中的JavaScript
直接编写在HTML标签的一些属性中，用于简单的JavaScript代码的编写，用的偏少。
代码：
DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>js脚本位置-标签内部title>
head>
<body>
<a href="javascript:alert('hello js');">行内的jsa>
body>
html>
三，JavaScript显示数据
使用window.alert()弹出框
PS：这里的window可以省略，等价于alert(“hello world”);
使用document.write()将内容写入到html文档
使用innerHTML写入到html元素
使用console.log写入到浏览器控制台
代码：
DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>js显示数据的方式title>
<script>
//方式1：弹框输出
alert("hello js");
//方式2：在页面输出
document.write("hello world1");
script>
head>
<body>
<div id="div1">div1div>
<script>
//方式3：要注意的问题，先加载完页面元素才能获取页面元素，即getElementById函数要在被获取的标签加载完毕才能使用
document.getElementById("div1").innerHTML="hello world2";
//方式4：输出内容到控制台
console.log("hello world3");
script>
body>
html>
四，JavaScript基本语法
JavaScript 是一个脚本语言。它是一个轻量级，但功能强大的编程语言。 JavaScript语法跟Java很相似，但是也有区别。JavaScript是弱语言类型，即有些时候有些错误不影响运行，但是依然推荐大家按照规范去编写代码，语言弱，程序员不能弱。
4.1JavaScript变量
声明变量的关键字：var
语法：var 变量名称；
变量的命名规则：
变量必须以字母开头
变量也能以 $ 和 _ 符号开头
变量名称对大小写敏感（y 和 Y 是不同的变量）
不能使用关键字保留字
变量的命名规范： 见名知意 。
例如：breadPirce,userService等，避免无意义的a,b,c等
推荐驼峰命名法，即第一个单词的首字母小写，以后每个单词的首字母大写。例如lastName
代码：
DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>变量title>
<script>
var myCompany; //声明变量
myCompany='开课吧'; //赋值
var x=5;//声明的同时赋值
var y=6;
var z=x+y;//变量也可以存储表达式
console.log(z);
script>
head>
<body>
body>
html>
4.2JavaScript的语句
JavaScript 语句向浏览器发出的命令。语句的作用是告诉浏览器该做什么。 JavaScript 是脚本语言，浏览器会在读取代码时，逐行地执行脚本代码。而对于传统编程来说，会在执 行前对所有代码进行编译。
JavaScript中也有分支结构和循环结构，语法与java类似，一般一行只写一条语句，每句结尾编写分号结束。
五，JavaScript的数据类型
5.1基本类型
字符串String
数字Number
JavaScript 只有一种数字类型。数字可以带小数点，也可以不带：
布尔Boolean
只能有两个值：true 或 false。
空Null
未定义Undefined
表示变量不含有值。可以通过将变量的值设置为 null 来清空变量。 共有4中情况会出现undefined的值：
1、变量声明且没有赋值；
2、获取对象中不存在的属性时；
3、函数需要实参，但是调用时没有传值，形参是undefined；
4、函数调用没有返回值或者return后没有数据，接收函数返回的变量是undefined。
Symbol
Symbol 是 ES6 引入了一种新的原始数据类型，表示独一无二的值
5.2引用数据类型：
对象(Object)、数组(Array)、函数(Function)
JavaScript拥有动态类型
这意味着相同的变量可用作不同的类型，不推荐这种写法。尽量开始声明变量的时候就确定好将要 盛放什么类型的值，以后尽量不随意改变。
JavaScript中的运算符
算数运算符：+ - * / % 、 ++ 、 –
赋值运算符：= 、 +=、 -= 、*= 、 /= 、 %=
字符串的连接符：+
逻辑运算符： && || ！
条件运算符：？:
比较运算符： == 、！= 、 > 、= 、 <=
以上运算符的运算规则与java一样，在这里不再赘述。接下来强调两个新的比较运算符：
比较运算 描述
=== 绝对等于（值和类型均相等）
!== 不绝对等于（值和类型有一个不相等，或两个都不相等）
代码：
DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>数据类型title>
<script>
//1、字符串类型
var gameName = "英雄联盟";
var hairstylist = 'tony';
//PS：注意引号嵌套
var message1 = '我的发型师是"tony"老师';
var message2 = "我的发型师是'tony'老师";
//2、数字 Number
var breadPrice = 15.9;
var gameLevel = 66;
//极大或极小的数字可以通过科学计数法来书写：
var myMoney1 = 666e5; //66600000
var myMoney2 = -666e-5; //-0.00666
//3、布尔类型 Boolean
var isUnderstand = true;
var isSingle = false;
//4、空 null
var email = null;
//5、未定义 undefined
var obj;
alert(obj); //obj值为undefined
alert(obj.name); //报错信息： "Uncaught TypeError: Cannot read property 'name' of undefined"
function printNum(num) {
alert(num);
}
var result = printNum(); //调用函数未传递参数，执行函数的时候num的值是undefined
alert(result); //result的值也是undefined，因为printNum()没有返回值
script>
head>
<body>
body>