JavaScript 学习

一、输出

为方便调试可以输出内容,但是用户是看不到的。要在开发者模式中看。
console . log ( "Hello" );

二、外部文件引用

可以直接在html中写JS
    <head>
        <meta charset="utf-8">
        <script>
            console.log("hello")
        </script>
    </head>
也可以外部引用,先写一个JS文件,然后加载到html中。

三、变量

命名规则:
  • 名称可包含字母、数字、下划线(_)和美元符号($),不以数字开头
  • 名称对大小写敏感(y 和 Y 是不同的变量)
  • 保留字(比如 JavaScript 的关键词)无法用作变量名称
声明:
用var。声明之后,变量是没有值的。(技术上,它的值是 undefined。)
赋值:
var carName;
carName = "porsche";
var carName = "porsche";
var person = "Bill Gates", carName = "porsche", price = 15000;
这些方式都可以。
作用范围:
局部变量,在函数内声明,只能在函数内使用。
// 此处的代码不能使用 carName
function myFunction() {
    var carName = "Volvo";
    // 此处的代码可以使用 carName
}
// 此处的代码不能使用 carName
全局变量,在函数外声明,全局访问。
PS:和java不一样,js没有代码块概念。
if(b){
    var num=10;
}
console.log(num);
在java中,这样是不行的,在js中,可以。num是全局变量。 

四、数据类型

1.number类型:
1/0在java中会出错,这边表示负无穷大。
NaN就字符串转换数字的时候出错了,转不了。
转换:
可以将数字字符串转换Number类型,比较严谨不想parseFloat,“11a”也会转成11
var n = Number("123");
也可以用parseInt和parseFloat,功能比较全。都会输出123
console.log(parseInt("123"));
console.log(parseInt("123agsdg"));
console.log(parseInt("123aaaa456"));
console.log(parseInt(" 123 "));
2.boolean类型:
就是true和false比较简单。
转换:
当value为0、-0、null、""、false、undefined、NaN时,那么Boolean()转换成Boolean类型的值为false,其他都是true。
var b = Boolean(0);
3.undefined类型:
声明了变量,但是没用赋值就是这个值。
4.string类型:
不区分单引号和双引号,都是字符串。
转换:
可以把这些转成string
var s1 = String(11);
var s2 = String(true);
var s3 = String(undefined);
var s4 = String(null);
var s5 = String(NaN);
5.null类型:
好比java中,声明了对象,没创建对象。
但是JS中,输出null的时候会是object类型。

五、运算符

1.算术运算符(+ - * / % ++ --)
/ 除法,有余数和java不一样
%取余数
++ -- 自增 自减
单独使用在前在后没区别
组合使用,在前先自增,再将自增结果带入运算;在后先把原来值带入运输,再自增。
var num = 1;
var num2 = ++num;
console.log(num);
console.log(num2);
都是2
var num = 1;
var num2 = num++;
console.log(num);
console.log(num2);
num为2,num2为1
2.赋值运算符(= += *= /= %=)
3.条件运算符(=== == > < >= <= !=)
4.字符串运算符(+ +=)
5.逻辑运算符(&& || !)
6.三元运算符 (表达式1?表达式2:表达式3)

六、条件/循环语句

和Java差不多

七、函数

JavaScript 函数通过 function 关键词进行定义,其后是函数名和括号 ()。
函数名可包含字母、数字、下划线和美元符号(规则与变量名相同)。
圆括号可包括由逗号分隔的参数
由函数执行的代码被放置在花括号中:{}
var x = myFunction(7, 8);        // 调用函数,返回值被赋值给 x
function myFunction(a, b) {
    return a * b;                // 函数返回 a 和 b 的乘积
}

八、常用内置对象

可以去这查看 JavaScript 教程
关键是如何去查看文档,学习对象和方法。
1.字符串对象  JavaScript String 参考手册
用“”,‘’就可以创建字符串对象。如果字符串中要输出“,‘,\,要用\来转义。
常用方法:
charAt()  返回指定位置处的字符。
indexOf()  返回值在字符串中第一次出现的位置。
2.数组
创建
常见操作
3.Math对象
主要是数学相关
4.日期对象
JavaScript Date 参考手册
5.正则对象
匹配字符串个数为6-12的字符串。

九、对话框

警告(window可以省略)
window.alert("这是警告");
询问
var key = prompt("请输入密码");
console.log(key);
确认
var flag = confirm("确认登陆吗?");
if(flag){
    console.log("确认登陆");
}else{
    console.log("取消登陆");
}

十、定时器

每2s执行一次,10s后执行一次(之后不执行)

十一、自定义对象

