【学习笔记】JavaScript

<!--html中，在script标签内写JS代码，放在末尾前即可（但好像也可以？）-->
    <script>
        alert('hello, world');
        // ...
    </script>

<!--
script要成对出现，不用显示定义type，默认是js, type="text/javascript"
但好像版本老的开发软件要。
-->
<script src="js/script.js"></script>

let a = 10, b = 10;
if(){
    
}
else if()
{
    
}
//
/*
*/

alter(score) // 弹窗
console.log(score) // 在控制台打印变量

// 可以是不同类型的（Java要相同）
// 为了可读性，尽量用[]
let arr = [1,2,3,'hello',null,true];
new Array(1,2,3,'hello');

console.msg(arr[0]);
// 越界是未定义

// 对象大括号，数组中括号
// 每个属性用,隔开，最后一个不需要
// Person person = new Person(1,2,3);
let person = {
    name: "hhh",
    age: 3,
    tags: ['sd', 'xx'],
}
console.msg(person.name);

'use strict';
// 放在最上面, 防止js的随意性导致问题.  貌似是逐行解释

\n \t \u#### (Unicode)  \x##(Ascii) (在字符串包裹内)

let msg = `
hello
world
jz
`

let msg = `hello, ${name}`
// 有点像python .format(?)

str = "1231248"
str.lenght
str[0]

str.toUpperCase()
str.toLowerCase()
.indexOf('t') // 首次出现的下标
.substring(1,3) // 从上面下标开始[l,r)

arr.length = 10
// 可变（直接赋值），后面会补上undefined
// 赋值小了，会丢失元素    

arr.fill(1);
...

let 对象名 = {
    属性名: 属性值,
    属性名: 属性值,
    属性名: 属性值  // 有些浏览器在最后一个属性加逗号报错!
}

person.ununun = "sdfijiosafj"
delete person.name

'age' in person
true
// 继承
'toString' in person
true

person.hasOwnProperty('age')
true
person.hasOwnProperty('toString')
false

let map = new Map([['tom',100],['Bob',90],['Roger',0]]);
map.get('tom'); // key -> value
map.set('xxx',123); // 加入
map.delete('tom');

let set = new Set([1,2,3,3,3,3]); // 可以去重
set.add(5);
set.delete(1);
set.has(3); // 是否存在

arr.forEach(function (value) {
  console.log(value) 
})
// i为索引下标(但给它添加别的属性名后,会输出属性名)
// 怀疑数组是key为下标的map(?)
for(let i in age)
{
    
}
for(let x of age) // x为具体的值(未定义的值?)
{
    
}

// 函数声明
function fun(x){
    return x;
}
// 函数表达式 匿名函数
let fun = function(x){
    return x;
}
// fun(10, 123,124,12,3,12)
// 返回10
// 参数问题, js可以传任意个参数. 有用的只有前面的

// arguments是关键字, 代表进来的所有的参数, 数组.
// 可以用, 拿到"隐藏"的参数(?)
arguments.length === 1;
// 无参数, 手动抛出异常
if(typeof x !== 'number'){
    throw 'not a Number';
}

// rest - 获取已经定义的参数之外的所有参数
// 只能写在最后,前面用 ... 标志
function fun(a, b, ...rest) {
    console.log(res);
}

var a,b,c;

a = 3;
b = 'a';

// 神奇的JS
var ole_alert = window.alert;
window.alert = function(){
    return;
};
// 覆盖了
window.alert(123); // 就没有弹窗了!

var kkk = {
    name: 'hhh',
    birth: 2000,
    age: function() {
        var now = new Data().getFullYear();
        return now-this.birth;
    }
    fun: get_ff
}
// 方法, kkk.age();

// 拆开写fun:

number
string
boolean
NaN - number
{}, [] - object
Math.abs - function
undefined - undefined

let now = new Date();
now.getFullYear(); // Year
now.getMonth(); // month 0~11
now.getDate(); // 日
now.getDay(); // 星期几
now.getHours(); // 时
now.getMinutes();
now.getSeconds();
now.getTime(); // 时间戳 世界统一 1970.1.1 0:00:00
console.log(new Date(now.getTime())

now.toLocaleString();
now.toGMTString();

var user = {
    xxx: 'hhh'
};
var jsonUser = JSON.stringify(user); // 对象
var obj = JSON.parse('{"xxx":"hhh"}'); // string
// 因为, 单引号与双引号, 在里外层交替使用.

let Student = {
    name: "Roger",
    age: 5,
    run: function () {
        console.log(this.name + " run...");
    }
};
let zzz = {
    name: "zzz"
};
// .__proto__  原型指向, 有的属性名就覆盖属性值(?), 没有的, 加入
zzz.__proto__ = Student;

// 增加方法, 给它的原型加方法
zzz.prototype.newFunction = function(){
    alert('good');
};
// ----
// 定义一个学生的类
Class Student{
    constructor(name){
        this.name = name;
    }
    hello(){
        alert('hello');
    }
}
let xx = new Student('xx');

// 继承

class zStudent extends Student{
    constructor(name, grade)
    {
        super(name); // 集成要实现父类的东西, 这个相当于直接拿(?)
        this.grade = grade;
    }
    Who(){
        alert('zStudent');
    }
}

window.innerWidth // 里面显示的高度
window.innerWidth
window.outerHeight
window.outerWidth

Navigator.appName
Navigator.appVersion
Navigator.userAgent
Navigator.platfrom

screen.width
screen.height

host: "www.baidu.com"
href: "https://www.baidu.com"
protocal: "https:"
reload:f reload() // 刷新
// 设置新地址, 重定向
location.assign('https;//livinfly.top');

document.title

document.getElementById('app');
document.getElementByTagName('h1');
document.getElementByClassName('p2');

document.cookie

history.back()
history.forward() // 前进

document.getElementById('app');
document.getElementByTagName('h1');
document.getElementByClassName('p2');
let father = document.getElementById('father');
let childrens = father.children; // 获得父节点的所有子节点
// father.firstChild;
// father.lastChild;

// 驼峰命名, 属性值时字符串,用''包裹
id1.innerText='123' // 修改文本的值
id1.innerHTML='<strong>123</strong>'; // 可以解析HTML
id1.style.color = 'red';
id1.style.fontsize = '';
id1.style.padding = '';

// father和p1都事先获取
father.removeChild(p1);
// 删除是动态的过程, 所以删除节点的时候, 注意, child在变化

// list和id1都是实现获取的节点, 若id1原本在, 貌似是会移动过去
list.appendChild(id1);

var newP = document.creatElement('p');
newP.id = 'newP';
newP.innerText = 'xxx';
newP.setAttribute('type', 'text/javascript');

// .insertBefore
父节点.insertBefore(新节点, 目标节点);

$(selector).action(); // 选择器, 事件, (function)

$('p').click(); // 标签
$('#id1').click(); // id
$('.class1').click(); // class

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/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">
    Try it
</div>

<script>
    $(function () {
        $('#divMove').mousemove(function (e) {
            $('#mouseMove').text('x:' + e.pageX + ' y: ' + e.pageY);
        })
    })
</script>
</body>
</html>

$('#hhh li[name=python]').text() // 获得
$('#hhh li[name=python]').text('xx') // 修改
$('#hhh').html(); // 获得
$('#hhh').html(''); // 修改
// css
$(selector).css({"color", "red"}, {...});
// 元素显示与隐藏 本质 display = none;
.show()
.hide()
.toggle(); // 切换
// Other
$(window).width()

// ajax():
$('').ajax() // ..