脚本宝典收集整理的这篇文章主要介绍了javascript代码实例教程-javaScript的简介以及注意事项，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。小宝典致力于为广大程序猿（媛）提供高品质的代码服务，请大家多多光顾小站，小宝典在此谢过。
1、JavaScript的简介
(1)什么是JavaScript：是基于对象和事件驱动的语言，应用于客户端。
* 基于对象：
** java是面向对象，使用对象需要创建
** js里面提供好了一些对象，直接使用
* 事件驱动：每次滑动鼠标，变换一张图片
* 客户端：指的是浏览器
(2)JavaScript的特点(三个)
第一个：交互性
第二个：安全性
** JavaScript不能访问本地硬盘里面的文件
第三个：跨平台性
** 在java里面跨平台，通过虚拟机实现的
** JavaScript跨平台，只要在系统里面安装了支持JavaScript的浏览器，可以运行JavaScript
(3)Java和JavaScript区别(雷锋和雷峰塔)
第一，java是sun公司，现在是oracle;JavaScript是网景公司
第二，java是面向对象的语言，javas是基于对象的语言
第三，java跨平台需要依靠虚拟机实现，JavaScript只需要浏览器可以运行
第四，JavaScript弱类型语言，java是强类型的语言
** 比如在java里面定义一个变量 int a = 10; int b = "10";不正确
** 在JavaScript里面定义变量都是使用一个关键字 VAR a = 10; var b = "10"; var c = true;
第五，java运行先编译通过虚拟机运行，JavaScript直接使用浏览器运行
(4)JavaScript由三部分组成
第一部分：ECMAScript
** 又ECMA组织制定语句，语法
第二部分：BOM
** broswer object model：浏览器对象模型
第三部分：DOM
** document object model：@L_360_2@
2、js和htML的结合方式
* 有两种结合方式
第一种：使用html中的标签
** 代码
** js的注释有两种
//单行注释
/*
多行注释
*/
第二种：使用html的标签，引入外部的js文件【项目开发常用方式】
* 使用第二种方式的时候有两点注意
注意一：不要在script标签里面写js代码了，不会执行
注意二：结束script标签 ，不要在标签内结束
* 代码
3、js的变量声明和数据类型
(1)在js里面如何声明变量，都是使用一个关键字var
* var a = 10;
(2)js的原始类型
* 在java里面有基本的数据类型?八个
* js的原始类型有五个
第一，string：字符串类型
* var a = "abc";
第二，number：数字类型
* var b = 10;
第三，boolean：布尔类型 true false
* var c = true;
第四，null
* null是特殊的引用类型
* 表示对象引用为空
* 比如 var date = null;
第五，undefined
* 表示定义了一个变量，但是没有赋值
* var a;没有赋值
(3)tyPEof(变量的名称): 查看当前变量的类型
* alert(typeof(a));
4、js的引用类型和类型转换
* 引用对象
** Object 对象：所有对象都由这个对象继承而来
** Boolean 对象：Boolean 原始类型的引用类型
** Number 对象： Number 原始类型的引用类型
* 类型转换
** 转换成字符串
** 转换成数字：parseint() 和 parseFloat()
** 强制类型转换
Boolean(value) - 把给定的值转换成 Boolean 型;
Number(value) - 把给定的值转换成数字(可以是整数或浮点数);
String(value) - 把给定的值转换成字符串;
5、js的语句
* 在java里面语句：if 、 swITch 、while do-while for
* java里面的switch语句，数据类型要求：是否支持string类型?在jdk1.7开始支持的
(1)if 语句
* 代码
//if语句
var a = 10;
if(a==10) {
alert("10");
} else {
alert("other");
}
(2)switch语句
* 在java里面
switch(a) {
case 10:
break;
case 20:
break;
default:
....
}
* 代码
var b = 5;
switch(b) {
case 4:
alert("4");
break;
case 5:
alert("5");
break;
default:
alert("other");
}
(3)while循环语句
* 代码
//while语句
var i = 4;
while(i<6) {
alert(i);
i++;
}
(4)for循环语句
* 代码
//for语句
for(var i=0;i<3;i++) {
alert(i);
}
(5)使用document.write()向页面输出内容
* 可以向页面输出变量
* 可以向页面直接输出html代码
** document.write(i);
document.write("
");
6、练习：向页面输出99乘法表
(1)document.write可以直接向页面输出html代码
(2)html中的属性和属性值之间可以使用双引号，也可以使用单引号
(3)代码
document.write("");
//循环9行
for(var i=1;i<=9;i++) {
document.write("");
//循环每行的部分
for(var j=1;j<=i;j++) {
document.write("");
}
//document.write("
");
document.write("");
}
document.write("");
//向页面输出内容
document.write(j+"*"+i+"="+i*j);
document.write("
");
7、js的运算符
(1)算术运算符
+ - * /....
(2)赋值运算符
+=含义： x+=y 相当于 x=x+y
(3)比较运算符
==：表示条件的判断，如果是=，表示赋值
(4)逻辑运算符
&& || !
(5)js的运算符和java不同的内容
第一个：js里面不区分整数和小数
* 比如 var a = 123/1000*1000,如果在java里面结果是 0
* js里面的结果：123
第二个：字符串的相加和相减操作
* 字符串相加是字符串的拼接操作，字符串相减是真正的相减运算，如果字符串不是数字提示NaN
* //字符串的相加和相减
var b = "10";
document.write(b+1); //字符串拼接
document.write("
");
document.write(b-1); //真正相减的运算
document.write("
");
var c = "a";
document.write(c-1); //NaN
第三个：boolean类型相加和相减的操作
* 如果布尔类型值是true，把类型当成1运算;如果布尔类型值是false，把类型当成0运算
//布尔类型相加和相减操作
var flag = true;
document.write(flag+1); // 2,当boolean类型是true时候，把类型当成1运算
document.write("
");
var flag1 = false;
document.write(flag1+1); //1,当boolean类型是false时候，把类型当成0运算
第四个：==和===区别
* ==比较的是值
* === 比较的是值和类型
* 代码
var mm = "10";
if(mm==="10") {
alert("10");
} else {
alert("other");
}
8、js的数组
* 什么是数组：定义一个变量只能存一个值，想要存多个值，可以使用数组进行存储
* js里面定义数组的方式
第一个：var arr1 = [];
第二个：var arr2 = ["10",10,true]; //可以写任意的类型
第三种：var arr3 = new Array(3);
** 表示定义数组名称是arr3，数组的长度是3
第四种：var arr4 = new Array(4,5,6);
** 表示定义数组名称是arr4，数组里面的值4 5 6
* 数组里面的属性：查看数组的长度 length
* 获取数组里面的值
** 遍历数组得到里面的值
//遍历
for(var i=0;i var a = arr3[i];
document.write(a);
document.write("
");
}
* 数组的长度：在js里面数组的长度可变的
** 数组的长度是最大的下标+1，之间如果没有赋值直接默认是空字符串
9、js的string对象
(1)字符串对象
* 创建字符串：var a = "abc"; var b = new String("bb");
(2)属性 length 字符串的长度
(3)方法
第一类：与html相关的方法(设置字符串的样式的方法)
= bold() 使用粗体显示字符串。
** document.write(a.bold());
= fontcolor() 使用指定的颜色来显示字符串。
** document.write(a.fontcolor("red"));
= fontsize() 使用指定的尺寸来显示字符串。
** document.write(a.fontsize(7));
= link() 将字符串显示为链接
** document.write(a.link("04-练习99乘法表.html"));
第二类：与java相似的方法(在java里面也有类似的方法)
= charAt() 返回在指定位置的字符。 如果位置不存在字符，返回空字符串""
** var str = "abcdefg";
document.write(str.charAt(1));
= concat() 连接字符串
** document.write(str.concat(str1));
= indexOf() 检索字符串，得到检索的字符的位置，如果没有找到返回-1
** var str2 = "ABCD";
document.write(str2.indexOf("R"));
** var str3 = "a-b-c";
var arr = str3.split("-");
document.write("length: "+arr.length);
= substr() 从起始索引号提取字符串中指定数目的字符。
= substring() 提取字符串中两个指定的索引号之间的字符
** var str4 = ";mARYJACKLUCY";
document.write(str4.substr(2,3));
//RYJ, 第一个参数表示从哪个位置开始，第二个参数表示向后取几个位置的值
document.write("
");
document.write(str4.substring(2,3));
//R ，第一个参数表示从哪个位置开始，第二个参数到哪个位置结束(不包含这个位置) [2,3)
10、js的Array对象
(1)创建数组
(2)属性
* length 设置或返回数组中元素的数目
** //length属性
var arr1 = new Array(4,5,6);
document.write(arr1.length);
(3)方法
= concat()：连接数组
** var arr2 = [6,7,8];
document.write(arr1.concat(arr2));
= join()：把数组根据指定字符进行分割
** var arr3 = new Array(3);
arr3[0] = "mary";
arr3[1] = "jack";
arr3[2] = "lucy";
document.write(arr3);
document.write("
");
document.write(arr3.join("-"));
= pop() 删除并返回数组的最后一个元素
** var arr4 = ["aa","bb","cc"];
//输出数组的原始的值
document.write("old: "+arr4);
//输出执行pop方法之后的返回值
document.write("
");
document.write("return: "+arr4.pop());
//输出执行pop方法之后新的数组内容
document.write("
");
document.write("new: "+arr4);
= push() 向数组的末尾添加元素，并返回新的长度
** var arr5 = ["zhangsan","lisi","wangwu"];
//输出数组的原始的值
document.write("old: "+arr5)
document.write("
");
//输出执行push()方法之后的返回值
document.write("return: "+arr5.push("lucy"));
//输出执行push()方法之后新的数组内容
document.write("
");
document.write("new: "+arr5);
** 向数组里面使用push方法添加一个数组
document.write("
");
var arr6 = ["AAA","BBB"];
var arr7 = ["CCC","DDD"];
//输出数组arr6的原始的值
document.write("old: "+arr6)
//输出执行push()方法之后的返回值
document.write("
");
document.write("return: "+arr6.push(arr7));
//输出执行push()方法之后新的数组内容
document.write("
");
document.write("new: "+arr6);
//遍历数组
for(var i=0;i alert(arr6[i]);
}
= reverse() 颠倒数组中元素的顺序
** var arr8 = ["zhaoliu","wanger","niuqi"];
document.write(arr8);
document.write("
");
document.write(arr8.reverse());
11、js的Math对象
(1)进行数学运算，在Math对象里面的方法，直接使用Math.方法名称进行调用
(2)方法
= ceil(x) 对一个数进行上舍入。
= floor(x) 对一个数进行下舍入。
= round(x) 把一个数四舍五入为最接近的整数
= random() 返回 0 ~ 1 之间的随机数
** 代码
var a = 10.2;
//ceil(x) 对一个数进行上舍入。
document.write(Math.ceil(a)); //11
document.write("
");
//floor(x) 对一个数进行下舍入。
document.write(Math.floor(a));
document.write("
");
//round(x) 把一个数四舍五入为最接近的整数
document.write(Math.round(a));
document.write("
");
//random() 返回 0 ~ 1 之间的随机数
document.write(Math.random());
//生成0-9之间的随机数 0.0 -- 0.9之间的值
document.write("
");
document.write(Math.floor(Math.random()*10));
12、js的Date对象
(1)进行日期操作的对象
(2)使用Date对象，new Date();
(3)方法
= toLocaleString() 根据本地时间格式，把 Date 对象转换为字符串。
** //得到当前的时间
var date = new Date();
document.write(date.toLocaleString());
= 得到当前的年 getFullYear() 从 Date 对象以四位数字返回年份
** document.write(date.getFullYear());
= 得到当前的月 getMonth() 从 Date 对象返回月份 (0 ~ 11)
** document.write(date.getMonth()+1);
= 得到当前的星期 getDay() 从 Date 对象返回一周中的某一天 (0 ~ 6)
** 如果当前的星期是星期日，返回的是0
** document.write(date.getDay())
= 得到当前的日 getDate() 从 Date 对象返回一个月中的某一天 (1 ~ 31)
= 得到当前的小时 getHours()
= 得到当前的分 getMinutes()
= 得到当前的秒 getSeconds()
** document.write(date.getHours());
document.write("
");
document.write(date.getMinutes());
document.write("
");
document.write(date.getSeconds());
= 得到毫秒数 getTime() 返回 1970 年 1 月 1 日至今的毫秒数
13、js的RegRxp对象
(1)RegExp 对象表示正则表达式
(2)正则表达式：规定字符串出现的规范
(3)使用：new RegExp("正则表达式")
(4)方法：
* test() 检索字符串中指定的值。如果存在匹配的字符返回 true,如果不存在匹配的字符返回 false。
(5)代码
//创建正则表达式对象
var reg = new RegExp("[a]");
//创建一个字符串
var name = "lisi";
//使用正则对象匹配字符串
var flag = reg.test(name);
document.write(flag);
14、js的bom对象
(1)script标签放置位置
* 建议放到后面
* html的解析是从上到下进行解析的，如果在head里面就获取输入项里面的值，因为还没有解析到
输入项，所以肯定得不到值。
(2)什么是bom:浏览器对象模型
第一个：navigator
* 浏览器的信息
第二个：screen
* 屏幕的信息
第三个: history
* 访问地址的历史信息
第四个: location
* 设置url
* href 设置或返回完整的 URL
第五个: window(***)
* window对象是窗口对象，是顶层对象
* 方法
setInterval("执行的js代码",毫秒数) 在指定的时间内，重复执行js代码
** 有两个参数
*** 第一个参数要执行的js代码(js的方法)，第二个参数是时间(毫秒数)
** 代码
setInterval("alert('setinterval');",3000);
setTimeout("执行的js代码",毫秒数) 在指定的时间之后，执行js代码，执行一次
** 有两个参数
*** 第一个参数要执行js代码(js的方法)，第二个参数是时间(毫秒数)
** 代码
setTimeout("alert('settimeout');",3000);
clearInterval(id) 取消由 setInterval() 设置的 timeout。
clearTimeout(id) 取消由setTimeout() 方法设置的 timeout。
15、js的全局变量和局部变量
* 回顾：在java里面成员变量
(1)全局变量
* 在js里面，如果在一个script标签里面定义变量，在页面中的其他script标签里面都可以使用。(要注意上下顺序)
(2)局部变量
* 在js的方法里面定义一个变量，这个变量只能在方法里面使用。
* ie浏览器：点击键盘上F12，在页面下面出现一个条，点击控制台，出现调试的信息。
* 火狐浏览器：点击键盘上f12，在下面出现一个条，点击控制台，出现调试的信息。
** 火狐浏览器里面需要安装firebug插件
* 谷歌浏览器：点击键盘上的f12,在下面出现一个条，点击console,出现调试的信息。
16、js的全局函数
(1)不属于任何对象，可以使函数
(2)主要的函数
eval(): 把字符串当成js代码执行
** var str = "alert('123456');";
//alert(str);
eval(str);
isNaN() 检查某个值是否是数字
** 如果是数字返回 false,如果不是一个数字返回 true。
parseInt() 解析一个字符串并返回一个整数
** var str1 = "123";
alert(parseInt(str1)+1);
encodeURI() 把字符串编码为 URI
** var str2 = "abc测试中文";
var encodestr2 = encodeURI(str2);
document.write(str2);
document.write("
");
document.write(encodestr2);
decodeURI() 解码某个编码的 URI
** var decodestr2 = decodeURI(encodestr2);
觉得可用，就经常来吧！ 脚本宝典 欢迎评论哦！ js脚本，巧夺天工，精雕玉琢。小宝典献丑了！
以上是脚本宝典为你收集整理的javascript代码实例教程-javaScript的简介以及注意事项全部内容，希望文章能够帮你解决javascript代码实例教程-javaScript的简介以及注意事项所遇到的问题。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。