js嵌入页面的方式

  • 内联脚本（Inline Script）：将JavaScript代码直接写在HTML文件中的<script>标签内。这种方式简单直接，适用于少量代码的情况。优点是方便快捷，缺点是可维护性较差，不利于代码的复用和分离。

    1
    2
    3
    <script>
      // JavaScript code here
    </script>

  • 外部脚本（Internal Script）：将JavaScript代码写在HTML文件的<script>标签内，但是通过src属性引入外部JavaScript文件。这种方式适用于较大的JavaScript代码或多个页面共用的代码。优点是可以将JavaScript代码单独存放在外部文件中，方便维护和复用，缺点是需要额外的HTTP请求来加载外部文件。

    1
    <script type="text/javascript" src="hello.js"></script>

  • 行间事件,onclick、onmouseover等。这种方式可以在HTML标签中直接定义事件处理函数

    1
    <input type="button" name="" value="弹框" onclick="alert('hello!')">

js注释

  • 单行文本注释

    1
    //

  • 多行文本注释

    1
    2
    3
    /**

    */

js基础语法及dom操作

变量声明-const let var

  1. var

    • 区别：使用var声明的变量是函数作用域（function-scoped），在函数内部声明的变量在函数外部不可访问。

    • 优点：在ES5及之前的版本中是唯一的声明变量的方式，兼容性较好。

    • 缺点：存在变量提升（hoisting）的问题，可能会导致意外的行为；没有块级作用域，可能会造成变量污染。

1
2
3
4
5
function example() {
  var x = 10;
  console.log(x);
}
console.log(x);

  1. let

    • 区别：使用let声明的变量是块级作用域（block-scoped），在块级作用域内声明的变量只在该块内部有效。

    • 优点：解决了var存在的变量提升和缺乏块级作用域的问题，更安全和可靠。

    • 缺点：在ES6之前的浏览器可能不支持。

1
2
3
4
5
{
  let y = 20;
  console.log(y);
}
console.log(y);

  1. const

    • 区别：使用const声明的变量是常量，一旦赋值就不能再修改。

    • 优点：可以确保变量的值不会被意外修改，提高代码的可靠性。

    • 缺点：必须在声明时初始化，且不能再次赋值，不适用于需要动态改变值的情况。

1
2
const PI = 3.14;
PI = 3.14159;

js 基本数据类型

  • 基本数据类型

    1. Number
    2. String
    3. Boolean
    4. Undefined
    5. null
    6. symbol

  • 引用类型（object）

    复杂数据类型统称为Object es6新添加有 Set Map

基本数据类型存储在栈中；引用类型的对象存储在堆中; 当变量赋值，解析器首先要确认引用类型还是基本类型

  • 声明变量时不同的内存地址分配：
    • 简单类型的值存放在栈中，在栈中存放的是对应的值
    • 引用类型对应的值存储在堆中，在栈中存放的是指向堆内存的地址
  • 不同的类型数据导致赋值变量时的不同：
    • 简单类型赋值，是生成相同的值，两个对象对应不同的地址
    • 复杂类型赋值，是将保存对象的内存地址赋值给另一个变量。也就是两个变量指向堆内存中同一个对象

js 操作属性

  • js通过document.getElementById获取DOM元素，
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>js 基本语法</title>
	<script type="text/javascript">
	/**
	onload是window窗口对象的事件属性， 语句是把“匿名函数”赋值给window的onload事件属性， 当window加载完成时会触发onload事件，也就触发了“匿名函数”，执行函数体内的语句。
	*/
	window.onload = function(){
		// 获取DOM元素
		var oA = document.getElementById('link1');
		// 修改元素href属性
		oA.href = "http://www.baidu.com";
		// 修改元素title属性
		oA.title = "go baidu.com";
		// 浏览器弹窗
		alert(oA.id);
	}
	</script>
</head>
<body>
	<div id="div1" class="div1" title="这是div元素，看到了吗？">div元素</div>
	<a href="#" id="link1">百度</a>
</body>
</html>
  • css的属性 - 的，在js中可以用大写表示； 例如 font-size => fintSize,
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script type="text/javascript">

	window.onload = function(){

		var oDiv = document.getElementById('div1');
		// style属性中的样式属性，没有“-”的，写法相同
		oDiv.style.color = 'red';
		oDiv.style.background = "gold";

		// style属性中的样式属性，带有“-”的，写成驼峰式
		oDiv.style.fontSize = "30px";
	}
	</script>
</head>
<body>
	<div id="div1">div元素</div>

</body>
</html>

js操作class - className

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		.box01{
			width: 200px;
			height:200px;
			background-color:gold;
		}
		.box02{
			width: 300px;
			height:300px;
			background-color:red;
		}
	</style>
	<script type="text/javascript">
		window.onload = function(){
			var oDiv = document.getElementById('div1');
            // 通过className修改元素的class
			oDiv.className = 'box02';

		}
	</script>
