快速掌握JavaScript入门

js入门

1.JavaScript的核心内容想要掌握JavaScript，那就必须先学习JavaScript的基本语法、
2.对象类型、变量、数组、函数、循环语句、If语句。如果你学会这些JavaScript的核心内容，
3.再回过头来学习JavaScript语法就相当简单了。
一、开始正式学习JS
1.

控制台输出：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. 变量申明

1.var a = 999;
2.var b = “999 abc”;

7. 数组

1.var person = {
2. firstName:“John”,
3. lastName:“Doe”,
4. age:100,
5.eyeColor:“blue”
6.};

8. 函数

1.function(){
2. …
3.}

9. 内嵌函数

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

1.function add() {
2. var counter = 0;
3. function plus() {counter += 1;}
4. plus();
5. return counter;
6.}

10. 正则表达式

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

语法
/正则表达式主体/修饰符(可选),其中修饰符是可选的。
实例：var patt = /runoob/i
1
2
3
11. try{ … } catch( ){ … }

try{
//在这里运行代码 throw…
}catch(){
//在这里处理错误信息
}
1
2
3
4
5
12. void关键字

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

示例：

点击查看结果：

没反应 点我 1 2 3 4 5 13. typeof操作符

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

四、练习代码

1. 获取id设置color

1.
2.
3.
4.
5.
6.

第一段文字

第二段文字

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18

2. 引用外部JS文件

--------------------------------index.html--------------------------------

--------------------------------script.js------------------------------
//请写入JS代码
document.write(“Hello my lover!”);
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

3. 点击事件

一个标题

一个段落

<br> <br>
<button type="button" onclick="myFunction()">点我！</button>
<br> <hr> <br>

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

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

<p id="p1"></p>
<br>

<br><br><br>
	<button type="button" onclick="addSpace()">增加空行</button>

<br><br>
<script>
	var biaoqingbao=
		{
			first : "约，",
			second : "100",
			third : "成交？"
		};
	
	function biaoQingbao(){
		document.write(biaoqingbao.first);
		document.write(biaoqingbao.second);
		document.write(biaoqingbao.third);	
	}
</script>

<button type="button" onclick="biaoQingbao()">小老弟</button>
<br>

<br>
<script>
	function returnNumber(num1,num2,num3){
		document.write(num1+num2+num3);
	}
</script>	
<button type="button" onclick="returnNumber(1000,300,14)">caculate</button>

5. switch() case

今天是星期几？

点击这里

6. 正则表达式：

搜索该字符串中stupid的位置：

you are a stupid boy!

search

替换"兄弟"

兄弟，你怎么回事?

replace