JavaScript入门基础

最新推荐文章于 2024-04-02 06:56:13 发布

lairikeqi

最新推荐文章于 2024-04-02 06:56:13 发布

阅读量5.6k

点赞数 37

分类专栏： Web前端文章标签： JavaScript

本文链接：https://blog.csdn.net/lairikeqi/article/details/81735310

版权

Web前端专栏收录该内容

10 篇文章 1 订阅

订阅专栏

一、JavaScript简介

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

主要用来向HTML（标准通用标记语言下的一个应用）页面添加交互行为。
可以直接嵌入HTML页面，但写成单独的js文件有利于结构和行为的分离。
跨平台特性，在绝大多数浏览器的支持下，可以在多种平台下运行。
Javascript提供了四种基本的数据类型和两种特殊数据类型用来处理数据和文字。而变量提供存放信息的地方，表达式则可以完成较复杂的信息处理。

二、为什么要学JavaScript？

所有主流浏览器都支持JavaScript
目前，全世界大部分网页都使用JavaScript
它可以让网页呈现各种动态效果

三、开始正式学习JavaScript

1. <script>标签

<script>
	JS代码在这里
	html代码不能写在这里！
</script>

<script>标签可被放置在 HTML 页面的<body> 和 <head> 部分中，<script> 和 </script> 会告诉 JavaScript 在何处开始和结束。

2. document.getElementById( )

document.getElementById("id").style.color="color";
<Button type="Button" onclick="alert('Hello World!')">点我这个Button！</Button>

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

3. 控制台输出

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

4. 注释

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

5. 数据类型

在 JavaScript 中有

5种不同的数据类型：string number boolean object function
3种对象类型：Object Date Array
2个不包含任何值的数据类型：null undefined

如果对象是 JavaScript Array 或 JavaScript Date，就无法通过typeof来判断他们的类型，因为都是返回Object。

6. 变量申明

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

7. 数组

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

8. 函数

function(){
	...
}

9. 内嵌函数

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

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

10. 正则表达式

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

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

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

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

12. void关键字

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

示例：

<body>	
<p>点击以下链接查看结果：</p>
	<a href="javascript:void(0)">点我没反应！</a>
	<a href="javascript:void(alert('Warning!!!'))">点我!</a>
</body>

13. typeof操作符

typeof操作符返回变量或者表达式的类型

document.getElementById("demo").innerHTML = 
	typeof "john" + "<br>" + 
	typeof 3.14 + "<br>" +
	typeof false + "<br>" +
	typeof [1,2,3,4] + "<br>" +
	typeof {name:'john', age:34};

四、练习代码

1. 获取id设置color

<!DOCTYPE HTML>
<html> 
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>热身</title>
</head>
<body>
  <p id="p1">我是第一段文字</p>
  <p id="p2">我是第二段文字</p>
  
  <script type="text/javascript">
    document.write("Hello world!");
    document.getElementById("p1").style.color="blue";
    document.getElementById("p2").style.color="red";
	
  </script>
</body>
</html>

2. 引用外部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 my lover!");

3. 点击事件

<!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="blue";
	
	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">敲你妈！！！</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>

4. Java数据类型、数组、对象

<!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对象 -->
	<br><br>
	<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>

5. 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>

6. 正则表达式：

<!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>

lairikeqi

关注

37
点赞
踩
144

收藏

觉得还不错? 一键收藏
3
评论
JavaScript入门基础

一、JavaScript简介JavaScript是一种属于网络的解释性脚本语言，已经被广泛用于Web应用开发，常用来为网页添加各式各样的动态功能，为用户提供更流畅美观的浏览效果。通常JavaScript脚本是通过嵌入在HTML中来实现自身的功能的。主要用来向HTML（标准通用标记语言下的一个应用）页面添加交互行为。可以直接嵌入HTML页面，但写成单独的js文件有利于结构和行为的分离。跨...
复制链接

扫一扫