JavaScript基础

于 2021-03-27 01:07:44 发布
阅读量84 收藏 1
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42176038/article/details/115257849
版权

href="javascript:void(0);对于a标签
js

* 概念：	一门客户端脚本语言
	* 运行在客户端浏览器中的。每一个浏览器都有JavaScript的解析引擎
	* 脚本语言：不需要编译，直接就可以被浏览器解析执行了
* 功能： 页面有一些动态的效果，增强用户的体验。
		<script>
        	alert("Hello World");
		</script>
		<script src="js/a.js"></script>

变量

 变量:一小块存储数据的内存空间
 * Java语言是强类型语言，而JavaScript是弱类型语言。
		* 强类型：在开辟变量存储空间时，定义了空间将来存储的数据的数据类型。只能存储固定类型的数据
		* 弱类型：在开辟变量存储空间时，不定义空间将来的存储数据类型，可以存放任意类型的数据。
	* var定义任意类型的变量
	* typeof运算符：获取变量的类型。
		* 注：null运算后得到的是object
var num = 1;//定义number类型
document.write(num+"<br>");//输出到页面上 1
var str = "abc";  //定义string类型  
document.write(str+"<br>");//abc
document.write(num+"---"+typeof(num)+"<br>");//typeof运算符：获取变量的类型。1---number 
变量的定义使用var关键字，也可以不使用
           * 用： 定义的变量是局部变量
           * 不用：定义的变量是全局变量(不建议)

js运算符

一元运算符:
	注意：在JS中，如果运算数不是运算符所要求的类型，那么js引擎会自动进行类型转换
    * 其他类型转number：
        * string转number：不是数字，则转为NaN（不是数字的数字）
        * boolean转number：true转为1，false转为0
			var num = 3;
			var a = ++ num ;
			document.write(num);// 4
			document.write(a); // 4
			var b = +"123abc";
			document.write(typeof (b));//numberNaN
算数运算符:
	var a = 3;
	var b = 4;
	document.write(a+b +"<br>");7
比较运算符:
	1. 类型相同：直接比较
	* 字符串：按照字典顺序比较。按位逐一比较，直到得出大小为止。
	2. 类型不同：先进行类型转换，再比较
		* ===：全等于。在比较之前，先判断类型，如果类型不一样，则直接返回false
	document.write((3 > 4) +"<br>");false
	document.write(("abc" < "acd") +"<br>");true
	document.write(("123" == 123) +"<br>");true
	document.write(("123" === 123) +"<br>");false
