JavaScript学习笔记

郑小菜郎

于 2024-03-30 14:55:53 发布

阅读量1.5k

点赞数 32

文章标签： javascript 学习笔记

本文链接：https://blog.csdn.net/qq_53388077/article/details/137073805

版权

JS基础

Web标准

Web标准

Web标准也称为网页标准，有三个组成部分：

HTML:负责网页基本结构（页面元素和内容）
CSS:负责网页的表现效果
JavaScript:负责网页的行为（交互效果）

JS定义

JavaScript是一门跨平台、面向对象的脚本语言，是用来控制网页行为的。
脚本语言通常直接解释执行，不需要编译，缩短了传统编程语言的运行过程

JS引入方式

JS引入方式=JS代码与HTML代码的结合方式

内部脚本：将JS代码定义在HTML页面中
– JavaScript代码必须位于<script><\script>标签之间
– 在HTML文档中可以放置任意数量的<script>
– 一般会把脚本置于<body>元素的底部，可以改善显示速度
外部脚本：将JS代码定义在外部JS文件中，然后引入到HTML页面中
– 外部JS文件只包含JS代码，不包含<script>标签
– <script>标签不能自闭和

正确的：<script src=“js/demo.js”><\script>
自闭合：<script src=“js/demo.js”\>

JS基础语法

书写语法

区分大小写
结尾分号可有可无
注释：
- //单行注释
- /*多行注释 */

输出语句

1.window.alert();//写入警告框，window.可以省略
  或alert();
2.document.write();//写入HTML页面，在浏览器展示
3.console.log();//写入浏览器控制台

在这里插入图片描述

变量
JS中用var关键字来声明变量

JS是一门弱类型的语言，变量可以存放不同类型的值
变量名规则：

组成字符可以是字母、数字、下划线、或美元符号
数字不能开头
建议使用驼峰命名

var a;
a = "张三";

特点1：作用域比较大，全局变量
特点2：可以重复定义（后面覆盖前面的）

var x = 1;
var x = "A";
alert(x);//x=A

注意事项：ECMAScript 6新增了let关键字和const关键字来定义变量
let：let所声明的变量只在let关键字所在的代码块内有效，且不允许重复声明
const：声明一个只读的常量，声明之后不能改变

数据类型
JS中分为原始类型和引用类型

number：数字（整数、小数、NaN）
string：字符串，单双引皆可
boolean：布尔 true false
null：对象为空
undefined：当声明的变量未初始化时，该变量的默认值是undefined

使用typeof运算符可以获取数据类型

var a;
alert(typeof null);//object  （早期错误沿用至今）

运算符
===：全等运算符

==：会进行类型转换
===: 不会进行类型转换

var a=10;
alert(a=="10");//true
alert(a==="10");//false
alert(a===10);//true

类型转换

字符串类型转为数字：如果字符串字面值不是数字则转为NaN

alert(parseInt("12"));//12
alert(parseInt("12A45"));//12
alert(parseInt("A15"));//NaN

其他类型转化为boolean：
number：0和NaN为false，其他均为true
String：空字符串为false，其他均为true（空格也是true）
Null和undefined：均转为false

JS函数

JS函数通过function关键字进行定义

方式一：
function functionName(参数1,参数2...){
	//执行的代码
}
方式二：
var functionName = function(参数1,参数2...){
	//执行的代码
}

注意：

形参不需要类型
返回值也不需要定义类型，可直接return
函数调用时可以传递任意个数的参数

JS对象

Array

定义

//方式一：var 变量名=new Array(元素队列);
//方式二：var 变量名=[元素列表];

var arr = new Array(1,2,3,4);
var arr=[1,2,3,4];

arr[10]="hello";

特点：长度可变类型可变

var arr=[1,2,3,4];
arr[10]=50;
//arr为[1,2,3,4,empty*5(undefined),50]
arr[9]="A";
arr[8]=true;
//arr为[1,2,3,4,empty*4,true,'A',50]

属性：length
方法：
forEach()：遍历数组有值的元素（undefined不会遍历）
push()：添加到数组的末尾
splice()：从数组中删除元素

var arr=[1,2,3,4];
arr[10]=50;
arr.forEach(function(e){
	console.log(e);
})//输出：1,2,3,4,50

//ES6 箭头函数：(...)=>{...} --简化函数定义
//简化形式
arr.forEach((e)=>{
console.log(e);
})


arr.push(7,8,9);

arr.splice(2,2);
splice(startnumber,deletecount )

string

定义

//方式一：
var str=new String("Hello");
//方式二：
var str="Hello";
var str='Hello';//单双引号均可

属性：

length：字符串的长度
charAt()：返回在指定位置的字符
indexOf()：检索字符串
trim()：去除字符串两边的空格
substring()：提取字符串中两个指定的索引号之间的字符

var str="hello string";
console.log(str.length);//12

//charAt
console.log(str.charAt(3));//l
//indexof
console.log(str.indexOf("lo"))//3
//trim
str=" Hello String "
var s=str.trim();
console.log(s);//Hello String
//substring(start,end) [start,end) 含头不含尾
console.log(s.substring(0,5));//Hello

JS自定义对象

