JavaScript笔
一.作用：
1.客户端表单验证，减轻服务器端压力
2.制作页面动态特效
二.特点：
1.主要用于向HTML页面中添加交互行为
2.是一种脚本语言
3.一般用来编写客户端脚本
4.是一种解释性语言，边执行边解释
三.结构组成：
1.ECMAScript：是一种开发的、国际上广为接受的、标准的脚本语言规范，它不与任何具体浏览器绑定。
ECMAScript标准主要描述以下内容：
。语法
。变量和数据类型
。运算符
。逻辑控制语句
。关键字、保留字
。对象
2.BOM：即Browser Object Model(浏览器对象模型）的缩写
它提供了可独立于内容与浏览器窗口进行交互的对象，使用浏览器对象模型可以实现与HTML的交互
3.DOM：Document Object Model(文档对象模型）缩写
是HTML文档对象模型（HTML DOM）定义的一套标准方法，用来访问和操纵HTML文档。
四.JavaScript 的基本结构：
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>初学JavaScript</title> </head> <body> <script type="text/javascript"> document.write("<h1>你好</h1>")； </script> </body> </html>
document.write()用来向页面输出可以包含HTML标签的内容。
五.JavaScript页面的引用：
1.内部JavaScript文件
2.外部JavaScript文件
3.直接在标签中使用
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style type="text/css"> h2{ font-size: 20px; } </style> </head> <body> <div id="btn"> <h2>javascript</h2> <p>学习</p> </div> <script type="text/javascript" src="js/index2.js"></script> <!--这是行内js--> <p onclick="javascript:alert('行内');"></p> <!--外部js--> <input name="btn" type="button" value="弹出消息框" onclick="javascript:alert('你好 JavaScript ')"/> <!--标签js--> <script type="text/javascript"> alert("aaaaaaaaaa"); </script> </body> </html>
六.JavaScript基础语法：
1.变量的声明和赋值：
。JavaScript是一种弱类型语言，没有明确的数据类型。在声明变量时，不需要指定变量的类型，变量类型由赋给变量的值决定。变量使用关键字var声明。
。“合法的变量名”：“合法的变量名”遵循JavaScript变量名规则的变量名，变量名可以由数字、字母、下划线和$符号组成，但首字母不能为数字，且不能用关键字命名
变量命名4要求2规范：要求：1.字母、数字、下划线、$组成。 2.不能以数字开头。 3.不能为关键字。 4.区分大小写。 规范：1.见名字知道意思。 2.驼峰（多单词组成时，后面单词首字母大写）。
。变量赋值用三种：
a.先声明再变量
b.同时声明和赋值变量
c.不声明直接赋值
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <script type="text/javascript"> //1.声明:告诉计算机,你要给我开辟一块内存空间 var score; // 2.赋值:把10赋值给变量score score=20; //3.使用 +:连接 // document.write("成绩是:"+score); //3.使用 document.write(score+10+"成绩增加10之后是:+<br/>"); //声明,赋值一起写 var width=100; var height=10,num=20,age=18; document.write("身高:"+height+"<br/>"); document.write("数字:"+num+"<br/>"); document.write("年龄:"+age+"<br/>"); var gender=""; document.write("性别:"+gender+"<br/>"); var i,j,k=15; document.write("i:"+i+"<br/>"); </script> </body> </html>
2.常用基本数据类型：
(1) typeof：ECMAScript提供了typeof运算符来判断一个值或变量究竟属于哪种数据类型。当ypeof（变量或值）时，返回结果用以下几种：
。undefined：如果变量是undefined类型的，则返回undefined类型的结果
。number：如果变量是number类型的，则返回number类型结果
。string：如果变量是string类型的，则返回string类型结果
。boolean：如果变量是boolean类型的，则返回boolean类型结果
。object：如果变量是object类型，或者变量是一种引用类型，如对象、函数、数组，则返回object类型结果
3.undefined类型：只有undefined一个值，当生命的变量未初始化时，该变量的默认值为undefined
4.null类型：表示“什么也没有”的占位符，可用来检测某变量是否被赋值。undefined由null派生出的，它们定义为相等。如：alert（null==undefined）；返回值为true
5.number类型：即可表示32位整数，也可表示64位浮点数。如：var iNum=23； var iNum=23.0；
6.string类型：
（1）字符串定义：一组用引号（单引或双引）括起来的文本
（2）字符属性与方法：string也是一种对象，有一个length属性，表示字符串长度（包括空格等）。调用length语法格式如下：
字符串对象 .length；
var str="this isJavaScript";
strLength返回的str字符串长度为18。
7.boolean类型：被称为布尔型数据或逻辑型数据。只有两个值：true，false。如：var flag=true； var flag=false；
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>typeof的功能和用法演示</title> </head> <body> <script type="text/javascript"> document.write("<h2>对变量或值调用typeof运算符返回值：</h2>") var width,height=10,name="rose"; var date=new Date(); //获取时间日期对象 var arr=new Array(); //定义数组 document.write("width:"+typeof(width)+"<br/>"); document.write("height:"+typeof(height)+"<br/>"); document.write("name:"+typeof(name)+"<br/>"); document.write("date:"+typeof(date)+"<br/>"); document.write("arr:"+typeof(arr)+"<br/>"); document.write("true:"+typeof(true)+"<br/>"); document.write("null"+typeof(null)); </script> </body> </html>
七：数组：是具有相同数据类型的一个或多个值得集合。数组用一个名称存储一系列的值，且用下标区分，下标从0开始。
1.创建数组：var 数组名称=new Array(size); new用来创建数组关键字，array表示数组关键字，size表示数组中可存放元素总数，size必须为正数。例：var fruit=new Array(5);
2.为数组元素赋值：声明数组时，可直接为数组元素赋值。语法如下：
var fruit=new Array("apple","peach","banana");
例：
var fruit=new Array（4）
fruit[0]="apple";
fruit[1]="orange";
fruit[2]="peach";
fruit[3]="banana";
还可以表示为：var fruit=["apple","orange","peach","banana"];
3.访问数组元素：通过数组名称和下标直接访问数组的元素：数组名[下标]。如：fruit[0]
4.数组常用属性和方法：
| 类别 | 名称 | 描述 |
| 属性 | length | 设置或返回数组中元素的数目 |
| 方法 | join() | 把数组的所有元素放入一个字符串，并通过一个分隔符进行分割 |
| 方法 | sort() | 对数组排序 |
| 方法 | push() | 向素组末尾添加一个或多个元素，并返回新的长度 |
（1）length
（2）join()
（3）sort()
（4）push()
八.运算符：JavaScript中包括算术运算符、比较运算符、逻辑运算符、赋值运算符。
| 类别 | 运算符 |
| 算术运算符 | +、-、*、/、%、++、-- |
| 比较运算符 | >、<、>=、<=、==、!=、===、!== |
| 逻辑运算符 | &&、||、! |
| 赋值运算符 | =、+=、-= |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>算术运算符</title> </head> <body> <script type="text/javascript"> var num1=10; var num2; // var sum=num2%num1; //++在后,先运算(或输出),再自身加1 // ++num1; // num1=num1+1; //++在前,先自身加1,先运算(或输出) // ++num; num2=num1++; alert("num2结果是:"+num2); alert("num1是:"+num1); </script> </body> </html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script type="text/javascript">
var width;
document.write("width:"+width+"<br/>");
var height=null;
document.write("height:"+height+"<br/>");
var num=10.5;
document.write("num:"+num+"<br/>");
var str="this is my first studing js";
document.write("str:"+str+"<br/>");
var result=true;
document.write("result:"+result+"<br/>");
var student=new Object();
document.write("student:"+student+"<br/>");
var attr=new Array('aaa','bb');
document.write("attr:"+attr+"<br/>");
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script type="text/javascript">
var num1=15;
var result;
num1++;
++num1;
alert("num1:"+num1);
alert("result:"+result);
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
</style>
</head>
<body>
<script type="text/javascript">
// var result=!(5<3);
// alert("结果是:"+result);
var a=5;
var b=15;
/**
* &&:与:
* 两边都是true的时候结果才为true
* 左边为true,右边会执行
* 左边为false,右边不执行
* @type {boolean}
*/
var result=(a++>=7)&&(b++>10);
alert("result结果是:"+result);
alert("a:"+a);
alert("b:"+b);
var name="zhangsan";
var age=15;
var aaa=123;
var AAA=123;
var myHtmlScore=100;
var firstname="吴";
/**
* 变量命名:
* 四:要求
* 1.字母,数字,_$组成
* 2.不能以数字开头
* 3.不能是关键字
* 4.区分大小写
* 二:规范
* 1.见名知意
* 2.驼峰
*/
</script>
<!---->
</body>
</html>
浙公网安备 33010602011771号