JavaScript学习记录

时间  2021-08-13
标签 javascript css html java 正则表达式 api 数组 浏览器 app dom 栏目 JavaScript 繁體版
原文   原文链接

JavaScript

客户端脚本语言
JavaScript = ECMAScript + BOM + DOMjavascript

ECMAScript

  • 客户端脚本语言的标准

与html结合方式

  1. 内部定义css

    • 使用script标签

  2. 外部定义html

    • 经过src属性引入外部js文件

  3. 示例java

<!DOCTYPE html>
<html lang="en">
<!-- script可在任意地方写，可是script在head中则先执行，
在body中则head执行完才执行 -->

<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>

<body>
	<!-- 内部方式 -->
    <script>
        alert("hello world");
        //注释
    </script>
    
    <script src="js_0.js"></script><!-- 外部方式-->
</body>

</html>

注释

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

数据类型

  1. 原始数据类型(基本数据类型)正则表达式

    • number:数字(整数，小数，NaN)（NaN 不是一个数字的数字类型）
    • string:字符串
    • boolean
    • null 空的占位符
    • undefined：未定义。若是一个变量没有给初始化值，则会默认赋值为undefined

  2. 引用数据类型：对象api

变量

js为弱类型语言：在开辟变量存储空间时不定义空间未来存储数据类型
var 变量名 = 初始化值;数组

<script>
        // var a = 3
        // alert(a);
        // a = "abb";
        // alert(a);
        //alter是输出一个弹框
        var num0 = 1;
        var num1 = 1.1;
        var num2 = NaN;
        //document.write()为输出语句
        document.write(num0 + "</br>");
        document.write(num1 + "</br>");
        document.write(num2 + "</br>");
</script>

运算符

  1. 一元运算符：只有一个运算数的运算符 ++ --
  2. 算数运算符
  3. 赋值运算符 = += -=
  4. 比较运算符 ===(全等于)
  5. 逻辑运算符 && || ！
  6. 三元运算符 ？：判断表达式的值，真为1，假为2
  7. 注意：类型不一样时作运算，会先进行类型转换

特殊语法

  1. 使用var关键字定义的变量是局部变量，不用的话是全局变量（不经常使用）

流程控制语句

  • 同Java
  • switch中的case判断能够是不一样的类型的判断条件

案例

//js_1.js
var num = 1;
var count = 1;
// document.write("<table border = '1' align = 'center'>");
document.write("<table align = 'center'>");
for (num = 1; num <= 9; num++) {
    document.write("<tr>");
    for (count = 1; count <= num; count++) {
        document.write("<td>");
        document.write(num + "*" + count + "=" + num * count + "   ");
        document.write("</td>");
    }
    // document.write("<br>")
    document.write("</tr>")
}
<!DOCTYPE html>
<html lang="en">
<style>
    td {
        border: 1px solid;//css写边框
    }
</style>

<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>

<body>
    <script src="js_1.js"></script>
</body>
</html>

对象

Fuction

  1. 函数(方法)对象
  2. 建立
//法一
var fun = new Fuction(形参列表，方法体);
//不经常使用
//法二
function 方法名称(形参){
	方法体;
}
//法三
var 方法名 = function(形参){
	方法体;
}

  1. 方法浏览器

  2. 属性app

    • length：形参个数

  3. 特色dom

    • 方法定义时形参的类型不用写，返回值不需在方法定义中设置返回类型
    • 方法是一个对象，若是名称相同，则会覆盖
    • js中，方法的调用只与方法的名称有关，和参数列表无关
    • 在方法声明中有一个隐藏的内置对象(数组),arguments封装全部实际参数

  4. 示例

function count(a, b) {
    alert(a + b);
}
// count(1, 2);

var count1 = function (a, b) {
    alert(a + b);
}
// count(2, 3);

