JavaScript基础学习笔记（1）

最新推荐文章于 2024-06-28 16:20:01 发布

林夕m0420

最新推荐文章于 2024-06-28 16:20:01 发布

阅读量111

点赞数

分类专栏：前端学习 JavaScript 文章标签： javascript

本文链接：https://blog.csdn.net/weixin_42216857/article/details/106989900

版权

前端学习同时被 2 个专栏收录

6 篇文章 0 订阅

订阅专栏

JavaScript

2 篇文章 0 订阅

订阅专栏

要开始学习JavaScript了，这是一个比前边略大的工程项目加油！！

1.简介

在HTML中JavaScript代码必须在<script> </script>标签之间

2.输出

(1)显示方案

window.alert()警告框
document.write()HTML输出
innerHTMLHTML元素
console.log()谷歌浏览器的控制台

(2)实例

innerHTML，结果是在文字的下方输出数字1（是显示数据常用的方法）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<div>JS的第一个实例</div>
		<div id="one"></div>
		<script>
			document.getElementById("one").innerHTML = 1;
		</script>
	</body>
</html>

document.write()在文档完全加载完后使用，会删除已有HTML，且此方法用于测试

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<div>1+1=?</div>
		<button type="button" οnclick="document.write(1+1)">查看结果</button>
	</body>
</html>

浏览器会弹出警报框

<script>
	window.alert(10);
</script>

浏览器控制台会显示数据

<script>
	console.log(10);
</script>

2.语句

(1)语句

由值、运算符、表达式、关键词和注释组成
用分号分隔（推荐使用）
可以使用空格（运算符边）和折行（每行80个以内看着比较舒服丫呀丫！）
注释 “ // ” 双斜杠或 “ /* */ ”

(2)关键词

JavaScript保留词，不可用于变量名
在这里插入图片描述
（该图片来源于https://www.w3school.com.cn）

(3)标识符

可包含字母，数字，下划线以及美元符号
必须以字母开头
对大小写很敏感
变量名使用：①下划线的方法；②以小写字母开头的驼峰格式
放入引号中的数值会被认为是字符串进行级联

(4)运算和运算优先级

加减乘除——“+，-，*，/”
余数——“%”
递增，递减——“++，–”
幂——“**”（Math.pow(x,y)也是同样的作用）
括号的优先级最高

(5)数据类型

字符串值：使用单引号或双引号都可以
数值：整数，小数，科学计数法都可
布尔值：true，false
数组：由方括号书写，项目由逗号分隔
对象：由花括号书写，项目由逗号分隔
使用“typeof”来确定变量的类型
undefined和null值相等，但类型不同
undefined的类型是undefined
null的类型是object
原始数据：可以返回原始数据之一的（string，number，undefined，boolean）
复杂数据：可以返回function和object之一的

3.函数

函数由关键词“function”来定义
使用函数声明或函数表达式

(1)函数声明

function functionName(parameters) {
   要执行的代码
}

(2)函数表达式

函数表达式可以在变量中存储，此变量可以被用于函数
此时函数是匿名函数

var a = function(x,y){ return x + y;};
var b = a(1,2);

(3)Function()内建

可以通过名为Function()的内建函数构造器来定义

var oneFunction = new Function("x","y","return x + y");
var a = oneFunction(1,2);

(4)一些方法

toString()方法可以以字符串返回函数

function oneFuntion(x,y){
	retrun x*y;
}
var a = oneFunction.toString();

(5)函数提升

hoisting是将声明提升到作用域顶端的行为（默认）
应用于变量声明和函数声明
使用表达式定义的函数不会被提升

(6)自调用函数

需要对函数添加括号指示它是一个函数表达式，并在结束时添加小括号。

(function (){
	var a = 2+1;
})();

(7)箭头函数

使用简短的语法来编写函数表达式

<script>
const x = (a,b) => a + b;
document.getElementById("one").innerHTML = x(1+1);
</script>

不适合定义自己的对象方法，没有自己的this
必须在使用前进行定义
使用const更安全
IE11或更早的版本不支持

