JS 实例学习笔记

Cpt_Jie
157 阅读5分钟

1. 用JS输出文本

HTML 输出流中使用 document.write，相当于添加在原有html代码中添加一串html代码。而如果在文档加载后使用（如使用函数），会覆盖整个文档。

<script>
  document.write(Date());  //可以在页面中输出当前时间
</script>

关于Date（）函数的调用,构造函数有四种基本形式，详细见MDN。

如果没有提供参数，如下，那么就创建对象表示实例化的日期和时间

<script>
 var b = new Date();
 document.write(b);
</script>

2. 用JS改变HTML元素

<p id="demo">我的第一个段落。</p>
<script>
  document.getElementById("demo").innerHTML="段落已修改。";
</script>

document.getElementById("demo")通过ID来查找HTML元素，innerHTML="xxxx"是用来修改元素的HTML内容

3. 一个外部的JS

外部脚本不能包含 script 标签，直接写JS代码

<p id="demo">一个段落。</p>
<button type="button" onclick="myFunction()">点击这里</button>
<p>
   <b>注释：</b>
   myFunction 保存在名为 "myScript.js" 的外部文件中。
 </p>
<script src="myScript.js"></script>

4. button

alert() 函数，可以弹出提示框,window.alert()

<button type="button" onclick="alert('欢迎!')">点我!</button>

5. img

match() 用来判断是否有相应的字符

<script> function changeImage() { 
  element=document.getElementById('myimage') 
  if (element.src.match("bulbon")) { 
      element.src="/images/pic_bulboff.gif"; 
  } 
  else { 
      element.src="/images/pic_bulbon.gif"; 
  } 
} 
</script> 
<img loading="lazy" id="myimage" onclick="changeImage()" 
 src="/images/pic_bulboff.gif" 
 width="100" height="180">

6. 验证输入

if isNaN(x) { 
   alert("不是数字"); 
 }

7. 强调加黑

<strong>加黑</strong>

8. 对代码进行折行

document.write("你好 \ 世界!");

9. JS变量

必须以字母/$/_ 开头 后两者不建议

let carname="Volvo";\
let carname;

//用new来创建一个新的对象
var people = new Object();

重新声明，变量的值不会消失，依旧是Volvo

let允许你声明一个作用域被限制在块级中的变量、语句或者表达式。在Function中局部变量推荐使用let变量，避免变量名冲突。

二者之间最主要的区别在于var声明的变量的作用域是整个封闭函数

JS的变量均为对象，当你声明一个变量的时候，就创建了一个对象

可以用typeof来查看数据类型，但是就算是数组，用typeof 返回的数据类型还是对象

var cars=new Array();
cars[0]="Saab";
cars[1]="Volvo";
cars[2]="BMW";
document.write(typeof cars); // object

如果要判断该对象是不是数组，可以使用一下两种方法

  1. 使用 isArray 方法
var cars=new Array();
cars[0]="Saab";
cars[1]="Volvo";
cars[2]="BMW";
// 判断是否支持该方法
if (Array.isArray) {
    if(Array.isArray(cars)) {
        document.write("该对象是一个数组。") ;
    }
}
  1. 使用 instanceof 操作符
var cars=new Array();
cars[0]="Saab";
cars[1]="Volvo";
cars[2]="BMW";

if (cars instanceof Array) {
    document.write("该对象是一个数组。") ;
}

在 JavaScript 中, null 用于对象, undefined 用于变量，属性和方法。

对象只有被定义才有可能为 null，否则为 undefined

如果变量在函数内没有声明（没有使用 var 关键字），该变量为全局变量。

10 . toString()

可以把数值转换为字符串

<script>
var a=100;
var c=a.toString();
alert(typeof(c));      //typeof()方法验证转换后的数据类型
</script>

如果转换的内容为空，会报错，加 +"" 强制转换

var num = 1;
console.log(num.toString());//1
var str =null;
console.log(str.toString());//Cannot read properties of null (reading 'toString')
console.log(str+"");// null

11. parseInt() parseFloat()

可以把字符串转为数字

