一、 主要内容
- JavaScript入门简介
- JavaScript中变量的使用
- JavaScript中的运算符
- JavaScript中控制语句
- JavaScript中函数的使用
- JavaScript中数组的学习
JavaScript的入门
1了解内容
1.HTML：超文本标记语言 显示内容
2.CSS：层叠样式表 美化页面
3.JavaScript： 页面动态交互和特效
DHTML=HTML+CSS+JavaScript 动态HTML（Dynamic HTML，简称DHTML）
只是动态效果，不是动态数据
4.jQuery：对JavaScript的封装
2javaScript的定义
JavaScript是由Netscape（网景）公司研发出来的一种在它的Navigator浏览器上执行的程序语言。
JavaScript是一种基于对象(object-based)和事件驱动(Event Driven)的简单的并具有安全性能的脚本语言。
JavaScript组成有三大 部分DOM BOM ECM
ECMAScript：JavaScript的核心
文档对象模型（DOM）：DOM（文档对象模型）是 HTML 和 XML 的应用程序接口（API）。DOM 将把整个页面规划成由节点层级构成的文档
浏览器对象模型（BOM）对浏览器窗口进行访问和操作
扩展：JScript：微软推出的类似JavaScript的语言
03javaScript的特点
1.脚本语言
脚本语言是一种简单的程序，是由一些ASCII字符构成，可以使用任何一种文本编辑器编写。一些程序语言（如C、C++、Java等）都必须经过编译，将源代码编译成二进制的可执行文件之后才能运行，而脚本语言不需要事先编译，只要有一个与其相适应的解释器就可以执行。
脚本语言是指在web浏览器内有解释器解释执行的编程语言，每次运行程序的时候，解释器会把程序代码翻译成可执行的格式。
2、基于对象的语言
面向对象有三大特点（封装，继承，多态）却一不可。
通常“基于对象”是使用对象，但是无法利用现有的对象模板产生新的对象类型，也就是说“基于对象”没有继承的特点。没有了继承的概念也就无从谈论“多态”
3. 事件驱动：
在网页中执行了某种操作的动作，被称为“事件”(Event)，比如按下鼠标、移动窗口、选择菜单等都可以视为事件。当事件发生后，可能会引起相应的事件响应。
4、简单性
变量类型是采用弱类型，并未使用严格的数据类型。
var a,b,c; a=123; b=“abc”; a=b;
5、安全性
JavaScript不能访问本地的硬盘，不能将数据存入到服务器上，不能对网络文档进行修改和删除，只能通过浏览器实现信息浏览或动态交互
6、跨平台性
JavaScript依赖于浏览器本身，与操作平台无关，
只要计算机安装了支持JavaScript 的浏览器（装有JavaScript解释器），JavaScript 程序就可以正确执行。
缺点
各种浏览器支持JavaScript的程度是不一样的，支持和不完全支持JavaScript的 浏览器在浏览同一个带有JavaScript脚本的网页时，效果会有一定的差距，有时甚至会显示不出来。
04 JavaScript的引入方式
1、内部引入
2、外部引入
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<!--[1]js引入的方式一-->
<script type="text/javascript">
/*弹框*/
alert("你好世界");
</script>
<!--[2]js的引入方式2-->
<!--src:引入的路径 type：引入否认类型 charset：引入文件的编码 -->
<script src="js/test.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
</body>
</html>
注意：
[1]两种引入方式如果都使用了，那么两种js代码都会执行
[2]在书写js的时候不要把两者书写二合一
第二节 javaScript 的变量使用
01变量的声明
var 变量名=初始值;
变量名的要求遵循java中标识符的规范即可
02变量的使用
A、js中的变量名是可以重复的，但是重复的变量名值会覆盖
B、js中的变量是区分大小写
C、js中的分号可以省略的（不建议省略）
D、js中的双引号和单引号表示 的含义是一样的，都代表字符串
03数据类型
A、number（数字类型）
B、string（字符串类型）
C、boolean（布尔类型）
D、object（对象类型）
04特殊数据类型
A、undefined（未定义的） 原因：只是声明了变量，没有赋值
B、NaN（not a number ）不是一个数字 原因：把一个字符串（例如：123a）强制转换造成
C、null ：对象的空
<script type="text/javascript">
var a=1;
var b=1.2;
var c="hello";
var d='woeld';
var e=true;
var f=new Date();
var h=new String("123");
alert(typeof h);
// var a="你好";
// var A="你好";
// alert(typeof f);
var cc;
// alert(cc);
var bb="123a";
// alert(Number(bb));
var cc=null;
var dd="";
alert(typeof dd);
第三节 javaScript中运算符
01 算数运算符
+ - * / % ++ – 三木运算
02逻辑运算符
& | ! && || < > >= <= != ^
03连接运算符
+
04特殊运算符
(等值符 使用较多)
比较的时候先比较类型 ，类型一致比较内容，类型不一致统一的转化成number，然后在比较内容
=(等同符)
比较的时候先比较类型，类型不一致直接返回false,类型一致在比较内容，内容一致返回true ,不一致返回false；
注意：
在js中比较的时候用的不是()就是（=）,没有equals这个方法
<script type="text/javascript">
var a=10;
var b =21;
//算数操作
alert(a+b);
alert(b/a);//2.1
var c="123";
// 1012321
alert(a+c+b);
//31123
alert(a+b+c);
//1231021
alert(c+a+b);
var d=true;
alert(a+d);// true---1 false---0
var e1=1;//---1
var e2="1";// ---1
var e3=true;// ---1
var e4="true";// number(e4);--NAN
/* alert(e1==e2);//true T
alert(e1==e3);//true
alert(e1==e4);//false
alert(e2==e3);//true
alert(e2==e4);//false
alert(e3==e4);//false
*/
alert(e1===e2);//false
alert(e1===e3);//false
alert(e1===e4);//false
alert(e2===e3);//false
alert(e2===e4);//false
alert(e3===e4);//false
</script>
第四节 javaScript 控制语句
01判断语句
if(){}
if(){}else {}
if(){}else if (){}…else{}
02 选择语句
var a=30;
switch (a){
case 10:
break;
case 20:
break;
default:
break; }
03循环语句
while(){}
do{}while()
for()
<script type="text/javascript">
var a=100;
//js中for循环中的变量不是局部的变量是全局的， 在js中for循环不是一个函数
for(var i=1;i<=9;i++){
// var a=1;
for(var j=1;j<=i;j++){
/*直接输出到浏览器上*/ document.write(i+"*"+j+"="+i*j+" ");
}
document.write("<br />");
}
alert(a);
</script>
第五节 javaScript的函数使用
01JS中函数的声明方式
三种方式
02JS中参数的传递
A、js中形参的个数和实参的个数可以不一致
B、js中没有方法的重载 ，重名的方法只会覆盖
03JS中函数的返回值
没有定义方法的返回值默认返回 undefined
04函数的执行符
()–函数的执行符–jquery的封装原理
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
/*public String aa(参数列表..){
}*/
/***********[1]函数声明的三种方式**********************/
function demo1(){
alert("函数声明方式一");
}
var demo2= function(){
alert("函数声明方式二")
}
//函数本身也是一个对象
var demo3=new Function("alert('函数声明方式三')");
/***********[2]函数的参数的问题***************************/
function demo4(a,b,c){
alert(a+"***"+b+"***"+c);
}
function demo4(a,b){
alert(a+"--"+b);
}
//demo4(12,"sxt");// 12--sxt
//demo4(12);//12--undefined
//js中形参的个数和实参的个数可以不一致
//demo4(12,"sxt",13);// 12--sxt
/***********[3]JS中函数的返回值*******************/
function demo5(a){
alert(a);
return "sxhelloWorld";
}
//没有定义方法的返回值默认返回 undefined
//alert("函数的返回值:"+demo5(20));
function demo6(uu){
alert(uu());
return 500;
}
var ii=function(){
return "nihaoya";
}
demo6(ii);
</script>
第六节 javaScript的数组使用
01数组的声明
function demo1(){
//方式一
var arr1=new Array();
//方式二 5:数组的长度
var arr2=new Array(5);
//方式三 具体的元素
var arr3=new Array(1,1.2,true,nihao,new Date());
//方式四 （使用较多）
var arr4=[1,1.2,new Date(),true,世界那么大我想除去转转"];
console.log(arr4);
标注：console.log（）这个是打印的位置是：点击F12之后再点击Console
02数组的使用
function demo2(){
var arr=[];
arr[0]="123";
arr[1]=true;
arr[2]=new Date();
arr[6]=1.2;
arr[10]=1;
//js中数组的下标是可以不连续的，如果不连续默认补充empty
console.log(arr);}
04数组的遍历
function demo4(){
var arr =[1,1.2,new Date(),false,"霜天寒露"];
//普通的for循环
/*for(var i =0;i<arr.length;i++){
console.log(arr[i]);
}*/
增强for循环 u：是代表的是数组的下标不是具体的数组中的元素
for(var u in arr){
console.log(arr[u]);
}
}
function demo5(){
var arr =[1,1.2,new Date(),false,"数天不"];
console.log("前："+arr);
// 删除并返回数组的最后一个元素
// var po= arr.pop();
//向数组的末尾添加一个或更多元素，并返回新的长度。
// var po= arr.push("我们");
// console.log(po);
//1：代表的是删除开始的位置 2：删除的个数
// arr.splice(1,2);
//添加的操作 2:开始的下标 0:删除的个数 ：添加的内容
arr.splice(2,0,"添加");
console.log("后："+arr);
}
标注：arr.splice(2,0,“添加”);这个相当于再下标为2的位置添加一个元素，并且原数组中下标为2的开始删除0个元素
扫一扫
98
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
