python javascript_python之路 JavaScript基础

一、JavaScript简介

JavaScript一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言，内置支持类型。它的解释器被称为JavaScript引擎，为 浏览器的一部分，广泛用于客户端的脚本语言，最早是在HTML(标准通用标记语言下的一个应用)网页上使用，用来给HTML网页增加动态功能。

二、组成部分

ECMAScript，描述了该语言的语法和基本对象

文档对象模型(DOM)，描述处理网页内容的方法和接口。

浏览器对象模型(BOM)，描述与浏览器进行交互的方法和接口。

三、一些简单案例

注：显示结果请自行测试

1.简单的html输出

此脚本请在开头测试，如果在尾部测试，那么会覆盖整个html页面

2.简单的点击按钮弹出提示

alert('欢迎点击按钮') #alert是JavaScript用来测试用的函数 可以在浏览器中弹出信息

}

按钮 #当我点击按钮的时候 onclick事件调用函数

当我点击按钮的时候，整个页面会弹出欢迎点击按钮信息

3.改变页面元素内容

var x = document.getElementById('demo'); #获取id

x.innerHTML='我被改变了'; #innerHTML是用来改变标签中的内容

}

我的是你耀哥

按钮 #onclick事件调用func函数

4.点击改变指定div的背景颜色

#demo{

width:100px;

height:100px;

background-color:aquamarine;

}

var x = document.getElementById('demo'); #获取id

x.style.backgroundColor='gray'; #使用style函数改变背景颜色

5.验证表单，是否输入值

Title

用户名：

密 码：

提交

var x = document.getElementById('demotext').value;

if(x.length==0){

alert('用户名不能为空');

}else{

alert(x);

}

var y = document.getElementById('demopass').value;

if(y.length==0){

alert('密码不能为空');

}else{

alert(y);

}

}

四、存在方式

HTML中的脚本必须位于 标签之间。

脚本可被放置在 HTML 页面的 和 部分中。

1.head中存放

Title

2.body中存放

Title

3.引入外部js文件

注：

由于Html代码是从上到下执行，如果Head中的js代码耗时严重，就会导致用户长时间无法看到页面，如果放置在body代码块底部，那么即使js代码耗时严重，也不会影响用户看到页面效果，只是js实现特效慢而已。

五、基本语法

1.注释

单行注释 使用 “//”

// var x = document.getElementById('demo');

多行注释 使用 “/*和*/结尾”

/*

function func(){

var x = document.getElementById('demotext').value;

if(x.length==0){

alert('用户名不能为空');

}else{

alert(x);

}*/

2.变量

变量定义要求：

1).变量必须以字母开头

2).变量也能以 $ 和 _ 符号开头(不过我们不推荐这么做)

3).变量名称对大小写敏感(y 和 Y 是不同的变量)

变量声明：

var 变量名 = 赋值

var 定义的是局部变量 js中用的最多的方法

如果不加var 那么是全局变量。js用的较少。

var a=1,b=2,c=3,

在 JavaScript 函数内部声明的变量(使用 var)是局部变量，所以只能在函数内部访问它。

3.数据类型

1).数字类型

var a = 1；

var b = 1.1；

2).布尔类型

布尔(逻辑)只能有两个值：true 或 false。

var x=true

var y=false

3)数组类型

第一种：

var arr=new Array();

arr[0]="mayun";

arr[1]="mahuateng";

arr[2]="liuyao";

第二种：

var arr=['mayun','mahuateng','liuyao'];

第三种：

var arr=new Array('mayun','mahuateng','liuyao');

用for循环打印数组内容

var arr=new Array();

arr[0]="mayun";

arr[1]="mahuateng";

arr[2]="liuyao";

for(i=0;i

alert(arr[i])

}

4)undefined

undefined表示未定义值

5)null类型

null是一个特殊值

5)字符串类型

var name = 'liuyao';

var name = String("liuyao");

var name_age = String(18);

6)字典

var items = {'k1': v2, 'k2': 'v2'}

4.运算符

运算符 = 用于赋值。

运算符 + 用于加值。

1.算术运算符

2.赋值运算符

案例:

字符串拼接打印

txt2=" da sha bi";

txt3=txt1+txt2;

alert(txt3)

3.比较运算符

4.逻辑运算符

4.条件语句

1)if else

if 语句 - 只有当指定条件为 true 时，使用该语句来执行代码

if...else 语句 - 当条件为 true 时执行代码，当条件为 false 时执行其他代码

if...else if....else 语句 - 使用该语句来选择多个代码块之一来执行

语法：

if (条件)

{

只有当条件为 true 时执行的代码

}

或者：

if (条件){

只有当条件为 true 时执行的代码

}

案例：

if(num2>num1){

alert('num1大于num2');

}else{

alert('num2小于num1');

}

2) if else if else

语法：

if (条件 1)

{

当条件 1 为 true 时执行的代码

}

else if (条件 2)

{

当条件 2 为 true 时执行的代码

}

else

{

当条件 1 和 条件 2 都不为 true 时执行的代码

}

案例：

if(num>6){

alert('num大于6');

}else if(num<7){

alert('num小于7');

}else{

alert('以上都不对');

}

3)switch语句

switch 语句来选择要执行的多个代码块的其中一个。

语法：

switch(n)

{

case 1:

执行代码块 1

break;

case 2:

执行代码块 2

break;

default:

n 与 case 1 和 case 2 不同时执行的代码

}

首先设置表达式 n(通常是一个变量)。随后表达式的值会与结构中的每个 case 的值做比较。如果存在匹配，则与该 case 关联的代码块会被执行。请使用 break 来阻止代码自动地向下一个 case 运行。

案例：

数字查询

var x = document.getElementById('demo').value;

var y = Number(x);

switch(y){

case 1:

alert('你输入的是1');

break;

case 2:

alert('你输入的是2');

break;

case 3:

alert('你输入的是3');

break;

default:

alert('你输入的数不存在');

}

}