/*定义格式：
var 对象名={
	属性名1：属性值1，
	属性名2：属性值2，
	属性名3：属性值3，
	函数名称：function(形参列表){}
};*/
var user={
	name:"Tom",
	age:20,
	gender:"male",
	eat:function(){
		alert("用膳");
	}
	//简化方法：
	eat(){
		alert("用膳");
	}
}

JSON

概念：JavaScript Object Notation，javascript对象标记法
JSON是通过JavaScript对象标记法书写的文本
JSON语法简单，层次结构鲜明，现多用于作为数据载体，在网络中进行数据传输

{
	"name":"Tom",
	"age":20,
	"gender":"male"
}

//定义
var userStr='{"name":"Jerry","age":18,"addr":["北京","上海","西安"]}';

value的数据类型为：

数字
字符串（在双引号）
逻辑值（true或false）
数组（在方括号）
对象（在花括号中）
null

//JSON字符串转为JS对象
var jsObject = JSON.parse(userStr);
alert(userStr.name);//错误，此时userStr是一个字符串，并不是对象
alert(jsObject.name);//Tom

//JS对象转为JSON字符串
var jsonStr=JSON.stringify(jsObject);

BOM

概念：Browser Object Model 浏览器对象模型，允许JavaScript与浏览器对话，JavaScript将浏览器的各个组成部分封装成对象
组成：

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

Window对象
介绍：浏览器窗口对象
获取：直接使用window，其中window.可以省略

window.alert("hello");
alert("hello");

属性：

history
location
navigator

方法：

alert():显示带有一段消息和一个确认按钮的警告框
confirm():显示带有一段信息以及确认按钮和取消按钮的对话框
setInterval():按照指定的周期（以毫秒计）来调用函数或计算表达式
setTimeout():在指定的毫秒数后调用函数或计算表达式

//confirm有返回值
var flag=comfirm("您确认删除该记录吗？");
alert(flag);//确认=true 取消=false

//setInterval --周期性地执行某一个函数
var i=0;
setInterval(function(){
	i++;
	console.log("定时器执行了"+i+"次");
},2000);

//setTimeout --延迟指定时间执行一次
setTimeout(function(){
	alert("JS");
},2000);

Location对象
介绍：地址栏对象
属性：href:设置或返回完整的URL

alert(location.href);//返回地址栏URL

location.href="https://www.baidu.com";//转到当前地址

DOM

概念：Document Object Model，文档对象模型

将标记语言的各个组成部分封装为对应的对象：

Document：整个文档对象
Element：元素对象
Attribute：属性对象
Text：文本对象
Comment：注释对象

JavaScript通过DOM对HTML进行操作：

改变HTML元素的内容
改变HTML元素的样式（CSS）
对HTML DOM事件作出反应
添加和删除HTML元素

DOM树：

在这里插入图片描述
DOM树
DOM定义了访问HTML和XML文档的标准，分为三个不同的部分：
1.Core DOM - 所有文档类型的标准模型

Document：整个文档对象
Element：元素对象
Attribute：属性对象
Text：文本对象
Comment：注释对象
2.XML DOM - XML文档的标准模型
3.HTML DOM - HTML文档的标准模型
Image:<img>
Button:<input type=‘button’>

HTML中的Element对象可以通过Documen对象获取，而Document对象是通过window对象获取
Document对象中提供了以下获取Element元素对象的函数：

//1.根据id属性值获取，返回单个Element对象
var h1=document.getElementById('h1');

//2.根据标签名称获取，返回Element对象数组
var divs=document.getElementsByTagName('div');

//3.根据name属性值获取，返回Element对象数组
var hobbys=document.getElementsByName('hobby');

//4.根据class属性值获取，返回Element对象数组
var clss=document.getElementsByClassName('cls');

//修改HTML元素举例
var divs = document.getElementsByClassName('cls');
var div1 = divs[0];

div1.innerHTML = "哈哈哈";
//innerHTML 是可以识别HTML标签的
div1.innerHTML += "<font color='red'>very good</font>";

JS事件监听

事件：HTML事件是发生在HTML元素上的“事情”
事件监听：JS可以在事件被侦测到时执行代码

事件绑定

//方式一：通过HTML标签中的事件属性进行绑定
<input type="button" onclick="on()" value="按钮1">

<script>
	function on(){
		alert('我被点击了');
	}
</script>

//方式二：通过DOM元素属性绑定

<input type="button" id="btn" value="按钮2">

<script>
	document.getElementById('btn').onclick=function(){
		alert('我被点击了！');
	}
</script>

常见事件

事件名	说明
onclick	鼠标单击事件
onblur	元素失去焦点
onfocus	元素获得焦点
onload	当某个页面或图像被完成加载
onsubmit	当表单提交时触发该事件
onkeydown	某个键盘的键被按下
onmouseover	鼠标被移到某元素上
onmouseout	鼠标从某元素移开

郑小菜郎

关注

32
点赞
踩
39

收藏

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

JavaScript是一门跨平台、面向对象的脚本语言，是用来控制网页行为的。脚本语言通常直接解释执行，不需要编译，缩短了传统编程语言的运行过程/*定义格式：var 对象名={属性名1：属性值1，属性名2：属性值2，属性名3：属性值3，函数名称：function(形参列表){}*/var user={age:20,alert("用膳");//简化方法：eat(){alert("用膳");
复制链接

扫一扫