一、JavaScript概述
在上个世纪的1995年,当时的网景公司正凭借其Navigator浏览器成为Web时代开启时最著名的第一代互联网公司。由于网景公司希望能在静态HTML页面上添加一些动态效果,于是Brendan Eich在两周之内设计出了JavaScript语言。为什么起名叫JavaScript?原因是当时Java语言非常红火,所以网景公司希望借Java的名气来推广,但事实上JavaScript除了语法上有点像Java,其他部分基本上没啥关系。

二、嵌入页面的方式
HTML 中的脚本必须位于标签之间。脚本可被放置在 HTML 页面的 和 部分中。

1、行间事件(主要用于事件),元素直接绑定行事件

<h1 onclick="alert('666')">js</h1>

javascript第一章上机 javascriptja_javascript

2、页面script标签嵌入

<script type="text/javascript">
			alert('666')
</script>

javascript第一章上机 javascriptja_html_02

3、外部引入

javascript第一章上机 javascriptja_html5_03

<script src="./test.js" type="text/javascript" charset="utf-8"></script>

javascript第一章上机 javascriptja_html_02

三、基本语法

1、注释
我们可以添加注释来对 JavaScript 进行解释,或者提高代码的可读性。
单行注释:以 // 开头。
多行注释:以 /* 开始,以 */ 结尾。

// 单行注释
/* 多行注释 */

2、变量

变量命名:
变量可以使用短名称(比如 x 和 y),也可以使用描述性更好的名称(比如 age, sum)
变量必须以字母开头
变量也能以 $ 和 _ 符号开头(不过不推荐这么做)
变量名区分大小写(y 和 Y 是不同的变量)
驼峰式命名(小驼峰)

变量声明:
javaScript中变量可以先声明后赋值:

var foo; 
foo = 'bar';

也可以在声明的时候赋值:

// An highlighted block
var foo = 'bar';

同时给多个变量赋值:

// An highlighted block
var x = 1,y = 2,z = 3;

定义变量的三种方式及作用域
定义函数test为例:

var:定义的变量可以跨代码块访问。

<script type="text/javascript">
			function test() {
			        if (true) {
			            var a = 100;
			        }
			        console.log(a);
			    }
			    test();
</script>

javascript第一章上机 javascriptja_javascript第一章上机_05

let:定义块级作用局的变量

<script type="text/javascript">
			function test() {
			        if (true) {
			            let a = 100;
			        }
			        console.log(a);
			    }
			    test();
</script>

javascript第一章上机 javascriptja_html5_06

const:定义常初始化必须赋值,值不可修改,只能在块级作用域访问

<script type="text/javascript">
			function test() {
			        if (true) {
			            const a = 100;
			            a = 2
			        }
			        console.log(a);
			    }
			    test();
</script>

javascript第一章上机 javascriptja_赋值_07


3、数据类型:number :数字类型

javascript第一章上机 javascriptja_javascript第一章上机_08


string :字符串类型

javascript第一章上机 javascriptja_javascript第一章上机_09


boolean: 布尔类型 true、false

javascript第一章上机 javascriptja_javascript第一章上机_10


undefined :变量已声明 未赋值,它的值就是undefined

javascript第一章上机 javascriptja_赋值_11


null:表示空对象,类似于python中的None

var foo = null;

arry :数组

数值类似于python中的列表

javascript第一章上机 javascriptja_javascript_12


通过下标取值:

javascript第一章上机 javascriptja_html5_13


获取数组长度:length属性

javascript第一章上机 javascriptja_html5_14


从数组中删除最后一个元素:pop()

javascript第一章上机 javascriptja_javascript第一章上机_15


向数组添加一个新的元素 (数组结尾处):push()

javascript第一章上机 javascriptja_赋值_16


4、运算符

这里就不一一列举了,截图来自w3school

javascript第一章上机 javascriptja_javascript第一章上机_17


javascript第一章上机 javascriptja_javascript_18


5、条件语句

通过条件来控制程序的走向,就需要用到条件语句。

if 语句

<script type="text/javascript">
			var a=100;
			
			if (a==100){
				console.log("YES")
				}
</script>

javascript第一章上机 javascriptja_html5_19

else 语句

<script type="text/javascript">
			var a=100;
			
			if (a==99){
				console.log("YES")
			}
			else{
				console.log('NO')
			}
</script>

javascript第一章上机 javascriptja_javascript第一章上机_20

else if 语句:类似python中的 elif

<script type="text/javascript">
			var a=100;
			
			if (a==99){
				console.log("NO");
			}
			else if(a==100){
				console.log('oh,YES');
			}
		</script>

javascript第一章上机 javascriptja_html_21