快速了解JavaScript

〖晴天〗

已于 2022-03-18 08:38:27 修改

阅读量1k

点赞数 1

文章标签： javascript 开发语言 ecmascript

于 2022-03-16 23:45:36 首次发布

本文链接：https://blog.csdn.net/qingti_/article/details/123534562

版权

JavaScript: 负责给页面添加动态效果

一、语言特点(五种)

1. 弱类型语言 (变量类型定义模糊,只区分作用域)

例子:

let s = 'Jerry'; let number = 4; (var定义全局变量,let作用域与定义位置有关)

2. 属于脚本语言,不用编译直接执行

3. 只有引用数据类型, 基于面向对象

4. 安全性强 (只能访问浏览器内部数据)

5. 交互性强 (嵌入在HTML页面中,运行在客户端,直接参与交互)

二、HTML页面中添加JavaScript (三种)

1. 外部导入

注: 外部导入中<script src="">这段不允许插入代码</script>

在HTML页面中, 推荐在body中, 最后处导入(相当于磁盘引入)

磁盘引入需要单独创建JavaScript File文件----(JS代码在文件中)

外部磁盘引入
<script src="本地JS文件.js"></script>
</body>

区别于磁盘 JS代码引入, scr 中也可以引入云样式 (相当于网络引入)

外部网络引入
<script src="http://xxxxxx" ></script>
</body>

2. 内部引入

HTML中任意位置添加script标签-------(JS代码在标签中)

推荐写在外部引入与 </body> 之中

<script src=""></script> 外部引入

<script>
    内部引入
</script>

</body>

3. 内联引入

标签事件属性中添加JS代码, 当事件触发时执行---(JS代码在标签属性中)

<body>
<input type="button" value="按键" onclick="alert('内联引入成功')">
</body>

三、基本用法

1. 变量

共有 4种类型变量(typeof 变量---查看类型)

但变量定义必须用 let 或 var

number: 数值类型 string(小写s) 字符串(单双引号&英文)

boolean: 布尔类型 undefined: 未定义(变量声明&不赋值)

<body>
<script>
  /*F12 浏览器产看控制台输出 string类型*/
  let e = 'sss';
  console.log(typeof e)
</script>
</body>
</html>

2. 运算符

与 Java 基本一样 .......

需要注意的是计算时:

1. JavaScript 运算除法时会根据结果转换 ? (整数 || 小数) 因为 number 类型包含整型 & 浮点型

2. == 运算时, 两边会统一类型在比较值 , 例: "1" == 1 >> true

===(特有) 运算时,先比较类型,再比较值 ,例: "1"===1 >>false

3. 方法

有 3 种 声明方式

1. function 方法名(参数列表){方法体}

2. let 方法名 = function(参数列表){方法体}

3. let 方法名 = function("可变长参数","方法体")

可变长参数相当于数组 ,数组中存有参数 , Java中定义在参数列表最后一位, JavaScript声明方法中定义在第一位

//1
function(let number){
    console.log(number);
};
//2
let f1 = function(let number){
    console.log(number);
}
//3
let f2 = function("let number","console.log(number)")

4. 对象

1. 浏览器对象模型 BOM (Browser Object Model)

包含 浏览器相关的内容 和 window对象(属性和方法又称为全局属性和全局方法)

全局属性和方法访问时可以省略对象(window) 如 :

//作用相同
window.parseInt()
parseInt()

window.alert()
alert()

2. 文档对象模型 DOM (Document Object Model)

包含 和页面相关的操作 和 HTML中的标签

功能: 可以修改页面数据结构

如: 通过按钮标签属性 οnclick="方法名" 触发 JS中的方法

<body>
<div id="d1">没有改掉</div>
<input type="text">
<input type="button" value="按钮" onclick="f()">

<script>
    function f() {
        //通过标签id获取div对象
        let d = document.getElementById("d1");
        //获取和修改元素的文本内容
        d.innerText = "内容被改掉了!";
    }
</script>
</body>

JavaScript 中的对象详解

http://t.csdn.cn/BUyrdhttp://t.csdn.cn/BUyrd