JavaScript 简明教程

2021-05-11 22:45 205人阅读评论(0)

JavaScript

js 脚本放置的位置

在 body 下面

注意，不要写在head中，不然，使用 getElementById的时候，会因为元素还没有加载完成，而报错

另写一个 .js 文件，然后引入

js变量

类型，都是用 var 引用的

值类型

String

var str1 = 'hello js'

number

整形，浮点型，全部是number类型

var breadPrice=15.9;
var gameLevel=66; //极大或极小的数字可以通过科学计数法来书写: 
var myMoney1=666e5; //66600000
var myMoney2=-666e-5; //-0.00666

Boolean

var isUnderstand=true;
var isSingle=false;

null

var haha = null;

未定义类型

js 中，有4种情况，会出现 undefined

变量声明，没有赋值

var obj;
alert(obj);

使用没有实例化的变量的属性

var student;
alert(student.name);

函数要实参，但是调用的时候没有传参，形参是 undefined

函数调用没有返回值或者return后没有数据，接收函数返回的变量是undefined

function printNum(num){
   
    alert(num);
}
var result=printNum();//调用函数未传递参数，执行函数的时候num的值是undefined alert(result);//result的值也是undefined，因为printNum()没有返回值

引用类型

对象(Object)、数组(Array)、函数(Function)。稍后详细介绍。

动态类型

不推荐这么使用

var param;
param = 5;
param = "John";
// param类型为 undefined // 现在 param 为数字 // 现在 param 为字符串
PS:虽然JavaScript支持这种写法，但是我不推荐这种写法。大家尽量开始声明变量的时候就确定好将要 盛放什么类型的值，以后尽量不随意改变。

运算符

几乎和 java 里一模一样

但是有些是 js 里特有的

var x=5;
var  res=(x===5); // true
res=(x==='5');// false
res=(x!==5); // false
res=(x!=='5');// true

对象

String

Array

和 ArrayList 十分相似，但同时，有兼具数组可以使用下标访问的特性

相当于一个没有泛型检查的ArrayList 和一个数组的结合体

<script type="text/javascript">
		var list = new Array();
		for (var i = 0; i < 10; i++) {
   
			list.push("测试数据"+(i+1));
		}
		for (var i = 0; i < list.length; i++) {
   
			document.write(list[i]+"<br/>")
		}
	</script>

<script type="text/javascript">
		var arr = ["测试数据1","测试数据2","测试数据3","测试数据4"];
		for (var i = 0; i < arr.length; i++) {
   
			document.write(arr[i]+"<br/>")
		}
	</script>

Date

构造方法

var date1 = new Date(); //获取当前时间，用的最多
var date2 = new Date(milliseconds);
var date3 = new Date(dateString); // new Date("2020-12-11 12:11:12")
var date4 = new Date(year, month, day, hours, minutes, seconds, milliseconds);

常用方法

Math

类似于 java.util.Math

函数

全局函数

isNaN(params)

NaN（Not a number），表示的是非数字

console.log(isNaN(666));//false
console.log(isNaN(1+2));//false
console.log(isNaN("hello"));//true

parseFloat(String)

console.log(parseFloat("66"));//66 
console.log(parseFloat("199.99"));//199.99 
console.log(parseFloat("1024 2048 4096"));//1024 
console.log(parseFloat(" 128 "));//128 
console.log(parseFloat("10年"));//10 
console.log(parseFloat("今天是8号"));//NaN

parseInt(string,radix)

console.log(parseInt("66"));//66 
console.log(parseInt("199.99"));//199 
console.log(parseInt("1024 2048 4096"));//1024 
console.log(parseInt(" 128 "));//128 
console.log(parseInt("10年"));//10 
console.log(parseInt("今天是8号"));//NaN
console.log(parseInt("10",10));//10
console.log(parseInt("010"));//10
console.log(parseInt("10",8));//8
console.log(parseInt("0x10"));//16
console.log(parseInt("10",16));//16

自定义函数

匿名函数

直接将函数，赋值给一个变量

自定义对象

<script type="text/javascript">
		
		student = {
   
			name:"faroz",
			age: 12,
			address:"kkkStreet",
			printInfo:function() {
   
				document.write(this.name);
				document.write(this.age);
				document.write(this.address);
			}
		}
			
		student.printInfo();
	
