HTML---JavaScript学习笔记

最新推荐文章于 2023-03-28 21:12:11 发布

研程序笔记

最新推荐文章于 2023-03-28 21:12:11 发布

阅读量140

点赞数

分类专栏： Java 文章标签： html js

本文链接：https://blog.csdn.net/qq_44779847/article/details/102742112

版权

Java 专栏收录该内容

104 篇文章 1 订阅

订阅专栏

JavaScript

作用：给页面添加动态效果和动态数据， html负责搭建页面结构和内容，css美化页面

JS历史

1995年由网景（NetScape）公司发布，LiveScript，同年更名为JavaScript，和Java语言没啥关系，为了蹭热度

JS特点

属于脚本语言，不需要编译，由浏览器解析执行
js语言可以嵌入到html页面中
js语言基于面向对象
js属于弱类型的语言
交互性高
安全性高 js语言只能访问浏览器中的各种数据，不能访问浏览器以外的数据

JS语言的引入方式

内联：在元素的事件属性中添加js代码，当事件触发时js代码执行
内部：在html页面中添加

JS语法

数据类型

JavaScript中只有对象类型
常见的对象类型

数值类型 number
字符串类型 string
布尔值类型 boolean
未定义类型 undefined
自定义类型 object

变量的声明和赋值

js属于弱类型语言
java： int x = 10;
js: var x = 10; var s = “abc”; var b = true/false;

常见类型介绍

数值类型

js中数值类型的底层都是浮点数，在使用过程中会自动转换整数或小数
java int x =5 int y= 2 int z = x/y; z=2
js var x = 5 var y = 2 var z = x/y; z=2.5
NaN: Not a Number 不是一个数，用于判断变量是否是数值类型，使用 isNaN(变量) 进行判断 isNaN(x) 返回值是true或false ，true代表不是数，false代表是数

布尔值类型
var b = true/false;
字符串
var s = “abc”;
var s = ‘abc’;
未定义类型undefined

当一个变量只声明不赋值的情况下，则此变量为未定义类型
###各种类型间的隐式转换

数值类型

转字符串：直接转 24-> “24”
转布尔值： 0和NaN转成false 其它转成true

布尔值类型

转字符串：直接转 true->“true” “abc”+true
转数值： true->1 false->0 18+true=19

字符串类型

转数值：能转直接转不能转转成NaN
加法会把数值转字符串 “20”+5 = “205”
减乘除会把字符串转成数值 “20”-5 = 15
任何数值和NaN进行任何运算结果都是NaN
转布尔值：空字符串转false 其它true

未定义undefined

转数值： NaN
转字符串：直接转 “abc”+undefined “abcundefined”
转布尔值： false if(undefined){alert(“aaa”)}

null

转数值： 0
转布尔值： false
转字符串：直接转 “abc”+null = “abcnull”

运算符 + - * / % = > < >= <= == !=

和Java大体相同
和= ： == 先统一类型再比较值 ===先比较类型如果类型相等再比较值
除法运算会自动转换整数和小数
typeof x; typeof 66 + 6 = “number6”

语句 if else while do while for switch case

和Java大体相同***
不同点：

if 和 while 括号里面的内容如果不是布尔值会自动隐式转换成布尔值
for循环中int i改成var i 不支持增强（新）for循环

方法声明

java： public void 方法名(参数列表){方法体}
js： function 方法名(参数列表){方法体}

- 常见的四种方法：

无参无返回值
无参有返回值
有参无返回值
有参又返回值

- 三种声明方法的格式：

function 方法名(参数列表){方法体}
var 方法名 = function(参数列表){方法体};
var 方法名 = new Function(“参数1”,“参数2”,“方法体”);

和页面元素相关的方法

通过id获取页面元素的方法
var d = document.getElementById(“d1”);
获取和修改元素的文本内容
d.innerText
d.innerText = “abc”;
获取和修改文本框的值
var i = document.getElementById(“i1”);
i.value 获取
i.value=“xxx”;
获取和修改元素的html内容
d.innerHTML
d.innerHTML="< h1 >abc</ h 1 >";
追加 d.innerHTML+="< h1>abc</ h1>";
（此处多加了空格的）

String相关

创建字符串

var s1 = “abc”; //单引号和双引号都可以
var s2 = new String(“abc”);

把字符串转成数值

parseFloat(“8”) 8
parseInt(8.5) 8
Number(“8.5”) 8.5 作用和parseFloat类似

字符串转大小写

