JavaScript
- JavaScript是一门跨平台，面向对象的脚本语言，来控制网页行为的，它能够使网页可交互。
- 基础语法与java类似
-
JavaScript（简称：JS） 在 1995 年由 Brendan Eich 发明，并于 1997 年成为一部 ECMA 标准。
-
ECMAScript 6 (ES6) 是最新的 JavaScript 版本（发布于 2015 年)。
JavaScript引入方式
内部方式
- 在html文件中，使用<script>标签来编写js代码。
- 建议编
写在<body>元素底部，可以提高显示速度，将javaScript写在body中的最后，先加载html界面。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> </body> </html> <!-- 内部引入--> <script> alert("京阿"); </script>
- 将js代码编写为一个后缀名为js的文件中。
- 在html文件中通过<script scr="js路径"></script>引入文件
<script src="../js/alert.js"></script>
alert("真菜");
-
区分大小写：与 Java 一样，变量名、函数名以及其他一切东西都是区分大小写的
-
每行结尾的分号可有可无、建议写上
-
注释
-
单行注释：// 注释的内容
-
多行注释：/* 注释的内容 */
-
-
一对大括号标识代码块
输出语句
- windows.alert(): 写入警告框
- document.write():写入到html页面
- console.log();在控制台输出
<script> window.alert("hello js~"); //弹出警告框 document.write("<h4>四级标题</h4>"); //写出html文档 console.log("js log..."); //写出日志到控制台 </script>
变量介绍
- JavaScript 中用var关键字(variable的缩写)类声明变量
- Java是一门弱类型语言，变量可以存放不同类型的值
JavaScript
var age=10； age="王王"
变量
弱类型语言，变量可以存放不同类型的值，其他与Java一样
var
- 作用域：全局变量
let
- 作用域 let的关键字存在的代码快内
- 不允许重复声明
const
- 定义一个只读的常量
数据类型
number :数字（整数，小数，NAN）
string：字符，字符串，单双引皆可
boolean: 布尔。
null: 对象为空 对于null会返回object，null被认为是对象占位符
undefined:未定义
typeof: 获取数据类型
运算符
类似于Java
==
- 1判断类型是否一样，不一样进行类型转换
- 再去比值
===全等于
- 不会进行类型转换
类型转换
其他类型转化为bumber
1 string:按照字符转的子面值，转为数字，如果字面值不是数字，转化为NAN
var str=+"adc";+号代表正数 parseInt()
2 boolean true 转换为1 false 转换为0
其他类型转换为boolean（用于简化健壮性判断）
1 number 0和NAN转换为0，其他数字为true
2 string 空字符串为false
3 null 为false
4 undefined为false0
流程控制语句
和Java一样
函数
通过function关键词进行定义，两种语法为
- function functionName（参数1，参数 2...）{
要执行的代码
//不需要写返回值，形参不需要类型
//有返回值直接return
}
- var functionName=function（参数1，参数2）
{
要执行代码
}
- 传递参数的时候传几个都能运行，但是没太意义
JavaScript对象
Array
var 变量名 = new Array(元素列表);
-
格式二
var 变量名 = [元素列表];
方法 put（E...e） splice 参考手册w3c
String
var 变量名 = new String(s);
-
格式二
var 变量名 = s; // 单引、双引都可以
trim() 去除空格
自定义对象
var 对象名称 = {
属性名称1:属性值1,
属性名称2:属性值2,
...
函数名称:function (形参列表){}
...
};
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>自定义对象</title>
</head>
<body>
</body>
</html>
<script>
var person = {
name : "百丽",
age : 26,
eat:function () {
alert("上班干活...");
}
};
alert(person.name);
alert(person.age);
person.age = 38;
alert(person.age);
person.eat();
</script>
Window对象
-
Browser Object Model 浏览器对象模型
-
JavaScript 将浏览器的各个组成部分封装为对象
-
Window：浏览器窗口对象
-
Navigator：浏览器对象 (了解)
-
Screen：屏幕对象 (了解)
-
History：历史记录对象
-
Location：地址栏对象
-
2.Window窗口对象
-
-
属性：获取其他 BOM对象
- 方法
-
Document Object Model 文档对象模型
-
将标记语言的各个组成部分封装为对象
-
Document：整个文档对象
-
Element：元素对象
-
Attribute：属性对象
-
Text：文本对象
-
Comment：注释对象
-
-
JavaScript 通过 DOM， 就能够对 HTML进行操作了
-
改变 HTML 元素的内容
-
改变 HTML 元素的样式（CSS）
-
对 HTML DOM 事件作出反应
-
添加和删除 HTML 元素
-
-
getElementById(id值)：根据id属性值获取，返回一个Element对象
-
getElementsByTagName(标签名)：根据标签名称获取，返回Element对象数组
-
getElementsByName(name值)：根据name属性值获取，返回Element对象数组
-
getElementsByClassName(class值)：根据class属性值获取，返回Element对象数组
事件监听
-
-
事件监听：JavaScript 可以在事件被侦测到时执行对应的代码。
事件绑定
方式一：通过 HTML标签中的事件属性进行绑定
<input type="button" onclick='on()’>
function on(){
alert("我被点了");
}
方式二：通过 DOM 元素属性绑定
<input type="button" id="btn"> document.getElementById("btn").onclick = function (){ alert("我被点了"); }
常见事件
正则表达式
定义了字符串组成规则
-
-
直接赋值
var reg = /^w{6,12}$/;-
创建对象
var reg = new RegExp("^\w{6,12}$"); -
-
成员方法
test(str)：用于判断是否满足指定的规则。满足为true、不满足为false。
