Java教程

JavaScript

本文主要是介绍JavaScript,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!

JavaScript语言由3部分组成,分别是ECMAScript、BOM和DOM,

其中ECMAScript是JavaScript语言的核心,

而Web API包括BOM(页面文档对象模型)和DOM(浏览器对象模型)两部分,

利用DOM可完成对HTML文档内所有元素的获取、访问、标签属性和样式的设置等操作。在实际开发中,诸如改变盒子的大小、标签栏的切换、购物车功能等带有交互效果的页面,都离不开DOM。

交互性:信息的动态交互
安全性:不允许直接访问硬盘
跨平台性:只要是可以解释js的浏览器都可以执行,和平台无关
//1.
在html中在script标签中书写script代码
//2.
用script标签引入js文件 敲入src属性引入js文件路径

1.输出语句与输入语句

alert() 弹出警告框
console.log() 写入到浏览器的控制台
document.write() 方法将内容写到 HTML 文档中。
innerHTML 写入到 HTML 元素。

2.变量的赋值和声明

赋值

一条语句,多个变量 var 开头,并使用逗号分隔变量即可:
var lastname="Doe", age=30, job="carpenter";
一条语句中声明的多个变量不可以同时赋同一个值:
var x,y,z=1;

变量

全局变量
var 变量;   undefined--未定义,为赋于初始值都是这个
声明变量类型  null--空置  NAN--not a number--非数字非数值
var carname=new String;字符串
var x=      new Number;数值类型
var y=      new Boolean;布尔类型
var cars=   new Array;
var person= new Object;对象类型

3.循环语句

switch(n)
{
    case 1:
        执行代码块 1
        break;
    case 2:
        执行代码块 2
        break;
    default:
        与 case 1 和 case 2 不同时执行的代码
}

4.数组 对象 关键字

var cars=new Array();
cars[0]="Saab";
​
var cars=new Array("Saab","Volvo","BMW");
​
var cars=["Saab","Volvo","BMW"];

数组最值

Math.max.apply(Math,数组名)
Math.min.apply(Math,数组名)

数组排序

function maoPao(arr) {
    if (Array.isArray(arr)) {
        for (var i = 0; i < arr.length - 1; i++) {
            for (var j = 0; j < arr.length - 1 - i; j++) {
                if (arr[j] < arr[j + 1]) {
                    [arr[j], arr[j + 1]] = [arr[j + 1], arr[j]]
                }
            }
        }
    }
    return arr
}
var arr = maoPao([1, 5, 6, 2, 3])
alert(arr)

5.对象

变量名.属性或者函数名()
键值对对象
var star = {
    name : 'pink',
    age : 18,
    sex : '男',
    sayHi : function(){
        alert('大家好啊~');
    }
};
​
定义对象在赋值
​
var andy = new Obect();
andy.name = 'pink';
andy.age = 18;
andy.sex = '男';
andy.sayHi = function(){
    alert('大家好啊~');
}
​
构造函数定义
​
function Person(name, age, sex) {
     this.name = name;
     this.age = age;
     this.sex = sex;
     this.sayHi = function() {
      alert('我的名字叫:' + this.name + ',年龄:' + this.age + ',性别:' + this.sex);
    }
}
var bigbai = new Person('大白', 100, '男');
var smallbai = new Person('小白', 21, '男');
console.log(bigbai.name);
console.log(smallbai.name);
​

遍历对象属性

for...in 语句用于对数组或者对象的属性进行循环操作。
for (变量 in 对象名字) {
    // 在此执行代码
}
语法中的变量是自定义的,它需要符合命名规范,通常我们会将这个变量写为 k 或者 key。
for (var k in obj) {
    console.log(k);      // 这里的 k 是属性名
    console.log(obj[k]); // 这里的 obj[k] 是属性值
}
​

6.关键字

this

在方法中,this 表示该方法所属的对象。
如果单独使用,this 表示全局对象。
在函数中,this 表示全局对象。
在函数中,在严格模式下,this 是未定义的(undefined)。
在事件中,this 表示接收事件的元素。
类似 call() 和 apply() 方法可以将 this 引用到任何对象

