javascript

Posted 2022-04-27 Al_tair

tags:

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

javascript

javascript

大家好呀，我是小笙，我学习了韩老师VIP课程，以下是我的javascript学习笔记，和大家分享一下

javascript

基本概念

W3school教程

概念：JavaScript能改变 html内容，能改变 HTML属性，能改变 CSS 样式，能完成页面的数据验证

特点:

JavaScript 是一种解释型的脚本语言，C、C++等语言先编译后执行，而 JavaScript 是在程序的运行过程中逐行进行解释
JavaScript 是一种基于对象的脚本语言，可以创建对象，也能使用现有的对象(有对象)

JavaScript 是弱类型的，对变量的数据类型不做严格的要求，变量的数据类型在运行过程可以变化

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <!-- js 代码可以写在 script 标签中 -->
        <!-- type="text/javascript" 表示这个脚本(script)类型是 javascript -->
        <script type="text/javascript">
            var age = 80;
            console.log(typeof age);
            age = "罗念笙";
            console.log(typeof age);
        </script>
    </head>
    <body>
    </body>
</html>

跨平台性（只要是可以解释 JS 的浏览器都可以执行，和平台无关）

两种方式使用javascript语句

1.方式一：在script中书写

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<!-- 方式一：在script中书写：可以在head标签，body标签以及html标签之外 推荐放在head标签里 -->
		<script type="text/javascript">
			console.log("head内")
		</script>
	</head>
	<body>
		<script type="text/javascript">
			console.log("body内")
		</script>
	</body>
</html>
<script type="text/javascript">
	console.log("html外")
</script>

2.方式二：外部引入

// js文件
alert("外部引入");

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<!-- 2.方式二：外部引入  -->
		<script type="text/javascript" src="js/demo.js"></script>
	</head>
	<body>
	</body>
</html>

变量

概念:变量表示存储数据的容器

数据类型介绍

数值类型： number
字符串类型： string
对象类型：object
布尔类型： boolean
函数类型： function

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script type="text/javascript">
            var test = 100;
            console.log(typeof test);
            //注意：String 字符串可以双引号括起来，也可以单引号括起来 "a book of JavaScript"、'abc'、 "a"、""
            test = "100";
            console.log(typeof test);
            test = document.getElementById("body");
            console.log(typeof test);
            test = true;
            console.log(typeof test);
            test = new Function();
            console.log(typeof test);
        </script>
    </head>
    <body id="body">
    </body>
</html>

特殊值

undefined 变量未赋初始值时，默认 undefined
null 空值
NaN Not a Number 非数值

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script type="text/javascript">
            var test;
            console.log(test);
            console.log(typeof test);
            test = 1 + 'age';
            console.log(test);
            console.log(typeof test);
            test = null;
            console.log(test);
            console.log(typeof test);
        </script>
    </head>
    <body>
    </body>
</html>

运算符

算术运算符

赋值运算符

关系运算符

注意区别 == 和 ===

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script type="text/javascript">
            a = "100";
            b = 100;
            // 等于： == 是简单的做字面值的比较
            console.log(a == b);
            // 全等于： === 除了做字面值的比较之外，还会比较两个变量的数据类型
            console.log(a === b)
        </script>
    </head>
    <body>
    </body>
</html>

逻辑运算符

注意 && 和 | | 的使用

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			// 在 JavaScript 语言中，所有的变量，都可以做为一个 boolean 类型的变量去使用
			// 0 、null、 undefined、NaN、""(空串) 都认为是 false
			if(!0) console.log(0);
			if(!null) console.log(null);
			if(!undefined) console.log(undefined);
			if(!"") console.log("");
			
			// && 且运算，有两种情况 => 老韩解读(即 && 返回值是遵守短路与的机制)
			// (1)当表达式全为真的时候,返回最后一个表达式的值
			// (2)当表达式有假的时候,返回第一个为假的表达式的值
			console.log(1 && 2); // 2
			console.log(0 && null); // 0
			console.log(1 && null); // null
			// || 或运算, 有两种情况 => 老韩解读(即|| 返回值是遵守短路或的机制)
			// (1)当表达式全为假的时候，返回最后一个表达式的值
			// (2)当表达式有真的时候。返回第一个为真的表达式的值
			console.log(0 || null); // null
			console.log(1 || 2); // 1
			console.log(0 || 2); // 2
		</script>
	</head>
	<body>
	</body>
</html>

条件符运算

类似Java的三元运算符

<script type="text/javascript">
    varres = 5 > 0?"hello":"ok";
    alert(res); // hello
</script>

数组

javascript数组定义使用的4种方式

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script type="text/javascript">
            // 方式一
            var cars = ["byd","xd","bwm"];
            console.log(cars);
            console.log(cars[0]);

            // 方式二
            var cars2 = []; // 空数组
            cars2[0] = "byd";
            cars2[1] = "xd";
            cars2[2] = "bwm";
            console.log(cars2);

            // 方式三
            var cars3 = new Array("byd","xd","bwm");
            console.log(cars3)

            // 方式四
            var cars4 = new Array();
            cars4[0] = "byd";
            cars4[1] = "xd";
            cars4[2] = "bwm";
            console.log(cars4);
        </script>
    </head>
    <body>
    </body>
</html>

数组使用和遍历

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script type="text/javascript">
            var cars = ["byd","xd","bwm"];
            console.warn("数组长度: " + cars.length)
            for(i = 0;i< cars.length;i++)
                console.log(cars[i]);
            
        </script>
    </head>
    <body>
    </body>
</html>

函数

函数概念

概念：函数是由事件驱动的，或者当它被调用时，执行的可重复使用的代码

在 js 中如果要执行函数，有两种方式

主动调用函数
通过事件去触发该函数

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script type="text/javascript">
            function f()
                alert("调用方法f()");
            
            // 主动调用f()
            f();
        </script>
    </head>
    <body>
        <!-- 通过按钮事件去触发该函数 -->
        <button type="button" onclick="f()">按钮</button>
    </body>
</html>

函数定义方式

方式 1: function 关键字来定义函数

// 格式
function 函数名(形参列表)
    函数体
    return 表达式

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			function f()
				console.log("调用方法f()");
			
			function f2(item)
				console.log("调用方法f(item)"+item);
			
			f();
			f2(100);
			
		</script>
	</head>
	<body>
	</body>
</html>

方式 2: 将函数赋给变量

// 格式
var 函数名 = function(形参列表)
    函数体
    return 参数列表

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			var f = function()
				console.log("f()被调用")
			
			var f2 = function(item)
				console.log("f(item)被调用")
			
			f();
			f2(100);
			var f3 = f;
			f3();
		</script>
	</head>
	<body>
	</body>
</html>

JavaScript 函数注意事项和细节

如果函数的函数名相同，形参列表个数最多的会覆盖掉其他相同名字的函数

<!DOCTYPE html>
<html>
	在JavaScript里的“对象字面量”是什么意思？
 JavaScript字面量
 javascript里面的字面量是啥意思啊？
 JavaScript中对象字面量
 javascript JavaScript的函数（功能）字面量
 javascript中字面量要怎么理解？尤其是函数、数组、对象字面量