用new关键字创建
var obj = new Object();
obj.name = "Mike";
obj.fun = function (age) {
    console.log("Hello " + this.name + age);
}
//使用对象
console.log(obj.name);
obj.fun(1);
字面量创建
var obj = {
    name: "Mike",
    fun: function (age) {
        console.log("Hello " + this.name + age);
    }
}
//使用对象
console.log(obj.name);
obj.fun(1);
构造方法创建对象

十二、DOM操作

把文档加载进去,然后把每个部分封装成对象,我们可以操作这些对象,实现动态的改变整个页面。
1.Document对象
如果您希望访问 HTML 页面中的任何元素,那么您总是从访问 document 对象开始。
查找HTML元素:
  • getElementById
    根据id属性获取,返回单个Element对象
  • getElementsByTagName
    根据标签名获取,返回Element对象数组
  • getElementsByClassName
    根据class属性获取,返回Element对象数组
  • getElementsByName
    根据name属性获取,返回Element对象数组
<body>
<h2>通过 Id 查找 HTML 元素</h2>
<p id="intro">Hello World!</p>
<p>此示例演示了 <b>getElementsById</b> 方法。</p>
<p id="demo"></p>
<script>
var myElement = document.getElementById("intro");
document.getElementById("demo").innerHTML =
"介绍段落的文字是" + myElement.innerHTML;
</script>
</body>
改变HTML元素:
属性
描述
element.innerHTML = new html content
改变元素的 inner HTML
element.attribute = new value
改变 HTML 元素的属性值
element.setAttribute(attributevalue)
改变 HTML 元素的属性值
element.style.property = new style
改变 HTML 元素的样式
添加删除元素:
document.createElement(element)
创建 HTML 元素
document.removeChild(element)
删除 HTML 元素
document.appendChild(element)
添加 HTML 元素
document.replaceChild(element)
替换 HTML 元素
document.write(text)
写入 HTML 输出流
添加事件:
方法
描述
document.getElementById(id).onclick = function(){code}
向 onclick 事件添加事件处理程序
2.Element对象
3.插入删除节点
插入
删除 - 父删子,不能自己删自己
4.DOM表单操作
    <div>
        <form action="#" method="get">
            姓名:<input type="text" name="username" id="username"><br>
            女<input type="radio" name="sex" value="female" id="female" checked="true"><input type="radio" name="sex" value="male"
                id="male"><br>
            故乡:<select name="city" id="city">
                <option value="1" id="shanghai">上海</option>
                <option value="2" id="beijing">北京</option>
                <option value="3" id="suzhou">苏州</option>
                <option value="4" id="guangzhou">广州</option>
            </select><br>
            <input type="submit">
        </form>
    </div>
</body>
// 获取/设置表单的value信息
var username = document.getElementById("username");
username.value = "张三";
console.log(username.value);
//获取单选框选择状态,或设置选择状态
var sexObj = document.getElementsByName("sex")
for (var i = 0; i < sexObj.length; i++) {
    console.log(sexObj[i].value + " " + sexObj[i].checked);
}
//设置下拉框
var select = document.getElementById("city");
select.selectedIndex = 2;
//设置禁用
var sex = document.getElementById("male");
sex.disabled = true;
5.常见DOM事件
  • 单击事件
var btn = document.getElementById("btn");
btn.onclick = function(){
    var ele = document.getElementById("h1");
    ele.style.color="red";
}
  • 焦点事件
    <div>
        用户名:<input type="text" id="username"><span id="info"></span>
    </div>
var userEle = document.getElementById("username");
var info = document.getElementById("info");
//获得焦点
userEle.onfocus = function () {
    info.innerHTML = "请输入6-8位"
}
//失去焦点
userEle.onblur = function () {
    var reg = /^\w{6,8}$/;
    var result = reg.test(userEle.value)
    if (result) {
        info.innerHTML = "验证成功"
    } else {
        info.innerHTML = "验证失败"
    }
}
  • 改变事件
    <select name="city" id="city">
        <option value="suzhou">苏州</option>
        <option value="shanghai">上海</option>
        <option value="beijing">北京</option>
    </select>
var city = document.getElementById("city");
city.onchange = function () {
    console.log(this.value);
}
  • 鼠标移入移出事件
<head>
    <meta charset="utf-8">
    <style>
        .red {
            background-color: red;
        }
        .blue {
            background-color: blue;
        }
    </style>
</head>
<body>
    <div id="test" class="red">Hello World</div>
</body>
var ele = document.getElementById("test");
//移入
ele.onmouseover = function () {
    ele.setAttribute("class", "blue");
}
//移出
ele.onmouseout = function () {
    ele.setAttribute("class", "red");
}
  • 页面加载事件
<head>
    <meta charset="utf-8">
    <script>
        window.onload = function(){
            //正常是无法拿到,因为在元素没加载完成,但是在这可以
            var ele = document.getElementById("test");
            console.log(ele);
            console.log("页面加载完成");
        }
    </script>
