HTML+CSS+JS-第10章 JavaScript基础语法

HTML+CSS+JS-第09章 CSS3特效&动画

第一阶段（A）（前端） 20天 120学时

第10章 JavaScript基础语法（6）

[学习课时] 本章共需要学习 6 课时

[目的要求]

掌握JavaScript基础语法的使用
掌握JavaScript注释的使用
掌握JavaScript变量的类型和定义和使用
掌握JavaScript运算符的使用

[教学内容]

JavaScript引入

内部引入

- 使用<script></script>标签

<script type="text/javascript">

    //单行注释

    //下面这条语句在浏览器中输出并显示“你好”两个字

    document.write("你好");

</script>

外部样式

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

JavaScript 语句

JavaScript 注释

JavaScript 单行注释

单行注释以 // 开头。

<script type="text/javascript">

    //单行注释

    //下面这条语句在浏览器中输出并显示“你好”两个字

    document.write("你好");

</script>

JavaScript 多行注释

多行注释以 “/*”开始，以 “*/”结尾。

<script type="text/javascript">

    /**

    * 多行注释

    * 下面这条语句在浏览器中输出并显示“你好”两个字

    */

    document.write("你好");

</script>

JavaScript 变量

变量是用于存储信息的"容器"。

就像代数那样

x=5

y=6

z=x+y

变量可以使用短名称（比如 x 和 y），也可以使用描述性更好的名称（比如 age, sum, totalvolume）。

变量必须以字母开头
变量也能以 $ 和 _ 符号开头（不过我们不推荐这么做）
变量名称对大小写敏感（y 和 Y 是不同的变量）

JavaScript 变量

创建（声明）变量，可使用 var 关键词来声明变量，var可以省略

var carname;

变量声明之后，该变量是空的（它没有值）。

JavaScript 变量赋值

carname="Volvo";

不过，您也可以在声明变量时对其赋值：

var carname="Volvo";

给carname这个变量设置之为"Volvo"，也可以理解为把"Volvo"这个文字保存在carname变量中。

JavaScript 变量使用

var carname="Volvo"; //创建carname以及对齐赋值

document.write(carname);//获取id=“demo”的元素html内容设置成carname保存的值。

JavaScript 数据类型

字符串（String）、数字(Number)、布尔(Boolean)、数组(Array)、对象(Object)、空（Null）、未定义（Undefined）。

JavaScript 字符串

字符串用来存储字符和文字的变量。使用单引号或双引号：

如：

var carname="Volvo XC60";
var carname='Volvo XC60';

您可以在字符串中使用引号，只要不匹配包围字符串的引号即可：

如：

var answer="It's alright";
var answer="He is called 'Johnny'";
var answer='He is called "Johnny"';

JavaScript 数字

JavaScript 数字类型只能用来保存数字：

如：

var x1=34.00; //使用小数点来写

var x2=34; //不使用小数点来写

极大或极小的数字可以通过科学（指数）计数法来书写：

var y=123e5; // 12300000

var z=123e-5; // 0.00123

JavaScript 布尔

布尔（逻辑）只能有两个值：true 或 false。

var x=true;

var y=false;

布尔常用于判断或者设置状态

JavaScript 数组

数组用于保存多个数据，如会员的姓名、用户名、密码、手机号等等。

下面的代码创建名为 user 的数组：

var user = new Array();

user[0]="张三";

user[1]="zhang";

user[2]="123456";

user[3]="13592769132";

或者

var user = new Array("张三"," zhang ","123456","13592769132");

或者

var user = ["张三"," zhang ","123456","13592769132"];

数组下标从0开始，所以第一个是 [0]，第二个是 [1]，以此类推。

JavaScript 对象

对象不仅可以保存普通数据，还可以保存代码操作功能。

以后章节学

Undefined 和 Null

Undefined 这个值表示变量不含有值。

可以通过将变量的值设置为 null 来清空变量。

JavaScript 运算符

JavaScript 算术运算符

运算符	描述	例子	x 运算结果	y 运算结果
+	加法	x=y+2	7	5
-	减法	x=y-2	3	5
*	乘法	x=y*2	10	5
/	除法	x=y/2	2.5	5
%	取模（余数）	x=y%2	1	5
++	自增	x=++y	6	6
++	自增	x=y++	5	6
--	自减	x=--y	4	4
--	自减	x=y--	5	4

JavaScript 赋值运算符

运算符	例子	等同于	运算结果
=	x=y		x=5
+=	x+=y	x=x+y	x=15
-=	x-=y	x=x-y	x=5
*=	x*=y	x=x*y	x=50
/=	x/=y	x=x/y	x=2
%=	x%=y	x=x%y	x=0

JavaScript 比较运算符

运算符	描述	比较	返回值
==	等于	x==8	false
==	等于	x==5	true
===	绝对等于（值和类型均相等）	x==="5"	false
===	绝对等于（值和类型均相等）	x===5	true
!=	不等于	x!=8	true
!==	不绝对等于（值和类型有一个不相等，或两个都不相等）	x!=="5"	true
!==	不绝对等于（值和类型有一个不相等，或两个都不相等）	x!==5	false
>	大于	x>8	false
<	小于	x<8	true
>=	大于或等于	x>=8	false
<=	小于或等于	x<=8	true

JavaScript逻辑运算符

运算符	描述	例子
&&	and	(x < 10 && y > 1) 为 true
\|\|	or	(x==5 \|\| y==5) 为 false
!	not	!(x==y) 为 true

JavaScript条件运算符

语法

Var iablename=(condition)?value1:value2

例子

如果变量 age 中的值小于 18，则向变量 voteable 赋值 "年龄太小"，否则赋值 "年龄已达到"。

Var teable=(age<18)?"年龄太小":"年龄已达到";

JavaScript 初识方法（函数）

方法的定义

函数就是包裹在花括号中的代码块，使用了关键词 function：关键词 function 必须是小写的

function functionname(){

执行代码
}

方法的使用

通过方法名+括号来使用方法

如：

functionname();

上面这句代码就是使用方法名为functionname的方法，必须加上“（）”，“（）”是方法的标志，不可不写。

方法最简单的功能就是将一部分代码放到一起，组成一个代码快，在需要的时候直接执行。因此，方法在写好后是不会自动执行的，除非使用方法，方法里面的代码才会被执行

可以在HTML元素的点击事件中使用方法，HTML的点击事件就是onclick属性。如：

实例;demo02

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

    </head>

    <body>

        

        <button onclick="sum()">点击可计算10+20的结果</button>

    </body>

    <script type="text/javascript">

        //通过关键字function来定义方法，方法名后面必须跟（）

        function sum(){

            var a = 10;

            var b = 20;

            var c = a + b;

            alert(c)

        }

    </script>

</html>

效果图

[作业实验]

实现如下效果：点击添加后将上面输入框的文字追加到下面的文本域中

实现如下效果，点击上面的按钮，将按钮上的文字添加到下面的园内显示

HTML+CSS+JS-第11章 JavaScript条件和循环结构