JavaScript------笔记

最新推荐文章于 2024-01-23 14:40:05 发布

u013283956

最新推荐文章于 2024-01-23 14:40:05 发布

阅读量197

点赞数

分类专栏： WEB类

本文链接：https://blog.csdn.net/u013283956/article/details/82919416

版权

WEB类专栏收录该内容

3 篇文章 0 订阅

订阅专栏

一、JavaScript介绍

如果说网页的三种基本构成关系的话“画龙点睛”最为恰当。HTML视为绘制龙的形态，CSS视为龙色彩，那么JavaScript就是神来之笔“点睛”。HTML把网页分成多个块，CSS就能精确的布局并位置染色再做一些简单的交互方式，JavaScript就能根据用户需求做到相应的处理。比如说弹窗，改变内容改变图片，验证输入。

HTML 中的脚本必须位于 <script> 与 </script> 标签之间。脚本可被放置在 HTML 页面的 <body> 和 <head> 部分中。

JavaScript特点：

1、是一种解释型的脚本语言,C、C++等语言先编译后执行,而JavaScript是在程序的运行过程中逐行进行解释。

2、是一种采用事件驱动的脚本语言,它不需要经过Web服务器就可以对用户的输入做出响应。

3、采用的是弱类型的变量类型,对使用的数据类型未做出严格的要求,是基于Java基本语句和控制的脚本语言,其设计简单紧凑。

4、不依赖于操作系统,仅需要浏览器的支持。JavaScript已被大多数的浏览器所支持。

5、是一种基于对象的脚本语言,它不仅可以创建对象,也能使用现有的对

<script> 标签的作用：

<script>
alert("My First JavaScript");
</script>

扩展：老旧的实例可能会在 <script> 标签中使用 type="text/javascript"。现在已经不必这样做了，因为现在是浏览器和HTML5默认的脚本语言。

采用C风格的注释，包括单行注释和块级注释。

// 单行注释
/*
* 这是一个多行
* 注释
*/

每一行的语句结束采用“;”来表示。

外联式JavaScript：

也可以把脚本保存到外部文件中。外部文件通常包含被多个网页使用的代码。

外部 JavaScript 文件的文件扩展名是 .js。

如需使用外部文件，请在 <script> 标签的 "src" 属性中设置该 .js 文件：

实例：

<!DOCTYPE html>
    <html> 
        <body> 
            <script src="myScript.js"></script> 
        </body> 
    </html>

二、JavaScript变量与数据结构

变量是存储信息的容器。数据结构是容器的大小。

(一)、变量

变量声明注意事项：

变量必须以字母开头，不能以关键子命名。

变量也能以 $ 和 _ 符号开头（不过我们不推荐这么做）

变量名称对大小写敏感（y 和 Y 是不同的变量）

定义变量时要使用var操作符（var是关键），后面跟一个变量名（变量名是标识符）。

以下是定义变量的几种方法：

声明（创建） JavaScript 变量：
    var carname;
变量赋值：
    carname="Volvo";
在声明变量时对其赋值：
    var carname="Volvo";
一条语句声明多个变量：
    var name="Gates", age=56, job="CEO";
声明也可横跨多行：
    var name="Gates",
    age=56,
    job="CEO";

无值的变量默认值是undefined

(二)、数据类型

字符串、数字、布尔、数组、对象、Null、Undefined。

1、字符串string：使用单引号或双引号表示。
    var carname="Bill Gates";
    var carname='Bill Gates';

2、数字Number：数字可以带小数点，也可以不带。
    注意：NaN，即非数值(Not a Number)是一个特殊的值，这个数值用于表示一个本来要返回数值的操作数未返回数值的情况。
        var box = 0 / 0;	//NaN

3、布尔类型boolean：布尔（逻辑）只能有两个值(true 或 false)。
    var x=true;
    var y=fals;

4、数组：
    创建数组：
    var cars=new Array();
    cars[0]="Audi";
    cars[1]="BMW";
    cars[2]="Volvo";
    或
    var cars=new Array("Audi","BMW","Volvo");
    或
    var cars=["Audi","BMW","Volvo"];

5、对象Object：对象由花括号分隔。在括号内部，对象的属性以名称和值对的形式 (name : value) 来定义。属性由逗号分隔。
    var person={firstname:"John", lastname:"Doe", id:5566};
    或
    var person={
    firstname : "Bill",
    lastname  : "Gates",
    id        :  5566
    };
   
6、Undefined与Null：Undefined 这个值表示变量不含有值，可以通过将变量的值设置为 null 来清空变量。

声明变量类型"new"