</head>
<body>
    <div id="test">Hello World</div>
</body>
  • 表单事件
<body>
    <form action="#" id="form">
        <input type="text" name="user" id="user" placeholder="Please enter user name...">
        <input type="text" name="password" id="password" placeholder="Please enter password...">
    </form>
    <button id="submit">submit</button>
    <button id="reset">resest</button>
</body>
var form = document.getElementById("form");
var submit = document.getElementById("submit");
var reset = document.getElementById("reset");
submit.onclick = function () {
    form.submit();
}
reset.onclick = function () {
    form.reset();
}
6.BOM常用对象
Window
Location
History
  • history.back() - 等同于在浏览器点击后退按钮
  • history.forward() - 等同于在浏览器中点击前进按钮

十三、原型

原型
有时,您希望向所有给定类型的已有对象添加新属性(或方法)。
有时,您希望向对象构造器添加新属性(或方法)。
function Person(first, last, age, eyecolor) {
this.firstName = first;
this.lastName = last;
this.age = age;
this.eyeColor = eyecolor;}
Person.prototype.nationality = "English";
function Person(first, last, age, eyecolor) {
this.firstName = first;
this.lastName = last;
this.age = age;
this.eyeColor = eyecolor;}
Person.prototype.name = function() {
return this.firstName + " " + this.lastName;};

十四、JS版本

JS2015(es6)
  • let
  • const
const 语句允许您声明常量(具有常量值的 JavaScript 变量)。
常量类似于 let 变量,但不能更改值。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/web/53710.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【刷题日记】最大不重叠区间的数量 leetcode 435

题目描述 给定一个区间的集合 intervals &#xff0c;其中 intervals[i] [starti, endi] 。返回 需要移除区间的最小数量&#xff0c;使剩余区间互不重叠 。 求解思路 本题应该使用贪心算法&#xff0c;也就是当出现区间重叠的情况下&#xff0c;使用贪心的思路&#xff0c…

【python qdrant 向量数据库 完整示例代码】

测试一下python版本的dqrant向量数据库的效果&#xff0c;完整代码如下&#xff1a; 安装库 !pip install qdrant-client>1.1.1 !pip install -U sentence-transformers导入 from qdrant_client import models, QdrantClient from sentence_transformers import SentenceT…

ZYNQ:开发环境搭建

资料下载 http://47.111.11.73/docs/boards/fpga/zdyz_qimxing(V2).html Vivado软件是什么&#xff1f; Vivado软件是Xilinx&#xff08;赛灵思&#xff09;公司推出的一款集成设计环境&#xff08;IDE&#xff09;&#xff0c;主要用于FPGA&#xff08;现场可编程门阵列&am…

零代码构建自己强大的Agent智能体,偷偷甩掉90%的人

转自公众号&#xff1a;渡码 Agent&#xff08;智能体&#xff09;的概念大家应该并不陌生了&#xff0c;今天分享通过可视化的方式构建各种各样强大的智能体。 关于Agent的定义&#xff0c;我并不想引用官方正式的说法。而是按照我的理解通俗地解释一下。 大模型好比是面粉…

第166天:应急响应-拒绝服务钓鱼指南DDOS压力测试邮件反制分析应用日志

案例一&#xff1a;内网应急-日志分析-爆破&横向&数据库 数据库 这里不同数据库日志不一样&#xff0c;我用mysql分析 首先MySQL数据库需要支持远程连接 GRANT ALL PRIVILEGES ON . TO root% IDENTIFIED BY 123.com WITH GRANT OPTION; 其次开启日志 -- 查看general…

自动化生成与更新 Changelog 文件

在软件开发中&#xff0c;保持 Changelog 文件的更新是一项至关重要的任务。 Changelog 文件记录了项目的每一个重要变更&#xff0c;包括新功能、修复的问题以及任何可能破坏现有功能的变更。对于维护者、贡献者和最终用户来说&#xff0c;这都是一个宝贵的资源。然而&#x…

Flutter为Android添加签名并打包

前言 我们需要将App进行数字签名才能发布到商店里。在这里就具体描述一下如果给App添加签名 为App签名 创建一个用户上传的秘钥库 如果你已经有一个秘钥库了&#xff0c;可以直接跳到下一步&#xff0c;如果没有则按照下面的指令创建一个 keytool 可能不在我们的系统路径中…

MySQL多版本并发控制MVCC实现原理

MVCC MVCC 是多版本并发控制方法&#xff0c;用来解决读和写之间的冲突&#xff0c;比如脏读、不可重复读问题&#xff0c;MVCC主要针对读操作做限制&#xff0c;保证每次读取到的数据都是本次读取之前的已经提交事务所修改的。 概述 当一个事务要对数据库中的数据进行selec…

