JavaScript 简单学习

函数
1.创建
函数创建有三种方法

方法一： var fun = new Function(形式参数列表,方法体);
方法二：function 方法名称(形式参数列表){
方法体
}

方法三： var 方法名 = function(形式参数列表){
方法体
}
主要使用方法2
例：function fun2(a , b){
alert(a + b);
}
注意：在形参列表中是不要写类型的，直接写值就好了。
这就是和java的区别。
特点：
1.形参的类型不用写,返回值类型也不写。
2.方法是一个对象，如果定义名称相同的方法，会覆盖
3.在JS中，方法的调用只与方法的名称有关，和参数列表无关
4. 在方法声明中有一个隐藏的内置对象（数组），arguments,封装所有的实际参数。
上面这四点与java有所差别，需要引起注意。
特点4有关应用：

function add (){var sum = 0;for (var i = 0; i < arguments.length; i++) {sum += arguments[i];}return sum;}document.write(add(1,2,3,4,5,6));

Array:数组对象
1.创建
var arr = new Array(元素列表);
var arr = new Array(默认长度);
var arr = [元素列表];
2.方法
join(参数):将数组中的元素按照指定的分隔符拼接为字符串
push() 向数组的末尾添加一个或更多元素，并返回新的长度。
3.特点
1.js中，数组类型可变的
2.js中，数组长度可变的
测试如下

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body><script>var arr = [1,"aaa",true];document.write(arr[0] + "<br>");document.write(arr[1] + "<br>");document.write(arr[2] + "<br>");arr[10] = "hehe";document.write(arr[10] + "<br>");document.write(arr.length);
</script>
</body>
</html>

可以看到arr[10]成功加入，并且能够输出数组长度为11。
Math:数学对象
创建：

特点：Math对象不用创建，直接使用。 Math.方法名();
方法：
random():返回 0 ~ 1 之间的随机数。含0不含1
ceil(x)：对数进行上舍入。
floor(x)：对数进行下舍入。
round(x)：把数四舍五入为最接近的整数。
例：Math.ceil(4.3) = 5
正则表达式
正则表达式：定义字符串的组成规则。
单个字符:[]
如： [a] [ab] [a-zA-Z0-9_]
* 特殊符号代表特殊含义的单个字符:
\d:单个数字字符 [0-9]
\w:单个单词字符[a-zA-Z0-9_]
量词符号：
?：表示出现0次或1次
*：表示出现0次或多次
+：出现1次或多次
{m,n}:表示 m<= 数量 <= n
* m如果缺省： {,n}:最多n次
* n如果缺省：{m,} 最少m次
开始结束符号
* ^:开始
* KaTeX parse error: Got function '\newline' with no arguments as superscript at position 1: \̲n̲e̲w̲l̲i̲n̲e̲");\w代表的是单个字符，{6，12}代表的是判断单个字符在6到12之间。
//验证
var flag = reg.test(“abcdef”);判断结果为true；
Global
特点：全局对象，直接使用，都不需要对象。
方法：
encodeURI():url编码
decodeURI():url解码
encodeURIComponent():url编码,编码的字符更多
decodeURIComponent():url解码
parseInt():将字符串转为数字逐一判断每一个字符是否是数字，直到不是数字为止，将前边数字部分转为number
isNaN():判断一个值是否是NaN
NaN六亲不认，连自己都不认。NaN参与的==比较全部问false
eval():将 JavaScript 字符串，并把它作为脚本代码来执行。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body><script>var str = "你好，我是小卢";var encode = encodeURI(str);document.write(encode +"<br>");//%E4%BD%A0%E5%A5%BD%EF%BC%8C%E6%88%91%E6%98%AF%E5%B0%8F%E5%8D%A2var s = decodeURI(encode);document.write(s +"<br>");//你好，我是小卢var str = "22a234abc";var number = parseInt(str);//将前面部分数字进行输出document.write(number +"<br>");//输出结果为22
</script>
</body>
</html>

