💛太阳之所以伟大💚,💛是因为连尘埃都能照亮💚   

🍪目录:

         🌲JavaScript 概括:

🌲JavaScript 基本特点:

🌲JavaScript 作用:

🌲前提先理解一下HTML代码:网页设计之 HTML代码的理解._半个西瓜.的博客-CSDN博客

🌲JavaScript 代码理解:

(1)基本的 JavaScript 语法结构.

(2)JavaScript 中的变量定义.( var 语句定义 )

(3)用 JavaScript 对某个事件做出反应.(弹框输出)

(4)JavaScript 能够处理的常见事件.

(5)加载外部 JS 文件.

(6) document 对象的常用属性.

(7)location.href 实现页面跳转.(location.href 也可简写成 location)

(8)confirm 语句.


🌲JavaScript 概括:

🌾🌾🌾 JavaScript(简称 " JS ")是一种具有函数优先的轻量级,解释型或即时编译型的编程语言。虽然它是作为 开发Web页面的脚本语言而出名,但是它也被用到了很多非浏览器环境中,JavaScript基于原型编程、多范式的动态脚本语言,并且支持面向对象、命令式、声明式、函数式编程范式.

         

🌲JavaScript 基本特点:

(1)解释型的脚本语言,可在程序的运行过程中逐行进行解释.

(2)基于对象,它不仅可以创建对象,也能使用现有的对象.

(3)设计简单紧凑,容易学习.

(4)动态性.

(5)跨平台性,它不依赖于操作系统,仅需要浏览器的支持.

           

🌲JavaScript 作用:

(1)嵌入动态文本于HTML页面.

(2)对浏览器事件做出响应.

(3)读写HTML元素.

(4)在数据被提交到服务器之前验证数据.

(5)检测访客的浏览器信息。控制cookies,包括创建和修改等.

(6)基于Node.js技术进行服务器端编程.

        

🌲前提先理解一下HTML代码:网页设计之 HTML代码的理解._半个西瓜.的博客-CSDN博客

         

🌲JavaScript 代码理解:

(1)基本的 JavaScript 语法结构.

<html>                                                  <!--HMTL文件的开始-->
      <head>                                               <!--头部开始-->
	     <title> Javascript Test </title>                         <!--网页标题-->
      </head>                                               <!--头部结束-->

<body>			<!--主体开始-->
      <script>            <!--定义客户端脚本-->
	            document.write ( "hello, world! ");	        <!--主体内容-->
      </script>		
</body>		<!--主体结束-->

</html>                                                 <!--HMTL结束-->
<!--所有的 JavaScript 语句必须包含在<script>...</script>标签中-->
<!--每行JavaScript语句可以加" ; "表示结束-->
<!--document是个对象,指当前网页,write是其动作-->
<!--document.write就是让当前的网页执行write(也可以理解输出)动作,将()里的内容写入到页面当中去-->

效果图.

        

(2)JavaScript 中的变量定义.( var 语句定义 )

<body>                                                 <!--主体开始-->
    <script>
        var name = "hack";		
            document.write("<h1>hello," + name + "</h1>");
    </script>
</body>                                                 <!--主体结束-->
<!--可以通过JavaScript输出html标签。JavaScript中的变量必须用var语句定义-->
<!-- 要拼接多个变量或字符串,采用“+”而不是“.”。单行注释使用“//”,多行注释使用“/*...*/” -->	
   

效果图.

              

(3)用 JavaScript 对某个事件做出反应.(弹框输出)

<body>                                                 <!--主体开始-->
    <form>      <!--表单标签-->
		<input type="button" value="请单击此处" onclick="alert('单击按钮,触发了click事件')">
    </form>
</body>                                                 <!--主体结束-->
<!--“alert”是JavaScript的弹框语句-->
<!--单击按钮时,触发事件,执行JavaScript代码-->

效果图.

       

(4)JavaScript 能够处理的常见事件.

1. onError 的用法:

<body>                                                 <!--主体开始-->

	<img src="sss" onError="alert('单击按钮,触发了click事件')">    

</body>                                                 <!--主体结束-->
<!--onError是当<img >,加载图片过程中发生错误时触发-->
<!--sss是图片,因为没有这个sss图片-->

效果图.

       

2. onLoad 的用法:

<body>                                                 <!--主体开始-->

		<img src="2.jpg" onLoad="alert('单击按钮,触发了click事件')">

</body>                                                 <!--主体结束-->

<!--加载图片成功时会触发-->

效果图.

       

3. onSubmit 的用法:

<body>                                                 <!--主体开始-->
<script>
function bgxg()                            <!--function定义一个函数,函数名bgxg-->
{
	alert("提交表单");                      <!--函数的内容-->
}
</script>

<form action="*" onsubmit="bgxg()">            <!--onsubmit是用户提交窗体时出发,bgxg()函数的内容.-->
账号: <input type="text" name="fname"><br>
密码: <input type="text" name="lname"><br>
<input type="submit" value="提交">
</form>

</body>                                                 <!--主体结束-->

效果图.

          

(5)加载外部 JS 文件.

1. 加载 内部 网站的 JS 文件.

<body>			<!--主体开始-->

<script src="/999.js"></script>        <!--加载999.js文件-->
	
</body>		<!--主体结束-->
alert("hello,world!");        //.js文件的代码.

效果图.

        

2. 加载 外部 网站的 JS 文件.

<body>			<!--主体开始-->

<script src="http://192.168.1.104:801/DVWA/888.js"></script>
	
</body>		<!--主体结束-->

效果图.

             

(6) document 对象的常用属性.

1. document.cookie,显示当前页面的 cookie.


<body>			<!--主体开始-->

    <script>
        alert(document.cookie);    <!--显示当前页面的 cookie -->
    </script>

</body>		<!--主体结束-->

效果图.

              

2. document.location,显示当前页面的 URL.

<body>			<!--主体开始-->

    <script>
        alert(document.location);    <!--显示当前页面的 URL-->
    </script>

</body>		<!--主体结束-->

效果图.

         

(7)location.href 实现页面跳转.(location.href 也可简写成 location)

<body>		<!--主体开始-->

	<script>
		location="http://192.168.1.104:801/dvwa/login.php";    <!--实现页面跳转-->
	</script>

</body>		<!--主体结束-->

效果图.

             

(8)confirm 语句.

显示确认选择对话框,返回 ture false .

<body>		<!--主体开始-->

	<script>
		if(confirm ("6>5?")==true){       
			document.write("正确");
		}
		else{
			document.write("错误");
		}
	</script>

</body>		<!--主体结束-->

效果图.

             

            

            

学习更多链接:JavaScript 语法 | 菜鸟教程