一个学习Java同学的 JavaScript 笔记

最新推荐文章于 2024-05-11 21:19:51 发布

指针指指针

最新推荐文章于 2024-05-11 21:19:51 发布

阅读量266

点赞数

文章标签： javascript java 学习

本文链接：https://blog.csdn.net/m0_58409024/article/details/129962093

版权

1、什么是JavaScript?

1.1、概述

JavaScript是一门流行的脚本语言

1.2、历史

ECMAScript可以理解为JavaScript的一个标准
最新版本是ES6，但大部分浏览器只支持ES5代码
这就导致，js开发环境和线上环境版本不一致。

1.3、ES6

ES6 = ECMAScript 这门标准的第 6 代版本（2015）。

ECMAScript 是语言的标准
6 是版本号

ECMA：欧洲计算机制造商协会

具体内容：语法 + API

历史版本：ES1——>3、ES5——>6（ES4 被废弃了）

我们目前使用 JS 的大部分内容都是 ES3 的部分。

ES 与 JS 的关系：JavaScript(浏览器端) = ESMAScript(语法+API) + DOM + BOM

ES6 的兼容性：

主流浏览器的最新版本几乎都全部支持 ES6
IE 老版本等不支持的浏览器，可以使用 Babel 转码

2、快速入门

2.1、引入JavaScript

1、内部标签

<script>
    alert("hello world");
</script>

2、外部引入

HelloJs.js

alert('hello world');

HelloJs.html

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!--    内部引入-->
    <script>
        alert('hello word');
    </script>
<!--    外部引入-->
    <script src="js/HelloJs.js"></script>
</head>
<body>

</body>
</html>

2.2、基本语法

<script>
        //1.定义变量
        var num = 1;
        alert(num);
        //2.条件控制
        if(2>1){
            alert("true");
        }
        //console.log(num) 在浏览器的控制台打印变量 ===> System.out.print();
</script>

2.3、数据类型

var

var就类似于Java中的Object，用于定义所有变量

number:

123 //整数123
123.4 //浮点数123.4
1.23e4 //科学计数法
-1234 //负数
NaN //not a number
Infinity //无穷大
//都属于 number 类型

字符串：

‘abc’ ， “abcd”

布尔：

true ， false

逻辑运算符：

&& ， || ， !

比较运算符

=
== (类型不一样，值一样也会判断为true)
=== 绝对等于(类型一样，值一样)
NaN只能通过isNaN()函数来判断这个数是否是NaN

数组

var array = [1,2,3,4,5,6,7,8]

undefined

未定义
比如数组下标越界，就会报 undefined

对象

//创建对象
var Object = {
    name: "zzzzz",
    gender:"男",
}
//浏览器控制台输出对象中的属性
console.log(Object.name);
console.log(Object.gender);

2.4、严格检查模式

'use strict';

3、数据类型

3.1、字符串

正常字符串使用单引号或双引号

转译字符

\'
\n
\t
\u#### unicode字符
\x41   ASCII字符

字符串操作

var str = "asdf";
str.length; //字符串长度
str.toUpperCase() //转为大写
str.toLowerCase() //转为小写
str.indexOf('s') //获取字符对应的下标
str.substring(1,3) //截取字符串

3.2、数组

数组定义

var arr = [1,2,3,4];
var arrM = [[1,2],[3,4]]; //二维数组

数组操作

var arr = [1,2,3,4,5,6]
arr.length  //数组长度
arr.indexOf(2) //获取索引下标
arr.slice(1,3) //截取素组类似于substring
arr.push(1,3); //添加1和3，添加到尾部
arr.pop() //弹出尾部数据
arr.unshift(1,3) //添加数据到头部
arr.shift() //弹出头部的数据
arr.sort() //排序
arr.reverse() //元素反转
arr.join('--') //打印效果 ”1--2--3--4····

3.3、对象

对象声明

var 对象名 = {
    属性名1 : 属性值1,
    属性名2 : 属性值2,
    属性名3 : 属性值3
}

对象操作

var Object = {
    name: "zzzzz",
    gender:"男",
}
delete Object.name; //动态删除属性
Object.age = 1 ;  //动态添加属性
'age' in Object; //判断属性是否存在(继承的也返回true)
Object.hasOwnProperty('age') //判断该属性是否为该对象自身拥有的。

3.4、流程控制

if判断

var flag = 30;
if (flag>10){
    console.log("hhhh");
}else if (flag>5){
    console.log("sdsd");
}else {
    console.log("saaaa");
}

while循环

var age = 1;
while(age<100){
    console.log(age);
    age = age+1;
}

for循环

for (let i = 0; i < 100; i++) {
    console.log(i);
}

forEach循环遍历数组

var arr = [1,2,3,4,5];
arr.forEach(function (value) {
    console.log(value);
})

