JavaScript学习笔记

最新推荐文章于 2023-04-03 13:55:55 发布

中条山伯爵

最新推荐文章于 2023-04-03 13:55:55 发布

阅读量314

点赞数

分类专栏： JavaScript 文章标签： javascript js html dom

本文链接：https://blog.csdn.net/weixin_41724020/article/details/107619181

版权

JavaScript 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

1.在JS当中,当一个变量没有手动赋值的时候,系统默认赋值undefined,undefined在JS中是一个具体存在值.

2.JS中如何定义函数

第一种方式：
    function 函数名(形式参数列表){
        函数体;
    }
第二种方式：
    函数名 = function(形式参数列表){
        函数体;
    }

3.函数调用

<input type="button" value="hello" onclick="sayHello('jack');" /> 
<input type="button" value="计算10和20的求和" onclick="sum(10, 20);" />

4.JS当中的函数在调用的时候，参数的类型没有限制，并且参数的个数也没有限制.

5.变量

在函数体之外声明的变量属于全局变量
在函数体当中声明的变量，包括一个函数的形参都属于局部变量。
一个变量声明的时候没有使用var关键字,那么不管这个变量是在哪里声明的,都是全局变量.

6.数据类型

JS中数据类型有：原始类型、引用类型。
原始类型：Undefined、Number、String、Boolean、Null
引用类型：Object以及Object的子类
在ES6之后，又基于以上的6种类型之外添加了一种新的类型：Symbol

6.1 Undefined

Undefined类型只有一个值，这个值就是 undefined
当一个变量没有手动赋值，系统默认赋值undefined
或者也可以给一个变量手动赋值undefined。

6.2 Number

Number类型包括：整数，小数，NaN(not a number)，Infinity(无穷大)
isNaN()-->判断是否是一个非数值
parseInt()
parseFloat();
Math.ceil();-->向上取整

6.3 创建字符串对象的两种方式

第一种：var s1 = "abc";
第二种（使用JS内置的支持类String）： var s2 = new String("abc");
需要注意的是：
	String是一个内置的类，可以直接用，String的父类是Object。
	typeof s1 --> string，typeof s2 --> object
	在JS当中比较字符串是否相等使用“==”完成,不是equals。
	无论小string还是大String，他们的属性和函数都是通用的。

6.4 String类型的常用属性和函数？

常用属性：
	length 获取字符串长度
常用函数：
	indexOf			获取指定字符串在当前字符串中第一次出现处的索引
	lastIndexOf		获取指定字符串在当前字符串中最后一次出现处的索引
	replace			替换
	substr			截取子字符串
	substring		截取子字符串
	toLowerCase		转换小写
	toUpperCase		转换大写
	split			拆分字符串
	
substr和substring的区别：
	substr(startIndex, length);
	substring(startIndex, endIndex);    // 左闭右开区间

6.5 Boolean()函数

作用是将非布尔类型转换成布尔类型。规则:"有"就转换成true,"没有"就转换成false。

6.6 Null类型

Null类型只有一个值，null
注意：alert(typeof null); // "object"

6.7 Object类

Object类型是所有类型的超类，自定义的任何类型，默认继承Object。
	
Object类包括哪些属性？
	prototype属性：作用是给类动态的扩展属性和函数。
	constructor属性
	
Object类包括哪些函数？
	toString()
	valueOf()
	toLocaleString()

6.8 在JS当中怎么定义类？怎么new对象？

定义类的语法：
    第一种方式：
        function 类名(形参){
        	...
        }
    第二种方式：
        类名 = function(形参){
         	...
        }
注：在JS中类的定义和构造函数的定义是放在一起来完成的.

创建对象的语法：
    var 变量名 = new 类名(实参);

eg:
    Student = function(sno, sname) {
        this.sno = sno;
        this.sname = sname;
    }
    var s = new Student(123, 'zhangsan');
    alert(s.sno);
    alert(s['sname']);

    Product = function(pno, pname, price) {
        this.pno = pno;
        this.pname = pname;
        this.price = price;
        this.getPrice = function() {
            return this.price;
        }
    }
    var p = new Product(123, 'apple', 3.5);
    alert(p.getPrice());

    Product.prototype.getPname = function() {	//给Product类动态添加一个getPname方法
        return this.pname;
    }

7.typeof运算符

这个运算符可以在程序的运行阶段动态的获取变量的数据类型。
语法格式：
	typeof 变量名
