JavaScript学习笔记

xiaoxiao2021-02-28  7

JavaScript 的简介

 什么是JavaScript: 是基于对象和事件驱动的语言,应用于客户端,也能依赖nodejs在服务器上运行。  基于对象:  java是面向对象,使用对象需要创建; js里面提供好了一些对象,直接使用  事件驱动: 每次滑动鼠标,变换一张图片 客户端: 指的是浏览器

JavaScript的特点

第一个:动态性 第二个:安全性 JavaScript不能访问本地硬盘里面的文件 第三个:跨平台性 JavaScript跨平台,只要在系统里面安装了支持JavaScript的浏览器,可以运行JavaScript

Java和JavaScript区别

(雷锋和雷峰塔) 第一,java是sun公司,现在是oracle;JavaScript是网景公司 第二,java是面向对象的语言,javascript是基于对象的语言 第三,java跨平台需要依靠虚拟机实现,JavaScript只需要浏览器可以运行 第四,JavaScript弱类型语言,java是强类型的语言  比如在java里面定义一个变量 int a = 10;   int b = "10";不正确  在JavaScript里面定义变量都是使用一个关键字 var a = 10;  var b = "10"; var c = true;  第五,java运行先编译通过虚拟机运行,JavaScript直接使用浏览器运行

JavaScript由三部分组成

第一部分:ECMAScript 由ECMA组织制定语句,语法 第二部分:BOM broswer object  model:浏览器对象模型 第三部分:DOM document  object model :文档对象模型

js和html的结合方式

有两种结合方式 第一种:使用html中的标签 <script type="text/javascript"> js代码 </script> 代码 <script type="text/javascript"> alert("aaa"); </script> 第二种:使用html的标签,引入外部的js文件 <script type="text/javascript" src="js文件的路径"></script> 代码:   <script type="text/javascript" src="1.js"> //不要在script标签里面写js代码了,不会执行 alert("aaa"); </script>使用第二种方式的时候有两点注意 注意一:不要在script标签里面写js代码了,不会执行 注意二:结束script标签 </script>,不要在标签内结束 js的注释有两种 :  //单行注释 /* 多行注释 */

变量声明和数据类型

(1)在js里面如何声明变量,都是使用一个关键字var   var a = 10; 原始类型有五个: string:字符串类型。( var a = "abc") number:数字类型。( var b = 10) boolean:布尔类型 true false。(var c = true) null: null是特殊的引用类型,表示对象引用为空。比如 var date = null; undefined :表示定义了一个变量,但是没有赋值。 值只有undefined typeof 变量|值 (3)typeof(变量的名称): 查看当前变量的类型。 alert(typeof(a)); 通过typeof可以判断一个值或者变量是否是原始类型,若是原始类型,还可以判断属于那种. 引用类型和类型转换 引用类型 Object 对象:所有对象都由这个对象继承而来 Boolean 对象:Boolean 原始类型的引用类型 Number 对象: Number 原始类型的引用类型 原始类型中的String Number Boolean都是伪对象,可以调用相应的方法 Js有几种弹出方式 警告框: alert(“文本”) 确认框: confirm(“文本”) 提示框: prompt(“文本”,”默认值”) 数组 Array * 什么是数组:定义一个变量只能存一个值,想要存多个值,可以使用数组进行存储 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 注意:在js里面数组的长度可变的,数组的长度是最大的下标+1,之间如果没有赋值直接默认是空字符串 String: 语法: new String(值|变量);//返回一个对象 String(值|变量);//返回原始类型 常用方法: substring(start,end):[start,end) substr(start,size):从索引为指定的值开始向后截取几个 charAt(index):返回在指定位置的字符。 indexOf(""):返回字符串所在索引 replace():替换 split():切割 常用属性:length Boolean: 语法: new Boolean(值|变量); Boolean(值|变量); 非0数字 非空字符串 非空对象 转成true Number 语法: new Number(值|变量);

Number(值|变量);

注意: null====>0  false====>0    true====>1 字符串的数字=====>对应的数字 其他的(比如字符,标点符号)NaN

 Date:

new Date(); 常用方法: toLocalString() RegExp:正则表达式 语法: 直接量语法  /正则表达式/参数 直接量语法  /正则表达式/ new RegExp("正则表达式") new RegExp("正则表达式","参数")  参数: i:忽略大小写 g:全局 常用方法: test() :返回值为boolean Math: Math.常量|方法 Math.PI Math.random()  [0,1) 全局:★ decodeURI() 解码某个编码的 URI。  encodeURI() 把字符串编码为 URI。 Number():强制转换成数字 String():转成字符串 parseInt():尝试转换成整数 parseFloat():尝试转换成小数 eval() 计算 JavaScript 字符串,并把它作为脚本代码来执行。

