JavaScript的简单学习笔记

最新推荐文章于 2024-07-13 15:45:29 发布

等俺有钱了

最新推荐文章于 2024-07-13 15:45:29 发布

阅读量128

点赞数

分类专栏：学习笔记

本文链接：https://blog.csdn.net/qq_41622994/article/details/85060656

版权

学习笔记专栏收录该内容

13 篇文章 0 订阅

订阅专栏

JavaScript的简单学习笔记

JavaScript概述：

JavaScript：是一种直译式脚本语言。
什么脚本语言：
java源代码—>编程.class文件—>JVM虚拟机中才能执行
脚本语言：源代码—>解释执行 JS由我们浏览器来进行解释执行的

HTML:决定了页面的框架
CSS:用来美化界面
JS:提供用户的交互作用

JS的组成：
ECMAScript:核心部分，定义js的语法规则
DOM：document Object Model 文档对象模型，主要是用来管理页面的。
BOM：Browser Object Model 浏览器对象模型，前进，后退，页面刷新，地址栏，历史记录，屏幕宽高

javaScript在HTML中的用法：
第一种：
在HTML网页中用 <script></script> 直接编写js代码

<html >
   <head></head>
   <body>
        HTML 代码
   </body>
   <script type="text/javascript"> 
        js代码        
   </script>
</html>

第二种方法：
在外部创建一个.js 的文件，里面直接编写js 代码。 HTML网页直接用<script></script>将 .js文件引进来。

<html > <head></head>
   <body>
        HTML 代码
   </body>
   <script type="text/javascript" src="此处是 .js 文件的路径">     
   </script>
</html>

ps:<script></script> 可以放在HTML 中的任意位置，如放在<head> 中， <body> 中 ，但是最好放在 </body> 的后面，因为HMTL是从上向下解析，如果 js 代码放在前面，可能 某些需求会变的难以实现 。
另外，<script></script> 中的type="text/javascript" 属性对于现代浏览器来说可以省略。

javaScript语法：
变量弱类型 var i = true;
区分大小写;
语句结束之后的分号，可以有，也可以没有。但是建议都加上分号;
写在script标签中;

javaScript的数据类型：
基本类型：
string、number、boolean、undefine：未定义类型、null

引用类型：
对象、内置对象

类型转换：
JS内部自动转换

JS的运算符和语句：
JS的运算符和Java是一样的，但是在相等上有区别：
“===“:全等号，值和数据类型都必须相等
”==”：值相等就可以了。
语句和java的一样。
JS的输出：
alter(“messge”)直接弹窗
document.write(“message”)向页面输出console.log(“message”)向控制台输出
innerHTML:向页面输出
获取页面元素：document.getElementById(“id的名称”);
JS声明变量：
var 变量名 = 变量值;
JS声明函数：
方式一：
var 函数的名称 = function(参数列表){
}
方式二：
function 函数的名称(参数列表){
}

ps：javascript中没有函数重载，如果有多个函数重载了，那么只执行最后一个函数。其他不执行的重载函数的参数值在传递过程中保存到arguments 数组中。如果有必要，可以直接对 arguments数组进行长度（参数个数）判断，定位是那个重载函数，然后进行取数组值等操作。

几个全局函数说明：

eval ( ) : 执行js代码
var str="alert('aaaa') ; eval (str); // 弹出框，内容是aaaa。而非 alert( 'aaaa' );
encodeURI() ：对字符进行编码 ; decodeURI() ：对字符进行解码

//编码 var str1 = "中文aaa46"; var encode = encodeURI(str1); document.write(encode); //输出 %E4%B8%AD%E6%96%87aaa46 //解码 var decode1 = decodeURI(encode); document.write(decode1); //输出 中文aaa46

parseInt()：类型转换，转换成int类型

js案例：

<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
var checkForm = function () {
		var username = document.getElementById("username");
		//获取输入框的值
		var uValue = username.value;
		if(uValue.length<6){
		alert("对不起，您的长度忒短了！");
		return false;
	} 
		//密码的长度大于6，和确认密码必须保持一致
		var password = document.getElementById("password");
		var repassword = document.getElementById("repassword");
		var uPass = password.value;
		if(uPass.length<6){
		alert("对不起，您太短了！！");
		return false;
	}
		 var uRePass = repassword.value;
		if(uRePass != uPass){
		alert("对不起，两次密码不一致！");
		return false;
	} 
		//邮箱校验
		var email= document.getElementById("email").value;
		if(/^([a-zA-Z0-9_-])+@(a-zA-Z0-9_-)+(\.[a-zA-Z0-9_-])+/.test(email)){
		alert("对不起，您的邮箱不合法");
		return false;
	} 
return true;
}
</script>
</head>
--------------------------------------------------------------------------------
<body>
<form action="index_4.html" method="post" onsubmit="return checkForm()">
<!--
1.确定事件:表单提交事件 onsubmit事件
2.通常事件都会触发一个函数 checkForm()
3.函数里面通常会去操作页面的元素，做一些交互的操作
校验用户名 不能为空，长度不能小于6
-->
<div>用户名：<input type="text" id="username" ></div>
<div>密码：<input type="password" id="password"></div>
<div>确认密码：<input type="password" id="repassword"></div>
<div>手机号码：<input type="tel" id="mobile"></div>
<div>邮箱：<input type="email" id="email"> </div>
<div><button type="submit">注册</button></div>
</form>
</body>
</html>

等俺有钱了

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript的简单学习笔记

JavaScript的简单学习笔记JavaScript概述：JavaScript：是一种直译式脚本语言。什么脚本语言：java源代码—&amp;gt;编程.class文件—&amp;gt;JVM虚拟机中才能执行脚本语言：源代码—&amp;gt;解释执行 JS由我们浏览器来进行解释执行的HTML:决定了页面的框架CSS:用来美化界面JS:提供用户的交互作用JS的组成：ECMAScript:核心部分，定义...
复制链接

扫一扫