转大写 str.toUpperCase();
转小写 str.toLowerCase();

获取字符串出现的位置

str.indexOf(‘b’) 第一个出现的位置从0开始
str.lastIndexOf(‘b’) 最后一个出现的位置

截取字符串

str.substring(start,?end);

替换字符串

str.replace(old,new); 只替换第一个

拆分字符串

var arr = str.split(".");

数学相关

随机数 Math.random() 0-1 *3
3-5 0-2 + 3
25-36 0-11 +25
100-200 0-100 + 100
parseInt(Math.random()*101)+100
6-9
parsetInt(Math.random()*4)+6;
四舍五入
num.toFixed(m); m代表保留几位小数
18.23456.toFixed(4); 18.2346

数组相关

创建数组

var arr1 = [“小明”,18,true];
var arr2 = new Array();

往数组中添加内容

arr.push(“刘德华”);
arr.push(18);

数组遍历和Java一样
var arr = [“小明”,18,true];
for(var i=0;i<arr.length;i++){
alert(arr[i]);
}
获取和修改数组长度

java数组的长度不可变
arr.length//获取
arr.lenght=3;

数组反转 arr.reverse();
数组排序 arr.sort(); 默认排序规则是以Unicode编码进行排序，比完第一个再比第二个

自定义排序：
var arr = [18,11,26,22,2,7,3];
//自定义排序方法
function mysort(a,b){
return b-a;//代表升序 b-a代表降序
}
alert(arr.sort(mysort));
arr.sort(new Function(“a”,“b”,“return a-b;”));

日期相关

服务器时间和客户端时间

获取客户端时间
var d = new Date();
把字符串时间转成时间对象 2019/5/8 14:37:30
var d = new Date(“2019/5/8 14:37:30”);
获取和设置时间戳(距1970年1月1日 08:00:00)
d.getTime();
d.setTime();
获取时间分量
d.getFullYear();// 年
d.getMonth(); 月从0开始 +1
d.getDate(); 日
d.getDay(); 星期几
d.getHours(); //小时
d.getMinutes(); 分钟
d.getSeconds(); 秒
获取年月日和获取时分秒
d.toLocaleDateString();
d.toLocaleTimeString();

正则表达式

应用场景：
1. 查找内容
2. 校验文本
. ：匹配任意字符除了换行
\w : 匹配任意数字、字母、下划线
\d : 匹配任意数字
\s : 匹配任意空白
^ : 开头
$ : 结尾
举例：
1. 以m开头 ^m
2. 以n结尾 n$
3. 包含两位数字 \d{2}
4. 只有两位数字 ^\d{2}$
5. 以3个数字开头 ^\d{3}
6. 以x开头以y结尾中间有5个数字 ^x\d{5}y$
7. 以m开头中间有3-5个数字n结尾 ^m\d{3,5}n$
8. 6-10位数字字母下划线组成 ^\w{6,10}$
  - 创建正则对象的两种方式

var reg = /规则/模式; （两种模式：i忽略大小写，g全局查找）
reg = /^\w{6,10}$/;
var reg = new RegExp(“规则”,？“模式”);
reg = new RegExp("^\w{6,10}$");
- 正则对象相关的方法
查找内容的方法 reg.exec(str)
var str = “you can you up no can no b b”;
var reg = /no/;
- 如果没有g则每次找到的都是第一个
  reg.exec(str);
- 如果添加了g则从全文中查找每次查找下一个,直到找不到的时候返回null
  var reg = /no/g;
  reg.exec(str);
校验方法 reg.test(str);
var reg = /^you/;
reg.test(str);
- 字符串中和正则相关的方法
查找内容 str.match(reg)
- 此查找方法如果是全局查找会一次性把查找到的所有返回到一个数组中
替换方法 str.replace(reg,new);
reg = /no/g;
str.replace(reg,“不”);

修改元素的class属性值

div.className=“xxx”;

如何让页面中元素隐藏

display：none 元素隐藏并且脱离文档流，如果再显示回来的话需要改回元素的默认值
visibility:hidden(隐藏)/visible(显示) 隐藏元素不脱离文档流

自定义对象

	/* function Person(name,age){
	//添加属性
	this.name=name;
	this.age=age;
	//添加方法
	this.run = function(){
		alert("我叫："+this.name+
				"今年"+this.age);
	}
}
//实例化对象
var p = new Person("张三",5);
p.run(); */

