关注博主领取完整学习资料
目录
一、JavaScript简介
1.JS概述
2.JS代码存在位置
二、语法
1.基本语法
2.变量
3.基本类型和常量
4.运算符
5.流程控制
三、函数
1.函数定义和调用
2.全局变量和局部变量
四、面向对象
1.js中面向对象设计
2.js自定义类
3.构造函数和this
4.函数参数的值传递方式
五、数组
1.定义数组
2.for in循环
3.属性和方法
六、DOM
1.DOM和获取元素的三种方式
2.插入/追加/删除/替换节点
七、事件处理
1.DOM事件编程
2.事件监听
一、JavaScript简介
1.JS概述
简介JavaScript一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言，内置支持类型。它的解释器被称为JavaScript引擎，为浏览器的一部分，广泛用于客户端的脚本语言，最早是在HTML（标准通用标记语言下的一个应用）网页上使用，用来给HTML网页增加动态功能。Node.js。 在1995年时，由Netscape公司的Brendan Eich，在网景导航者浏览器上首次设计实现而成。因为Netscape与Sun合作，Netscape管理层希望它外观看起来像Java，因此取名为JavaScript。但实际上它的语法风格与Self及Scheme较为接近。 为了取得技术优势，微软推出了JScript，CEnvi推出ScriptEase，与JavaScript同样可在浏览器上运行。为了统一规格，因为JavaScript兼容于ECMA标准，因此也称为ECMAScript。组成部分JavaScript 的内容，包含以下三部分：ECMAScript（核心）：JavaScript 语言基础(规定了 JavaScript 脚本的核心语法，如 数据类型、关键字、保留字、运算符、对象和语句等，它不属于任何浏览器。)；DOM（文档对象模型）：规定了访问HTML和XML的接口(提供了访问 HTML 文档（如body、form、div、textarea等）的途径以及操作方法)；BOM（浏览器对象模型）：提供了独立于内容而在浏览器窗口之间进行交互的对象和方法(提供了访问某些功能（如浏览器窗口大小、版本信息、浏览历史记录等）的途径以及操作方法)。基本特点是一种解释性脚本语言（代码不进行预编译）。 主要用来向HTML（标准通用标记语言下的一个应用）页面添加交互行为。 可以直接嵌入HTML页面，但写成单独的js文件有利于结构和行为的分离。 日常用途嵌入动态文本于HTML页面。 对浏览器事件做出响应。 读写HTML元素。 在数据被提交到服务器之前验证数据。 检测访客的浏览器信息。 控制cookies，包括创建和修改等。
2.JS代码存在位置
方式1: 在<html>标签中,任何地方添加<script></script>标签.标签中内容就是js代码. 虽然可以放在页面的任何地方,但是规范放在<head>标签中.<script type="text/javascript">//js代码alert("hello");</script>方式2:单独使用一个文件来编写javascript代码,在需要使用的页面中引入该文件. <script 零基础学java script type="text/javascript" src="hello.js"></script>引入该文件.方式3:把代码编写的a标签的href属性中,点击a标签的时候,就执行里面代码<a href='javascript:alert("hello");'>运行js代码</a>
二、语法
1.基本语法
JavaScript中的标识符变量，常量，函数，语句块也有名字，我们统统称之为标识符。标识符可以由任意顺序的大小写字母、数字、下划线(_)和美元符号($)组成，标识符不能以数字开头，不能是JavaScript中的保留字或关键字。 合法的标识符举例：indentifier、username、user_name、_userName、$username非法的标识符举例：int、98.3、Hello World JavaScript严格区分大小写username和userName是两个完全不同的符号 JavaScript程序代码的格式 每条功能执行语句的最后必须用分号(;)结束，每个词之间用空格、制表符、换行符或大括号、小括号这样的分隔符隔开 。语句块使用{}来表示JavaScript程序的注释 /*…*/中可以嵌套“//”注释，但不能嵌套“ /*…*/”。 、/..文档注释.*/
2.变量
什么是变量，系统为之设置一个标识，程序可以用变量名来指向具体的对象内存，并通过变量名来获得对应的对象。声明变量要使用var关键字例如：var name;//一般不使用name作为变量名声明变量的同时为其赋值例如：var name = "jinken";对已赋值的变量赋予一个其他类型的数据例如：name = 18;不事先声明变量而直接使用例如：x = 1234; 提示：javascript定义变量无需指定类型，任何类型都使用var声明,感觉var就有点类型于java中的Object类型了==================================================打印对象:方式1:alert(变量名);方式2:console.debug(变量名);
3.基本类型和常量
Number(数字类型)1、整型常量(10进制8进制16进制)十六进制以0x或0X开头，例如：0x8a。八进制必须以0开头，例如：0123。十进制的第一位不能是0（数字0除外），例如：123。２、实型常量 12.32、193.98、 5E7、4e5等。特殊数值：NaN、Infinity(除数为零)，所对应的判断函数isNaN()、isFinite()Boolean(布尔值) true和false。String字符串(注意js中没有char类型，所有'a'也是一个字符串) “a book of JavaScript”、‘a’、 “a”、“”。字符串中的特殊字符，需要以反斜杠（）后跟一个普通字符来表示。null常量undefined常量 (未定义,定义未赋值)-----------------------------------------------------typeof运算符:typeof:判断变量的数据类型var msg='Jinken';console.debug(typeof msg );msg=17;console.debug(typeof msg );
4.运算符
算术运算符赋值运算符比较运算符逻辑运算符位运算符
- 比较运算符
JS和Java中不同的运算符:1):=和==以及===符号.=:表示赋值和Java一样.==:表示比较两个常量/变量的内容,不比较类型.===:先比较两个变量/常量的类型,如果类型不同,返回false,如果类型相同在比较内容.不要将比较运算符“==”误写成“=” ；console.debug("17" == 17) //trueconsole.debug("17" === 17) //false
- 逻辑运算符
在逻辑运算中，0、""、false、null、undefined、NaN均表示false。----------------------------------------------------------------------------------a && b : 将a, b转换为Boolean类型, 再执行逻辑与, 若表达式结果为true返回b, false返回aa b : 将a, b转换为Boolean类型, 再执行逻辑或, 若表达式结果为true返回a, false返回b---------------------------------------------------------------------------------&& 和 运算符的区别(开关)：&&操作:返回最后一个为true的值,或者第一个为false的值.操作: 返回第一个为true的值,或则最后一个为false的值.案例:console.debug(true && true)console.debug(1 && true)console.debug(1 && 2)console.debug("A" && 2)console.debug("" && 2)console.debug(null && "B")console.debug("A" && "B")console.debug(1 && 2 && 3)console.debug(1 && null && 3)console.debug("" && null && 0)
5.流程控制
- 分支语句
• if语句
if(123){ alert('OK');}if(0){ alert('OK');}
• switch语句
- 循环语句
• while循环
• do while语句
• for循环
• for in循环
for in循环好比是Java中的foreach循环:for in循环作用:1.遍历数组里所有的数组元素.2.遍历js对象的所有属性.
- 控制循环
• break语句
• continue语句
三、函数
函数的作用1):将脚本编写为函数，就可以避免页面载入时执行该脚本。2):函数包含着一些代码，这些代码可以多次被调用。
1.函数定义和调用
定义一个函数的格式如下(普通/匿名) ：function 函数名（[参数列表]）{程序代码[return 表达式;]}无参数无返回函数有参数无返回函数有参数有返回函数示例：var userName = '张三';function say(msg){var s = userName+":"+msg;return msg;}var result = say('你好啊');//如果函数没有返回值，默认返回undefined.alert(result);alert(say(‘今天下雨了’));定义匿名函数var add = function(x,y){ return x+y;}
2.全局变量和局部变量
全局变量:function外部定义的变量称为全局变量局部变量:function内部定义的变量称为局部变量访问变量原则：就近原则，谁离我最近我就使用谁。-----------------------------------------------------<script language="javascript">var msg = "全局变量";function show(){msg = "局部变量";}show();alert(msg);//?</script>-----------------------------------------------------<script language="javascript">var msg = "全局变量";function show(){var msg; msg = "局部变量";}show();alert(msg);//?</script>
四、面向对象
1.js中面向对象设计
对象中所包含的变量就是对象的属性，对象中所包含的对属性进行操作的函数就是对象的方法，对象的属性和方法都叫对象的成员。 类是对某一类事物的描述，是抽象上的概念；而对象实例是一类事物中的具体个例。能够被用来创建对象实例的函数就叫对象的构造函数。使用new关键字和对象的构造函数就可以创建对象实例，语法格式如下：var objInstance = new ObjName(传递给该对象的实际参数列表);
2.js自定义类
//js创建一个类,只需要定义类的构造函数(方法);this关键字://在构造函数中:this指新创建的对象//在函数/方法中:谁调用this所在的函数/方法,this就是谁.function User() {this.name='jinken';var age=18;}//使用构造函数,创建对象var u= new User();//设置对象的属性//u.name='张三';---------------------------------------------------------function Person(name,age){this.name = name;this.age= age;}var p = new Person("jinken",18);//为对象添加方法:js中,函数也是一个值.p.show = function(){alert(this.name+","+this.age);};p.show();
3.构造函数和this
this关键字://在构造函数中:this指新创建的对象//在函数/方法中:谁调用this所在的函数/方法,this就是谁.
4.函数参数的值传递方式
将基本数据类型的变量作为函数参数传递的情况：<script language="javascript">function changeValue(x){x = 5;}var x = 3;changeValue(x);alert(x);</script>----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------将对象类型的变量作为函数参数传递的情况： <script language="javascript">function Person(name,age){this.age = age;this.name = name;this.say = sayFunc;}function sayFunc(){alert(this.name + ":“ + this.age);}function change(p1){p1.name = "李四";} var person1 = new Person("张三",18);change(person1);person1.say();</script>
五、数组
js中的数组,类似于ArrayList//创建数组//方式1:var arr1 = new Array();arr1[0]="A";arr1[1]="B";arr1[2]="C";arr1[4]="E";//print(arr1);//方式2:var arr2=new Array("A","B","C","D");//print(arr2);//方式3://new Array(Number size):创建指定长度的数组var arr3 = new Array("A","B");//print(arr3);//方式4:推荐var arr4 = [10,20,30,40,50];-----------------------------------------------------------------------length－获得数组的长度；concat－连接数组；join－把数组转换成字符串；pop－弹出一个元素；push－放入一个元素；reverse－颠倒数据中的元素顺序；shift－移出第一个元素；slice－截取数组;sort－排序数组;unshift－在前面追加元素；splice 从数组中添加/删除/替换元素,若是删除操作,则返回被删除的元素。
1.定义数组
方式1:方式2:方式3:
2.for in循环
for(变量 in 集合或对象){执行语句块}for in是对对象进行迭代，迭代出对象中所有的属性和方法。
3.属性和方法
length－获得数组的长度；concat－连接数组；join－把数组转换成字符串；pop－弹出一个元素；push－放入一个元素；reverse－颠倒数据中的元素顺序；shift－移出第一个元素；slice－截取数组;sort－排序数组;unshift－在前面追加元素；
六、DOM
DOM ：DOM是Document Object Model文档对象模型的缩写。根据W3C DOM规范,DOM是一种与浏览器，平台，语言无关的接口，使得你可以访问页面其他的标准组件D：文档 – html 文档 或 xml 文档O：对象 – document 对象的属性和方法M：模型 DOM 是针对xml(html)的基于树的API。 DOM树:节点（node）的层次。 DOM 把一个文档表示为一棵家谱树（父，子，兄弟） DOM定义了Node的接口以及许多种节点类型来表示XML节点的多个方面
1.DOM和获取元素的三种方式
//getElementById() 返回对拥有指定 id 的第一个对象的引用。 var div = document.getElementById("divId");print(div);print(div.innerHTML);//getElementsByName() 返回带有指定名称的对象集合。var favs =document.getElementsByName("favs");print(favs);//getElementsByTagName() 返回带有指定标签名的对象集合。 var divs = document.getElementsByTagName("div");print(divs);
2.插入/追加/删除/替换节点
1.给父节点追加现有/新子节点2.在指定节点之前/之后插入新节点3.删除节点/替换节点
七、事件处理
JavaScript处理事件的基本机制：对DOM元素绑定事件处理函数；监听用户的操作；当用户在相应的DOM元素上进行与绑定事件对应的操作时，事件处理函数做出响应；将处理结果更新到 HTML 文档。
1.DOM事件编程
事件驱动编程所谓事件驱动,简单地说就是你点什么按钮(即产生什么事件),电脑执行什么操作(即调用什么函数).当然事件不仅限于用户的操作. 当对象处于某种状态时，可以发出一个消息通知，然后对这个消息感兴趣的程序就可以执行。事件驱动编程中的几个核心对象事件源：谁发出事件通知，发出消息；也就是事件主体（通常指元素和标签）；事件名称：发出什么样的通知的名称，比如鼠标到我头上了，我被别人点了一下；事件响应函数：谁对这个这个事件感兴趣，当这个事件发生时要执行什么样的操作；事件对象：一般来说，当事件发生时，会产生一个描述该事件的具体对象，包括具体的参数等一起发给响应函数，好让他们通过事件对象来了解事件更加详细的信息。示例<p style="color: red" id="p1">Hello world!</p>//事件源function shout(e){//响应函数，监听函数alert(e.clientX);//e事件对象}document.getElementById("p1").οnclick=shout;//在事件源上绑定事件响应函数
2.事件监听
版权声明：
本文来源网络，所有图片文章版权属于原作者，如有侵权，联系删除。
本文网址：https://www.bianchenghao6.com/h6javajc/19644.html