Javascript

Posted 2023-04-02 梦想周游世界

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Javascript相关的知识，希望对你有一定的参考价值。

javascript

- - Javascript

Javascript

一、概述

脚本语言
解释性
解释器作为浏览器一部分
弱类型，定义变量时不需要指定类型。
动态类型，变量类型可以发生变化。
基于原型继承
内置支持类型

作用：给页面添加动态功能。

二、JS组成

ECMAScript：js标准语法
文档对象模型（DOM）
浏览器对象模型（BOM）

三、JS的导入

3.1 在页面元素中使用

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
		<input type="button" value="点击我试试" onclick="alert('Hello，world')"/>
	</body>
</html>

3.2 在script标签中使用

script标签可以放在页面大多数位置，但是推荐放到最后，html的外面。

注意：type属性可以不写，如果写，值应该是text/javascript

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
		<input type="button" value="点击我试试1" onclick="fn1()"/>
	</body>
</html>
<script type="text/javascript">
	function fn1()
		alert('Hello');
	
</script>

3.3 外部导入

使用script引入外部的js，可以在head中引入，也可在大多数位置引入，推荐写在最后。

注意：

type属性可以不写，如果写，值应该是text/javascript
结束标签必须要写，不能直接改成自结束。
不能在中间写js代码。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
		<input type="button" value="点击我试试2" onclick="fn2()"/>
	</body>
</html>
<script type="text/javascript" src="js/common.js" ></script>

四、变量

var作为变量定义的关键字。

弱类型，动态类型，命名规则与Java相似。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
	</body>
</html>
<script>
	var n = 100 // 弱类型
	// 类似Java中的sout
	console.log(n)
    // 动态类型
	n = "hello, world"
	console.log(n)
</script>

五、基本类型

基本类型有5种：

Number
String
Boolean
Undefined
Null

<script>
	var age = 9; // number
	console.log(typeof(age));
	console.log(age / 2); // 数字不区分小数整数，所以9/2 =4.5
	var name = "mary";
	console.log(typeof(name)); // string
	var flag = true;
	console.log(typeof(flag)); // boolean
	var phone;
	console.log(phone); // undefined
	console.log(typeof(phone)); // undefined
	var person = null;
	console.log(person); // null
	console.log(typeof(person)); // object
</script>

六、引用类型

对象类型：Object类型。

语法：

<script>
	// 使用对象类型
	var obj = new Object();
	obj.name = "张三";
	obj.sex = "男";
	obj.say = function()
		alert("hello, world");
	
	console.log(obj.name);
	console.log(obj.sex);
	var n = "name";
	console.log(obj[n]);
	console.log(obj["sex"]);
	obj.say();
	
	// 使用map
	var m = "name":"李四", sex:"男" // JSON（JavaScript Object Notation）格式
	console.log(m.name);
	console.log(m.sex);
	console.log(m["name"]);
	console.log(m["sex"]);
</script>

数组类型：

<script>
	// 定义数组，两种方式
	var arr1 = new Array();
	var arr2 = [1,2,3,4];
	// 设置数组的值
	arr1[0] = 5;
	arr1[1] = 10;
	console.log(arr1[1]);
	console.log(arr1.length) // 2
	arr1[10] = "hello";
	console.log(arr1[10]);
	console.log(arr1.length) // 11
	console.log(arr1[5]); // undefined
	
	// js中数组有java中集合的作用
	arr2[arr2.length] = 5;
	console.log(arr2[4]);
	// 通过push添加元素
	arr2.push(10);
	console.log(arr2[5]);
	
	// 循环遍历
	for (var i=0;i<arr2.length;i++) 
		console.log("i==" + arr2[i]);
	
	// for in循环
	// 注意:i还是下标
	for(var i in arr2)
		console.log("==" + arr2[i]);
	
	
	// splice可以删除，可以修改，可以添加
	var arr3 = [1,2,3,4,5,6];
//	 从下标3开始删除2个元素
//	arr3.splice(3, 2)
// 从下标3开始删除0个元素，添加8和9，相当于添加
//	arr3.splice(3, 0, 8, 9)
// 从下标3开始删除2个元素，添加8和9，相当于修改
	arr3.splice(3, 2, 8, 9)
	console.log(arr3)
</script>

七、运算符

7.1 算术运算符

与Java类似，不同之处在于，js中只有number类型，所以5/2结果为2.5

7.2 赋值运算符

与Java类似

7.3 逻辑运算符

与Java类似

7.4 关系运算符

大多与Java类似

==：比较值是否相等，所以数字2与字符串"2"是相等的。

===：即比较值也要比较类型，所以数字2与字符串"2"不相等。

<script>
	var n = 2;
	var m = "2";
	console.log(n == m) // true
	console.log(n === m) // false
</script>

7.5 三目（三元）运算符

与Java类似

7.6 分支结构

if结构与Java用法一致。

但是判断条件与Java有区别，Java中判断条件必须是布尔值。而JS中0、null、undefine、NaN表示false，其他表示true。

// 以下代码是可以执行的

if(1)

注意：NaN是not a number的缩写，表示不是数字。如果变量没有定义，则会报错。

变量没有定义和undefine区别：

var a;
console.log(a); // undefine
console.log(b); // 会报错 b is not define
console.log(a.name); // 会报错

switch与Java一致。

7.7 循环结构

JS中的for的基本用法，while、do-while、break、continue与Java一致。

注意：for循环中一定不要写int i，JS中没有int

for…in循环

var arrstr = ["mary", "jack", "tom", "andy"];
for(var i = 0; i < arrstr.length; i++)
    console.log(arrstr[i]);

// 注意for in循环中的变量还是下标，与Java的foreach不同
for(var s in arrstr)
    console.log(arrstr[s]);