for in 遍历数组

var arr = [1,2,3,4,5,6];
for (var num in arr){
    console.log(arr[num]);
}

for of 遍历数组

var arr = [3,4,5]
for (var x of arr){
    console.log(x);
}

3.5、Map和Set集合

ES6新特性

Map

var map = new Map([['key1',1],['key2',2],['key3',3]]);
var value = map.get('key1'); //通过key获取value
console.log(value);
map.set('key4',4); //添加键值对
map.delete('key1') //删除键值对

Set

无序不重复集合

var set = new Set([1,1,1,1,2,3]); // set = [1,2,3] Set集合会自动去重
set.add(4); //添加数据
set.delete(1) //删除元素
set.has(1) //判断是否存在1

3.6、Iterator

迭代器遍历数组，集合

遍历Map

var map = new Map([['key1',1],['key2',2],['key3',3]]);
for(let x of map){
    console.log(x);
}

遍历Set

var set = new Set([1,1,1,1,2,3]);
for(let x of set){
    console.log(x);
}

4、函数

4.1、定义函数

function hanshu(x){
    return x;
}
//方式二 ，效果与方式一等效 类似于java中的匿名类
var hanshu = function (x) {
    return x;
}

如果函数没有return，也会返回结果 :undefined

参数问题

js函数可以传多个参数用 arguments 获取。
不传参数不会报错，会显示结果 NaN。所以往往需要程序员手动规避不传参的问题。

function hanshu(x){
    if (typeof x !== 'number'){
        throw 'Not a Number';
    }
    return x;
}

获取除已定义参数外的其他传入的参数

ES6新特性

function hanshu(x,...rest){
    console.log(x);
    console.log(rest);
}

4.2、变量的作用域

var定义的变量有作用域:在函数体内定义的，只在函数内起作用

全局对象

相当于浏览器，全局变量都属于这个对象

var x = 'x';
console.log(x);
console.log(window.x); // x==>window.x; alert()==>window.alert();

在开发中，如果将全部的变量都绑定在window下会非常乱，如果不同的js文件，使用了相同的全局变量，会产生冲突

减少冲突

//定义唯一全局变量
var Mzj = {};
//向Mzj中添加变量
Mzj.name = 'hhh';
Mzj.fun = function (x) {
    return x
}

局部变量let

ES6新特性

常量const

ES6新特性

const PI = '3.1415926'; //只读变量不可修改

4.3、方法

定义方法

类中的函数叫做方法

var mmm = {
            //方法
            age : function (birth) {
                var now = new Date().getFullYear();
                return now-birth;
            }
        }

方式二

function getAge(){
    var now = new Date().getFullYear();
    return now-this.birth;
}
var mmm = {
            birth : 2002,
            //方法
            age : getAge
        }

/**
 * 调用 mmm.age();
 * getAge() NaN
 * this代表当前对象.
 */

在Java中，this是无法指向的，表示当前执行的对象
在JavaScript中，可以控制this指向

getAge.apply(mmm,[]); //this指向了mmm函数，参数为空

5、内部对象

标准对象

typeof 1
'number'
typeof '1'
'string'
typeof true
'boolean'
typeof NaN
'number'
typeof []
'object'
typeof {}
'object'
typeof Math.abs
'function'
typeof undefined
'undefined'

5.1、Date

基本方法

        var now = new Date(); //获取当前时间
        now.getFullYear(); //年
        now.getMonth(); //月 0~11
        now.getDate(); //日
        now.getDay(); //星期几
        now.getHours(); //时
        now.getMinutes();//分
        now.getSeconds(); //秒
        now.getTime(); //时间戳  从1970 .1.1  0:00:00 ~ now的毫秒数
        
        //通过时间戳获取时间
        console.log(new Date(now.getTime()));

5.2、JSON

json是一种轻量级的数据交换格式

       var user = {
           name : 'zzzzz',
           age : 18,
           gender : '男'
       }
       //对象转化为json字符串
       var jsonUser = JSON.stringify(user);
       //json字符串转化为对象
       var object = JSON.parse(jsonUser);

5.3、Ajax

原生js写法，xhr异步请求
jQuery 封装好的方法
axios 请求

6、面向对象编程

定义一个类

class User{
    constructor(name){
        this.name = name;
    }
    hello(){
        alert("你好");
    }
}
var mmm = new User('zzzzz');

继承

class webUser extends User{
    constructor(name,password){
        super(name)
        this.password = password;
    }
    display(){
        alert('我是 web用户');
    }
}

7、操作BOM对象

BOM:浏览器对象模型

navigator
navigator 中封装了浏览器的信息
screen
screen 封装了屏幕信息

screen.height
800
screen.width
1280

location
location 代表当前页面的URL信息

