您的位置：首页 > Web前端 > JavaScript

JavaScript学习笔记（一）

2015-09-05 20:55 465 查看

一、JavaScript的简介

【1】是基于对象和驱动的的语言，应用于客户端。

1.基于对象：提供了好对象，可以直接拿来使用。

2.事件驱动：html做网站静态效果，javascript做动态效果。

3.客户端：专门指的是浏览器。

【2】js的特点

1.交互性：信息的动态交互。

2.安全性：js不能访问本地磁盘的文件。

3.跨平台性：只要是支持js的浏览器都可以运行js脚本。

【3】js和java的区别

1.javascript是基于对象的，而java是面向对象的。

2.java是强类型语言，javascript示弱类型语言。

【4】js的组成部分

1.ECMAScript：

ECMA：欧洲计算机协会，由他们定义了js的标准语法等。

2.BOM：浏览器对象模型（Broswer Object Model）

3.DOM：文档对象模型（Doucument Object Model）

二、js和html的结合方式

【第一种】使用标签<script type="text/javascript"></script>

<html>
<head>
<title>javascript实例一</title>
</head>
<body>
<script type="text/javascript">
alert("js和html结合方式一");
</script>
</body>
</html>

【第二种】使用<script>标签，引入外部的js文件

三、js的原始类型和声明变量

js中声明变量使用的关键字是：var

【1】原始类型

1.string：字符串

2.number：数字类型

3.boolean：true和false

4.null：表示对象的引用为空，所有对象的引用都是object

5.undifined：定义了一个变量，但是没有赋值，例如：var b;

【2】typeof()，可以查看当前变量的数据类型。

<html>
<head>
<title>javascript实例二</title>
</head>
<body>
<script type="text/javascript">
//声明字符串
var str = "123";

//声明数字类型
var num = 123;
var type = typeof(num);
alert(type);//结果：number

//声明布尔类型
var b = true;
</script>
</body>
</html>

四、js中的控制语句

【1】if判断语句

在Javascript中，不为空的字符串，不为0的数字，不为null的对象，不为undefined的对象属性，布尔型true，当它们单独作为判断式中的一个表达式时，js认定它们为true，反之为false。

【2】switch语句

【3】循环语句 for 、while、do-while

<html>
<head>
<title>javascript实例三</title>
</head>
<body>
<script type="text/javascript">
//if判断语句
var b = 6;
if(b == 6) {
alert("变量b的值是：" + b);
} else {
alert("other");
}

//switch语句
var a = 3;
switch(a) {
case 3:
alert(3);
break;
case 4:
alert(4);
break;
default:
alert("other");
}

//for循环变量
for(var i=0;i<3;i++) {
alert(i);
}
</script>
</body>
</html>

五、js中的运算符

【1】js中的运算符和java中的运算符基本上相同。

【2】注意几个细节

1.js中不区分整数和小数

2.字符串的相加和相减操作，如果做相加操作，做的是字符串的连接操作；如果做的是相减操作，做的是减法运算。

3.NaN表示不是一个数字。

4.boolean类型也可以进行相加、相减操作。如果设置成true，相当于值为1；如果设置成false，相当于值为0。

【3】引入知识：document.write()，是直接想页面输出语句，可以想页面输出变量、固定值和html代码。

<html>
<head>
<title>javascript实例四</title>
</head>
<body>
<script type="text/javascript">
var j = 123;
/**
* j/1000*1000在java中的结果是0。但在js中是不同的，
* 在js中不区分整数和小数
*/
alert(j/1000*1000); //结果123

var flag = true;
alert(flag + 1); //结果2
alert(flag - 1); //结果0

//字符串的相加、相减操作
var b = "123";
alert(b + 1); //结果1231
alert(b - 1); //结果121
</script>
</body>
</html>

六、JavaScript在页面打印乘法表

<html>
<head>
<title>javascript实例四</title>
</head>
<body>
<script type="text/javascript">
for(var i = 1; i < 10 ; i++) {
for(var j = 1; j <= i ; j++) {
document.write(j + "x" + i + "=" + j * i);
document.write(" ");
}
document.write("</br>");
}
</script>
</body>
</html>

七、js中的数组

【1】定义方式（三种）

1.第一种: var arr = [1,2,3] var arr2 = [1,"ab",4]

2.第二种：使用js内置对象Array

var arr = new Array(2);表示定义了一个数组，该数组的长度为2

arr[0] = 1;arr[2] = 2;

3.第三种：使用js内置对象Array

var arr = new Array(1,2,3);表示定义了一个数组，数组里面的元素为1、2、3

【2】注意几点：(1) 数组具有length属性，可以查看数组的长度 (2)数组的长度是可以改变的 (3)数组中可以存放不同类的元素

八、js中函数的定义

这里只介绍两种常用的方式：

【1】使用关键字 function

<html>
<head>
<title>javascript实例五</title>
</head>
<body>
<script type="text/javascript">
//调用函数
test(4,3);
//定义函数
function test(a,b) {
alert(a+b);
}
</script>
</body>
</html>

【2】匿名函数

<html>
<head>
<title>javascript实例六</title>
</head>
<body>
<script type="text/javascript">
//定义函数
var sub = function(a,b) {
alert(a - b);
}

//调用函数
sub(5,1);
</script>
</body>
</html>

九、js中的全局变量和局部变量

【1】全局变量：在script标签里定义一个变量，这个变量在页面中js部分都可以使用。（在方法外部使用，在方法内部使用，在另外一个

script标签中使用）

【2】局部变量：在方法内部定义一个变量，只能在方法内部使用。

【3】补充一点：

建议把<script>标签放到<body>后面，为什么建议这样呢？假如现在有这样一个需求：在js里面获取input中的值，如果把script放到

head里面是会出问题的，html的解析是从上到下解析的，script标签放到head里面，直接利用js取input里面的值是取不到的，因为页面还没解析到input这一行。

<html>
<head>
<title>javascript实例七</title>
<script type="text/javascript">
var v = document.getElementById("name");
alert(v.value);
</script>
</head>
<body>
<input type="text" name="name" id="name" value="aaa"/>
</body>
</html>

此时并不能获取input的值。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航