function Person(){}
var p = new Person();
//动态添加属性和方法
p.name = "张三";
p.age = 18;
p.run = function(){
	alert("我叫："+this.name+
			"今年"+this.age);
}
//调用 
//p.run();
//第二种实例化对象的方式 
var p2 = {
		"name":"李四",
		"age":18,
		"run":function(){
			alert("我叫："+this.name+
					"今年"+this.age);
		}
}
p2.run();

DHTML

简介： Dynamic（动态） HTML，并不是新的技术，是把通过html、CSS、JavaScript结合到一起开发的页面称为动态的html
DHTML包括：BOM、DOM
BOM： Browser 浏览器 Object对象 Model模型，包含和浏览器相关的内容
DOM：Document 文档 Object对象 Model模型，包含和页面相关的内容

BOM浏览器对象模型

window对象

window对象里面的属性称为全局属性，方法称为全局方法，调用时可以省略

window里面常见的方法

1. parseInt() 和 parseFloat()
2. alert() 提示框
3. confirm() 确认框
4. prompt() 弹出文本框
5. isNaN()

window中常用的属性

location 位置

location.href 获取和修改浏览器的访问地址
获取 location.href
修改 location.href=“http://www.tmooc.cn”;
location.reload(); 刷新

history 历史当前窗口历史

history.length 页面数量
history.back() 返回上一页面
history.forward() 前往下一页面
history.go(n) n正值前进负值后退 0刷新

screen 屏幕

screen.width/height 得到屏幕的分辨率
screen.availWidth/Height 得到屏幕可用分辨率

navigator 导航、帮助

navigator.userAgent; 浏览器版本信息

window相关的事件

窗口点击事件 onclick
页面加载完成事件 onload
页面获取焦点事件 onfocus
页面失去焦点事件 onblur

eval()

可以将字符串以js代码的形式执行

通过js代码给元素添加样式

元素对象.style.样式名 = “值”;

定时器

每隔一段事件执行某段代码
格式： setInterval(方法,时间间隔);
setInterval(function(){
alert(“哈哈”);
},1000);

停止定时器

var timer = setInterval(function(){},1000);
clearInterval(timer);

DOM 文档对象模型

查找元素

通过id获取页面元素
var d = document.getElementById(“d1”);
通过标签名获取元素
var arr = document.getElementsByTagName(“div”);
通过class属性值查找元素
var arr = document.getElementsByClassName(“class”);
通过name属性值查找元素
var arr = document.getElementsByName(“name”);
获取body
document.body

创建元素对象

var d = document.createElement(“div”);

添加元素

父元素.appendChild(元素对象);

插入元素

父元素.insertBefore(新元素,弟弟元素);

删除元素

父元素.removeChild(被删除的元素);

事件相关内容

事件：事件就是一些特定的时间点，事件包括：鼠标事件、键盘事件、状态改变事件

事件分类

鼠标事件：点击事件onclick，鼠标移入事件onmouseover，鼠标移出事件onmouseout, 鼠标按下事件onmousedown，鼠标抬起事件onmouseup,鼠标移动事件onmousemove
键盘事件：键盘按下事件 onkeydown 键盘抬起事件onkeyup
状态改变事件：获取焦点onfocus 失去焦点onblur 窗口尺寸改变onresize
值改变事件onchange 表单提交事件onsubmit 页面加载完成事件onload

事件对象event

事件对象中保存着事件相关的信息

鼠标事件中保存鼠标的坐标信息 event.clientX/Y
键盘事件中保存按键信息 event.keyCode String.fromCharCode(65);
任何事件中都可以得到事件源对象
事件源就是添加事件的标签
var obj = event.target||event.srcElement; (解决兼容性写法)

事件的绑定

- 事件有两种绑定方式
1. 通过标签内部的事件属性添加事件方法中的this代表window对象
2. 动态绑定：通过js代码给元素添加事件执行的方法中this代表事件源

事件的传递(事件冒泡)

如果一个范围内有多个元素响应事件，则事件的传递顺序是从最底层往上层传递（类似于气泡所以称为事件冒泡）

研程序笔记

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
HTML---JavaScript学习笔记

###JavaScript作用：给页面添加动态效果和动态数据， html负责搭建页面结构和内容，css美化页面###JS历史1995年由网景（NetScape）公司发布，LiveScript，同年更名为JavaScript，和Java语言没啥关系，为了蹭热度###JS特点属于脚本语言，不需要编译，由浏览器解析执行js语言可以嵌入到html页面中js语言基于面向对象js属于弱...
复制链接

扫一扫