要把任何值转换为布尔型数据，在值的前面增加两个 !! 感叹号即可，!!0 为 False，其余的均为 True。

<script>
var str="123.30";
var a=parseInt(str);    //parseInt()方法把字符串转换为整数，parseFloat()方法把字符串转换为浮点数
var b=parseFloat(str);
</script>

2022/8/17 01点29分

12. 常见的HTML事件

  • onchange HTML元素改变
  • onclick 用户点击HTML元素
  • onmouseover 鼠标指针移动到指定的元素上发生
  • onmouseout 用户从一个HTML元素上移开鼠标时发生
  • onkeydowm 用户按下键盘按键
  • onload 浏览器已完成页面的加载

13. 字符串

通常， JavaScript 字符串是原始值，可以使用字符创建： var firstName = "John"

但我们也可以使用 new 关键字将字符串定义为一个对象： var firstName = new String("John")

  • charAt() 返回指定索引位置的字符
  • concat() 连接两个或者多个字符串，返回连接后的字符串
  • indexOf() 返回字符串中检索指定字符第一次出现的位置
  • toUpperCase() 把字符串转换为大写
  • trim() 移除字符串首尾空白

14，typeof()

可以使用typeof来检测变量的数据类型，在JS中数组是一种特殊的数据类型，object null和undefined 值相同，类型不同，null是object ， undefined是undefined

15. constructor

返回JS变量的构造函数

16. String

全局方法String()可以把数字转为字符串

String(x)
String(123)
String(1+2)

17. Number

全局方法Number（）可以将字符串转为数字

18. let 和 const

  1. let 声明的变量只在 let 命令所在的代码块  {}  内有效，在  {}  之外不能访问。
  2.  var 关键字声明的全局作用域变量属于 window 对象:
  3. let 关键字声明的全局作用域变量不属于 window 对象:
let carName = "Volvo"; // 不能使用 window.carName 访问变量
  1. 在相同的作用域或块级作用域中，不能使用 let 关键字来重置 let 关键字声明的变量:
  2. let 关键字定义的变量则不可以在使用后声明，也就是变量需要先声明再使用。
  3. const 用于声明一个或多个常量，声明时必须进行初始化，且初始化后值不可再修改：
  4. const 和 let 都是块级作用域

20. JSON

  • JSON 英文全称 JavaScript Object Notation
  • JSON 是一种轻量级的数据交换格式。
  • JSON是独立的语言  *****
  • JSON 易于理解
{"sites":[ 
    {"name":"Runoob", "url":"www.runoob.com"}, 
    {"name":"Google", "url":"www.google.com"}, 
    {"name":"Taobao", "url":"www.taobao.com"} 
]}

使用 JavaScript 内置函数 JSON.parse() 将字符串转换为 JavaScript 对象:

var obj = JSON.parse(text);

JSON.stringify() 将JS值转换为字符串

JSON.stringify(value[, replacer[, space]])

  • value:

    必需， 要转换的 JavaScript 值（通常为对象或数组）。

    • replacer:

    可选。用于转换结果的函数或数组。

    如果 replacer 为函数，则 JSON.stringify 将调用该函数，并传入每个成员的键和值。使用返回值而不是原始值。如果此函数返回 undefined，则排除成员。根对象的键是一个空字符串：""。

    如果 replacer 是一个数组，则仅转换该数组中具有键值的成员。成员的转换顺序与键在数组中的顺序一样。

  • space:

    可选，文本添加缩进、空格和换行符，如果 space 是一个数字，则返回值文本在每个级别缩进指定数目的空格，如果 space 大于 10，则文本缩进 10 个空格。space 也可以使用非数字，如：\t。

JSON 是 JS 对象的字符串表示法。它使用文本表示一个 JS 对象的信息，（JSON）本质是一个字符串。

说句不严谨的话：JSON.parse() 就是字符串转 js 对象， JSON.stringify()就是 js 对象转字符串，它们前提是要 json 格式才有意义。

在web页面中全局变量属于 window 对象。

全局变量可应用于页面上的所有脚本。

avatar
文章
阅读
粉丝