typeof运算符的运算结果是以下6个字符串之一（注意字符串都是全部小写）：
    "undefined"
    "number"
    "string"
    "boolean"
    "object"
    "function"
再次提醒：null属于Null类型,但是typeof运算符的结果是"object"

8.NaN，undefined，null有什么区别

数据类型不同
	typeof NaN --> "number"
	typeof undefined --> "undefined"
	typeof null --> "object"

null和undefined可以等同
alert(null == undefined);   // true

9. ==和===

==(等同运算符)：只判断值是否相等
===(全等运算符)：既判断值是否相等，还判断数据类型是否相

alert(null === undefined);  // false

10.注册事件的两种方式

10.1 js中的事件：

blur失去焦点	
focus获得焦点

click鼠标单击
dblclick鼠标双击

keydown键盘按下
keyup键盘弹起

mousedown鼠标按下
mouseup鼠标弹起
mouseover鼠标经过
mouseout鼠标离开
mousemove鼠标移动

reset表单重置
submit表单提交

change下拉列表选中项改变，或文本框内容改变
select文本被选定
load页面加载完毕（整个HTML页面中所有的元素全部加载完毕之后发生。）

任何一个事件都会对应一个事件句柄，事件句柄是在事件前添加on。

10.2 直接在标签中给事件句柄赋值

<input type="button" value="button1" onclick="myfun()" />

10.3 获取操作对象，然后给对应的事件句柄赋值

<input type="button" id="btn2" value="button2" />
<input type="button" id="btn3" value="button3" />

<script type="text/javascript">
    document.getELementById('btn2').onclick = myfun;    // 注意！此处不能加小括号！
    document.getELementById('btn3').onclick = function() {  // 匿名函数
        ...
    }
</script>

11.捕捉按键

Enter的键值：13
Esc的键值：27

js代码捕捉回车键：
    <script type="text/javascript">
    window.onload = function() {
        var usernameElt = document.getElementById('username');
        usernameElt.onkeydown = function(event) {
            if(event.keyCode == 13) {
                // window.alert("提交中");
                // document.write('提交中');
                console.log('提交中');
            }
        }
    }
	</script>

12.void运算符

void运算符语法：void(表达式)
执行表达式，但是不返回任何结果。

<a href="javascript:void(0)" onclick="alert('test code')">热链接</a>
既保留了热链接的样式，同时用户点击该热链接时执行一段js代码，但是页面不发生跳转。

13.js中的数组

创建：
	var arr = [10, "hello", 3.14, false];	// 用方括号括起来，类型随意

	arr = new Array();	// 内置类Array
	alert(arr.length);	// 0

	arr = new Array(3);	// 一个实参，就是数组长度
	alert(arr.length);	// 3

	arr = new Array(2,3);	// 两个实参，是数组元素
	alert(arr.length);	// 2
方法：
	alert(arr.join('-'));	// 10-hello-3.14-false
	alert(arr.reverse());	// false,3.14,hello,10
遍历：
	for(var i=0; i<arr.length; i++) {
		alert(arr[i]);
	}
	
	for(var j in arr) {	// j是数组下标
		alert(arr[j]);
	}		
使用for in遍历对象的属性:
	function User(username,userpwd) {
			this.username = username;
			this.userpwd = userpwd;
	}
	var u = new User("zhangsan", 123);
	for(var k in u) {	// k是属性名,typeof k返回string
		alert(u[k]);
	}

14.DOM和BOM的区别和联系

BOM的顶级对象是：window
DOM的顶级对象是：document
实际上BOM是包括DOM的！

15.div/span标签的innerText和innerHTML属性有什么区别？

相同点：
	都是设置元素内部的内容。
不同点：
	innerHTML会把后面的“字符串”当做一段HTML代码解释并执行。
	innerText，即使后面是一段HTML代码，也只是将其当做普通的字符串来看待。

16.正则表达式

创建

var regExp = /正则表达式/flags
var regExp = new RegExp("正则表达式","flags");

关于flags：

g:全局搜索
i:忽略大小写
m:多行搜索,只有当前面是普通字符串时,才可以用.

test方法:

true/false = regExp.test(用户填写的字符串);

17.低版本的IE浏览器不支持字符串的trim()函数,怎么办？可以自己对String类扩展一个全新的trim()函数!

String.prototype.trim = function(){
	return this.replace(/^\s+|\s+$/g, "");
}