(8)函数参数

在函数定义中列出的名称，传递到函数或由函数接收到的真实的值
最好为参数设置默认值
如果函数参数传递过多可以使用arguments对象（内置函数）

<!DOCTYPE html>
<html>
<body>
	<p>找到最大的数字</p>
	<p id="one"></p>
	<script>
		function findNum(){
			var i;
			var max = -Infinity;
			for(i==0;i<arguments.length;i++){
				if(arguments[i] >= max){
					max = arguments[i];
				}
			}
			return max;
		}
		document.getElementById("one").innerHTML = findNum(10,20,29);
	</script>
</body>
</html>

(9)函数调用

以函数形式调用函数
函数被定义时函数内部代码不会被执行，当调用函数时内部代码会执行。
this关键字（待补充）
无特定指示调用对象时，默值为全局对象。在web浏览器中，全局对象就是浏览器对象

(10)call()方法

weLike是一个属性方法，它归属于fruit方法，fruit是weLike的拥有者

var fruit = {
	iLike : "orange",
	heLike: "apple",
	weLike: function(){
		return this.iLike + "and" +this.heLike;
	}
}
fruit.weLike();

调用fruit的weLike方法并应用于fruit1对象中

var fruit = {
	welike: function(){
		return this.iLike + "and" +this.heLike;
	}
}
var fruit1 = {
	iLike = "banana",
	heLike = "kiwi fruit",
}
var fruit2 = {
	iLike = "peach",
	heLike = "pear",
}
fruit.weLike.call(fruit1);

call()方法可以接收参数fruit.weLike.call(fruit1,tomatoes,rice);

(11)apply()方法

与call()方法很类似，call()方法分别接受参数，apply()方法接受数组形式的参数
fruit.weLike.call(fruit1,[tomatoes,rice])
因为JavaScript数组没有max方法，所以用Math.max(1,2,3);
Math.max.apply(null,[1,2,3]);
Math.max.apply(Math,[1,2,3]);
Math.max.apply(0,[1,2,3]);
Math.max.apply(" ",[1,2,3]);
在这些情况下都会找打最大值，返回3
在严格模式下，如果apply()方法的第一个参数不是对象，那它将成为调用函数的所有者；在“非严格”情况下，它会成为全局对象

4.语法

(1)初识对象

对象就像生活中的某一件物品，同一类物品都有相同的属性，但是属性值会不同，每一件物品都有相同的方法，但是方法会在不同的时间被执行
对象也是变量，但是对象可能会包含很多值
值对被称为属性

var dianshan = {speed : "100" , color : "绿" , size : "small"};

var dianshan = {
	speed : "100" , 
	color : "绿" , 
	size : "small"
};   //折行与空格都是被允许的

对象执行的动作是方法，是作为属性存储的函数
all:function(){ return "小电扇是" + this.color + "速度是" + this.speed;}
访问对象属性有两种办法,例：
①dianshan.speed;
②dianshan["speed"];
访问对象方法dianshanshili = dianshan.all();此时可以返回该属性代表的值；
若出现dianshanshili = dianshan.all;此种情况，会返回该all函数定义

js的for…in循环

循环中的代码会为每一个属性执行一次代码

<!DOCTYPE html>
<html>
<body>
    <p id = "one"></p>
	<script>
		var x;
		var result = "";
		var dianshan = {
			speed : "100" , 
			color : "绿" , 
			size : "small"
		};
		for(x in dianshan){
			result += dianshan[x];
		}
		document.getElementById("one").innerHTML = x;
	</script>
</body>
</html>

(2)事件

<button onclick='document.getElementById("demo").innerHTML=Date()'>现在的时间是？</button>

常见的HTML事件：
onchange：HTML 元素已被改变
onclick：用户点击了 HTML 元素
onmouseover：用户把鼠标移动到 HTML 元素上
onmouseout：用户把鼠标移开 HTML 元素
onkeydown：用户按下键盘按键
onload：浏览器已经完成页面加载