host: "www.baidu.com"
hostname: "www.baidu.com"
href: "https://www.baidu.com/?tn=15007414_8_dg"
origin: "https://www.baidu.com"
pathname: "/"
port: ""
protocol: "https:"

location.reload() //重新加载页面
location.assign("url")//设置新的地址

document
document 代表当前页面

document.title
'百度一下，你就知道'

获取具体的文档树节点

var dl = document.getElementById("id");

获取cookie

document.cookie

history
代表浏览器的历史记录

history.back();//后退
history.forward();//前进

8、操作DOM对象

DOM:文档树模型

获取DOM节点

<div id="parent">
    <h1>标题</h1>
    <p id="p1">p1</p>
    <p class="p2">p2</p>
</div>
<script>
    //获取节点
    var h1 = document.getElementsByTagName("h1");
    var p2 = document.getElementsByClassName('p2');
    var p1 = document.getElementById('p1');
    //通过父节点获取所有的子节点
    var div = document.getElementById('parent');
    var divChlidren = div.children;
</script>

更新节点

var p1 = document.getElementById('p1');
p1.innerText = 'new p1' //修改文本值
p1.innerHTML = "<h1> p1 </h1>"; //修改html超文本
//操作js
p1.style.color = 'yellow'; //修改颜色
p1.style.fontSize = '20px' //修改字体大小

删除节点
步骤：

获取父节点
通过父节点删除子节点

var p1 = document.getElementById('p1');
var parent = p1.parentElement; //获取父节点
parent.removeChild(p1);

插入节点

<p id="js">JavaScript</p>
<div id="list">
    <p id="se">JavaSE</p>
    <p id="ee">JavaEE</p>
    <p id="me">JavaME</p>
</div>
<script>
    var list = document.getElementById('list');
    var js = document.getElementById('js');
    var ee = document.getElementById('ee');
    list.appendChild('js'); //将js追加到div中
    //js创建新的节点
    var newP = document.createElement('p');
    newP.setAttribute('id','newP'); //设置id为newP
    newP.innerText = '我就学python';
    list.appendChild(newP);
    list.insertBefore(newP,ee); //将newP插入到ee前
</script>

9、操作表单

文本框 text
下拉框 select
单选框 radio
多选框 checkbox
隐藏框 hidden
密码框 password

获取表单数据

    <from action="post">
        <p>
            <span>用户名</span><input type="text" id="username">
        </p>
        <p>
            <span>性&nbsp;别</span>
            <input type="radio" id="boy" name="sex" value="man">男
            <input type="radio" id="girl" name="sex" value="women">女
        </p>
    </from>
    <script>
        var input_text = document.getElementById('username');
        var boy_radio = document.getElementById('boy');
        var girl_radio = document.getElementById('girl');

        //获取文本框的值
        input_text.value;
        //修改文本框的值
        input_text.value = '111';
        //单选框——查看返回结果如果选中 true
        boy_radio.checked = true;
    </script>

提交表单

    <from action="#" method="post" onsubmit="f()">
        <p>
            <span>用户名</span><input type="text" id="username" name="username">
        </p>
        <p>
            <span>密&nbsp;码</span><input type="password" id="password" name="password">
        </p>
        <button type="submit" >提交</button>
    </from>
    <script>
        function f() {
            var username = document.getElementById('username');
            var password = document.getElementById('password');
            console.log(username.value);
            console.log(password.value);
            return true;
        }
    </script>

10、jQuery

jQuery 封装了大量JavaScript的函数

导入jQuery

<script src="js_01/lib/jquery-3.6.1.js"></script>

选择器

$('p').click() //标签选择器
$('#id').click() //id选择器
$('.class').click() //class选择器

事件

鼠标事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="lib/jquery-3.6.1.js"></script>
    <style>
        #divMove{
            width:500px;
            height: 500px;
            border: 1px solid red;
        }
    </style>
</head>
<body>
    mouse:<span id="mouseMove"></span>
    <div id="divMove">
        移动鼠标
    </div>
    <script>
        $(function () {
           $('#divMove').mousemove(function (e) {
               $('#mouseMove').text('x:'+e.pageX+'y:'+e.pageY)
           })
        });
    </script>
</body>
</html>

指针指指针

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
1
评论
一个学习Java同学的 JavaScript 笔记

JavaScript是一门流行的脚本语言return x;} //方式二，效果与方式一等效类似于java中的匿名类 var hanshu = function(x) {return x;如果函数没有return，也会返回结果 :undefined参数问题js函数可以传多个参数用 arguments 获取。不传参数不会报错，会显示结果 NaN。所以往往需要程序员手动规避不传参的问题。} return x;获取除已定义参数外的其他传入的参数ES6新特性。
复制链接

扫一扫