JavaScript

最新推荐文章于 2024-06-10 21:57:03 发布

岂可秀

最新推荐文章于 2024-06-10 21:57:03 发布

阅读量1.5k

点赞数 19

文章标签： javascript

本文链接：https://blog.csdn.net/qq_49359895/article/details/136677338

版权

1 JS介绍

JavaScript（简称JS）是一门跨平台、面向对象的脚本语言。是用来控制网页行为的，它能使网页可交互。
JavaScript和Java是完全不同的语言，不论是概念还是设计。但是基础语法类似（变量的定义、运算符、if条件判断等）。
JavaScript再1995年由Brendan Eich发明，并于1997年成为ECMA标准。
- ECMA国际制定了标准化的脚本程序设计语言ECMAScript，这种语言得到广泛应用。JavaScript是遵守ECMAScript的标准的。
ECMAScript6（ES6）是最近的JavaScrpt版本

2 JS引入方式

内部脚本：将JS代码定义在HTML页面中
- JavaScript代码必须位于 // 正确
  3 JS基础语法
  
  书写语法
  - 区分大小写：与Java一样，变量名、函数名以及其他一切东西都是区分大小写的
  - 每行结尾u的分号可有可无（建议加上）
  - 注释
```
// 单行注释

/*
多行注释
*/
```
  - 大括号表示代码块
```
if(count == 3) {
	alert(count);
}
```
  - 输出语句
    - 使用 window.alert() 写入警告框
    - 使用 document.write() 写入HTML输出
    - 使用 console.log() 写入浏览器控制台
```
<script>
	window.alert("Hello JS");
	document.write("Hello JS");
	console.log("Hello JS");
</script>
```
  变量
  - JavaScript 中用var关键字（variable的缩写）来声明变量，有以下特点：
    - 作用域大（全局变量）
    - 可以重复定义
  - JavaScript是一门弱类型语言，变量可以存放不同类型的值
  - 变量名遵循以下规则：
    - 组成字符可以是任何字母、数字、下划线（_）或美元符号（$）
    - 数字不能开头
    - 建议使用驼峰命名
  - 注意事项：
    - ECMAScript 6 新增了 let 关键字来定义变量。它的用法类似于var，但是所声明的变量只在let关键字所在的代码块内有效（局部变量），且不允许重复声明。
    - ECMAScript 6 新增了 const 关键字，用来声明一个只读的常量。一旦声明，常量的值就不能改变。
  数据类型
  - JavaScript中分为：原始类型 和 引用类型
  - 原始类型：
    - number：数字（整数、小数、NaN）
    - string：字符串，单双引号皆可
    - boolean：布尔
    - null：对象为空
    - undefined：当声明的变量未初始化，该变量的默认值为undefined
  - 使用typeof运算符可以获取数据类型
```
var a = 20;
alert(typeof a);
```
  运算符
  - 算术运算符：+ - * / % ++ –
  - 赋值运算符：= += -= *= /= %=
  - 比较运算符：> < >= <= != == ===
    - == 与 ===：== 会进行类型转换再对比，=== 不会进行类型转换，类型不同直接返回false
```
var a = 10;
alert(a == "10"); //true
alert(a === "10"); //false
alert(a === 10); //true
```
    - 补充：类型转换：
      - 字符串类型转为数字：将字符串值转为数字。如果字面值不是数字，则转为NaN。
      - 其他类型转为boolean：①number：0 和 NaN为false，其他转为true；②string：空字符串转为false，其他均转为true；③null 和 undefined：均转为false。
  - 逻辑运算符：&& || !
  - 三元运算符：条件表达式？ true_value : false_value
  流程控制语句
  - if … else if … else …
  - switch
  - for
  - while
  - do … while
  4 JS函数
  - 介绍：函数（方法）是被设计为执行任务的代码块
  - 定义：JS函数通过 function 关键字进行定义，语法为：
```
function functionName(参数1， 参数2 ...){
	// 要执行的代码
}
function add(a, b){
	return a + b;
}
```
  - 注意：
    - 形式参数不需要类型（因为JS是弱类型语言）
    - 返回值也不需要定义类型，可以再函数内部直接使用return返回即可
  - 调用：函数名称（实参列表）
```
var result = add(10, 20);
alert(result);
```
    - JS中函数调用可以传递任意个数的参数
  - 定义方式二：
```
var functionName = function(参数1， 参数2){
	// 要执行的代码
}
var add = function add(a, b){
	return a + b;
}
```
  5 JS对象
  
  基础对象Array
  - JS中Array对象用于定义数组
  - 定义
```
var 变量名 = new Array(元素列表);
var arr = new Array(1, 2, 3, 4);

var 变量名 = [元素列表];
var arr[10] = [1, 2, 3, 4];
```
  - 访问
```
arr[索引] = 值;
arr[10] = "hello";
```
  - 特点：JS中的数组相当于Java中的集合，数组的长度可变，并且JS是弱类型，可以存储任意类型的数据。
  - 属性：
  - 方法：
  - 箭头函数（ES6）：是用来简化函数定义语法的。具体形式为：(…) => {…}，如果需要给箭头函数起名字：var xxx = (…) => {…}
  基础对象string
  - String字符串对象的(…) => {…}有两种：
```
// 方式1
var 变量名 = new String("...");
var str = new String("Hello String");
// 方式2
var 变量名 = "...";
var str = "Hello String";
var str = 'Hello String';
```
  - 属性
  - 方法
  基础对象JSON
  - JS自定义对象
    - 定义格式：
