网页设计与网站建设的概述,seo搜索排名影响因素主要有,做网站 视频,网站策划怎么做内容js 是基于事件驱动的异步单线程的脚本编程语言#xff0c;它的全称是 JavaScript#xff0c;虽然里边有个 java 字样#xff0c;但是和 java 编程语言一点关系都没有。它是一种脚本语言#xff0c;基于解释器执行#xff0c;它是边解释便执行的语言。浏览器控制台 Console…js 是基于事件驱动的异步单线程的脚本编程语言它的全称是 JavaScript虽然里边有个 java 字样但是和 java 编程语言一点关系都没有。它是一种脚本语言基于解释器执行它是边解释便执行的语言。浏览器控制台 Console 是一个浏览器内置的 JS 代码解释器。所以我们可以通过这个解释器来查看我们要展示的内容。调用语句为Console.log() 。一、js 中的常量、变量和数据类型变量声明 (let) 使用 let 声明一个变量接下来的代码中不能再使用 let 对这个变量重复声明但是这个变量在接下来的使用过程中值可以重新更新。例如我们声明一个变量 namelet name; (此时我们可以在浏览器的 Console 中看到它)console.log(name;)(此时我们可以看到的是它的默认值是 undefind)此时你在对 name 进行声明let name;(再次声明)可以看到的是它会报错说是已经声明不过你可以对 name 进行赋值更新这是被允许的。name ‘an’;console.log(name);2.常量特殊的变量(只可以读取)常量声明后既不能删除也不能更新也不能二次声明。所以常量进行声明的话必须进行初始化,而变量是可以将声明和初始化分开完成的。声明常量所用到的是 const例如我们声明一个常量 age18。const age 18;这时候一个常量就声明完成了此时你既不可以对它进行赋值更新也不能二次声明。const age 20;可以看到的是二次声明之后它会进行报错说是已经定义了3.数据类型3.1 原始类型(数值,字符串,布尔,undefined,null,Symbol)3.1.1 数值数值类型数据可以是整数也可以是小数。定义一个数值类型的数据let age 18;3.1.2 字符串定义一个字符串类型数据let str ‘haha’;字符串类型的数据是可以拼接的使用 ‘’ 可以将两个字符串拼接起来并且它和 python 中的不一样python 中的拼接必须是数据类型相同的而 js 中则没有限制。它可以是数值和字符串的拼接。3.1.3 布尔类型布尔类型就只有 true 和 false 两个值定义一个布尔类型的数据let isOpen true;3.1.4 undefined 类型undefined 类型是所有未初始化变量的默认值例如说你定义一个变量它并没有初始化这时候这个变量就是一个 undefined 类型的数据3.1.5 null(空对象)定义一个 null 型数据let null_name null;3.1.6 符号(创建对象属性的唯一标识)符号数据类型的创建是需要用到 Symbol()let sym Symbol()原始类型的数据所采用的都是“值传递”举个例子来说明。let a 100;let b a;console.log(b);此时在浏览器中可以看到的是 b 100如果说将 a 的值改变那么此时 b 的值会发生变化吗我们来测验一下。a 200;console.log(b);在浏览器中查看 b 的值可以看到的是b 的值并没有发生变化在对 b 进行赋值的时候仅仅是将 a 的值传递给了它所以当 a 的值发生变化时b 的值并没有任何的变化。3.2 引用类型(对象数组函数)3.2.1 对象对象有六种创建方式这里只提一种对象字面量作为示例。创建一个对象字面量let people {// 创建一个对象的字面量的方式和其他面向对象语言区创建一个类特相似// 对象中的属性无序的键值对id: 1,name: “an”,old: 12,“my email”: “jsemail.com”,// 对象中的方法函数getName(){// this指当前对象,也就是类成员引用自身属性的时候的调用方式(当前上下文)returnMy name is:this.name;},};对象访问的时候特别像实例化对象的访问方法console.log(people.id);// 当属性名是由 圈起来的时候,它的引用方式如下console.log(people[“my email”]);console.log(people.getName());3.2.2 数组js 中的数组和 python 中的列表一样和 c 语言不一样它并不是说只能存同一类型的数据它可以同时存放不同类型的数据。比如说我要定义一个数组它里边的数据既有数值也有字符串。let arr [25, “an”, 66];这样在 js 中定义一个数组是完全没有问题的。js 中的数组类型的数据访问是使用索引从 0 开始的。3.2.3 函数函数可以是 function 函数名 () {函数内容}组成也可以简化写成函数名 () {函数内容} 组成有意思的是当 const 定义的是一个引用类型的数据时,例如说数组它只要是不整体进行更新,就不会报错,也会完成更新操作例如我们定义了一个数组常量然后对这个数组常量中的某一项进行修改它并不会报错而当我们整体对它进行修改时就会报错。引用类型是“引用传递”的引用类型的传递对原数据修改后引用后的数据也会随之变化。例如const list [1, 2, 3];// 当 const 定义的是一个引用类型的数据时,例如说数组// 它只要是不整体进行更新,就不会报错,也会完成更新操作list[1] 22;// 可以看到的是可以更新的console.log(list);// 整体更新时会报错,例如:// list [4, 5, 6];const li list;list[1] “haha”;// 可以看到的是,当 list 中的值变了之后,li 中的值也会随之变化console.log(li);// 引用传递就是传递内存地址,可以理解为指针二、html 文档引入 js 的方式html 文档引入 js 一共有三种方式直接写到 html 事件属性中事件属性对事件定义它的回调方法它的值是 js 代码事件属性 “on” 事件名称 例如点击事件onclick例如我们创建一个按钮事件 button\οnclickconsole.log(this.innerHTML);this.style.background yellow按钮 1\这样设置是完全可以的不过如果一旦事件变得多起来这一行代码就会看起来非常的臃肿而且不利于代码的复用。2.js 代码量少,且仅在当前 html 页面使用,可以直接写在 script 标签中我们继续创建一个按钮事件 button\按钮 2 \const btns document.querySelector(“.botton4”);btns.addEventListener(“click”, show_s);function show_s() {console.log(btns.innerHTML);btns.style.background “green”;}3.外部脚本将 js代码 保存为一个单独的 js 文件再通过 script 标签引入到当前的 html 文档中\按钮 3 \demo2.js 代码constbtndocument.querySelector(.botton3);btn.addEventListener(click,show);functionshow(){console.log(btn.innerHTML);btn.style.backgroundblue;}
