文章目录javascript(基础语法)输入输出变量的使用数组函数对象javascript(webapi)javascript(基础语法)javascript的书写形式:1.行内式:直接嵌入到html元素内部inputtypebuttonvalue点我一下onclickalert(haha)注意JS 中字符串常量可以使用单引号表示也可以 使用双引号表示—HTML 中推荐使用双引号JS 中推荐使用单引号.2.内嵌式:写到html的script标签里面scriptalert(haha);/script3.外部式:写到单独的js文件里面–通过script标签的src属性指定外部.js文件路径如hello.js浏览器会自动加载并执行该文件中的代码–注意:当script标签设置了src属性时标签内部不能再写 JavaScript 代码即使写了也不会被执行html文件中:scriptsrchello.js/scripthello.js中: alert(hehe);javascript中注释的方法://和/**/输入输出prompt:// 输入: prompt弹出输入框prompt(请输入您的姓名:);alert:// 输出: alert弹出警示对话框alert(hello);alert(您的姓名是name\n您的年龄是age\n您的分数是score\n);console.log:// 向控制台输出日志console.log(这是一条日志);–但是这个操作可以通过在vscode中输入log然后再按tab快速输入console.log–这个日志信息在浏览器的开发者工具里面的console标签页才能看到结果{: id20260510082658-f1p46ga updated20260510082703}变量的使用创建变量:varnamezhangsan;varage20;varageprompt(请输入年龄);–字符串类型的初始化值需要用单引号或双引号包裹数字类型的初始化值可直接赋值无需引号–在JS中如果定义一个变量不使用let/var此时这跟变量就会变成一个全局变量使用变量:console.log(age);// 读取变量 age 的值然后把这个值作为日志打印出来age30;// 修改变量内容js中变量的类型是动态类型!–JS 的变量类型是程序运行过程中才确定的–随着程序运行变量的类型可能会发生改变js的基本数据类型:number: 数字类型不区分整数和小数统一用 64 位浮点数存储–可以用n进制的方式表示数字其中:Infinity: 无穷大, 大于任何数字. 表示数字已经超过了 JS 能表示的范围.-Infinity: 负无穷大, 小于任何数字. 表示数字已经超过了 JS 能表示的范围.NaN: 表示当前的结果不是一个数字.eg:onsole.log(hehe-10);// 得到 NaN字符串与数字相减无法转为有效数字,但是hehe10的结果是hehe10!!!--引申:可以使用 isNaN 判断非数字isNaN(10);会返回falseboolean: 布尔类型包含true真和false假两个值string: 字符串类型用于表示文本数据字符串字面量需要使用引号引起来单引号、双引号均可–如果字符串中本身包含引号直接书写会导致语法错误,这时需要用到转义字符varmsgMy name is \zhangsan\转义字符有:\n, \\, \, \, \t字符串的拼接用的是(可以字符串和数字进行拼接)求字符串长度使用String的length属性即可返回值为字符数量(不是字节!)varb哈哈;b.length;//2undefined: 只有唯一值undefined表示变量已声明但未赋值的状态如果一个变量没有被初始化过结果就是undefined属于undefined类型undefined和字符串进行相加时会执行字符串拼接操作vara;console.log(a10);// 输出undefined10undefined和数字进行相加时结果为NaN非数字console.log(a10);// 输出NaNnull: 只有唯一值null表示“空值”或“不存在的对象”varbnull;console.log(b10);// 输出10console.log(b10);// 输出null10跟undefined的区别:null 表示当前的值为空;undefined 表示当前的变量未定义相关运算符的话跟cpp差不多就不介绍了比如-*/% 还有位运算那些但是js多了一些:严格等于(只要求值相等还要求类型也一样才行)!严格不等于条件语句:if语句,三元表达式,switch循环语句:while,for循环以及continue和break–以上这些都跟cpp的用法一致数组注意:js的数组不要求元素是相同类型创建数组:var arr new Array();或者var arr [];或var arr2 [1, 2, haha, false];访问元素:vararr[小猪佩奇,小猪乔治,小羊苏西];console.log(arr);//输出全部内容console.log(arr[0]);// 访问第1个元素小猪佩奇console.log(arr[-1]);//如果下标超出数组的有效范围包括负数下标读取元素的结果为 undefinedarr小猫凯迪;//直接给数组变量赋值会导致原数组丢失变量类型会被改变新增数组元素:1.通过修改 length 新增元素:新增的元素默认值为undefinedvararr[9,5,2,7];arr.length6;// 将数组长度从4改为6新增2个元素2.通过下标新增元素:如果赋值的下标超出数组当前长度会在指定位置插入新元素中间未赋值的下标会被填充为undefinedvararr[];arr[2]10;3.通过push进行追加元素vararr[9,5,2,7,3,6,8];varnewArr[];newArr.push(arr[1]);删除数组中的元素:vararr[9,5,2,7];// 第一个参数表示从下标为 2 的位置开始删除第二个参数表示要删除的元素个数是 1 个arr.splice(2,1);函数js的函数跟cpp的其实差不多但是js的函数可以用作变量varaddfunction(){varsum0;for(vari0;iarguments.length;i){sumarguments[i];}returnsum;}console.log(add(10,20));// 输出30对象注意:javascript里面没有类多态不区分属性和方法没有private/public等访问控制机制,没有继承创建对象:1.用字面量进行创建对象:// 创建空对象vara{};// 创建包含属性和方法的对象varstudent{name:蔡徐坤,height:175,weight:170,sayHello:function(){console.log(hello);}};2.使用new object来创建对象varstudentnewObject();// 动态添加属性支持 . 语法student.name蔡徐坤;student.height175;// 动态添加属性也支持 [] 语法student[weight]170;// 动态添加方法student.sayHellofunction(){console.log(hello);}3.使用构造函数创建对象:varmimi{name:咪咪,type:中华田园喵,miao:function(){console.log(喵);}};functionCat(name,type,sound){// this 指向当前正在创建的实例this.namename;this.typetype;this.miaofunction(){console.log(sound);};}// 必须用 new 调用创建实例varmiminewCat(咪咪,中华田园喵,喵);console.log(mimi.name);// 输出咪咪mimi.miao();// 输出喵使用对象的属性和方法:// 1. 使用 . 成员访问运算符来访问属性console.log(student.name);// 2. 使用 [] 访问属性此时属性需要加上引号console.log(student[height]);// 3. 调用方法student.sayHello();javascript(webapi)Web API | MDN里面的webapi很全JS 分成三个大的部分ECMAScript: 基础语法部分 DOM API: 操作页面结构 BOM API: 操作浏览器WebAPI 就包含了 DOM BOMDOM树的结构:文档: 一个页面就是一个文档, 使用 document 表示.元素: 页面中所有的标签都称为 元素. 使用 element 表示.节点: 网页中所有的内容都可以称为 节点(标签节点, 注释节点, 文本节点, 属性节点等). 使用 node 表示.获取元素:querySelector:HTML5 新增的 DOM 方法IE9 及以上版本浏览器支持–若需要获取所有匹配的元素列表使用配套方法 querySelectorAll(),这俩就返回值不同varelementdocument.querySelector(selectors);selectors必填类型为DOM字符串必须是有效的CSS选择器 如类选择器.box、ID选择器#id、标签选择器div、组合选择器h3 span input等否则会抛出SYNTAX_ERR语法错误。 返回值文档中与选择器匹配的第一个元素对象如果没有匹配项则返回null。--querySelectorAll返回的是所有符合的元素操作元素:获取/修改元素内容:innerText:只处理纯文本,不解析HTML标签把所有标签当作普通文字// 读操作varrenderedTextHTMLElement.innerText;// 写操作HTMLElement.innerTextstring;innerHTML:处理完整的HTML结构// 读操作获取元素内部的HTML内容包含标签和文本varcontentelement.innerHTML;// 写操作设置元素内部的HTML内容浏览器会解析HTML标签并渲染element.innerHTMLhtmlString;获取/修改元素属性:img srcrose.jpgalt这是一朵花title玫瑰花scriptvarimgdocument.querySelector(img);console.log(img.src);// 获取图片的src属性值console.log(img.title);// 获取图片的title属性值console.log(img.alt);// 获取图片的alt属性值/scriptimg srcrose.jpgalt这是一朵花title玫瑰花scriptvarimgdocument.querySelector(img);// 给图片绑定点击事件实现图片切换img.onclickfunction(){if(img.src.lastIndexOf(rose.jpg)!-1){// 当前是rose.jpg时切换为rose2.pngimg.src./rose2.png;}else{// 否则切换回rose.jpgimg.src./rose.jpg;}}/script获取/修改表单元素属性:表单主要是input标签的以下属性都可以通过 DOM 进行读写修改valueinput 的内容值如文本框、按钮的显示文本disabled是否禁用表单元素布尔值true为禁用false为启用checked复选框 / 单选框是否被选中布尔值selected下拉框option是否被选中布尔值typeinput 的类型如text、password、button、file等input typebuttonvalue播放scriptvarbtndocument.querySelector(input);btn.onclickfunction(){if(btn.value播放){btn.value暂停;}else{btn.value播放;}}/script获取/修改样式属性:–所有 CSS 中定义的元素样式属性都可以通过 JavaScript 进行读写修改–注意:CSS属性名要转为驼峰去掉连字符后面单词首字母大写eg:background-color → backgroundColor行内样式操作:// 方式1单独修改单个样式属性element.style.[属性名][属性值];// 方式2批量设置多个样式属性element.style.cssText[属性名属性值];类名样式操作:--修改元素的CSS类名 element.className[CSS类名];操作节点:新增节点:先创建元素节点再把元素节点插入到DOM树中创建元素节点:var element document.createElement(tagName[, options]);把元素节点插入到DOM树有俩种方法:1.将节点插入到指定节点的最后一个孩子之后element.appendChild(aChild)2.将节点插入到指定节点之前:var insertedNode parentNode.insertBefore(newNode, referenceNode);–注意:如果对同一个节点调用两次插入方法比如appendChild它只会出现在「最后一次」插入的位置前面的插入会自动失效删除节点:oldChild element.removeChild(child);关于事件:用户对页面的操作点击、选择、修改等会在浏览器中产生一个个「事件」JS 获取这些事件后就能执行对应的交互逻辑。对于键盘事件的操作也要会:比如onkeydownonkeypressonkeyup可以去w3school.com里面去查具体的用法