嵌入式开发中学习C++的用处?

这个问题一直有同学在问&#xff0c;其实从我的角度是一定是需要学的&#xff0c;最直接的就是你面试大厂的嵌入式岗位或者相关岗位&#xff0c;最后一定会问c&#xff0c;而很多人是不会的&#xff0c;这就是最大的用处&#xff0c;至于从技术角度考量倒是其次&#xff0c;因为…

【初阶数据结构】详解二叉树 - 树和二叉树(三)(递归的魅力时刻)

文章目录 前言1. 二叉树链式结构的意义2. 手搓一棵二叉树3. 二叉树的遍历&#xff08;重要&#xff09;3.1 遍历的规则3.2 先序遍历3.3 中序遍历3.4 后序遍历3.5 遍历的代码实现3.5.1 先序遍历代码实现3.5.2 中序遍历代码实现3.5.3 后序遍历代码实现 4. 统计二叉树结点的个数5.…

微服务注册中⼼2

5.Nacos配置管理 Nacos除了可以做注册中⼼&#xff0c;同样可以做配置管理来使⽤ 5.1 统⼀配置管理 当微服务部署的实例越来越多&#xff0c;达到数⼗、数百时&#xff0c;逐个修改微服务配置就会让⼈抓狂&#xff0c;⽽且很容易出错。我们需要⼀种统⼀配置管理⽅案&#xf…

Java.反射

目录 1.获取class 的三种方式 2.利用反射获取构造方法 3.利用反射获取成员变量 4.利用反射获取成员方法 1.获取class 的三种方式 全类名怎么找? 全类名报名&#xff0b;类名 package MyReflect;public class Student {private String id;private String name;private int…

MySQL基础篇(黑马程序员2022-01-18)

1 MySQL数据库概述 1.1 MySQL数据库的下载,安装,启动停止 1.2 数据模型 (1)关系型数据库(RDBMS) 概念&#xff1a;建立在关系模型基础上&#xff0c;由多张相互连接的二维表组成的数据库。 特点&#xff1a; A. 使用表存储数据&#xff0c;格式统一&#xff0c;便于维护。…

十一、SOA(SOA的具体设计模式)

我们现在深入学习SOA的具体设计模式。SOA架构中的设计模式主要是指导服务如何设计、实现、部署和管理&#xff0c;确保服务的松耦合、高可用性、扩展性和复用性。SOA常见的设计模式可以分为以下几类&#xff1a; 1. 服务层次设计模式 1.1. 基础服务&#xff08;Fundamental S…

Centos中dnf和yum区别对比

dnf和yum是两种不同的包管理工具&#xff0c;它们各自具有独特的特点和优势&#xff0c;主要用于在Linux系统上安装、更新和卸载软件包。以下是dnf和yum之间的主要区别&#xff1a; 1. 依赖关系解决 dnf&#xff1a;dnf在处理依赖关系方面表现出更强的能力。它能够更高效地解…

计算机前沿技术-人工智能算法-大语言模型-最新研究进展-2024-09-25

计算机前沿技术-人工智能算法-大语言模型-最新研究进展-2024-09-25 1. PromSec: Prompt Optimization for Secure Generation of Functional Source Code with Large Language Models (LLMs) M Nazzal, I Khalil, A Khreishah, NH Phan - arXiv preprint arXiv:2409.12699, 2…

Python--操作列表

1.for循环 1.1 for循环的基本语法 for variable in iterable: # 执行循环体 # 这里可以是任何有效的Python代码块这里的variable是一个变量名&#xff0c;用于在每次循环迭代时临时存储iterable中的下一个元素。 iterable是一个可迭代对象&#xff0c;比如列表&#xff08;…

URI和URL的区别

1: 将 URI 转换为 URL import java.net.URI; import java.net.URL;public class UriToUrlExample {public static void main(String[] args) {// 创建一个 URI 对象URI uri = new URI("http://example.com/path/to/resource");// 将 URI 转换为 URLtry {URL url = u…

C语言中易混淆概念的关键字

最快的关键字---- register register&#xff1a; 这个关键字请求编译器尽可能的将变量存在 CPU 内部寄存器中而不是通过内 存寻址访问以提高效率。注意是尽可能&#xff0c;不是绝对。你想想&#xff0c;一个 CPU 的寄存器也就那么 几个或几十个&#xff0c;你要是定义了很多很…

Python_list去重复值remove_duplicates

在 Python 中可以使用多种方法去除列表中的重复元素。 方法一&#xff1a;使用集合&#xff08;set&#xff09; 集合是无序的、不包含重复元素的数据结构。可以先将列表转换为集合&#xff0c;然后再转换回列表。 my_list [1, 2, 3, 2, 4, 1, 5] unique_list list(set(my…