18.根据JS中的内置类Date获取时间

var nowTime = new Date();
document.write(nowTime);

换成具有本地语言环境的日期格式.
nowTime = nowTime.toLocaleString();
document.write(nowTime);

通过日期获取年月日等信息,自定制日期格式.
var time = new Date();
var year = time.getFullYear();
var month = time.getMonth(); // 月份是:0-11
var day = time.getDate(); // 获取日信息. t.getDay()获取的一周的第几天(0-6)
document.write(year + "年" + (month+1) + "月" + day + "日");

获取毫秒数
vat millisecond = new Date().getTime();

19. setInterval和clearInterval

代码如下：

	<script type="text/javascript">
	window.onload = function() {
		var divElt = document.getElementById('timeDiv');
		displayTime = function() {
			divElt.innerText = new Date().toLocaleString();
		}
		start = function() {
			v = window.setInterval(displayTime,1000);
		}
		end = function() {
			window.clearInterval(v);
		}
	}
    </script>
    <br><br>
    <input type="button" value="显示时间" onclick="start()">
    <input type="button" value="停止" onclick="end()">
    <div id="timeDiv"></div>

20. 将当前窗口设置为顶级窗口

if(window.top != window.self){
	window.top.location = window.self.location;
}

21. 前进和后退

window.history.go();
window.history.back();
window.history.go(-1);

22. 设置地址栏上的URL

window.location = "http://www.baidu.com";
document.location = "http:www.baidu.com";

总结：通过哪些方法可以通过浏览器向服务器发送请求
	<1> 表单的提交
	<2> 超链接
	<3> window.locaiton
	<4> document.location
	<5> window.open('url')

23.JSON

<1> 全称JavaScript Objection Notation，是一种标准、轻量级的数据交换格式，特点是体积小、易解析
还有一种数据交换格式是XML，体积大，解析麻烦，但是语法严谨.

<2> JSON的语法格式
	var jsonObj = {
		"属性名" : 属性值,
		"属性名" : 属性值,
		"属性名" : 属性值,
		...
	}
<3> 遍历JSON数组：
	var students = [
        {"sno" : 101,"sname" : "zhangsan","sage" : 20},
        {"sno" : 102,"sname" : "lisi","sage" : 21},
        {"sno" : 103,"sname" : "wangwu","sage" : 22}
    ]

    for(var i = 0; i < students.length; i++) {
        var stuObj = students[i];
        document.write(stuObj.sno + "," + stuObj.sname + "," + stuObj.sage);
        if(i != students.length -1) {
            document.write("<br>");
        }
    }

24.eval函数的作用是：

将字符串当做一段JS代码解释并执行。
eg:
	var fromJava = "{'no' : 101,'name' : 'zhangsan'}";
	window.eval('var jsonObj =' + fromJava);
	document.write(jsonObj.no + "," + jsonObj.name);

设置table中的tbody

    <script type="text/javascript">

        var data = {
            "total" : 5,
            "stus" : [
                {"no" : 101, "name" : "zhangsan", "class" : "NO.1"},
                {"no" : 102, "name" : "lisi", "class" : "NO.1"},
                {"no" : 103, "name" : "wangwu", "class" : "NO.2"},
                {"no" : 104, "name" : "jack", "class" : "NO.2"},
                {"no" : 105, "name" : "eric", "class" : "NO.3"}
            ]
        }

        window.onload = function() {
            document.getElementById('btn').onclick = function() {
                var html = "";
                for(var i = 0; i < data.stus.length; i++) {
                    html += "<tr align='center'>";
                    html += "<td>";
                    html += data.stus[i].no;
                    html += "</td>";

                    html += "<td>";
                    html += data.stus[i].name;
                    html += "</td>";

                    html += "<td>";
                    html += data.stus[i].class;
                    html += "</td>";
                    html += "</tr>";
                }
                document.getElementById('t_stu_tbody').innerHTML = html;
                document.getElementById('stuspan').innerText = data.stus.length;
            }
        }
    </script>
    <input type="button" value="显示学生信息" id="btn">
    <center><h2>学生信息表</h2></center>
    <hr>
    <table align="center" border="1px" width=50%>
        <tr>
            <th>学号</th>
            <th>姓名</th>
            <th>班级</th>
        </tr>
        <tbody id="t_stu_tbody"></tbody>
    </table>
    总共<span id="stuspan">0</span>名学生
</body>