eval()的功能：比如"document.write(“hello”)"这是一个字符串，用上eval函数就可以执行里面的代码了。
DOM
一、获取页面标签对象：Element
document.getElementById(“id值”):通过元素的id获取元素对象。
注意：这个获取到的是标签对象，比如说标签，则它获取到的就是img这个标签。此时，比如说想对它的src进行更改，就可以用
var light = document.getElementById(“light”);
light.src = “img/on.gif”;
这种方式进行更改。
二、innerHTML的使用
例：

 <body><h1 id="title">悔创阿里杰克马</h1><script>
//1.获取h1标签对象var title = document.getElementById("title");alert("我要换内容了。。。");//2.修改内容title.innerHTML = "不识妻美刘强东";
</script>
</body>

innerHTML在使用的过程中，需要知道，它进行替换数据的。就是说把h1标签里面的数据进行替换，修改标签体的内容。
事件
onclick：单击事件执行相应的函数

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<button onclick="test()">test</button>
<script>function test(){alert("事件测试");}
</script>
</body>
</html>

BOM

1 . 概念：Browser Object Model浏览器对象模型
将浏览器的各个组成部分封装成对象。
2.组成：
Window：窗口对象
Navigator:浏览器对象
Screen：显示器对象
History:历史记录对象
Location:地址栏对象
3.Window：窗口对象(一个浏览器窗口一个Window对象)
1. 创建
2. 方法
1. 与弹出框有关的方法：
alert() 显示带有一段消息和一个确认按钮的警告框。
confirm() 显示带有一段消息以及确认按钮和取消按钮的对话框。
* 如果用户点击确定按钮，则方法返回true
* 如果用户点击取消按钮，则方法返回false
prompt() 显示可提示用户输入的对话框。
* 返回值：获取用户输入的值
2. 与打开关闭有关的方法：
close() 关闭浏览器窗口。
* 谁调用我，我关谁
open() 打开一个新的浏览器窗口
* 返回新的Window对象
3. 与定时器有关的方式
setTimeout() 在指定的毫秒数后调用函数或计算表达式。(一次定时器)
* 参数：
参数1. js代码或者方法对象
参数2. 毫秒值
* 返回值：唯一标识，用于取消定时器
clearTimeout() 取消由 setTimeout() 方法设置的 timeout。
setInterval() 按照指定的周期（以毫秒计）来调用函数或计算表达式。（循环定时器，和一次定时器参数设置一样）
clearInterval() 取消由 setInterval() 设置的 timeout。
3. 属性：
1. 获取其他BOM对象：
history
location
Navigator
Screen:
2. 获取DOM对象
document
4. 特点
* Window对象不需要创建可以直接使用 window使用。 window.方法名();
* window引用可以省略。方法名();
测试：
测试确认框 confirm();

  <script>var flag = confirm("您确定要退出吗？");if(flag){//退出操作alert("欢迎再次光临！");}else{//提示：手别抖...alert("手别抖...");}
</script>

测试输入框

<script>var result =  prompt("请输入用户名");alert(result);
</script>

打开一个新网页测试

<body>
<h1 id = "openBtn"> test</h1><script>var openBtn = document.getElementById("openBtn");var newWindow;openBtn.onclick = function(){//打开新窗口newWindow = open("https://www.baidu.com");}
</script>
</body>

关闭当前网页测试

<button id = "closeBtn"> test</button>
<script>var closeBtn = document.getElementById("closeBtn");closeBtn.onclick = function(){// 关闭窗口close();}
</script>

关闭新的窗口

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<button onclick="opentest()">open</button>
<button onclick="closetest()"> close</button>
<script>var newwindow;function opentest() {newwindow = open("https://www.baidu.com");}function closetest() {newwindow.close();}
</script>
</body>
</html>

注意两个点，第一命名函数的时候，不要写open、或者close，这样会冲突的。第二点，newwindow代表的是一个新的window对象，用它来进行赋值的话，就可以代表close谁就关闭谁。
setTimeout()测试

<script>setTimeout("opentest()",2000);function opentest() {document.write("222");}
</script>

clearTimeout()取消单次定时器

<script>var id = setTimeout(opentest,2000);clearTimeout(id);function opentest() {document.write("222");}</script>

clearInterval（）取消循环定时器

<script>var id = setInterval(opentest,2000);clearInterval(id);function opentest() {document.write("222");}</script>

定时器的小测试：及其对应的注意事项。
例：轮播图函数的书写。
代码如下：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>制作一个轮播图</title>
</head>
<script>var number = 1;//设置一个函数function f() {number++;if(number >3){number = 0;}var img = document.getElementById("img");img.src = "img/banner_" + number +".jpg";}//定义定时器，每三秒调用一次f函数setInterval(f,3000);
</script>
<body><img id="img" src="img/banner_1.jpg" width="">
</body>
</html>

代码分析：
正常javascript代码写在了body上面会有问题，

此时，img还没有加载，是f（）不可以调用document.getElementById()的，但是，这个例子可以的原因是有定时器，3秒后才进行调用f()函数，此时肯定加载完全了。

window，可以获取其他BOM对象
1.history
2.location
3.Navigator
4.Screen
代码如下：

<script>var a = history;var b = location;var c = Navigator;var d = Screen;alert(a);alert(b);alert(c);alert(d);</script>

Location对象
window.location
Location 对象就是浏览器中的那个路径。
例子：

<body>
<button οnclick="f1()">test</button>
<button οnclick="f2()">test2</button>
<button οnclick="f3()">test3</button>
<script>function f1() {location.reload();}function f2() {location.href = "https://www.baidu.com";}function f3(){var a = location;alert(a);}
</script>
</body>

小案例 5秒后跳转网页

<body>
<p id = "test"></p>
<script>var b = 5;function f2() {if(b>0){var a = document.getElementById("test").innerHTML=b + "s后跳转网页....";b = b-1;}else{location.href = "https://www.baidu.com";}}setInterval(f2,1000);
</script>
</body>

windos.history
/*
History：历史记录对象
1. 创建(获取)：
1. window.history
2. history

        2. 方法：* back()    加载 history 列表中的前一个 URL。* forward()  加载 history 列表中的下一个 URL。* go(参数)     加载 history 列表中的某个具体页面。* 参数：* 正数：前进几个历史记录* 负数：后退几个历史记录3. 属性：* length 返回当前窗口历史列表中的 URL 数量。*/

代码分析

<body><input type="button" id="btn" value="获取历史记录个数">
<a href="https://www.baidu.com">baidu</a>
<input type="button" id="forward" value="前进">
<input type="button" id="back" value="后退">
<script>//1.获取按钮var btn = document.getElementById("btn");//2.绑定单机事件btn.onclick = function(){//3.获取当前窗口历史记录个数var length = history.length;alert(length);}//1.获取按钮var forward = document.getElementById("forward");//2.绑定单机事件forward.onclick = function(){//前进// history.forward();history.go(1);}//1.获取按钮var forward = document.getElementById("back");//2.绑定单机事件forward.onclick = function(){//前进// history.forward();history.go(-1);}</script></body>

DOM

概念：三个单词首字母的缩写：
Document Object Model 文档对象模型，意思：将标记语言文档的各个组成部分，封装为对象。可以使用这些对象，对标记语言文档进行CRUD的动态操作。
BOM是浏览器对象模型，对浏览器（window）进行操作的，DOM是对html进行操作的。

W3C DOM 标准被分为 3 个不同的部分：
- 核心 DOM - 针对任何结构化文档的标准模型
  - Document：文档对象
  - Element：元素对象
  - Attribute：属性对象
  - Text：文本对象
  - Comment:注释对象
  - Node：节点对象，其他5个的父对象
- XML DOM - 针对 XML 文档的标准模型
- HTML DOM - 针对 HTML 文档的标准模型
  学习的是DOM模型，Document,Element,Node 这三个部分。
  Document：文档对象
  1. 创建(获取)：在html dom模型中可以使用window对象来获取
    1. window.document
    2. document
  2. 他的方法：
    1. 获取Element对象：
      1. getElementById() ：根据id属性值获取元素对象。id属性值一般唯一
      2. getElementsByTagName()：根据元素名称获取元素对象们。返回值是一个数组
      3. getElementsByClassName():根据Class属性值获取元素对象们。返回值是一个数组
      4. getElementsByName(): 根据name属性值获取元素对象们。返回值是一个数组
    2. 创建其他DOM对象：(这个创建指在html中创建了这个标签，暂时没啥作用)
      createAttribute(name)
      createComment()
      createElement()
      createTextNode()
  3. 属性
    代码演示：

<body><div id="div1">div1</div>
<div id="div2">div2</div><div id="div3">div3</div><div class="cls1">div4</div>
<div class="cls1">div5</div><input type="text" name="username">
<script>var div1 = document.getElementById("div1");alert(div1);//2.根据元素名称获取元素对象们。返回值是一个数组var divs = document.getElementsByTagName("div");alert(divs.length);//3.根据Class属性值获取元素对象们。返回值是一个数组var div_cls = document.getElementsByClassName("cls1");alert(div_cls.length);//4.根据name属性值获取元素对象们。返回值是一个数组var ele_username = document.getElementsByName("username");alert(ele_username.length);var table = document.createElement("table");alert(table);
</script>
</body>

Element相关方法：
1. removeAttribute()：删除属性
2. setAttribute()：设置属性、
比如说一个a标签，他本身是没有属性（href）的，我通过setAttribute给他设置属性。
代码如下：

<body>
<a id = "test">hello world</a>
<button onclick="f()">设置</button><script>function f() {var a = document.getElementById("test");a.setAttribute("href","https://www.baidu.com");}
</script>
</body>

这时候效果如下：当启动的时候，hello world是没有href属性的，此时你点击它也没有效果，当你点击了设置以后，a就有href属性了，可以点击了。
删除属性同理也可以得到。

Node:节点对象，（先不学习）
HTML DOM

标签体的设置和获取：innerHTML
使用html元素对象的属性
控制元素样式
一.获取文件内容：

<body>
<div id="div1">Hello World
</div><script >var div = document.getElementById("div1");var innerHTML = div.innerHTML;alert(innerHTML);
</script>
</body>

这样输出结果就是Hello World.

<body>
<div id="div1">Hello World
</div><script >var div = document.getElementById("div1");div.innerHTML = "<input type = 'test'>";
</script>
</body>

此时会将Hello World替换成为文本输入框。
HTMLDOM控制样式

<body><div id="div1">div1</div><div id="div2">div2</div><script>var div1 = document.getElementById("div1");div1.onclick = function(){//修改样式方式1div1.style.border = "1px solid red";div1.style.width = "200px";//font-size--> fontSizediv1.style.fontSize = "20px";}var div2 = document.getElementById("div2");div2.onclick = function(){div2.className = "d1";}</script></body>

常见的事件
概念：某些组件被执行了某些操作后，触发某些代码的执行。
事件：某些操作。如：单击，双击，键盘按下了，鼠标移动了
事件源：组件。如：按钮文本输入框…
监听器：代码。
注册监听：将事件，事件源，监听器结合在一起。当事件源上发生了某个事件，则触发执行某个监听器代码。
1. 点击事件：
1. onclick：单击事件
2. ondblclick：双击事件
2. 焦点事件
1. onblur：失去焦点。（百度输入框没东西闪）
* 一般用于表单验证，比如：在失去焦点的时候来判断用户名有没有输入。
2. onfocus:元素获得焦点。（比如百度输入框有东西在闪）

        3. 加载事件：1. onload：一张页面或一幅图像完成加载。4. 鼠标事件：1. onmousedown  鼠标按钮被按下。* 定义方法时，定义一个形参，接受event对象。* event对象的button属性可以获取鼠标按钮键被点击了。2. onmouseup 鼠标按键被松开。3. onmousemove  鼠标被移动。4. onmouseover    鼠标移到某元素之上。5. onmouseout 鼠标从某元素移开。5. 键盘事件：1. onkeydown    某个键盘按键被按下。2. onkeyup        某个键盘按键被松开。3. onkeypress 某个键盘按键被按下并松开。6. 选择和改变1. onchange    域的内容被改变。2. onselect 文本被选中。7. 表单事件：1. onsubmit    确认按钮被点击。* 可以阻止表单的提交* 方法返回false则表单被阻止提交。2. onreset   重置按钮被点击。

测试代码：

   <body>
<input id="username">
<script>//1.失去焦点事件document.getElementById("username").onblur = function(){alert("失去焦点了...");}
</script></body>```onload作用：可以将script代码写在body上面了，等body加载完毕，在加载script。```javascript
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>HTMLDOM</title>
</head>
<script>//等所有页面加载完成了再回来执行函数window.onload = function f(){//1.失去焦点事件document.getElementById("username").onblur = function(){alert("失去焦点了...");}}
</script>
<body>
<input id="username">
</body>
</html>

onchange:假设里面是一个文本框，当里面数据改变的时候，会执行函数

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>HTMLDOM</title>
</head>
<script>//等所有页面加载完成了再回来执行函数window.onload = function f(){//1.失去焦点事件document.getElementById("username").onchange = function(){alert("里面内容改变了...");}}</script>
<body>
<input id="username"></body>
</html>

当输入aa时，结果如下：

onsubmit 在提交表单校验的时候用
代码如下：因为flag=false 所有无法提交。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>HTMLDOM</title>
</head>
<script>//等所有页面加载完成了再回来执行函数window.onload = function f(){document.getElementById("form").onsubmit = function(){//校验用户名格式是否正确var flag = false;return flag;}</script>
<body>
<form action ="#" id = "form">
<input name ="username" id="username">
<input type = "submit" value="提交">
</form>
</body>
</html>

JavaScript 简单学习相关推荐

JavaScript学习笔记04【高级——DOM和事件的简单学习、BOM对象】
w3school 在线教程:https://www.w3school.com.cn JavaScript学习笔记01[基础--简介.基础语法.运算符.特殊语法.流程控制语句][day01] JavaS ...
表盘时针的html代码,html5画布操作的简单学习-简单时钟
html5画布操作的简单学习-简单时针效果图一.什么是 Canvas? HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像. 画布是一个矩形区域,您可以控制其每一像素. ...
JavaScript大体学习思路
JavaScript学习 javaScript基础概念: 功能: javaScript发展史基本语法与html的结合方式注释数据类型变量运算符 1.一元运算符 2.二元运算符 3.赋值运 ...
javaScript基础学习 - 14 - JavaScript内置对象 -案例代码
javaScript基础学习 - 14 - JavaScript内置对象 -案例代码 1. Math对象最大值 2. 封装自己的数学对象 3. Math绝对值和三个取整方法 4. Math对象随机数方 ...
利用Html,Css,javaScript简单写一个计算一天秒的倒计时
利用Html,Css,javaScript简单写一个计算一天还剩多少秒的倒计时页面代码我放下面,不多,就是我那个背景图我没有用精灵图,主要拼接太麻烦了,我直接img了,然后display:none; ...
在mysql中unique唯一索引的作用_MySQL_MySQL中的唯一索引的简单学习教程，mysql 唯一索引UNIQUE一般用于不 - phpStudy...
MySQL中的唯一索引的简单学习教程 mysql 唯一索引UNIQUE一般用于不重复数据字段了我们经常会在数据表中的id设置为唯一索引UNIQUE,下面我来介绍如何在mysql中使用唯一索引UNIQU ...
非常酷的 Javascript 简单调试工具Blackbird
Blackbird 是一个开源的 Javascript 调试工具,默认提供一种非常酷的方式展现 Javascript 调试信息,如下图,效果如何呢? 在我们的日常的学习或工作中,经常都会接触到 Jav ...
JavaScript TypeScript学习总结
本文章为web课学习JavaScript & TypeScript的学习总结 JavaScript & TypeScript学习总结 JavaScript JS介绍 JS基础标识符 ...
BootStrap简单学习
前言本文是关于BootStrap的简单学习,适合后端开发者查阅. 目录一.什么是BootStrap? 二.如何使用BootStrap? 2.1.下载BootStrap: 2.2.使用BootStr ...

JavaScript 简单学习

BOM

DOM

JavaScript 简单学习相关推荐

最新文章

热门文章