JavaScript 是一种高级的、解释型的编程语言,广泛用于 Web 开发。

JavaScript引入方式

1.内嵌脚本

<script>alert("nmsl")</script>

2.外部脚本
2.1将js脚本保存在外部js代码中

alert("hello JS~")

2.2引入外部js文件

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

js输出语句

<script>
    window.alert("hello, js~");
    document.write("hello, js2");
    console.log("hello, js3");
</script>

js定义变量

//var重复定义会被视为覆盖
var age = 100;

//只在let关键字所在的代码块有效 而且不允许重复定义
let age = 250;

//只读,创建后就不能改变
const gender = 3;

其他类型转换成number

var age = + "100";//在string类型前加正号

var num = "101";
age = parseInt(num);//用专门用来转换成number的方法
//但前提是原变量双引号下是数字, 不然会变成NaN(比如Boolean类型)

var boolVar = +true;

其他类型转换成boolean

  1. number: 0和NaN转为false, 其余数组转为true
  2. string: 空字符串转为false, 其他的字符串转为true
  3. null: false
  4. undefined: false

    //这样可以很方便判断字符串是不是合法
     var name = "黄乘明";
     if (name) {
         alert("我是true");
     } else {
         alert("我是false");
     }

流程控制语句

if
switch
for
while
do...while
//和Java里一毛一样

函数

    function add(a,b){
        return a+b;
    }
    
    var res = add(1, 2);
    alert(res);
//就算传入的参数个数和定义函数时设定的参数个数不一样都可以成功运行

Array对象

var arr = new Array(1,2,3);
var arr1 = [1,2,3];
//两种定义方式

//返回长度
alert(arr1.length);

//添加元素
arr.push(100);
//删除元素
arr.splice(0,1);//从索引0开始删, 删1个

JavaScript中的数组更类似于Java中的数组, 因为是变长变类型的

String对象

//定义String对象
var str = "   傻逼黄乘明  ";

//字符串长度
alert(str.length);

//去除开头结尾空格
str.trim()

//指定下标的元素
str.charAt(6)

//第一次出现时的下标
str.indexOf("黄")

自定义对象

    var person = {
        name : "黄乘明",
        age : 20,
        eat : function (){
            alert("我喜欢吃屎!");
        }
    }

    alert(person.name);
    alert(person.age);
    person.eat();

Window对象

//Window对象的4个方法
window.alert("abc");

var flag = window.confirm("666");
alert(flag);

setTimeout(function () {
    alert("黄乘明爱吃屎");
}, 5000);

setInterval(function () {
    alert("黄乘明爱吃是")
}, 500);

属性: 获取其他BOM对象history, Navigator, Screen, loaction

//history返回当前会话的历史记录中的项目数
alert(window.history.length);

//loaction跳转
document.write("3秒后即将跳转到首页...");
setTimeout(function () {
    location.href = "https://bblog.mxy520.online"
}, 3000)

获取Element对象

document.getElementById()//根据id属性值获取, 返回一个Element对象
document.getElementsByTagName()//根据标签名称获取, 返回Element对数组
document.getElementsByName()//根据name属性值获取, 返回ELement对象数组
document.getElementsByClassName()//根据class属性值获取, 获取Element对象数组

具体获取到Element对象后的使用方法见js文档

事件绑定

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

<input type="button" value="再点我试试" onclick="on()">

  function on() {
      alert("我草泥马");
  }

方式二:通过DOM元素id绑定 推荐

<input type="button" value="点我试试" id="bt1">

  document.getElementById("bt1").onclick = function () {
    alert("我被点击了~")
  }

常见事件

js常见事件

正则表达式

字符匹配

a: 匹配字符 'a'。
.: 匹配除换行符以外的任意单个字符。
字符组

字符范围

预定义字符类:

\d: 匹配任何数字,相当于 [0-9]。
\D: 匹配任何非数字字符。
\w: 匹配任何字母数字字符(包括下划线),相当于 [a-zA-Z0-9_]。
\W: 匹配任何非字母数字字符。
\s: 匹配任何空白字符(包括空格、制表符、换页符等)。
\S: 匹配任何非空白字符。
量词:

*: 匹配前面的子表达式零次或多次。
+: 匹配前面的子表达式一次或多次。
?: 匹配前面的子表达式零次或一次。
{n}: 匹配前面的子表达式恰好 n 次。
{n,}: 匹配前面的子表达式至少 n 次。
{n,m}: 匹配前面的子表达式至少 n 次,至多 m 次。
锚点:

^: 匹配字符串的开始。
$: 匹配字符串的结束。
分组和反向引用:

(abc): 匹配 'abc' 并捕获该匹配。
(?:abc): 匹配 'abc' 但不捕获。
\1, \2, ...: 引用前面捕获的分组。
选择:

a|b: 匹配 'a' 或 'b'。


举例
6-12位并且可以包含字母数字下划线: var reg = /^\w{6,12}$/;
共11位数字且首位是1: var reg = /^[1]\d{10}$/;