当您声明新变量时，可以使用关键词 "new" 来声明其类型：
var carname=new String;
var x=      new Number;
var y=      new Boolean;
var cars=   new Array;
var person= new Object;

三、JavaScript运算符

1、基本运算符

加、减、乘、除、取余、递增、递减
+   -   *   /   %    ++   --
注意：遇到NaN进行运算值都是NaN。

2、比较运算符

小于、大于、小于等于、大于等于、相等、不等、全等(恒等)、不全等(不恒等)
 <     >     <=        >=     ==   !=      ===        !==
注意："="代表赋值号，不是等号。
      全等、不全等————表示类型也是否相等。
      "+"号还可以用作连接符。var a = 1+'123abc';  //数值和字符串(字符和字符等)var a =1123abc
"--"与"++"前置和后置的区别(从左往右优先级的问题)
    在没有赋值操作，前置和后置是一样的。
    但在赋值操作时，如果递增或递减运算符前置，那么前置的运算符会先累加或累减再赋值，如果是后置运算符则先赋值再累加或累减。

3、赋值运算符

等于、加等于、减等于、乘等于、除等于、取于等于
 =    +=       -=     *=     /=       %=

4、逻辑运算符

1.逻辑与(AND) ：&&
var box =  (5 > 4) && (4 > 3);    	//true，两边都为true，返回true
2.逻辑或(OR)：||
var box =  (9 > 7) || (7 > 8);			//true，两边只要有一边是true，返回true
3.逻辑非(NOT)：!------单目运算符
!true == fals

5、逗号运算符

逗号运算符可以在一条语句中执行多个操作。
var box = 100, age = 20, height = 178;	//多个变量声明

6、三元运算符

三元条件运算符其实就是if语句的简写形式。
var box = 5 > 4 ? '对' : '错';			//对，5>4返回true则把'对'赋值给box，反之。

运算符优先级：

运算符	描述
. [] ()	对象成员存取、数组下标、函数调用等
++ -- ~ ! delete new typeof void	一元运算符
* / %	乘法、除法、去模
+ - +	加法、减法、字符串连接
< <= > >= instanceof	关系比较、检测类实例
== != === !==	恒等(全等)
&	位与
^	位异或
\|	位或
&&	逻辑与
\|\|	逻辑或
?:	三元条件
= x=	赋值、运算赋值
,	多重赋值、数组元素

四、JavaScript流程控制语句

1.条件分支语句if () {} else {}
2.多重分支语句switch () {case n : ; case n : ; ...}
3.do {} while循环语句    //至少会先运行一遍
4.while () {}循环语句
5.for () {}循环语句
6.for...in语句        //for...in语句是一种精准的迭代语句，可以用来枚举对象的属性。

break和continue在循环中精确地控制代码的执行。
    break语句会立即退出循环，强制继续执行循环体后面的语句。
    continue语句退出当前循环，继续后面的循环。

五、JavaScript函数

函数是由事件驱动的或者当它被调用时执行的可重复使用的代码块。

语法格式：
function 函数名称（[参数][ 参数][ 参数]）{	
		代码段
		Return 返回值
}
//使用关键词"function"

带参函数：
function myFunction(var1,var2)
{
这里是要执行的代码
}

返回值函数：
function myFunction()
{
var x=5;
return x;
}
//如果没有返回值，默认返回undefined

例子：(计算两个数字的乘积，并返回结果。)

function myFunction(a,b)
{
return a*b;    //计算两个传入的参数并返回值。
}
var a =myFunction(4,3);//调用函数并将返回值赋值给a变量

六、JavaScript对象

所有事物都是对象，对象是拥有属性和方法的数据。

举例：汽车就是现实生活中的对象。
汽车的属性包括名称、型号、重量、颜色等。
    所有汽车都有这些属性，但是每款车的属性都不尽相同。
汽车的方法可以是启动、驾驶、刹车等。
    所有汽车都拥有这些方法，但是它们被执行的时间都不尽相同。

1.new关键字创建Object对象
    var people= new Object();	        //创建people对象
    people.name="name属性";             //创建people对象的name属性
    people.age="age属性";               //创建people对象的age属性
2.new关键字省略创建Object对象
    var people = Object();		//创建people对象
    people.name="name属性";             //创建people对象的name属性
    people.age="age属性";               //创建people对象的age属性
3.字面量方式创建Object	
var people = {			//字面量方式
	name : "name属性",	//创建属性字段
	age : "age属性"    	//最后一个属性不要加逗号
};
4.字面量及传统复制方式
var people ={};
	people.name="name属性";    		//字面量声明为空对象
	people.age="age属性";		  	//点符号给属性复制