类型转换
** 转换成字符串 ** 转换成数字:parseInt() 和 parseFloat()  ** 强制类型转换 Boolean(value) - 把给定的值转换成 Boolean 型;  Number(value) - 把给定的值转换成数字(可以是整数或浮点数);  String(value) - 把给定的值转换成字符串;

运算符
(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("<hr/>"); document.write(b-1); //真正相减的运算 document.write("<hr/>"); 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("<hr/>"); var flag1 = false; document.write(flag1+1); //1,当boolean类型是false时候,把类型当成0运算 第四个:==和===区别 ==比较的是值, === 比较的是值和类型

ECMAScript 对象

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")); = split() 把字符串分割为字符串数组   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("<br/>"); document.write(str4.substring(2,3));  //R ,第一个参数表示从哪个位置开始,第二个参数到哪个位置结束(不包含这个位置) [2,3) Array对象 (1)创建数组 (2)属性 * length 设置或返回数组中元素的数目  ** //length属性 var arr1 = new Array(4,5,6); document.write(arr1.length); (3)方法 concat():连接数组   数组1.concat(数组2); join():把数组根据指定字符进行分割 ** var arr3 = ["mary","jack","lucy"]; document.write(arr3.join("-")); pop() 删除并返回数组的最后一个元素  push() 向数组的末尾添加元素,并返回新的长度  reverse() 颠倒数组中元素的顺序  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("<hr/>"); //floor(x) 对一个数进行下舍入。 document.write(Math.floor(a)); document.write("<hr/>"); //round(x) 把一个数四舍五入为最接近的整数 document.write(Math.round(a)); document.write("<hr/>"); //random() 返回 0 ~ 1 之间的随机数  document.write(Math.random()); //生成0-9之间的随机数 0.0 -- 0.9之间的值 document.write("<hr/>"); document.write(Math.floor(Math.random()*10)); Date对象 (1)进行日期操作的对象 (2)使用Date对象,new Date(); (3)方法 toLocaleString() 根据本地时间格式,把 Date 对象转换为字符串。 得到当前的年 getFullYear() 从 Date 对象以四位数字返回年份  得到当前的月 getMonth() 从 Date 对象返回月份 (0 ~ 11)  得到当前的星期 getDay() 从 Date 对象返回一周中的某一天 (0 ~ 6)  ** 如果当前的星期是星期日,返回的是0  ** document.write(date.getDay()) 得到当前的日 getDate() 从 Date 对象返回一个月中的某一天 (1 ~ 31)  得到当前的小时  getHours() 得到当前的分   getMinutes() 得到当前的秒 getSeconds() 得到毫秒数 getTime() 返回 1970 年 1 月 1 日至今的毫秒数 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);

BOM对象

文档对象模型(共5个对象)     navigator : 浏览器的信息 screen : 屏幕的信息 history : 访问地址的历史信息  常用方法:go() Go(-1) Go(1); location: 定位信息 (地址栏)设置url 常用属性:        href 设置或返回完整的 URL  location.href:获取 location.href=”url”设置

 window :对象是窗口对象,是顶层对象(可省略不写)

通过window可以获取其他的四个对象      window.location 等价于 location      window.history 等价于 history      。。。。 

  常用方法:   Alert()   Confirm()确认框   Prompt 输入框

定时器:     设置定时器 setInterval(code,毫秒数):周期执行 setTimeout(code,毫秒数):延迟多长事件后 只执行一次. 例如: setInterval(showAd,4000); serInterval("showAd()",4000); 清除定时器 clearInterval(id): clearTimeout(id): 打开和关闭 open(url):打开 close():关闭js的全局变量和局部变量

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("<br/>"); document.write(encodestr2); decodeURI() 解码某个编码的 URI ** var decodestr2 = decodeURI(encodestr2);  js的函数 在js里面定义函数有三种方式 第一种:使用关键字 function 方法名称(参数列表) { 方法体和返回值 } 注意一:参数列表,不需要写类型(var),直接写参数名称 注意二:返回值,根据实际需要可以有也可以没有 代码 function test1() { alert("123456"); } //实现两个数的相加 function add1(a,b) { var sum = a+b; return sum; } alert(add1(2,3)); 第二种:匿名函数,使用关键字function(参数列表) { 方法体和返回值; }  var test1 = function(a,b) { return a+b; } //调用函数alert(test1(3,4)); 第三种:动态函数(方法体和返回值,包含参数列表都是通过参数传递进来的) * 使用js里面的内置对象 new Function("参数列表","方法体和返回值") var param = "a,b"; var method = "var sum;sum=a+b;return sum;"; var test2 = new Function(param,method); //调用函数 alert(test2(5,6)); js的函数的重载 js里面是否存在函数的重载? 第一,在js不存在重载 第二,可以使用js函数里面arguments数组模拟重载的效果 (3)模拟重载的效果 * 在js里面有一个数组arguments,保存传递进来的参数,使用这个数组模拟重载的效果 * 代码 //模拟重载的效果 //在js函数里面有一个数组 arguments,保存传递进来的参数的 function add1() { //alert(arguments.length); //遍历数组 /*for(var i=0;i<arguments.length;i++) { alert(arguments[i]); }*/ //模拟重载的效果(有几个参数,实现这几个参数的相加) var sum = 0; for(var i=0;i<arguments.length;i++) { sum += arguments[i]; } return sum; } //调用 alert(add1(1,2));       alert(add1(1,2,3));     alert(add1(1,2,3,4));  事件 (1)什么是事件:在html的元素里面可以触发事件调用js里面的函数 (2)在html的标签上面如何使用事件
Javascript绑定事件的形式
第一种:在元素绑定回调函数 

通过元素的事件属性:<xxx onxx=”韩硕名(参数)”><>

<input type="button" value="第一种方式" οnclick="add1();"/>

第二种:派发事件

 <xxx onxx=”韩硕名(参数)”><>

document.getElementById("buttonid1").onclick = function() { alert("aaaaa"); }; 单击事件  onclick:鼠标点击事件 <input type="text" οnclick="test2();"/> 焦点事件  onfocus:获取焦点  onblur :失去焦点

表单事件

onsubmit 事件会在表单中的确认按钮被点击时发生  <form οnsubmit="return chc()">

onchange :事件会在域的内容改变时发生,常用在下拉表单中

页面或元素加载事件: onload :html页面在加载时候触发事件,调用响应的js方法(先加载页面后调用方法)  <body οnlοad="init()"> onmouseover  : 鼠标被移到某元素之上  onmouseout  : 鼠标从某元素移开  onkeypress[pres]  点击键盘上面的某个键,调用方法    <input type="text" id="textid1" οnkeypress="key1(event);"/> function key1(obj) { //alert(obj.keyCode); //如果点击键盘上面的回车键 ,调用方法 13 if(obj.keyCode==13) { alert("key1"); } }

DOM对象

document  object  model:(文档对象模型)

 文档:指的是标记型文档(html、xml)  对象:在对象里面有属性和方法   使用dom里面提供的对象里面的属性和方法,对标记型文档进行操作

当浏览器接受到dom对象, 要想使用dom对象标记型文档进行操作,首先需要解析标记型文档(html为例),html中包含 标签、属性、文本内容

(2)使用dom解析html

 解析过程:根据html的层级结构在内存中分配一个树形结构,如下图:

HTML DOM 把 HTML 文档呈现为带有元素、属性和文本的树结构(节点树)。它对于我们很好地理解网页各个元素,标签和控件搭配,以及各种js,css等的加载会有一些帮助

DOM方法:

* document对象,代表整个文档 * element对象,代表标签 * 属性对象 * 文本对象 * Node节点对象,是这些对象的父对象,在找不到想要使用的方法,到Node里面找 (3)DHTML的简介 * 不是一种技术,是很多技术的简称。 * 包含的技术: ** html:封装数据 ** css:使用属性和属性值修改数据的样式 ** ECMAScript:语句和语法 ** DOM:对标记型文档进行操作 节点(node) 文档节点 document 元素节点 element 属性节点 attribute

文本节点 text

三种获取特定元素的方法:

    getElementById(id)、getElementTagName(标签名)、getElementClassName(class名)

总结:

一份文档就是一颗节点树节点分为: 元素节点、属性节点、和文本节点等getElementById将返回一个对象,该对象对应这文档里的一个特定元素节点。getElementTagName返回一个对象数组,该数组对应文档标签名getElementClassName返回一个对象数组,该数组对应标签的class属性每个节点是一个对象

获取和设置属性

    获取属性:getAttribute(属性名)

    设置属性:setAttribute(属性名:属性值)

转载请注明原文地址: https://www.6miu.com/read-2400193.html

最新回复(0)