function add() {
    var sum = 0;
    for (var i = 0; i < arguments.length; i++) {//这里arguments.length则为传入形参个数
        // document.write(arguments[i]);
        sum += arguments[i];
    }
    return sum;
}
var m = add(1, 2, 3, 4, 5, 6);
// document.write(m);
alert(m);
// add(1, 2, 3, 4, 5);

array

  1. 建立
//法一
var arr = new Array(元素列表);
//法二
var arr = new Array(默认长度)
//法三
var arr = [元素列表]

  1. 方法

    • join(参数)：将数组中的元素按指定分割符拼接成字符串，默认逗号
    • push(参数)：添加参数在末尾

  2. 属性

    • length表示数组的长度

  3. 特色

    • 数组中元素类型可变
    • 数组长度可变

  4. 示例

var arr1 = new Array(1, 2, 3);
document.write(arr1 + "<br>");

var arr2 = new Array(2);
arr2[1] = 12;
document.write(arr2 + "<br>");

// var arr3 = new Array[1, 2, 3, 4];
// document.write(arr3 + "<br>");

var arr4 = ["asd", 1, true];//类型可变，可是注意是中括号
document.write(arr4[1] + "<br>");
document.write(arr4 + "<br>");//默认输出为一个字符串，都拼接在一块儿
document.write(arr4.join("-") + "<br>")
arr4.push("mt");
document.write(arr4.join("-") + "<br>")
//输出结果：
/**1,2,3
  *,12
  *1
  *asd,1,true
  *asd-1-true
  *asd-1-true-mt */

Date

  • 日期类
  1. 建立
var date = new Date();
  1. 方法
    • tolocaleString()：返回日期本地形式的字符串
    • getTime()：返回当前毫秒值

Math

  • 数学对象
  1. 建立
    • Math对象不用建立，直接使用
  2. 方法
    • random() 返回介于0和1之间一个数，含0不含1
    • round(数) 约数
    • ceil(数) 向上舍入
    • floor(数) 向下舍入

RegExp

  • 正则表达式对象

  • 正则表达式：定义字符串的组成原则

    1. 单个字符 [] 如 [a]

      • \d:单个数字字符
      • \w：单个单词字符

    2. 量词符号

      • ? 表示出现0次或1次
      • * 出现0次或屡次
      • + 出现1次或屡次
      • {m,n} m<= 数量 <=n,若m或n没有则表示最少或最多

  • 正则对象

    1. 建立
var reg = new RegExp("正则表达式");
    var reg = /正则表达式/;
  1. 示例
var reg = new RegExp("^\\w{6,12}$");
// 这里前面的\表示转义,^和$表示开始和结尾
var reg1 = /^\w{6,12}$/;
// 这种经常使用
alert(reg);
alert(reg1);

var uname = "asdfghjkl";
var flag = reg.test(uname);
// test函数检测字符串是否符合要求
document.write(flag);

Global

  • 全局对象，里面的方法不须要对象能够直接调用

  • 方法

    • encodeURI() url编码
    • decodeURL() url解码
    • encodeURIComponent() 编码
    • dencodeURIComponent() 解码
    • parseInt() 将括号中内容转成数字，逐一判断数字直至非数字
    • isNaN() 判断一个值是否为NaN
    • eval() 将js字符串转成脚原本执行

  • 示例

var uname = "江苏";
var en = encodeURI(uname);
document.write(en + "<br>");
var den = decodeURI(en);
document.write(den + "<br>");

var n = "123abd";
var num = parseInt(n);
document.write(num + "<br>");
//123

var n1 = "n123abd";
var num1 = parseInt(n1);
document.write(num1 + "<br>");
//NaN

var code = "alert(\"victory\")";
document.write(code);
eval(code);

BOM

  • 浏览器对象模型，将浏览器各个组成部分封装成对象

  • 组成

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

