转行前端（JS篇）：js入门文档整理

qqiuqiu
242 阅读3分钟

一、JavaScript简介

JavaScript已经被广泛用于Web应用开发，常用来为网页添加各式各样的动态功能，为用户提供更流畅美观的浏览效果。通常JavaScript脚本是通过嵌入在HTML中来实现自身的功能的。

主要用来向HTML（标准通用标记语言下的一个应用）页面添加交互行为。

可以直接嵌入HTML页面，但写成单独的js文件有利于结构和行为的分离。

跨平台特性，在绝大多数浏览器的支持下，可以在多种平台下运行。

Javascript提供了基本的数据类型和特殊数据类型用来处理数据和文字。而变量提供存放信息的地方，表达式则可以完成较复杂的信息处理。

二、为什么要学JavaScript？

所有主流浏览器都支持JavaScript

目前，全世界大部分网页都使用JavaScript

它可以让网页呈现各种动态效果

三、正式学习JavaScript

  1. script标签 script标签可被放置在 HTML 页面的 和 部分中， 会告诉 JavaScript 在何处开始和结束。
<script>
	JS代码在这里
	html代码不能写在这里！
</script>
  1. document.getElementById( ) document.getElementById("id").style.color="color";

点我这个Button！

document.getElementById("h1").innerHTML="innerHTML可以替换HTML元素";

  1. 控制台输出

控制台输出：console.log() 清除控制台信息：console.clear()

  1. 注释

HTML注释： JavaScript注释：//、/.../

  1. 数据类型

在 JavaScript 中有

5种不同的数据类型：string number boolean object function 3种对象类型：Object Date Array 2个不包含任何值的数据类型：null undefined 如果对象是 JavaScript Array 或 JavaScript Date，就无法通过typeof来判断他们的类型，因为都是返回Object。

  1. 变量声明

var a = 666; var b = "666 abc";

  1. 数组

var person = { firstName:"John", lastName:"Doe", age:50, eyeColor:"blue" };

  1. 函数

function(){ ... }

  1. 内嵌函数

JavaScript支持嵌套函数，嵌套函数可以访问上一层的函数变量。以下实例中,内嵌函数 plus() 可以访问父函数的 counter 变量。

function add() { var counter = 0; function plus() {counter += 1;} plus();
return counter; }

  1. 正则表达式

正则表达式（在代码中常简写为regex、regexp或RE）使用单个字符串来描述、匹配一系列符合某个句法规则的字符串搜索模式。当你在文本中搜索数据时，你可以用搜索模式来描述你要查询的内容。正则表达式可用于所有文本搜索和文本替换的操作。

语法 /正则表达式主体/修饰符(可选),其中修饰符是可选的。 实例：var patt = /runoob/i

  1. try{ … } catch( ){ … }