function函数

函数不允许重载,会覆盖上一次定义

//1.
function 函数名(参数不用定义类型){
    
}; 
返回值直接用return返回语句即可
//2.
var 函数名 = function(参数列表){
    
}
//3.隐形参数arguments
function fun(){   
    //定义函数没有参数  
    alert(arguments[0]+arguments[1])
}/可用arguments调用即将传入的参数
fun(1,2)//调用传入参数   结果为3

5.js事件

(输入设备与页面交互的相应)

事件的注册(告诉浏览器事件响应后需要执行哪些代码)又叫绑定,分为静态注册和动态注册
静态注册:通过html标签的事件属性直接赋予事件响应后的代码
动态注册:先通过js代码获取标签dom对象,然后再通过dom对象.事件名=function(){}
//onload 加载完成事件 浏览器解析完页面自动执行 页面加载完成之后常用于做页面的js代码初始化操作
静态:
function fun =(){}//script标签中
οnlοad="fun()"//加到body标签中
动态:window.οnlοad=function(){}
//onclick 点击事件 常用于按钮的点击响应
静态注册:
script标签中定义方法,给标签添加onclick属性,值为方法名
动态:
window.onload = function(){
var btnObj = document.getElementById("id名")
btnObj.onclick = function(){}
}
//onblur 时区焦点事件
常用于输入框失去焦点后验证其输入内容
//onchange 内容发生改变事件
常用于下拉框列表和输入框内容发生改变后操作
//onsubmit 表单提交事件 return false 制止提交
常用于表单提交前 验证所有表单项是否合法
点击提交后会跳转

6.DOM模型文档树

DOM全称是Document Object Model文档对象模型

文档中的标签,属性,文本转换成对象来管理。

DOM对象提供对body的直接访问,document.body.
//创建标签 
var crea = document.createElement("div");
crea.innerHTML = "李佳琪";//赋值
document.body.appendChild(crea);//添加body标签的子元素
//创建文本对象
var textObj = document.createTextNode("李佳琪");
//获取第一个id名为这个的标签
document.getElementById("id名")
获取表单中输入的值是dom对象打点掉value属性
innerHTML获取标签中的内容 innerText 只获取文本
//获取所有name名的标签 返回多个标签对象集合
document.getElementsByName("name名")
//获取标签名对象集合
document.getElementsByTagName("标签名")
​
3个查询方法 id属性查询优先 如果没有id属性按name查询然后是标签名
以上三个方法代码一定要在页面代码执行完之后再执行才能查询到
window.οnlοad=function(){} 

7.正则表达式

(regular expression)描述了一种字符串匹配的模式(pattern)

runoo+b,可以匹配 runoob、runooob、runoooooob 等,+ 号代表前面的字符必须至少出现一次(1次或多次)。
runoo*b,可以匹配 runob、runoob、runoooooob 等,* 号代表前面的字符可以不出现,也可以出现一次或者多次(0次、或1次、或多次)。
colou?r 可以匹配 color 或者 colour,? 问号代表前面的字符最多只可以出现一次(0次、或1次)。
//  test(字符串)方法测试某个字符串是不是匹配我的规则
var reg = /e/;表示字符串中是否包含"e"
var reg = new RegExp("e");相当于/e/
reg.test("abc");传入字符 返回false  
//花括号
[a-z]表示小写a到小写z[0-9]
var reg = new RegExp("[abc]");表示是否含有a或b或c
//元字符
\w表示是否包含字母数字下划线,
//量词
a+表示至少一个a----a*表示包含0个或多个a----a?包含零个或1个a
a{X}包含连续的X个a的序列----a{x,y}包含至少X个 至多Y个a的连续序列
a$以a结尾的字符串   ^a以a开头的字符串
^a{x,y}$ 不是包含 必须完美匹配
^\w{5,12}$ 从头到尾字符5到12位
这篇关于JavaScript的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!