JavaWeb——JavaScript学习笔记_html-js-css

JavaScript 一、JavaScript快速入门 1.简介

跨平台、面向对象的脚本语言

学习文档：(https://www.w3school.com.cn/js/js_htmldom.asp)

2.引入方式 01.内部脚本

将 JS代码定义在HTML页面中

<script>
    alert("hello js");
script>

在 HTML 文档中可以在任意地方，放置任意数量的 02.外部脚本

将 JS代码定义在外部 JS文件中，然后引入到 HTML页面中

alert("hello js")

<script src="../js/demo.js">script>

3.基础语法 01.书写语法

区分大小写每行结束后分号可有可无单行注释// 多行注释/**/ 大括号内表示代码块

02.输出语句 window.alert() 写入警告框document.write() 写入HTML输出（点一下，才会显示内容）consolo.log() 写入浏览器控制台

window.alert("hello js1")

document.write("hello js2")

console.log("hello js3")

03.变量 JavaScript中用var关键字来声明变量，是一门弱类型语言，可以存储不同类型的变量

var test = 20
test="zs"
alert(test)

var 特点：1.作用域：全局变量 2.变量可以重复定义（新定义的覆盖前面已经定义过的）let 特点：1.作用域：代码块内 2.变量不可以重复定义const 特点：1.只读的常量，一旦声明就不可以改变 2.作用域：全局变量 04.数据类型 JavaScript 中分为：原始类型和引用类型5种原始类型：

number：数字（整数、小数、NaN(Not a Number)）

string：字符、字符串，单双引皆可

boolean：布尔。true，false

null：对象为空

undefined：当声明的变量未初始化时，该变量的默认值是 undefined

var age1 = 20
alert(typeof age1)//number
var age2 = null
alert(typeof age2)//object(js的错误罢了)
var age3
alert(typeof age3)//undefined

05.运算符

== 与 === 的区别

== ：先判断类型是否一样，若不一样先转换类型，再去比较

=== ：先判断类型是否一样，不一样直接返回false

var age1=20
var age2="20"
alert(age1 == age2) //true
alert(age1 === age2) //false

类型转换

其他类型转为number

String：按照字符串的字面值，转为数字，如果字面值不是数字，则转为NaN，一般使用parseInt

var str = "as"
alert(parseInt(str))//NaN

boolen：true转为1 false转为0

其他类型转为boolen

number： 0和NaN转为false，其他的数字转为trueString：空字符串转为false，其他的字符串转为truenull：falseundefind：false使用：健壮性，判断是否有内容 if(str) 如果有内容就是true 06.流程控制语句

if、switch、for（i 一般用 let 定义）、while、do…while 和Java一样

07.函数

JavaScript 函数通过 function 关键字进行定义

方式一

 function functionName(参数1,参数2) {
     要执行的代码
 }

function add(a,b) {
    return a+b
}
var result = add(1,5)
alert(result)//6

方式二

var functionName = function (参数列表){
    要执行的代码
}

var add = function (a,b) {
    return a+b
}
var result = add(1,5)
alert(result)

二、JavaScript常用对象 1.Array

//方式一：var 变量名 = new Array(元素列表);
var arr = new Array(1,2,3)
alert(arr)
//方式二：var 变量名 = [元素列表]; arr[索引] = 值;
var arr2 = [1,2,3]
alert(arr2[1])

JavaScript的数组相当于Java里的集合，变长变类型的

var arr2 = [1,2,3]
arr2[5]=10
alert(arr2[4])//undefined

var arr2 = [1,2,3]
arr2[5]="hello"
alert(arr2)//1,2,3,,,hello

遍历

var arr2 = [1,2,3]
for (let i = 0;i <arr2.length;i++){
    alert(arr2[i])
}

添加

var arr2 = [1,2,3]
arr2.push(4)
alert(arr2)//1,2,3,4

删除

var arr2 = [1,2,3]
arr2.splice(0,1)//从0的位置开始删除1个
alert(arr2)//2,3

2.String

//方式一：var 变量名 = new String(s);
var str1 = new String("bcd")
//方式二：var 变量名 = " s "
var str2 = "abcd"
alert(str1.length)//3
alert(str2.charAt(3))//d
alert(str2.indexOf(str1))//1 str1在str2中出现的下标为1

trim() 方法去前后的空格

var st3 = "   sdds    "
var st4 = st3.trim()
alert(st4)//sdds

3.自定义对象

var 对象名称 = {
属性名称1:属性值1,
属性名称2:属性值2,
…
函数名称:function (形参列表){}
…
};

var person = {
    name : "zhangsan",
    age : 23,
    eat : function () {
        alert("吃饭")
    }
}
alert(person.age + person.name)//23zhangsan
person.eat()//吃饭

4.BOM

Browser Object Model 浏览器对象模型 JavaScript 将浏览器的各个组成部分封装为对象

01.Window

浏览器窗口对象

获取：直接使用Window,其中 window. 可以省略

方法：

alter()：显示带有一段消息和一个确认按钮的警告框

confirm()：现时代有一段消息以及确定按钮和取消按钮的对话框

var flag = confirm("确认删除吗？");
if (flag){ //true
    alert("点击确定")
}else {
    alert("点击取消")
}

setInterval()：按照指定的周期（毫秒）来调用函数或计算表达式--------只执行1次

setTimeout(function () {
    alert("hehe")
},3000)

setTimeout()：在指定的毫秒数后调用函数或计算表达式--------循环执行

setInterval(function () {
    alert("hehe")
},3000)

案例：定时开关灯

<body>
<input type="button" onclick="on()" value="开灯">
<img id="myImage" border="0" src="../image/off.gif" style="text-align:center;">
<input type="button" onclick="off()" value="关灯">
body>
<script>
    function on() {
        document.getElementById('myImage').src='../image/on.gif';
    }
    function off() {
        document.getElementById('myImage').src='../image/off.gif';
    }
    var x = 0
    //定时器
    //根据一个变化的数字，产生固定个数的值
    setInterval(function () {
        if (x%2 == 0){
            on();
        }else {
            off();
        }
        x++;
    },1000)
script>

02.History

历史记录

获取：使用window.history，其中window. 可以省略

back()：加载history列表中的前一个URL

forward()：加载history列表中的后一个URL

03.Location

地址栏对象

获取：使用window.location，其中window. 可以省略

href()：获取当前地址栏，或者跳转到指定的地址栏

alert("要跳转了！")
location.href = "https://www.baidu.com"

5.DOM Document Object Model 文档对象模型将标记语言的各个组成部分封装为对象

Document：整个文档对象

Element：元素对象

Attribute：属性对象

Text：文本对象

Comment：注释对象

JavaScript 通过 DOM，就能够对 HTML进行 *** 作了

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

1.核心 DOM：针对任何结构化文档的标准模型

Document：整个文档对象

Element：元素对象

Attribute：属性对象

Text：文本对象

Comment：注释对象

2.XML DOM：针对 XML 文档的标准模型

3.HTML DOM：针对 HTML 文档的标准模型

Image：

Button ：

01.获取Element

获取：使用Document对象的方法来获取

getElementById：根据id属性值获取，返回一个Element对象

getElementsByTagName：根据标签名称获取，返回Element对象数组

getElementsByName：根据name属性值获取，返回Element对象数组

getElementsByClassName：根据class属性值获取，返回Element对象数组

<body>
<img id="light" src="../imgs/off.gif"> <br>

<div class="cls">传智教育div>   <br>
<div class="cls">黑马程序员div> <br>

<input type="checkbox" name="hobby"> 电影
<input type="checkbox" name="hobby"> 旅游
<input type="checkbox" name="hobby"> 游戏
body>

<script>
    //ID
    var img = document.getElementById("light")
    alert(img)//[object HTMLImageElement]
    //TagName
    var divs = document.getElementsByTagName("div")
    alert(divs.length)//2
    //Name
    var hobbys = document.getElementsByName("hobby")
    alert(hobbys.length)//3
    //ClassName
    var classNames = document.getElementsByClassName("cls")
    alert(classNames.length)//2
script>

02.HTML Element对象的使用

img对象

src可以换图片

<body>
<img id="light" src="../image/off.gif"> <br>
body>
<script>
    var img = document.getElementById("light")
    img.src = "../image/on.gif"
script>

element对象

element.style() ：设置或返回元素的style属性

element.innerHTML()：设置或返回元素的内容

<body>
<div class="cls">传智教育div>   <br>
<div class="cls">黑马程序员div> <br>
body>
<script>
    var divs = document.getElementsByTagName("div")
    for (let i = 0;i<divs.length;i++){
        divs[i].style.color = 'red'  //变成红色
        divs[i].innerHTML = "哈哈哈"  //内容变成“哈哈哈”
    }
script>

input对象

checked属性表示按钮选中没有选中

<body>
<input type="checkbox" name="hobby"> 电影
<input type="checkbox" name="hobby"> 旅游
<input type="checkbox" name="hobby"> 游戏
body>
<script>
    var hobbys = document.getElementsByName("hobby")
    for (let i = 0;i<hobbys.length;i++){
        hobbys[i].checked = true;
    }
script>

三、JavaScript事件监听

事件：HTML 事件是发生在 HTML 元素上的“事情”。比如：

按钮被点击

鼠标移动到元素之上

按下键盘按键

事件监听：JavaScript 可以在事件被侦测到时执行代码

1.事件绑定

方式一：通过HTML标签中的事件属性进行绑定

<body>
<input type="button" onclick="on()" value="点一下">
body>
<script>
    function on() {
        alert("我被点了啊")
    }
script>

方式二：通过DOM元素属性绑定（推荐）

<body>
<input type="button" value="点点我" id="btn">
body>
<script>
    document.getElementById("btn").onclick = function () {
        alert("我被点了啊~~")
    }
script>

2.常见事件

事件名	说明
onclick	鼠标单击事件
onblur	元素失去焦点
onfocus	元素获得焦点
onload	某个页面或图像被完成加载
onsubmit	当表单提交时触发该事件
onkeydown	某个键盘的键被按下
onmouseover	鼠标被移到某元素之上
onmouseout	鼠标从某元素移开

onsubmit

返回true，则表单会被提交；返回false，则表单不会被提交

<body>
<form id="register" action="#">
    <input type="text" name="username">
    <input type="submit" value="提交">
form>
body>
<script>
    document.getElementById("register").onsubmit = function () {
        return false
    }
script>

案例：表单验证当输入框失去焦点时，验证输入内容是否符合要求当点击注册按钮时，判断所有输入框的内容是否都符合要求，如果不合符则阻止表单提交

用户名验证

    //1.验证用户名是否符合规则
    //1.1获取用户名的输入框
    var usernameInput = document.getElementById("username");
    //1.2绑定onblur事件 失去焦点
    usernameInput.onblur = checkUsername;

    function checkUsername() {
        //1.3获取用户输入的用户名
        var username = usernameInput.value.trim()
        //1.4判断是否符合规则：长度6-12
        var reg = /^\w{6,12}$/;
        var flag = reg.test(username);
        if (flag) {
            //符合规则
            document.getElementById("username_err").style.display = 'none'
        } else {
            document.getElementById("username_err").style.display = ''
        }

        return flag;
    }

密码验证

    //1.验证密码是否符合规则
    //1.1获取密码的输入框
    var passwordInput = document.getElementById("password");
    //1.2绑定onblur事件 失去焦点
    passwordInput.onblur = checkPassword;

    function checkPassword() {
        //1.3获取用户输入的密码
        var password = passwordInput.value.trim()
        //1.4判断是否符合规则：长度6-12
        var reg = /^\w{6,12}$/;
        var flag = reg.test(password);
        if (flag) {
            //符合规则
            document.getElementById("password_err").style.display = 'none'
        } else {
            document.getElementById("password_err").style.display = ''
        }
        return flag
    }

电话号验证

    //1.验证手机号是否符合规则
    //1.1获取手机号的输入框
    var telInput = document.getElementById("tel");
    //1.2绑定onblur事件 失去焦点
    telInput.onblur = checkTel;

    function checkTel() {
        //1.3获取用户输入的手机号
        var tel = telInput.value.trim()
        //1.4判断手机号是否符合规则：长度 11，数字组成，第一位是1
        var reg = /^[1]\d{10}$/;
        var flag = reg.test(tel);
        if (flag) {
            //符合规则
            document.getElementById("tel_err").style.display = 'none'
        } else {
            document.getElementById("tel_err").style.display = ''
        }
        return flag
    }

表单提交

//1. 获取表单对象
var regForm = document.getElementById("reg-form");

//2. 绑定onsubmit 事件
regForm.onsubmit = function () {
    //挨个判断每一个表单项是否都符合要求，如果有一个不合符，则返回false

    var flag = checkUsername() && checkPassword() && checkTel();

    return flag;
}

正则表达式

1.直接量：注意不要加引号

var reg = /^\w{6,12}$/;

2.创建 RegExp 对象

var reg = new RegExp("^\w{6,12}$");

test(str)：判断指定字符串是否符合规则，返回 true或 false

语法：

^：表示开始

$：表示结束

[ ]：代表某个范围内的单个字符，比如： [0-9] 单个数字字符

. ：代表任意单个字符，除了换行和行结束符

\w：代表单词字符：字母、数字、下划线()，相当于 [A-Za-z0-9]

\d：代表数字字符：相当于 [0-9]

量词：

+：至少一个

*：零个或多个

？：零个或一个

{x}：x个

{m,}：至少m个

{m,n}：至少m个，最多n个

欢迎分享，转载请注明来源：内存溢出

原文地址: http://outofmemory.cn/web/944665.html

JavaWeb——JavaScript学习笔记

发表评论

评论列表（0条）