window对象

  • 建立

  • 方法

    • alert() 显示带有信息的警告框，只有肯定按钮
    • confirm() 确认对话框，有肯定和取消按钮，会返回true和false
    • prompt() 显示可提示用户输入的对话框，会返回用户输入的值
    • 开关浏览器
      • open() 打开一个新界面。也能够用一个var获得界面的对象，便于下面对其的控制关闭
      • clode() 关闭浏览器窗口，谁调用关闭谁
    • 定时器有关的方法
      • setTimeout(方法,毫秒值)：指定毫秒后执行代码
      • setInterval(方法,毫秒值)：循环定时，每过毫秒执行一次。有返回值，用于取消定时
      • clearTimeout(对象)：取消定时，将setInterval获得一个对象放进来便可

  • 属性

    • 获取其余dom对象

  • 特色

    • 不须要建立，直接使用，window.方法名
    • 其引用可省略

  • 示例

  1. 开关浏览器
//开关浏览器
var k;
var f = document.getElementById("bt");
f.onclick = function () {
	k = open("www.baidu.com");
}

var m = document.getElementById("close");
m.onclick = function () {
	k.close();//谁调用关闭谁
}
  1. 轮播图
var m = 1;
var p = document.getElementById("pic");
var lunbo = function(){//假定有三张图片
	m++;
	if(m>3){
		m = 1;
	}
	p.src = "../img/banner_"+m+".jpg";
	
}
setInterval(lunbo,2000);//无参方法不能够带括号！！！

Location对象

  • 地址栏对象
  • 建立：location
  • location.href("网址") 能够跳转界面
  • 案例：跳转首页
var t = 5;
var time = document.getElementById("time");
function jump(){
	t--;
	time.innerHTML = t+"";
	if(t==0){
		location.href = "http://www.baidu.com";
	}
}
setInterval(jump,1000);

History对象

history表示的是当前窗口开过的页面，而不是浏览器的历史记录

  • 建立

    • window.history
    • history

  • 方法

    • back() 加载当前窗口中前一个url
    • forward() 加载当前窗口中下一个url
    • go(参数) 加载history列表中某个具体页面
      • 正数 前进几个历史目录
      • 负数 后退几个历史目录

  • 属性

    • length 返回当前窗口历史列表中的url数量

DOM

简单介绍

  • 控制html文档内容
  • 获取元素对象 document.getElementById("id")，看api手册看属性修改
  • 修改标签体内容：innerHTML
var h = document.getElementById("title");
h.innerHTML = "hhhh";

  • 事件

    • 某些组件被执行了某些操做后，触发某些代码的执行
    • 绑定事件
      • onclick属性，点击后触发。onclick后面至关于写了一条js代码，能够建一个js方法调用
      • js获取元素对象，设定事件属性(经常使用，好维护)

  • 开关灯案例

var i = document.getElementById("pic");
var flag = false;
i.onclick = function(){
	if(flag){
		i.src = "../img/off.gif";
		flag = false;
	}else{
		i.src = "../img/on.gif";
		flag = true;
	}
}
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<img id= "pic" src="../img/off.gif">
		<script src = "./开关灯.js"></script>
	</body>
</html>

DOM

核心DOM

  • Document：文档对象

    1. 建立(获取)：在html dom模型中可使用window对象来获取
    2. window.document
    3. document
    • 方法：

      • 获取Element对象：

        1. getElementById() ： 根据id属性值获取元素对象。id属性值通常惟一
        2. getElementsByTagName()：根据元素名称获取元素对象们。返回值是一个数组
        3. getElementsByClassName():根据Class属性值获取元素对象们。返回值是一个数组
        4. getElementsByName(): 根据name属性值获取元素对象们。返回值是一个数组

      • 建立其余DOM对象：

        1. createAttribute(name)
        2. createComment()
        3. createElement()
        4. createTextNode()

  • Attribute:属性对象

    1. setAttribute() 设置属性
    2. removeAttribute() 删除属性
    • 案例