</head>
<body>
	<div class="box01" id="div1"></div>
</body>
</html>

通过 [ ] 的方式修改元素属性

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script type="text/javascript">
		window.onload = function(){
			var oDiv = document.getElementById('div1');
			/* 通过 [] 操作属性可以写变量	*/
			oDiv['style']['color'] = 'red';

			/* 通过 innerHTML可以读写元素的内容	*/
			alert(oDiv.innerHTML);
			var oDiv2 = document.getElementById('div2');
			/*oDiv2.innerHTML = '已修改后的内容';*/
			oDiv2.innerHTML = "<a href='http://www.baidu.com'>百度</a>";
		}
	</script>
</head>
<body>
	<div id="div1">div元素</div>
	<div id="div2"></div>
</body>
</html>

函数，onclick事件

  • js函数由 function 声明

    1
    2
    3
    function aa(){
        // 逻辑操作			
    }

  • onclick() 事件

给元素添加点击事件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>javascript 函数</title>
	<script type="text/javascript">
		function inputAlert(){
			alert('hello!');			
		}

	</script>
</head>
<body>
	<input type="button" name="" value="弹框" onclick="inputAlert()">
</body>
</html>

案例 - 点击给元素换色

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>换肤</title>
	<link rel="stylesheet" type="text/css" href="1.css" id="link1">
	<script type="text/javascript">

	window.onload = function(){
		var oBtn01 = document.getElementById('btn01');
		var oBtn02 = document.getElementById('btn02');
		oBtn01.onclick = skin01;
		oBtn02.onclick = skin02;
	}
	// 通过修改link标签属性，修改不同的css文件，达到换肤效果
	 function skin01(){
	 	var oLink = document.getElementById('link1');
	 	oLink.href = '1.css';
	 }

	 function skin02(){
	 	var oLink = document.getElementById('link1');
	 	oLink.href = '2.css';
	 }
	</script>
</head>
<body>
	<input type="button" name="" value="皮肤01" id="btn01">
	<input type="button" name="" value="皮肤02" id="btn02"> 
	<div class="box01"></div>
	<div class="box02"></div>
</body>
</html>

通过js给元素添加onclick事件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script type="text/javascript">
	  window.onload = function(){

	  	var oDiv = document.getElementById('div1');
		// 给元素添加点击事件，执行匿名函数
		oDiv.onclick = function(){
	  		alert('hello!');
	  	}

	  }
	</script>
</head>
<body>
	<div id="div1">div元素</div>
</body>
</html>

函数传参

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script type="text/javascript">
		window.onload = function(){

			var oDiv = document.getElementById('div1');

			changestyle('color','gold');
			changestyle('background','red');
			changestyle('width','300px');
			changestyle('height','300px');
			changestyle('fontSize','30px');

			function changestyle(styl,val){				
				oDiv.style[styl] = val;
			}
		}

	</script>
</head>
<body>
	<div id="div1">div元素</div>
</body>
</html>

函数 return 关键字

  • 在函数内部使用return关键字可以将一个值返回给调用该函数的地方。
  • return后面可以跟着一个表达式、变量、常量或者函数调用。
  • 如果函数没有明确使用return语句，默认会返回undefined。
  • 一个函数可以有多个return语句，但一旦执行到其中一个return语句，函数就会结束。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
function multiply(a, b) {
  if (typeof a !== 'number' || typeof b !== 'number') {
    return 'Please provide valid numbers';
  }

  // 正常计算乘积并返回
  return a * b;
}

function checkNumber(num) {
  if (num > ) {
    return 'Positive';
  } else if (num < ) {
    return 'Negative';
  }
  // 没有明确返回值，默认返回undefined
}

console.log(multiply(5, 3)); // 输出：15
console.log(multiply('hello', 3)); // 输出：Please provide valid numbers

console.log(checkNumber(10)); // 输出：Positive
console.log(checkNumber(-5)); // 输出：Negative
console.log(checkNumber()); // 输出：undefined

条件语句

  • if

    • if语句允许根据条件执行代码块。
    • 语法：if (condition) { // code to be executed }

  • if … else …

    • if语句允许根据条件执行代码块。
    • 语法：if (condition) { // code to be executed }

  • switch

    • switch语句用于根据不同的情况执行不同的代码块。

    • 语法：

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      switch(expression) {
        case value1:
          // code block 1
          break;
        case value2:
          // code block 2
          break;
        default:
          // default code block
      }

  • 三元运算符

    • 三元运算符是一种简洁的条件语句，可以代替简单的if ... else ...语句。

    • 语法：

      1
      2
      // 如果条件为真，则返回`expression1`；否则返回`expression2`。
      condition ? expression1 : expression2