5.两种属性输出方式
alert(people.age);			//点表示法输出
alert(people ['age']);			//中括号表示法输出，注意引号
6.给对象创建方法
var people ={	
			run:function(){	        //类似于匿名函数。对象中叫方法，独立出来就叫匿名函数。匿名函数与普通函数的区别有无名字。
				return '跑步中！！！';		//对象中的run方法
			}
		}
alert(people.run());				//调用对象中的方法
7.使用delete删除对象属性
delete.people.name;				//删除people对象中的name属性

七、JavaScript数组

创建数组：

1、使用new关键字创建数组(以下三种都可省略new关键字)
var box = new Array();		//创建了一个数组
var box = new Array(10);	//创建一个包含10个元素的数组
var box = new Array('python','C','汇编'); //创建一个数组并分配好了元素
2、使用字面量方式创建数组
var box = [];	//创建一个空的数组
var box = ['python','C','汇编'];   //创建包含元素的数组

数组常见使用方法：

1、使用下标索引获取、改变数组的值(下标索引从零开始)
alert(box[2]);		//获取第三个元素
box[2] = '学生';		//修改第三个元素
box[5] = '计算机编程';		//增加第五个元素
2、使用length属性获取数组元素量
alert(box.length);	//获取元素个数
box.length = 10;	//强制元素个数
box[box.length] = 'JS技术';	//通过length给数组增加一个元素
3、复杂数组
var box = [	
	    {	//第一个元素是一个对象
		name : 'python',
		age : 28,
		run : function () {
		    return 'exit';
		}
	    },
	    ['马云','李彦宏',new Object()],    //第二个元素是数组
	    '江苏',	//第三个元素是字符串
	    25+25,	//第四个元素是数值，会进行自我运算
	    new Array(1,2,3)	 //第五个元素是数组,最后没有加逗号
];
alert(box[0].name);
alert(box[1][1]);

八、JavaScript BOM(浏览器对象模型)---针对浏览器

含义：使 JavaScript 有能力与浏览器“对话”。采用windows对象，由于现代浏览器已经（几乎）实现了 JavaScript 交互性方面的相同方法和属性，因此常被认为是 BOM 的方法和属性。可以省略windos前缀。如：windows.alert();可以直接写成alert();

常用的：

1、警告框    如：alert("弹出内容");
2、确认框    如：confirm("判断内容")
    if(confirm("你喜欢我吗？")){
        alert("喜欢");
        }else{
            alert("不喜欢！");
        }
3、提示框    如：prompt("提示内容")
    var name = prompt("请输入你的名字","");
        if(name){
            alert("欢迎您"+name);
        }

计时事件：

通过使用 JavaScript，我们有能力作到在一个设定的时间间隔之后来执行代码，而不是在函数被调用后立即执行。

两个关键方法:    (注意: 1000 毫秒是一秒。)
setInterval() - 间隔指定的毫秒数不停地执行指定的代码
    如：window.setInterval("function_no()",2000);    //每间隔2秒执行一次function_no函数,可以不使用window前缀
setTimeout() - 暂停指定的毫秒数后执行指定的代码
    如：window.setTimeout("function_no()",2000);    //两秒后执行一次funtion_no函数
clearInterval() - 清除定时调用,只能清除setInterval

例子：
function ad(){	
	var d = new Date()
	var t=d.toLocaleTimeString();     //时间获得
	//alert(t);
	document.getElementById("clock").value=t;
} 
setInterval("ad()",1000);

九、JavaScript DOM(文档对象模型)--针对HTML页面

DOM针对HTML和XML文档的API（应用程序接口）。DOM描绘了一个层次化的节点树(div、img等html标签"节点")，运行开发人员添加、移除和修改页面的某一部分。

注意：font-size(这样有横杠的"-",需要把中间"-"去掉后面的"s"大写"S")

W3C提供了比较方便简单的定位节点的方法和属性：

方法	                说明
getElementById()	获取特定ID元素的节点
getElementsByTagName()	获取相同元素的节点列表
getElementsByName()	获取相同名称的节点列表
getAttribute()	        获取特定元素节点属性的值
setAttribute()	        设置特定元素节点属性的值
removeAttribute()	移除特定元素节点属性

例子：

html代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>js dom</title>
    <style type="text/css">
    .qwer{
            color:red;
            background:red;
          }
    </style>
</head>
<body>
    <div id="qw">
        颜色字体效果
    </div>
    <div></div>
    <input type="text" name="user" class="er">
    <input type="text" name="user">
    <script type="text/javascript" src="./index.js"></script>    //因为html的加载顺序，所以写在这
<body>
</html>