八、函数

8.1 函数的定义与调用

函数定义的语法：

function 函数名(参数列表)

函数调用的语法：

函数名()

注意：在JS中，函数的调用时，如果函数有参数，可以传相应的参数，也可以少传或不传，但是无论如何，传入的参数都是按顺序匹配。

function m1()
    alert(5);


function m2(m, n)
    alert(m);


function m3(m = 10, n) // 10为默认值，没有传参时值为10
    alert(m);


function m4()
    return 5; // 有返回值就return，没有就不用return


m2(8); // 显示8
m2("hello", 5); // 显示hello
m2(); // 显示undefine
m3(); // 显示10
m3("hello"); // 显示hello
var n = m4(); // 得到函数调用的返回值
alert(n);

8.2 函数变量

类似于Java中方法引用。或者C语言中的方法指针。

var n = m1; // 定义变量，值为一个函数
n(); // 调用该函数


function m1()
    alert(5);

8.3 函数参数

m2(m1);
var n = m1;
m2(n);

function m1()
    alert("hello");


// 由于函数中m进行函数调用，意味着m参数必须传入一个函数
function m2(m)
    m();

8.4 匿名函数

var n = function()
    alert("hello");
;

n();

// 将匿名函数传入到函数的参数中
m2(function()
    alert("world");
);

function m2(m)
    m();

8.5 函数的返回值

function f1()
    // 第一种写法，函数中定义函数
    //		var n = function()
    //			alert("hello");
    //		
    // 第二种写法，函数中定义函数
    //		function n()
    //			alert("hello");
    //		
    //		return n;

    // 使用匿名函数
    return function()
        return function()
            alert("world");
        
    


var m = f1();
m()();

f1()()();

九、弹窗函数

alert(msg)弹出一个确定按钮的窗口。

confirm(msg)弹出一个有确定和取消按钮的窗口。

<script>
	function fn1()
		 if(confirm("确定要删除吗？"))
		 	alert("你点击了确定")
		 else
		 	alert("你点击了取消")
		 
	
</script>

prompt(msg, default)弹出一个可以输入内容的窗口。

msg：提示信息
default：输入框中的默认值
返回值为输入的内容，如果没有输入任何内容，点击确定后返回值为空串，如果点击取消，返回null

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
		<input type="button" value="输入" onclick="fn2()"/>
	</body>
</html>
<script>
	function fn2()
		var r = prompt("请输入姓名", "mary")
		if(r)
		 	alert("你点击了确定")
		 else
		 	alert("你点击了取消或者没有输入任何内容")
		 
	
</script>

十、系统函数

parseInt()：将一个内容转换成整数。

<script>
	var n = 5.5;
	console.log(parseInt(n)); // 将小数转换成整数
	n = "123";
	console.log(parseInt(n) + 1); // 将字符串转换成整数
	n = "235a34563";
	console.log(parseInt(n) + 1); // 236,将字符串转换成整数
	n = "a234";
	console.log(parseInt(n)); // 得到NaN
</script>

parseFloat()：将一个内容转换成小数。

<script>
	var n = 5.5;
	console.log(parseFloat(n)); // 将小数转换成小数
	n = "123.3";
	console.log(parseFloatJavaScript

目录
JavaScript
1 JavaScript简介1.1 JavaScript了解
1.2 ECMAScript和JavaScript的关系
1.3 JavaScript特点
1.4 JavaScript版本
2 代码相关2.1 注释
2.2 引入JavaScript的方式
2.3 js语法结构
2.4 变量
2.5 常量

JavaScript
1 JavaScript简介
1.1 JavaScript了解

js也是一门编程语言 它也是可以写后端代码的

用js一统天下 前后端都可以写

nodejs 支持js代码跑在后端服务器上

然而并不能 想的太天真了!!!
JavaScript跟Java一毛钱关系都没有，纯粹是为了蹭当时java的热度

1.2 ECMAScript和JavaScript的关系
ECMAScript和JavaScript的关系是，前者是后者的规格，后者是前者的一种实现。
1.3 JavaScript特点
JavaScript 是脚本语言

JavaScript 是一种轻量级的编程语言。

JavaScript 是可插入 HTML 页面的编程代码。

JavaScript 插入 HTML 页面后，可由所有的现代浏览器执行。

JavaScript 很容易学习
1.4 JavaScript版本
主要还是用的5.1和6.0
2 代码相关
2.1 注释
// 单行注释

/*
多行注释1
多行注释2
多行注释3
*/

2.2 引入JavaScript的方式
# 两种引入方式

1.script标签内部直接书写js代码
2.script标签src属性引入外部js代码

2.3 js语法结构
js是以分号作为语句的结束
但是如果不写分号，也能够正常执行 
但是它就相当于没有结束符

2.4 变量
"""
在js中 首次定义一个变量名的时候需要用关键字声明
	1.关键字var
		var name=‘jason‘
	2.es6推出的新语法
		let name=‘jason‘
		如果编辑器支持的版本是5.1那么无法使用let
		如果是6.0则向下兼容 var let
"""

# var与let的区别
1 申明变量n=10
2 for循环中使用了局部变量n
3 循环结束后
# var申明的n!=10		let申明的n=10


"""
var在for循环里面定义也会影响到全局
let在局部定义只会在局部生效
"""


2.5 常量
# python中没有真正意义上的常量 约定全大写就表示常量
# js中是有真正意义上的常量的
const pi = 3.14







以上是关于Javascript的主要内容，如果未能解决你的问题，请参考以下文章 
 前端书籍集合
 前端书籍集合
 前端书籍推荐
 前端之Javascript
 前端基础之JavaScript
 前端一点点