try{
//在这里运行代码 throw... }catch(){ //在这里处理错误信息 }

  1. void关键字

javascript:void(表达式) 中最关键的是 void 关键字，该操作符指定要计算一个表达式但是不返回值。

示例：

点击以下链接查看结果：

点我没反应！ 点我!
  1. typeof操作符

typeof操作符返回变量或者表达式的类型 document.getElementById("demo").innerHTML = typeof "john" + "
" + typeof 3.14 + "
" + typeof false + "
" + typeof [1,2,3,4] + "
" + typeof {name:'john', age:34};

四、练习代码

  1. 获取id并设置color
<!DOCTYPE HTML>
<html> 
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>test</title>
</head>
<body>
  <p id="name1">我是丸子</p>
  <p id="name2">我是丸子酱</p>
  
  <script type="text/javascript">
    document.write("Hello world!");
    document.getElementById("name1").style.color="red";
    document.getElementById("name2").style.color="pink";
	
  </script>
</body>
</html>
  1. 引用外部JS文件 --------------------------------index.html--------------------------------
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>引用JS文件</title>
<script src="script.js"></script>
</head>
<body>
</body>
</html>

--------------------------------script.js------------------------------

//请写入JS代码
document.write("Hello wanzi!");
  1. 点击事件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>title</title>
</head>
	
<body>
<!-- start:Js exercise one -->
<h3 id="h1">这是丸子</h3>	
<p id="p1">这是丸子酱</p>
	
<script>
	document.write("<h3>这是秋丸子</h3>");
	document.write("<p>这是秋丸子酱。</p>");
	
	document.getElementById("h1").style.color="red";
	document.getElementById("p1").style.color="pink";
	
	document.getElementById("h1").innerHTML="innerHTML可以替换HTML元素";
	document.write(Date());
	
	function myFunction(){
		alert("This is my first function!");	
	}
</script>
	<br> <br>
	<button type="button" onclick="myFunction()">点我！</button>
	<br> <hr> <br>
<!-- end -->
	
<!-- start:Js exercise two -->
	
	<p id="p3">what！！！</p>
	<p id="p4">怎么回事？</p>
	<button type="button" onclick="secondFunction()">点我啊</button>
	
	<script>
		a=4;
		b=6;
		console.log(a+b);//控制台 F12
		//console.clear();
		
		function secondFunction(){
			document.getElementById("p3").innerHTML="小丸子，";
			document.getElementById("p4").innerHTML="真可爱！";
		}
	</script>
<!-- end -->
</body>
</html>
  1. Javascript数据类型、数组、对象
<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>title</title> 
</head>
<body>
	
<!-- start: Java数据类型 -->
<script>
	var string1="qiaonima";
	var string2="xiaolaodi";
	var string3="nizenmehuishi?";
	document.write(string1 + " ");
	document.write(string2 + " ");
	document.write(string3 + " ");
</script>
<!-- end -->
	
<!-- start: Java数组 -->
	<p id="p1"></p>
	<br>
<script>
	var i;
	var number=new Array();
	number[0]="what";
	number[1]="is";
	number[2]="up";
	number[3]="?";
	
	for(i=0;i<number.length;i++){
		document.write(number[i]+" ");	
	}
	
	function addSpace(){
		document.getElementById("p1").innerHTML="<br>";
	}
	</script>
	<br><br><br>
		<button type="button" onclick="addSpace()">增加空行</button>
<!-- end -->	
	
<!-- start: Java对象 -->
	<script>
		var biaoqingbao=
			{
				first : "丸子，",
				second : "你怎么",
				third : "回事？"
			};
		
		function biaoQingbao(){
			document.write(biaoqingbao.first);
			document.write(biaoqingbao.second);
			document.write(biaoqingbao.third);	
		}
	</script>
	
	<button type="button" onclick="biaoQingbao()">丸子</button>
	<br>
<!-- end -->
	
<!-- start: JavaScript函数 -->
	<br>
	<script>
		function returnNumber(num1,num2,num3){
			document.write(num1+num2+num3);
		}
	</script>	
	<button type="button" onclick="returnNumber(1000,300,14)">caculate</button>
<!-- end -->
</body>
</html>
  1. switch() case
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>title</title>
</head>
<body>
	
<!-- start -->
<p>今天是星期几？</p>
<p id="p1"></p>
<button onclick="myFunction()">点击这里</button>
<script>
function myFunction(){
	var x;
	var d=new Date().getDay();
	switch (d){
  		case 0: x="今天是星期日";
    		break;
 		case 1: x="今天是星期一";
        	break;
  		case 2: x="今天是星期二";
        	break;
        case 3: x="今天是星期三";
   	 		break;
  		case 4: x="今天是星期四";
    		break;
  		case 5: x="今天是星期五";
        	break;
  		case 6: x="今天是星期六";
    		break;
 	}
	document.getElementById("p1").innerHTML=x;
}
</script>
<!-- end -->
</body>
</html>
  1. 正则表达式：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>title</title>
</head>
<body>

<!-- start: search -->
<p>搜索该字符串中stupid的位置：</p>
<p id="p1">you are a stupid boy!</p>
<button onclick="searchStr()">search</button>
<script>
	function searchStr(){
		var str="you are a stupid boy!"
		var n=str.search(/stupid/i);
		document.getElementById("p1").innerHTML=n;
	}
</script>
<br> <br>
<!-- end -->
	
<!-- start: replace -->
<p> 替换该字符串的"丸子" </p>
<p id="p2">丸子，你怎么回事?<p>
<button onclick="strReplace()">replace</button>
<script>
	function strReplace(){
		var str2="丸子，你怎么回事?";
		var str3=str2.replace(/丸子/i,"小妹妹");
		document.getElementById("p2").innerHTML=str3;
	}
</script>
<br> <br>
<!-- end -->
	
<!-- start: RegExp对象 text() -->
<script>
var patt1=new RegExp("e");
document.write(patt1.test("The best things in life are free"));
</script>
<br> <br>

<!-- start: RegExp对象 exec() -->	
<script>
var patt1=new RegExp("e");
document.write(patt1.exec("The best things in life are free"));
</script>
</body>
</html>
avatar
文章
阅读
粉丝