</script>

BOM

浏览器对象模型（Broswer Object Model）

虽然现在BOM尚无正式标准，但是由于现代浏览器已经(几乎)实现了 JavaScript 交互性方面的相同方法和属性，因此window常被认为是 BOM 的方法和属性。

window 对象

所有 JavaScript 全局对象、函数以及变量均自动成为 window 对象的成员。

全局变量是 window 对象的属性。

全局函数是 window 对象的方法。

Window 对象表示浏览器中打开的窗口。

window 对象属性

常用属性：

其他属性：

window 对象方法

history 对象

就是浏览器的前进、后退按钮

window.history 对象包含浏览器的历史。

window.history对象在编写时可不使用 window 这个前缀。

常用方法:

history.back() - 与在浏览器点击后退按钮相同

history.forward() - 与在浏览器中点击向前按钮相同

history.go(1/-1)-- 参数为1:等同于history.forward()，参数为-1，等同于history.back()

location 对象

window.location 对象用于获得当前页面的地址 (URL)，并把浏览器重定向到新的页面。常用属性和方法:

属性：

window.location 对象在编写时可不使用 window 这个前缀。
href 当前窗口正在浏览的网页地址

方法：

replace(url) 转向到url网页地址
reload() 重新载入当前网址，如同按下刷新按钮

<a href="javascript:alert(window.location.href)">获取当前页面的URL地址</a>
<a href="javascript:window.location.reload()">刷新</a><br />
<a href="javascript:window.location.replace('index.html')">跳转到index</a><br /> 
<a href="javascript:location.replace('https://www.baidu.com')">跳转到百度</a><br />

JS 事件

比如说用户点击等，都是JS的事件

常用事件

给点使用的方式：

这些事件，都是写在标签里面的

<script>
function fun1(){
     alert('选择的内容发生了变化');
    }
    function fun2(){
    
alert("触发了单击事件"); }
function fun3() {
     document.getElementById("btn").innerHTML="鼠标移动到按钮上了";
    }
    function fun4() {
    
document.getElementById("btn").innerHTML="点击我试试"; }
function fun5() {
     alert("键盘按下了");
    }
    function fun6() {
    
alert("获取到了焦点"); }
function fun7() {
     alert("input失去了焦点");
    }
    function myLoad(){
    
alert("页面加载完毕"); }
</script>
    <body onload="myLoad()">
        <input id="userName" onkeydown="fun5()" onfocus="fun6()"
onblur="fun7()"/>
        <input id="password" type="password" />
        <button id="btn" type="button" onclick="fun2()"
onmouseover="fun3()" onmouseout="fun4()">点击我试试</button>
<select id="month" onchange="fun1()"> <option>1月份</option> <option>2月份</option>
        </select>
    </body>

其他事件

DOM

操作DOM，真的有点java反射的意思，就是在文档生成之后，再对文档的内容，进行修改

文档对象模型（Document Object Model）

操作的，是整个文档的内容

通过可编程的对象模型，JavaScript 获得了足够的能力来创建动态的 HTML。

JavaScript 能够改变页面中的所有 HTML 元素
JavaScript 能够改变页面中的所有 HTML 属性
JavaScript 能够改变页面中的所有 CSS 样式
JavaScript 能够对页面中的所有事件做出反应

Document 对象

当浏览器载入 HTML 文档, 它就会成为 Document 对象。

Document 对象是 HTML 文档的根节点。

Document 对象使我们可以从脚本中对 HTML 页面中的所有元素进行访问。

提示:Document 对象是 Window 对象的一部分，可通过 window.document 属性对其进行访问。

Document 对象常用方法

添加节点

往后添加节点

往前添加节点

只要将appendChild()，换成insertBefore()就好了。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-QoMXttae-1620648827210)(/Users/faro_z/Library/Application Support/typora-user-images/image-20210510171615256.png)]

表单验证

在前端先一步进行表单验证，可以降低服务器压力，也可以提升用户体验。

进行表单验证，我们一般要做非空判断，合法输入判断等判断

表单验证的思路