逻辑运算符:
	* 其他类型转boolean：
         * 1. number：0或NaN为假，其他为真
         * 2. string：除了空字符串("")，其他都是true
         * 3. null&undefined:都是false
         * 4. 对象：所有对象都为true
        //number
        var num = 3;
        document.write(!!num+"<br>");//true,负负得正
        //js中可以这样定义，简化书写。
        if(obj){//防止空指针异常}//对象不为空，true
三元运算符:
	var c = a > b ? 1:0;//如果是true则取值1，如果是false则取值2；

流程控制语句

1. if...else...
2. switch:
	  * 在JS中,switch语句可以接受任意数据类型
		var a;
        switch (a){
            case 1:
                alert("number");
                break;
            case "abc":
                alert("string");
                break;
        }
3. while
4. do...while
5. for

99乘法表

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>99乘法表</title>
    <style>
        td{
            border: 1px solid;
        }

    </style>
    <script>
        document.write("<table  align='center'>");
        //1.完成基本的for循环嵌套，展示乘法表
        for (var i = 1; i <= 9 ; i++) {
            document.write("<tr>");
            for (var j = 1; j <=i ; j++) {
                document.write("<td>");

                //输出  1 * 1 = 1
                document.write(i + " * " + j + " = " + ( i*j) +"&nbsp;&nbsp;&nbsp;");
                document.write("</td>");
            }
            /*//输出换行
            document.write("<br>");*/
            document.write("</tr>");
        }
        //2.完成表格嵌套
        document.write("</table>");
    </script>
</head>
<body></body>
</html>

js对象

1. Function：函数(方法)对象         
                fun.length:代表形参的个数
            特点：
                1. 方法定义是，形参的类型不用写,返回值类型也不写。
                2. 方法是一个对象，如果定义名称相同的方法，会覆盖
                3. 在JS中，方法的调用只与方法的名称有关，和参数列表无关
                4. 在方法声明中有一个隐藏的内置对象（数组），arguments,封装所有的实际参数
            调用：
                方法名称(实际参数列表);
        第一种:           
        function fun(a , b){
            alert(a + b);
        }
		//调用方法
        fun(3,4);
        第二种:     
        var fun3 = function(a,b){
            alert(a+b);
        }         
        /**
         * 求任意个数的和
         */
        function add (){
           var sum = 0;
            for (var i = 0; i < arguments.length; i++) {
                sum += arguments[i];
            }
            return sum;
        }
        var sum = add(1,2,3,4);
        alert(sum);
2. Array:数组对象         
          1. 方法
              join(参数):将数组中的元素按照指定的分隔符拼接为字符串
              push():向数组的末尾添加元素，并返回新的长度。          
          2. 特点：
              1. JS中，数组元素的类型可变的。
              2. JS中，数组长度可变的。
		        //创建方式
		        var arr1 = new Array(1,2,3);//数组元素列表
		        var arr2 = new Array(5);//数组默认长度
		        var arr3 = [1,"abc",true];//数组元素列表
		        var arr4 = new Array();
		        document.write(arr1.join("--")+"<br>");//元素按照--拼接为字符串
		        arr.push(11);//添加元素
		        document.write(arr1.join("--")+"<br>");
3. Boolean
4. Date：日期对象
            var date = new Date();
   			document.write(date.toLocaleString() + "<br>");//返回当前date对象对应的时间本地字符串格式
   			document.write(date.getTime() + "<br>");//获取毫秒值（毫秒差）。           
5. Math：数学对象     
            document.write(Math.PI +"<br>");//π
        	document.write(Math.random() +"<br>");//返回 0 ~ 1 之间的随机数。 含0不含1
       		document.write(Math.round(3.14) +"<br>");//3 四舍五入 
       		document.write(Math.ceil(3.14) +"<br>");//4 对数进行上舍入。
        	document.write(Math.floor(3.14) +"<br>");//3 对数进行下舍入。
    		var number =  Math.floor((Math.random() * 100)) + 1;//取 1~100之间的随机整数
6. Number
7. String
8. RegExp：正则表达式对象
		1. 正则表达式：定义字符串的组成规则。
			1. 单个字符:[]
				如： [a] [ab] [a-zA-Z0-9_]
				* 特殊符号代表特殊含义的单个字符:
					\d:单个数字字符 [0-9]
					\w:单个单词字符[a-zA-Z0-9_]
			2. 量词符号：
				?：表示出现0次或1次
				*：表示出现0次或多次
				+：出现1次或多次
				{m,n}:表示 m<= 数量 <= n
					* m如果缺省： {,n}:最多n次
					* n如果缺省：{m,} 最少m次
			3. 开始结束符号
				* ^:开始
				* $:结束
		2. 正则对象：
			1. 创建
				1. var reg = new RegExp("正则表达式");
				2. var reg = /正则表达式/;
			2. 方法	
				1. test(参数):验证指定的字符串是否符合正则定义的规范	
        var reg = new RegExp("^\\w{6,12}$");//创建,长度6-12
        var reg2= /^\w{6,12}$/;//创建,长度6-12
        var username = "zhangsan";
        //验证
        var flag = reg.test(username);
        alert(flag);//true,8个，满足条件

9. Global
	1. 特点：全局对象，这个Global中封装的方法不需要对象就可以直接调用。  方法名();
	2. 方法：
	    encodeURI():url编码
	    decodeURI():url解码

	    encodeURIComponent():url编码,编码的字符更多
	    decodeURIComponent():url解码

	    parseInt():将字符串转为数字
	        * 逐一判断每一个字符是否是数字，直到不是数字为止，将前边数字部分转为number
	    isNaN():判断一个值是否是NaN
	        * NaN六亲不认，连自己都不认。NaN参与的==比较全部问false

	    eval():将JavaScript 字符串，并把它作为脚本代码来执行。
          3. URL编码
             传智播客 =  %E4%BC%A0%E6%99%BA%E6%92%AD%E5%AE%A2
        var encode = encodeURI(str);
        var s = decodeURI(encode);
        document.write(s +"<br>");//传智播客
        var encode1 = encodeURIComponent(str);//编码的字符更多
        var s1 = decodeURIComponent(encode);
        var number = parseInt("234abc");//234将字符串转为数字
        var a = NaN;
        document.write(a == NaN);//false NaN参与的==比较全部问false
        document.write(isNaN(a));//true 判断一个值是否是NaN
        var jscode = "alert(123)";
        eval(jscode); //将JavaScript 字符串，并把它作为脚本代码来执行。

Dom和事件

功能：控制html文档的内容
	* 获取页面标签(元素)对象：Element
		* document.getElementById("id值"):通过元素的id获取元素对象
		//通过id获取元素对象
	    var light = document.getElementById("light");
	* 操作Element对象作用：
		1. 修改属性值：
			light.src = "img/on.gif";
		2. 修改标签体内容：
			* 属性：innerHTML
			1. 获取元素对象
			2. 使用innerHTML属性修改标签体内容
		//1.获取h1标签对象
	    var title = document.getElementById("title");
	    //2.修改内容
	    title.innerHTML = "不识妻美刘强东";
事件绑定:
		<img id="light" src="img/off.gif"  onclick="fun();">
		function fun(){
	        alert('我被点了');        
	    }
		//1.获取light2对象
	    var light2 = document.getElementById("light2");
	    //2.绑定事件
	    light2.onclick = fun; //(fun等价于function(){})

BOM对象

1. 概念：Browser Object Model 浏览器对象模型
	* 将浏览器的各个组成部分封装成对象。
2. Window：窗口对象
    1.方法
         1. 与弹出框有关的方法：
            alert("手别抖...");//提示：手别抖...显示带有一段消息和一个确认按钮的警告框。
         	var flag = confirm("您确定要退出吗？");//确认框 显示带有一段消息以及确认按钮和取消按钮的对话框。
            var result =  prompt("请输入用户名");    //输入框 返回值：获取用户输入的值
         2. 与打开关闭有关的方法：
           var newWindow = open("https://www.baidu.com");//打开一个新的浏览器窗口	返回新的Window对象
           newWindow.close(); // 关闭新窗口	谁调用我 ，我关谁
         3. 与定时器有关的方式
       	  * 返回值：唯一标识，用于取消定时器
       	   setInterval(fun,3000);//定时器 在指定的毫秒数后调用函数或计算表达式。每隔3000ms调用一次	
       	   var id = setTimeout(fun,2000);
           clearTimeout(id);//取消定时器
           clearInterval(id);//取消定时器 
    2.特点
        * Window对象不需要创建可以直接使用 window使用。 window.方法名();
        	var openBtn = window.document.getElementById("openBtn");
        * window引用可以省略。  方法名();
         	var openBtn = document.getElementById("openBtn");               
3.其他BOM对象：
	   history:历史记录对象            	
			var length = history.length;//3.获取当前窗口历史记录个数
			history.back();	加载 history 列表中的前一个 URL。
			history.forward();//加载 history 列表中的下一个 URL。前进
			history.go(1);//前进1个历史记录 前进
		 		 * 正数：前进几个历史记录
		         * 负数：后退几个历史记录
	    location:地址栏对象
	    	location.reload();//3.刷新页面
	    	location.href = "https://www.baidu.com";//访问www.itcast.cn官网
	    Navigator:浏览器对象
	    
	    Screen:显示器屏幕对象

DOM对象

* 概念： Document Object Model 文档对象模型
	* 将标记语言文档的各个组成部分，封装为对象。可以使用这些对象，对标记语言文档进行CRUD的动态操作(增删改查)

* W3C DOM 标准被分为 3 个不同的部分：

	* 核心 DOM - 针对任何结构化文档的标准模型
		* Document：文档对象
		* Element：元素对象
		* Attribute：属性对象
		* Text：文本对象
		* Comment:注释对象

		* Node：节点对象，其他5个的父对象
	* XML DOM - 针对 XML 文档的标准模型
	* HTML DOM - 针对 HTML 文档的标准模型
* 核心DOM模型：
	* Document：文档对象
		1. 创建(获取)：在html dom模型中可以使用window对象来获取
			1. window.document
			2. document
		2. 方法：
			1. 获取Element对象：
				1. getElementById()	： 根据id属性值获取元素对象。id属性值一般唯一
				2. getElementsByTagName()：根据元素名称获取元素对象们。返回值是一个数组
        			var element_a = document.getElementsByTagName("a")[0];//1.获取a标签
				3. getElementsByClassName():根据Class属性值获取元素对象们。返回值是一个数组
				4. getElementsByName(): 根据name属性值获取元素对象们。返回值是一个数组
			2. 创建其他DOM对象：
				createAttribute(name)//创建一个指定名称的属性，并返回Attr 对象属性
            	createComment()//可创建注释节点。
            	createElement()//创建元素
       				 var div3 = document.createElement("div");//创建div节点
            	createTextNode()//创建文本节点
            		var name = document.getElementById("name").value;//获取文本框的内容
            		var td_name = document.createElement("td");//创建td标签
        			var text_name = document.createTextNode(name);//将创建文本节点（添加内容）。
        			td_name.appendChild(text_name);//文本节点添加到td节点
		3. 属性
	* Element：元素对象
		1. 获取/创建：通过document来获取和创建
		2. 方法：
			1. removeAttribute()：删除属性
				element_a.removeAttribute("href");//删除a标签href属性
			2. setAttribute()：设置属性
				div3.setAttribute("id","div3");//设置id为div3
	* Node：节点对象，其他5个的父对象
		* 特点：所有dom对象都可以被认为是一个节点
		* 方法：
			* CRUD dom树：
				* appendChild()：向节点的子节点列表的结尾添加新的子节点。
						div1.appendChild(div3);//将div3添加到div1中
				* removeChild()	：删除（并返回）当前节点的指定子节点。
						div1.removeChild(div2);//删除子节点div2
				* replaceChild()：用新节点替换一个子节点。
		* 属性：
			* parentNode 返回节点的父节点。
* HTML DOM
	1. 标签体的设置和获取：innerHTML	var innerHTML = div.innerHTML;//获取div标签内容
	2. 使用html元素对象的属性
	3. 控制元素样式
		1. 使用元素的style属性来设置
			如： 
		        div1.style.border = "1px solid red";//修改样式方式1
		2. 类选择器的样式，通过元素的className属性来设置其class属性值。
				div2.className = "d1";//改为类名d1样式

事件

* 概念：某些组件被执行了某些操作后，触发某些代码的执行。	
	* 事件：某些操作。如： 单击，双击，键盘按下了，鼠标移动了
	* 事件源：组件。如： 按钮 文本输入框...
	* 监听器：代码。
	* 注册监听：将事件，事件源，监听器结合在一起。 当事件源上发生了某个事件，则触发执行某个监听器代码。
* 常见的事件：
	1. 点击事件：
		1. onclick：单击事件
		2. ondblclick：双击事件
	2. 焦点事件
		1. onblur：失去焦点
            document.getElementById("username").onblur = function(){
                alert("失去焦点了...");//失去焦点事件
            }
		2. onfocus:元素获得焦点。

	3. 加载事件：
		1. onload：一张页面或一幅图像完成加载。

	4. 鼠标事件：
		1. onmousedown	鼠标按钮被按下。
			* 定义方法时，定义一个形参，接受event对象。
            * event对象的button属性可以获取鼠标按钮键被点击了。
             document.getElementById("username").onmousedown = function(event){
                alert(event.button);//鼠标被点击
            }
		2. onmouseup	鼠标按键被松开。
		3. onmousemove	鼠标被移动。
		4. onmouseover	鼠标移到某元素之上。
		5. onmouseout	鼠标从某元素移开。	
	5. 键盘事件：
		1. onkeydown	某个键盘按键被按下。	
		2. onkeyup		某个键盘按键被松开。
		3. onkeypress	某个键盘按键被按下并松开。

	6. 选择和改变
		1. onchange	域的内容被改变。
		2. onselect	文本被选中。

	7. 表单事件：
		1. onsubmit	确认按钮被点击。
		2. onreset	重置按钮被点击。
So Youth
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
JSP示例代码
qq_52426874的博客
08-04 2429
<%@ page contentType="text/html;charset=UTF-8" language="java" %> <html> <head> <title>Title</title> </head> <body> 欢迎您: <% String uname=(String)session.getAttribute("uname"); if(uname==.
JSP详解，看这一篇就够了（含示例）
2301_79858914的博客
05-29 2212
动作标签为开发者提供了一种方便的方式来控制和管理 JSP 页面的行为。通过使用动作标签，可以轻松地包含其他页面、转发请求、创建 JavaBean 实例、传递参数等，从而使得页面的逻辑更加清晰、易于维护。JSP隐式对象是JSP的重要组成部分，它们提供了对请求、响应、会话、应用上下文等各种Web资源的直接访问，极大地简化了Web应用程序的开发。了解和熟练使用这些隐式对象，是掌握JSP开发的重要一步。JSP是Java Web开发的重要组成部分，适用于创建动态网页。
java jsp 例子_jsp入门的简单例子
weixin_33555586的博客
02-16 516
从头开始学jsp，对它有兴趣是第一要事。以下几个案例非常的简单，不需要用到别的知识。用来先对jsp有所感知是个不错的注意。案例1 ：displace.jspint intLocal_Vals, intLocal_Amount;if(request.getParameter("Vals")!=null && request.getParameter("Amount")...
jsp语法和实例
04-13 104
jsp语法和实例 JSP 语法 spacing="0" cellpadding="2" bordercolorlight = "black" bordercolordark = "#FFFFFF" align="center"> 　　　　　　　　　　　　例子 1 在客户端的HTML源代码中产生和上面...
jsp编写的30个网站实例
03-24
该文件主要是给大家提供jsp编写的网站的实例，供大家借鉴和参考，从而提高自己编写网站的能力
javascript基础
08-09
javascript基础，适合零基础或初学者简单简洁 ，易于理解
JavaScript 基础
02-16
主要为个人学习笔记 超详细
javascript基础入门.ppt
11-12
JavaScript基础入门 JavaScript是基于对象和事件驱动的解释性语言，其目的就是增强Web客户交互，弥补了HTML的缺陷。JavaScript与Java不同，它们处于不同的公司，属于不同的产品。JavaScript可以使网页更具有交互性...
javaScript基础详解
10-20
本文主要介绍了javaScript的基础知识，具有很好的参考价值，下面跟着小编一起来看下吧
javaweb打印
07-31
javaweb 打印 Lodop 教程，包含一本doc，超详细配置文档 包含30个demo,包含js和安装程序
JSP实例编程100例
03-16
顺序如下： 1、多种字体大小显示 2、c:out标记输出 3、获取当前时间 4、include包含语句 5、建立错误处理页面的范例程序 6、jsp:forward 7、简单计数器 8、设置页面属性 9、使用GB2312编码 10、使用Big5编码 11、c:catch的用法 12、 begin、end和step的用法 13 、 循环 14、 varStatus 的四种属性 15、 的用法 16、从客户端传送数据至服务端 17、使用Unicode转义字符 18、使用朝鲜语字符集 19、JSP中最简单的国际化程序 20、错误检测 21、抛出异常 22、 的用法 23、和 的用法 24、 的用法 25、jsp-include的用法 26、汉字处理 27、网页重定向 28、自动更新网页 29、存取session 30、 的用法 31、单选型列表框 32、jsp文件中定义类 33、取得 JSP Container 版本 34、javax.servlet.jsp.JspWriter - out 对象 35、page 隐含对象 36、application 对象 37、PageContext 对象 38、Page范围 - pageContext 39、测试要显示的中文 40、IF控制符的操作 41、HttpServletRequest 接口所提供的方法 42、 网上测验 43、HttpSession - session 对象 44、 多选型列表框 45、解决浏览器 cache 的问题 46、使用 EL、JSTL 处理表单数据 47、 EL隐含对象 param、paramValues 48、EL隐含对象 pageContext 49、EL算术运算符 50、EL关系运算符 51、EL的运算符 52、选择钮的使用 53、检查框的使用 54、群组检查框的使用 55、数字、货币、百分数格式化 56、日期格式化 57、JSTL设置语言地区 58、Cookie数据的存取 59、session有效时间的设置与取得 60、session时间与ID 61、Cookie有效时间的设置 62、利用隐藏字段传送数据 63、JSP 使用 JavaBean 的方法 64、JSP 使用 JavaBean 65、范围为 Page 的 JavaBean范例程序 66、范围为 Request的 JavaBean 67、范围为 Session 的 JavaBean 68、范围为 Application 的 JavaBean 69、删除 JavaBean 70、url重组 71、Switch语句 72、环境变量 73、forward重定向 74、文件的建立与删除 75、取得文件属性 76、取得目录中的文件 77、目录的建立与删除 78、自Cookie存取日期/时间数据 79、管理Session变量 80、数据库中的记录数与记录指针位置 81、利用absolute方法设置记录位置 82、使用jsp指令生成Word文档 83、JSP网页模板 84、判断是否空白文件 85、cookie 用户登录次数 86、获取用户的真实IP地址 87、获取用户的浏览器信息 88、在客户端进行数据检查 89、在JSP中获取当前绝对路径 90、读取表单中所有参数 91、分行写入数据 92、显示请求URL 93、判断session是否过期 94、参数式查询数据库 95、取得数据库中各栏名称 96、使用JavaBean、设置和获取Bean的属性 97、设置Bean的一个属性与输入参数关联 98、实现基于数据库的站内搜索 99、DOM读取XML文档 100、SAX读取XML文档
jsp网站完整实例
05-15
jsp+sevlet网站实例，适合有一定基础的学员学习用，主要有新闻发布、留言、访问量等功能，一起加油，成为高手
JSP经典例子教程-100例
10-15
学习JSP光看课本效果不好，看看例子教程将是非常好的，学习效率很高，非常好的例子教程。
几个简单的jsp例子
10-20
适合初学者，pdf文件，简单易懂。希望大家提提意见
JSP简单标签实例
u011244410的专栏
07-11 411
1.实现案例列表开发防盗链标签开发&lt;c:if&gt;标签开发&lt;c:if&gt;&lt;c:else&gt;标签开发迭代标签开发html转义标签2.在web-inf目录下创建tld文件&lt;?xml version="1.0" encoding="UTF-8" ?&gt; &lt;taglib xmlns="http://java.sun.com/xml/ns/j2ee&q
JSP详解与实例
热门推荐
oldbig_lin的博客
04-01 2万+
本文将对JSP进行概述，在详细讨论JSP页面中的注释，隐式对象以及三个句法元素：指令、脚本元素、动作 JSP概述： 第一次请求一个JSP页面时，Servlet/JSP容器要做两件事： 1.将JSP页面转换成一个JSP页面实现类 2.如果转换成功，Servlet/JSP容器将会编译Servlet类。容器加载和实例化java字节码，并执行它通常对Servlet所做的生命周期
JavaScript基础知识
最新发布
06-03
JS的引入 let的声明 数据类型
javascript基础语法
03-31
一些个人学习js基础语法的笔记

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值