JavaScript的入门基础(小白篇)

版权声明：禁止转载 https://blog.csdn.net/qq_36505948/article/details/83069383

一、JS的介绍？

JS是一门基于对象和事件的用于客户端的安全解析性脚本语言？

二、基础介绍?

好吧，我不知道现在市场上介绍JS的为什么会这么乱，因此把自己的基础给整理出来，同时也是给自己一个整理！！！！

开始~~~

JS是一门脚本脚本语言，用于跟html或者JSP结合使用，让html由原来死板和固定的静态页面 变得 动作和交互！大白话就是它让HMTL或者JSP具备了动态和向后端交互数据的能力，单独的jsp或者html只是静态页面!

其生命周期，JavaScript 变量的生命期从它们被声明的时间开始。局部变量会在函数运行以后被删除。全局变量会在页面关闭后被删除。

(1)：引入?

---------------------------在<script></script>标签中使用

---------------------------使用代码引入外部js文件：<script type="text/javascript" src="public.js"></script>

---------------------------单独引入document.write "<script src='public.js'></script>";写入代码

注意：J浏览器对js与css的加载一般情况下从页面往下，为了方便渲染，一般css的引入在页面开头，JS的引入在页面尾部

(2)：基本写法与代码细节；

---------------------------变量声明统一使用var  a=xxx； 数据类型会自己包括在内部，靠程序员自己去识别，可并行命名，逗号隔开

---------------------------变量名以字母，下划线或者美元符号开头，数字不开头，大小写敏感，不要使用关键字和保留字；

---------------------------数据类型：Strimg(字符串类型)，Boolean(布尔类型),function()函数类型，object(对象类型)，number(数据)

---------------------------对象类型：Object，Date，Array类型都是

---------------------------空白类型：undefinded(未定义类型),Null(空白类型)

---------------------------字符串的使用：indexof(str,index),toString,toLower,toupperCase,chatAt(index),substring(),split(str),="xxx";

---------------------------数组与赋值：=('1','2')或=['1','2']或=new Array(4)或=new Array()

---------------------------算数运算符号：与java一致，加减乘除

---------------------------赋值运算符号：与java一致，递增递减，取余数，取模，字符串加号空格号组合等

---------------------------比较运算符：与java一致，大于小于等于不等于，绝对等于，不绝对等于(值和类型)

---------------------------逻辑运算符：与java一致，或与非

---------------------------判断语句：与java一致，if，if-else，if-ifelse-else

---------------------------选择语句：switch (d) {case:"";break;default:xxx;}

---------------------------循环语句：for (var i=0;i<cars.length;i++){document.write(cars[i] + "<br>");}，或者do/while{}语句

---------------------------终止语句：break语句，continue语句

---------------------------操作符号：typeof xxxx

(3)：JS函数页面；

每个JS文件在写之前要统一调用的逻辑，也即是js文件本身就是一个大function()函数，与java类相似，都有一个main入口。有以下三种模式可以供选择：(此处或许是你们理解一个JS文件结构的开始)

------------------------------$(function(){加载页面里面的其他函数和参数，数组，变量等})

------------------------------window.onload=function(???){加载了页面}

------------------------------$(document).ready(function(params){加载页面})

------------------------------$(window).on(“load”,function() {}) 全部加载完成后在执行

注意：数组或者其他变量的初始化可以放在该函数文件之外，此处函数只是用于同一场景，目的是防止函数各自分散调用，避免因管理不当导致的逻辑混乱或失效

(4) :JS的高频参数？

------------------------------正则表达式？

var str = "Visit Runoob!"; var n = str.search(/Runoob/i);

或者

<p id="demo">请访问 Microsoft!</p>

var str = document.getElementById("demo").innerHTML; var txt = str.replace(/microsoft/i,"Runoob");

其中：/runoob/i  是一个正则表达式。runoob  是一个正则表达式主体 (用于检索)。i  是一个修饰符 (搜索不区分大小写)。

------------------------------正则表达式？ /正则主体/.test("xxxxxxxx ")。如果测试中包含正则主体则返回true，否则我false

------------------------------正则表达式？ /正则主体/.exec("xxxxxxxx ")。该函数返回一个数组，如果未找到匹配，则返回值为 null

 常用的一些表达式如下：

/*是否带有小数*/
function    isDecimal(strValue )  {  
   var  objRegExp= /^\d+\.\d+$/;
   return  objRegExp.test(strValue);  
}  

/*校验是否中文名称组成 */
function ischina(str) {
	var reg=/^[\u4E00-\u9FA5]{2,4}$/;   /*定义验证表达式*/
	return reg.test(str);     /*进行验证*/
}

/*校验是否全由8位数字组成 */
function isStudentNo(str) {
	var reg=/^[0-9]{8}$/;   /*定义验证表达式*/
	return reg.test(str);     /*进行验证*/
}