我们是使用 DOM 操作，获取输入框中的内容，然后判断输入的内容是否为空，或者输入的内容是否合法

将不合法的结果，通过弹窗的形式，或者其他形式，反馈给用户

案例

具体的案例，我就不写了，等后面讲了 JQuery 再说

DOM 的操作，真的蛋疼

正则表达式

使用方法

var reg = /kaikeba/i;
var res=reg.test("开课吧的汉语拼音为kaikeba"); console.log(res);//true
var reg = /^[a-zA-Z]+[\u4e00-\u9fa5]*[0-9]$/; var str="a公司拼音为9";
var res=reg.test(str); console.log(res);//true console.log(reg.test("a你好239"));//false

常用正则

<script> /*检查输入的身份证号是否正确*/ function checkCard(str) {
   
码。
/*15位数身份证正则表达式:
* 编码规则顺序从左至右依次为6位数字地址码，6位数字出生年份后两位及日期，3位数字顺序
*/
[1-9]\d{
   5}
\d{
   2}
((0[1-9])|(10|11|12))
(([0-2][1-9])|10|20|30|31)
\d{
   3}
前六位地区，非0打头 出生年份后两位00-99 月份，01-12月 日期，01-31天 顺序码三位，没有校验码
        var arg1 = /^[1-9]\d{
   5}\d{
   2}((0[1-9])|(10|11|12))(([0-2][1-
9])|10|20|30|31)\d{
   3}$/;
        if (arg1.length == 15 && !arg1.test(arg1)) {
   
             return false;
}
/*
* 18位数身份证正则表达式:
* 编码规则顺序从左至右依次为6位数字地址码，8位数字出生年份日期码，3位数字顺序码，1
位数字校验码(可为x)。 [1-9]\d{5}
*/
        var arg2 = /^[1-9]\d{
   5}(18|19|([23]\d))\d{
   2}((0[1-9])|(10|11|12))(([0-2]
[1-9])|10|20|30|31)\d{
   3}[0-9Xx]$/;
 if (arg2.length == 18 && !arg2.test(sfzhmcode)){
   
             return false;
         }
        return true;
}
/*是否是小数*/
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 isNum(str) {
   
        var reg = /^[0-9]{8}$/;
        return reg.test(str);
    }
/*校验电话码格式 :座机和手机*/ function isTelCode(str) {
   
        var reg = /^((0\d{2,3}-\d{7,8})|(1[345789]\d{9}))$/;
        return reg.test(str);
    }
/*校验手机号*/
function isPhoneNum(str) {
   
//如果你要精确验证手机号码，那个你可以使用第一个正则。这是根据电信，移动，联通目前发 行的号码来的。验证比较精确。
        var reg = /^1[3|4|5|7|8][0-9]{9}$/;
// 如果因为现有的号码不能满足市场需求，电信服务商会增大号码范围。所以一般情况下我们 只要验证手机号码为11位，且以1开头。
        var reg = /^^1[0-9]{10}$$/;
        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);
    }
/*检查输入的URL地址是否正确 */ function checkURL(str) {
   
        if(str.match(/http(s)?:\/\/[\w.]+[\w\/]*[\w.]*\??[\w=&\+\%]*/i) == null)
            return false;
        } else {
   
            return true;
        }
}
</script>

转载：https://blog.csdn.net/weixin_44062380/article/details/116608498

查看评论

飞道的博客

飞道的博客

个人资料

文章分类

文章存档

阅读排行

评论排行

推荐文章

JavaScript 简明教程

JavaScript

js 脚本放置的位置

在 body 下面

另写一个 .js 文件，然后引入

js变量

值类型

String

number

Boolean

null

未定义类型

引用类型

动态类型

运算符

对象

String

Array

Date

Math

函数

全局函数

isNaN(params)

parseFloat(String)

parseInt(string,radix)

自定义函数

匿名函数

自定义对象

BOM

window 对象

window 对象属性

window 对象方法

history 对象

location 对象

JS 事件

DOM

Document 对象

Document 对象常用方法

添加节点

表单验证

表单验证的思路

案例

正则表达式

使用方法

常用正则

* 以上用户言论只代表其个人观点，不代表本网站的观点或立场