JavaScript基本语法

JavaScript

JavaScript = ECMAScript + JScript自己特有的(BOM+DOM)

ECMAScrpit：客户端脚本语言的标准

☆基本语法

1. js引入

1.  内部js

<!DOCTYPE html>

<html>
    <head>
        <meta charset="utf-8">
        <title>变量</title>
    </head>
    <body>
        <h1>JavaScript 变量</h1>
        <script type="text/JavaScript">
            var name='zhangsan';
            //alert(name);
            //console.log(name);
            document.write(name);
        </script>
    </body>
</html>

2. 外部js

注：同一级直接写文件名
上一级 ../
上上一级 ../../

2. 注释

1. 单行注释：//注释内容
2. 多行注释：/* 注释内容 */

3. 数据类型

* 原始数据类型：

1. number：整数/小数/NaN(not a number 一个不是数字的数字)
* Number():转化给字符串类型
* parseInt()：强制转化为正数
* parseFloat()：强制转化为小数
* isNaN():判断是否为NaN
2. string：字符串
* 非字符串类型转换为字符串类型
* a.toString()
* String(a)
3. boolean：true/false
* 转化为boolean类型
* Boolean(2) #数字除了0，其余都为true
# 引号中有数据为true，其余为false。例如：NaN null等为false，"a1"、true、'0'等为true
4. null：一个对象为空的占位符
5. undefined：未定义，默认值
注：用typeof()可查看变量类型
* 引用数据类型：对象

4. 变量

* 变量：一小块储存数据的内存空间
* Java语言是强类型语言，而JavaScript是弱类型的语言。
* 强类型：开辟空间时，定义了空间存储数据的数据类型，只能存储指定数据类型的数据
* 弱类型：开辟空间时，不定义存储的数据类型，可以存放任意数据类型的数据
* 语法：var 变量名 = 初始化的值；

5. 运算符

1. 一元运算符：只有一个运算数的运算符
++，--，+(正号)
2. 算数运算符
+，-，*，/，%...
3. 赋值运算符
=，+=，-=
4. 比较运算符
<,>,<=,>=,==, ===(全等于)
==：数值大小相等即可，不需要数据类型也一样
===：大小相等，数据类型一样
5. 逻辑运算符
&& ，||，！
6. 三元运算符
？：
* a = 6>5? 3:2 #结果为3

6. 流程控制语句

1. if...else...
2. switch--case
· var a=4;
· switch (a) {
· case 2:
· alert("true");
· break;
· case 4:
· alert("false");
· default:
· break;
· }
3. while
· var a=4;
· while(a>=0){
· console.log("i love");
· a--;
· }
4. do...while
· var a=4;
· do{
· console.log("i love");
· a--;
· }while(a>=0)
5. for
· var a=4;
· for (let i = 0; i < 6; i++) {
· console.log("i love "+i);
· }

7. JS特殊语法

每行；可写，可省略
用var定义为局部变量，不用var则为全局变量

☆基本对象

1. Function函数对象

1. var fun = new Function(形参，方法体) (不常用)
2. function 方法名(形参){ 方法体 }
· function fn(n) {
· var num=0;
· for (var i = 0; i <= n; i++) {
· num += i;
· }
· return num;
· }
· var res = fn(100); # res=5050
3. var 方法名 = function(形参){ 方法体 }

2. Array数组对象

1. 创建数组
1. var arr = new Array(元素列表)
2. var arr = new Array(默认长度)
3. var arr = [元素列表]
2. 方法
* join(参数)：将数组中的元素按指定分隔符拼接成字符串
* push(参数)：向数组末尾添加一个或多个元素，并返回新的数组长度

3. 属性
* length：数组的长度
4. 特点
1. JS中，数组元素的类型是可以变的
2. JS中，数组长度是可变的

3. Boolean

4. Date日期对象

1. 创建
var date = new Date()
2. 方法
* toLocaleString，返回当前date对应的时间本地字符串格式
* getTime(),获取1970年1月1日零点到现在的毫秒值

5. Math

1. 创建
特点：不用创建直接使用。Math.方法名();
2. 方法
random()：返回一个0~1之间的随机数（含0不含1）
cell()：对数进行向上取整
floor()：对数进行向下取整
round()：四舍五入取整
3. 属性
PI

6. Number

7. String

8. RegExp正则表达式对象

* 正则表达式：定义字符串的组成规则。
	1. 单个字符  
		如：[a]  [ab]  [a-zA-Z0-9_] 
	        * 特殊符号代表特殊含义的单个字符  
		\d：单个数字字符  
		\w：[a-zA-Z0-9_]
	2. 量词符号  
		" ? ": 表示0次或1次 
		" * ": 表示出现0次或多次
		" + ": 出现1次或多次  
		{m,n}: 表示m<= X <=n  
		 m如果缺省:{,n}最多n次  ； n如果缺省:{m,}最少m次  
	3. 开始结束符号  
		 ^: 开始符号  
		 $: 结束符号
* 正则对象
	1. 创建
		* var reg = new RegExp("正则表达式")
		* var reg = /^正则表达式&/
	2. 方法
		* test(参数)：验证指定的字符串是否符合正则定义的规则

9. Global

1. 特点：全局对象，Global中封装的方法不需要对象就可以直接调用
2. 方法：
encodeURI(): url 编码
decodeURI(): url 解码
encodeURIComponent(): url 编码，编码的字符更多
decodeURIComponent(): url 解码
parseInt(): 将字符串转成数字,逐一判断每个字符是否为数字，直到不是数字为止，将前面数字部分转为number
eval(): 将JavaScript字符串，并把它作为脚本代码来执行
var code = "alert("123")"; //code本为字符串
eval(code); //被作为脚本执行，将弹出123