/*校验电话码格式 */
function isTelCode(str) {
	var reg= /^((0\d{2,3}-\d{7,8})|(1[3584]\d{9}))$/;
	return reg.test(str);
}

/*校验邮件地址是否合法 */
function IsEmail(str) {
	var reg=/^\w+@[a-zA-Z0-9]{2,10}(?:\.[a-z]{2,4}){1,3}$/;
	return reg.test(str);
}


function  fun1(){
	if(!isStudentNo(document.getElementById("sno").value)){
		alert("学生编号是8位数字");
		document.getElementById("sno").focus();
		return false;
	}

	if(!ischina(document.getElementById("username").value)){
		alert("学生姓名必须填写中文");
		document.getElementById("username").focus();
		return false;  
	}

	if(!IsEmail(document.getElementById("email").value)){
		alert("邮箱地址错误");
		document.getElementById("email").focus();
		return false;  
	}

	if(!isTelCode(document.getElementById("tel").value)){
		alert("电话号码不对");
		document.getElementById("tel").focus();
		return false;  
	}

	/*运行到这里说明验证通过返回true    submit提交按钮起作用提交表单*/
	alert("提交成功")
	return false;   // 这边设置禁止提交，实际项目需要改为 true
}

---

------------------------------选择器使用？==>类选择器(可绑定多个：$(".xxx"))，ID选择器(唯一：$("#xxx"))

---

------------------------------function()函数的使用?

<1>赋值与书写(在页面中的使用参考标题JS页面函数，页面使用基本都是如此模式，此处主要讲解方法调用，节点调用)

====>function functionname(){xxx} 和 <button onclick="myFunction()">点击这里</button> ：函数设置；

====>关键词 function 必须是小写的，并且必须以与函数名称相同的大小写来调用函数。

====>var myVar=myFunction();其中myvar就是函数的返回值

====>document.getElementById("demo").innerHTML=myFunction();将数值赋予到demo的代码中

====>自调用(function () {document.getElementById("demo").innerHTML = "Hello! 我是自己调用的";})(); 加了括号

---

(5)：节点使用？

1、document.getElementsByName(name) 通过name拿到对象数组，name为标签里面的属性

2、document.getElementsByTagName(TagName)通过标签名拿到对象数组，返回元素的顺序是他们在文档中的顺序，标签名举例子，如input;

3、elementNode.getAttribute(name)元素的节点，可以使用该方法获取到属性的值，name为属性的名字，其中elementNode为使用 “1”或者选择器获取到的对象节点。getAttribute()用于获取的是标签代码中的任何一个属性的值!

4、elementNode.setAttribute(name,value)元素的节点，可以使用该方法增加一个指定名称和值的新属性，或者把一个现有的属性设定为指定的值

5、elementNode.childNodes获取到节点下的子节点的数组，注意：这里不同的浏览器计算子节点的方式不太一样

6、node.firstChild()属性，返回第一个子节点，如果没有返回null

7、node.lastChild()属性，返回最后一个子节点，如果没有返回null

8、elementNode.parentNode属性，访问父节点，父节点只能有一个，其中elementNode为选择器获取的对象

9、elementNode.nextSibling属性，返回某个节点之后紧跟的节点（处于同一树层级中），如果无此节点，返回null

10、elementNode.previousSibling属性，返回某个节点之前紧跟的节点（处于同一树层级中）如果无此节点，返回null

11、appendChild(newnode)在指定节点的最后一个子节点列表之后添加一个新的子节点，创建一个新节点使用document.createElement()，设置完相关属性后，添加到最后

12、insertBefore(newnode,node)在已有的子节点前插入一个新的子节点，例如otest.insertBefore(newnode,node)表示在otest节点下，在子节点node的前面，加入newnode节点

13、nodeObject.removeChild(node)从nodeObject的子节点列表中删除某个节点(node)，如删除成功，此方法可返回被删除的节点，如失败，返回null

14、nodeObject.replaceChild(newnode,oldnode)实现子节点的替换，返回被替换的对象的引用

15、document.createElement(tagname)创建元素节点，返回一个元素对象，参数为需要创建的元素的类型

16、document.createTextNode(data)创建新的文本节点，返回新创建的Text节点，data是字符串值，可

17、document.getElementById(xxx)获取id名为xxx的对象

18、在所有的节点中还有一个节点标志,就是nodeName和nodeValue

---

(6)：事件绑定？

-------------------------$("标签/ID").click(function(){参数})

-------------------------$("标签/ID").click("click",函数名) 和 function   dddd(){}

-------------------------$("btn").bind("click",function(){})

-------------------------$("btn").bind("click",函数名)和function(){}

---