```
var 对象名 = {
	属性1: 属性值1,
	属性2: 属性值2,
	属性3: 属性值3,
	函数名称：function(形参列表){}
};
var user = {
	name: "Tom",
	age: 20,
	gender: "male",
	eat: function(){
		alert("用膳~");
	}
	// 或者
	eat(){
		alert("用膳~");
	}	
};
```
    - 调用格式：
```
对象名.属性名;
console.log(user.name);
对象名.函数名;
user.eat();
```
  - JSON介绍
    - 概念：JavaScript Object Notation，JavaScript对象标记法
    - JSON是通过JavaScript对象标记法书写的文本
    - 由于其语法简单，层次结构鲜明，多用于数据载体，在网络中进行数据传输。
```
// JSON示例
{
	"name": "Tom",
	"age": 20,
	"gender": "male"
}
```
  - JSON基础语法
  - 定义：
```
// JSON字符串
var 变量名 = '{"key1": value1, "key2": value2}';
```
  - value的数据类型为：①数字（整数或浮点数）②字符串（双引号）③逻辑值（true或false）④数组（在方括号中）⑤对象（在花括号中）⑥null
  - JSON字符串转为JS对象
```
var jsObject = JSON.parse(userStr);
```
  - JS对象转为JSON字符串
```
var jsonStr = JSON.stringify(jsObject);
```
  浏览器对象模型BOM
  - 概念：Browser Object Model 浏览器对象模型，允许JavaScript与浏览器对话，JavaScript将浏览器的各个组成部分封装成对象。
  - 组成
    - Window：浏览器窗口对象
    - Navigator：浏览器对象
    - Screen：屏幕对象
    - History：历史记录对象
    - Location：地址栏对象
  - Window
    - 介绍：浏览器窗口对象
    - 获取：直接使用window，其中window.可以省略。
```
window.alert("Hello Window");
alert("Hello Window")
```
    - 属性：
      - history：对History对象的只读引用
      - location：用于窗口或框架的Location对象
      - navigator：对Navigator对象的只读引用
    - 方法：
      - alert()：显示带有一段消息和一个确认按钮的警告框
      - confirm()：显示带有一段消息以及确认按钮和取消的对话框
      - setInterval()：按照指定的周期（以毫秒计）来调用或计算表达式
      - setTimeout()：在指定的毫秒数后调用函数或计算表达式
  - Location
    - 介绍：地址栏对象
    - 获取：使用window.location获取，其中window.可以省略
```
window.location.属性;
location.属性;
```
    - 属性：
      - href：设置或返回完整的URL
```
location.href = "https://www.itcast.cn";
```
  文档对象模型DOM
  - 概念：Document Object Model 文档对象模型。
  - 将标记语言的各个组成部分封装为对应的JS对象：
    - Document：整个文档对象
    - Element：元素对象
    - Attribute：属性对象
    - Text：文本对象
    - Comment：注释对象
  - JS 通过 DOM 就能够对 HTML 进行操作：
    - 改变 HTML 元素内容
    - 改变 HTML 元素的样式（CSS）
    - 对 HTML DOM 事件做出反应
    - 添加和删除 HTML 元素
  - DOM是 W3C（万维网联盟）的标准，定义了访问 HTML 和 XML 文档的标准，分为3个不同的部分：
    - Core DOM：所有文档的标准模型
      - Document：整个文档对象
      - Element：元素对象
      - Attribute：属性对象
      - Text：文本对象
      - Comment：注释对象
    - XML DOM：XML文档的标准模型
    - HTML DOM：HTML文档的标准模型
      - Image：<img>
      - Button：<input typr=‘button’>
  - HTML 中的 Element 对象可以通过 Document 对象获取，而 Document 对象是通过 window 对象获取的。
  - Document 对象中提供了以下获取 Element 元素对象的函数：
    - 根据id属性值获取，返回单个Element对象
```
var h1 = document.getElementById('h1');
```
    - 根据标签名获取，返回Element对象数组
```
var divs = document.getElementsByTagName('div');
```
    - 根据name属性值获取，返回Element对象数组
```
var hobbys = document.getElementsByName('hobby');
```
    - 根据class属性值获取，返回Element对象数组
```
var clss = document.getElementsByClassName('cls');
```
  - 获取 Element 元素对象后，查询参考手册来查找对应的属性和方法。
  6 JS事件监听
  - 事件：HTML事件是发生在HTML元素上的“事情”。比如：
    - 按钮被点击
    - 鼠标移动到元素上
    - 按下键盘按钮
  - 事件监听：JavaScript可以在事件被侦测到时执行代码。
  事件绑定
  - 方式一：通过HTML标签中的事件属性进行绑定
```
<input type="button" onclick="on()" value="按钮1">

<script>
	function on(){
		alert('我被点击了');
	}
</script>
```
  - 方式二：通过DOM元素属性绑定
```
<input type="button" id="btn" value="按钮2">

<script>
	document.getElementById('btn').onclick=function(){
		alert('我被点击了');
	}
</script>
```
  常见事件

岂可秀

关注

19
点赞
踩
31

收藏

觉得还不错? 一键收藏
1
评论
JavaScript

JavaScript（简称JS）是一门跨平台、面向对象的脚本语言。是用来控制网页行为的，它能使网页可交互。JavaScript和Java是完全不同的语言，不论是概念还是设计。但是基础语法类似（变量的定义、运算符、if条件判断等）。JavaScript再1995年由Brendan Eich发明，并于1997年成为ECMA标准。ECMA国际制定了标准化的脚本程序设计语言ECMAScript，这种语言得到广泛应用。JavaScript是遵守ECMAScript的标准的。
复制链接

扫一扫