var b1 = document.getElementById("button1");
var b2 = document.getElementById("button2");
// var s = document.getElementById("jump");
var s = document.getElementsByTagName("a")[0];
//使用标签名得到，由于返回的是数组，因此用的是第一个元素
//超连接只可在a标签中用，如果p标签则没有用
button1.onclick = function(){
	
	s.setAttribute("href","https://www.baidu.com");
}
button2.onclick = function(){
	
	s.removeAttribute("href");
}
  • Node：节点对象其余5个的父对象
    • 特色：全部dom对象均可以被认为是一个节点
    • 方法：
      1. appendChild()：向节点的子节点列表的结尾添加新的子节点。
      2. removeChild()：删除（并返回）当前节点的指定子节点。
      3. replaceChild()：用新节点替换一个子节点。
    • 属性：
      • parentNode 返回节点的父节点。
    • 案例
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			div{
				border: 1px solid red;//对div边框作设置
			}
			#div1{
				width: 200px;
				height: 200px;
			}
			#div2{
				width: 100px;
				height: 100px;
			}
			#div3{
				width: 50px;
				height: 50px;
			}
		</style>
	</head>
	<body>
		<!-- <img id= "pic" src="../img/banner_1.jpg" width="100%"> -->
		<!-- <a id = "jump">点击跳跃</a> -->
		<!-- <input type="button" id = "button1" value="设置属性">
		<input type="button" id = "button2" value="删除属性"> -->
		<div id = "div1">
			div1
			<div id = "div2">div2</div>
		</div>
		<!-- 当前div2是div1的子节点 -->
		<a id = "del" href = "javascript:void(0);">点击删除div2</a>
		<a id = "add" href = "javascript:void(0);">点击添加div3</a>
		<!-- 这里的a标签因为href没写，默认是当前页面，因此点击后页
		面没有变化，若是用button则功能正常 -->
		<!-- 须要在href中写"javascript:void(0);"才可保留其可点击
		的属性，但不进行超连接的跳转 -->
		<!-- <script src = "./增删节点.js"></script> -->
		<script>
		var del = document.getElementById("del");
		del.onclick = function(){
			var div1 = document.getElementById("div1");
			var div2 = document.getElementById("div2");
			div1.removeChild(div2);
		}
		var add = document.getElementById("add");
		add.onclick = function(){
			var div1 = document.getElementById("div1");
			var div3 = document.createElement("div");
			div3.setAttribute("id","div3");
			div1.appendChild(div3);
		}
		</script>
	</body>
</html>

HTML DOM

  • 标签体的设置和获取：innerHTML
var div = document.getElementById("div1");
var innerhtml = div.innerHTML;
div.innerHTML = "<input type = 'button'>";
//这里的innerHTML即为标签体，能够直接修改它，也能够用+=添加东西
  • 控制元素样式
    • style属性设置
    • 提早定义类选择器的样式，经过元素classname来控制。在css中写
var div = document.getElementById("div1");
div.onclivk = function(){
	div.style.border = "1px solid red";
}
div.onclivk = function(){
	div.className = "d1";//d1为一个css样式
}

事件监听机制

  • 某些组件被执行了某些操做后，触发某些代码的执行
  • 常见的事件：

    • 点击事件：

      1. onclick：单击事件
      2. ondblclick：双击事件

    • 焦点事件

      1. onblur：失去焦点
      2. onfocus:元素得到焦点。

    • 加载事件：

      1. onload：一张页面或一幅图像完成加载。

    • 鼠标事件：

      1. onmousedown 鼠标按钮被按下。
      2. onmouseup 鼠标按键被松开。
      3. onmousemove 鼠标被移动。
      4. onmouseover 鼠标移到某元素之上。
      5. onmouseout 鼠标从某元素移开。

    • 键盘事件：

      1. onkeydown 某个键盘按键被按下。
      2. onkeyup 某个键盘按键被松开。
      3. onkeypress 某个键盘按键被按下并松开。

    • 选择和改变

      1. onchange 域的内容被改变。
      2. onselect 文本被选中。

    • 表单事件：

      1. onsubmit 确认按钮被点击。
      • 返回false不提交，true提交
      1. onreset 重置按钮被点击。
相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程