BOM

1. 概念：

Browser Object Model 浏览器对象模型
* 浏览器的各个组成部分封装成的对象

2. 组成：

* window ：窗口对象
* Navigator：浏览器对象
* Screen：显示器屏幕对象
* History：历史记录对象
* Location：地址栏对象

3. window：窗口对象

1. 创建
2. 方法
* 与弹出窗口有关的方法
1. alert("Hello") = window.alert("Hello") 显示一个带有一段消息各一个确认按钮的警告框
2. confim() 显示带有一段消息以及确认按钮和取消按钮的对话框。
* 如果用户点击确定返回 true
* 如果用户点击取消返回 false
3. prompt() 显示可提示用户输入的对话框。
* 返回用户输入的值
* 与打开和关闭有关的方法
1. close() 关闭浏览器窗口
* 谁调用关闭谁
2. open("网址") 打开一个新的浏览器窗口
* 返回一个新的window对象
* 与定时器有关的方法
1. setTimeout() 设定定时器
* 参数两个
1. js代码或者方法对象
2. 毫秒值
* 返回值，唯一标识，用于取消定时器
2. clearTimeout() 关闭定时器
3. setInterval() 设定循环定时器
4. clearInterval() 关闭循环定时器
3. 属性
1. 获取其他BOM对象
hiatory、location、Navigator、Screan
2. 获取DOM对象
document
4. 特点
* 不需要创建可以直接使用
* window引用可以省略。

4. Location地址栏对象

1. 创建(获取)
1. window.location
2. location
2. 方法
* reload() 重新加载当前文件(刷新)
3. 属性
* href

5. History历史记录对象

1. 创建(获取)
1. window.history
2. history
2. 方法

* back() 加载 history 列表中的前一个URL
* forward() 加载 history 列表下一个URL
* go() 加载 history 列表中某个具体页面
3. 属性
* length 返回当前窗口历史列表中URL数量

DOM

1. 概念：Docunent Object Model 文档对象模型

* 将标记语言文档的各个组成部分，封装成对象。可以使用这些对象，对标记语言文档进行CRUD的动态操作

2. W3S DOM 标准被分为3个不同的部分

* 核心 DOM - 针对任何结构化文档的标准模型
1. Document：文档对象
2. Element：元素对象
3. Attribute：属性对象
4. Text：文本对象
5. Comment：注释对象
* Node：节点对象，其他5个对象的父对象
* XML DOM - 针对 XML 文档的标准模型
* HTML DOM - 针对 HTML 文档的标准模型

3. 核心 DOM 模型

* Document：文档对象
1. 创建(获取)：在HTML中可以用window对象获取
1. window.document
2. document
2. 属性
3. 方法
1. 获取Element对象
1. getElementById()：根据id获得属性对象，id属性值一般唯一
2. getElementsByTagName()：根据元素标签名称获取元素对象们。返回值为一个数组
3. getElementsByClassName()：根据class属性值获取元素对象们。返回值为一个数组
4. getElementsByName()：根据name属性值获取元素对象们。返回值为一个数组
2. 创建其他DOM对象
* createAttribute(name)：创建属性
* createComment()
* createElement()：创建标签
* createTextNode()：创建节点

* Element：元素对象
1. 获取/创建：通过document来完成
2. 方法
1. removeAttribute()：删除属性
2. setAttribute()：设置属性

* Node：节点对象
1. 特点：所有DOM对象都可以被认为是一个节点
2. 方法
* CRUDdom树：
* appendChild()：向节点的子节点列表的结尾添加一个新的子节点
* removeChild()：删除(并返回)当前节点的指定子节点
* replaceChild()：用新的节点替换子节点
3. 属性
* parentNode 返回当前节点的父节点

4. HTML DOM 模型

1. 标签体的设置和获取：innerHTML
2. 使用html元素对象的属性
* 查看API
3. 控制元素样式
1. 使用元素的style属性设置
* div.style.border = "1px solid red";
font-size --> fontSize
2. 提前定义好类选择器的样式
* div.className = "d1";

事件监听机制

1. 概念：某些组件被执行了某些操作后，触发某些代码的执行。

1. 事件：某些操作如：单击事件，双击事件，键盘事件，鼠标事件
2. 事件源：组件。如：按钮文本输入框
3. 监听器：代码
4. 注册监听：将事件，事件源，监听器结合在一起。当事件源上发生了某个事件，则触发执行某个监听器代码。

2. 常见的事件

* 点击事件
* onclick：单击事件
* ondblclick：双击事件
* 焦点事件
* onblur：失去焦点
* onfocus：获得焦点
* 加载事件
* onload：加载事件
* 鼠标事件
* onmousedown 鼠标被按下
* onmouseup 鼠标被松开
* onmousemove 鼠标被移动
* onmouseover 鼠标移动到元素之上
* onmouseout 鼠标从元素上移开
* 键盘事件
* onkeydown 某个按键被按下
* onkeyup 某个按键被松开
* onkeypress 某个按键被按下并松开
* 选择和改变
* onchange 域的内容被改变
* onselect 文本被选中
* 表单事件
* onsubmit 确认按钮被点击
* onreset 重置按钮被点击

posted @ 2020-02-14 23:39 yhking 阅读(290) 评论(0) 收藏举报

刷新页面返回顶部

满院书亭