js代码

/*获取到id节点名称*/
var zx = document.getElementById("qw");    //获取到id节点名称
zx.style.color="red";    //添加字体颜色效果
/*获取相同的元素节点列表*/
var zx2 = document.getElementsByTagName("div");    //获取相同的元素节点列表
alert(typeof(zx2));    //如果有多个相同元素返回的就是数组，用下标访问
zx2[1].style.color="blue"; 
/*获取相同名称的节点列表*/
var zx3 = document.getElementsByName("user");    //获取相同名称的节点列表
zx3[0].style.background="green";
zx3[1].style.background="blue";
/*获取特定元素节点属性的值*/
var zx4 = document.getElementsByTagName("input")[0];    //获取第一个元素节点
alert(zx4.getAttribute("name"));    //获取name属性的值
/*设置特定元素节点属性的值*/
zx4.setAttribute("class","qwer");    //zx4[0]的class属性值改成qwer
/*移除特定元素节点属性*/
zx4.removeAttribute("class");

十、JavaScript事件

事件是由访问Web页面的用户，引起的一系列操作，例如：用户点击。当用户执行某些操作的时候，再去执行一系列代码。

事件分为：鼠标事件、键盘事件

事件处理函数	影响的元素	                    触发方式
onabort	        图像	                            当图像加载被中断时
onblur	        窗口、框架、所有表单对象	            当焦点从对象上移开时
onchange	输入框，选择框和文本区域	            当改变一个元素的值且失去焦点时
onclick	        链接、按钮、表单对象、图像映射区域	    当用户单击对象时
ondblclick	链接、按钮、表单对象	            当用户双击对象时
ondragdrop	窗口	                            当用户将一个对象拖放到浏览器窗口时
onError	        脚本	                            当脚本中发生语法错误时
onfocus	        窗口、框架、所有表单对象	            当单击鼠标或者将鼠标移动聚焦到窗口或框架时
onkeydown	文档、图像、链接、表单	            当按键被按下时
onkeypress	文档、图像、链接、表单	            当按键被按下然后松开时
onkeyup	        文档、图像、链接、表单	            当按键被松开时
onload          主题、框架集、图像                     文档和图像加载后
onunload	主体、框架集	                    文档和框架集卸载后
onmouseout	链接	                            当鼠标移出链接时
onmouseover	链接	                            当鼠标移到链接时
onmove	        窗口	                            当浏览器窗口移动时
onreset	        表单复位按钮	                    单击表单的reset按钮
onresize	窗口	                            当选择一个表单对象时
onselect	表单元素	                            当选择一个表单对象时
onsubmit	表单	                            当发送表格到服务器时

例子：

html代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>js 事件</title>
    <style type="text/css">
        div{
            width:200px;
            height:200px;
            border:1px solid red;
        }
    </style>
</head>
<body>
    <button id="ad">普通按钮</button>
    <div>
        <img src="https://www.baidu.com/img/bd_logo1.png?where=super" width="200px">    //一张百度的图片
    </div>
    <script type="text/javascript" src="./index.js"><script>    //因为html加载顺序，所以放在这里。还可以在js文件内添加onload包裹需要延迟加载的js来解决。
</body>
</html>

js代码

var ad = document.getElementById("ad");
var div = document.getElementsByTagName("div")[0];
var img = document.getElementsByTagName("img")[0];
//单机事件
ad.onclick=function(){
    div.style.background="red";
}
//鼠标进入事件
div.onmouseover=function(){
    img.style.opacity=0.6;
}
//鼠标离开事件
div.onmouseout=function(){
    img.style.opacity=1.0;
}
//键盘事件
windows.document.onkeydown=function(ent){    //可省略"windows."，ent参数代表传入的按键值
    alert(ent.keyCode);    //keyCode代表键盘码
    alert("按了案件");
}

十一、JavaScript尺寸样式表

改变html元素的样式：document.getElementById(id).style.属性名=新样式

1.通过style内联获取元素的大小(无法从css中获取)

例子：

var box = document.getElementById('box');
alert(box.style.width);
alert(box.style.height);

2.scrollWidth和scrollHeight可以获取滚动内容的元素大小

3.offsetWidth和offsetHeight可以返回元素实际大小,包含边框、内边距和滚动条。

4.clientLeft和clientTop可以获取元素设置了左边框和上边框的大小。

5.offsetLeft和offsetTop可以获取当前元素相对于父元素的位置。

6.scrollTop和scrollLeft可以获取滚动条被隐藏的区域大小，也可设置定位到该区域。

详细教程：http://www.w3school.com.cn/js/index.asp

u013283956

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录