JavaScript

最新推荐文章于 2024-11-04 10:13:26 发布

我头发还多～还能学

最新推荐文章于 2024-11-04 10:13:26 发布

阅读量1.3k

点赞数 27

文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/sahissgd/article/details/137512793

版权

本文介绍了JavaScript的基础知识，包括语言特性、引入方式、基础语法（如变量、数据类型、运算符和流程控制）、对象（数组、字符串、自定义对象）以及BOM和DOM的概念，以及事件监听和绑定的常见用法。

摘要由CSDN通过智能技术生成

Java Script

Java Script是一门跨平台，面向对象的脚本语言。是用来控制网页行为的，它能使网页可交互。

1.JS的引入方式

1.1内部脚本：将JS代码定义在HTML页面中

Java Script代码必须位于<script></script>标签之间
在HTML文档中，可以在任意地方，放置任意数量的<script>
一般会把脚本置于<body>元素的底部，可改善显示速度

1.2外部脚本：将JS代码定义在外部JS文件中，然后引入到HTML页面中

外部JS文件中，只包含JS代码，不包含<script>标签
<script1>标签不能自闭合
- 主代码中
- demo.js
  - <script> alert("Hello JS") </script>

2.JS基础语法

2.1区分大小写

与Java一样，变量名，函数名以及其他一切东西都是区分大小写

2.2每行结尾的分号可有可无

2.3注释

单行注释 //
多行注释 /注释内容/

2.4输出语句

使用window.alert()写入警告框
使用document.write()写入HTML输出
使用console.log()写入浏览器控制台
- 图示

2.5变量

Java Script中用var关键字来声明变量
Java Script是一门弱类型语言，变量可以存放不同类型的值
变量名需要遵循如下规则：
- 组成字符可以是任何字母，数组，下划线或美元符号
- 数字不能开头
- 建议使用驼峰命名

图示

这个图这种命名是对的。

2.6新引入的两个变量关键字

let	Const
<script>局部内使用	常量定义后不可以改变

3.JS数据类型

JS中分为：原始类型和引用类型

原始类型
- number：数字（整数，小数，NaN）
- string：字符串
- boolean：布尔
- null：对象为空
- undefined：当声明的变量微初始化时，该变量的默认值是undefined
Tip:使用typeof运算发可以获取数据类型（图示）：

4.JS运算符（通Java除了===）

算术运算符：+，-，*，/，%，++，--
赋值运算符：=，+=，-=，*=，/=，%=
比较运算符：<，>，>=，<=，!=，==，===. (==比较这个比较时自动进行数据类型转换，而===不可以进行数据类型转换的比较)
逻辑运算符：&&，||，！
三元运算符：条件表达式？true_value：false_value

5.JS的数据类型转换

字符串类型转为数字

将字符串字面值转为数字。如果字面值不是数字，则转为NaN。

例子

<script>
 alert(parseInt("12"));    //输出12
 alert(parseInt("12A45"));  //输出12
 alert(parseInt("A45"));    //输入NaN. not a number
</script>

其他类型转为boolean
- Number：0和NaN为false，其他均转为true
- String：空字符串为false，其他均转为true
- Null和undefined：均转为false

6.JS流程控制语句（同Java一样）

7.JS函数

图示

8.JS对象

8.1Array数组对象

图示

实例

<script>
   //定义数组
   var arr=[1,2,3,4];
   console.log(arr[0]);
   console.log(arr[1]);
</script>

Array属性	Array方法
length 返回元素长度	forEach()遍历数组中的每个有值的元素，并调用一次传入的函数
	push()将新元素增加到数组的末尾，并返回新的长度
	Splice()从数组中删除元素

实例代码

<script>
   //定义数组
   var arr=[1,2,3,4];
   arr[10]=50;
   for (let i = 0; i < i.length; i++) {
       console.log(arr[i]);
  }//for遍历所有数组元素，这种是全遍历
   console.log("换行符================")

   arr.forEach(function (e) {       //这个只遍历拥有的函数
       console.log(e);
  })
</script>

Tip：箭头函数（ES6）是用来简化函数定义语法的。具体形式为：（...）=>{...}，如果需要给箭头函数起名字：var xxx=（...）=>{...}。例子

<script>
   arr.forEach(function (e) {       //这个只遍历拥有的函数
       console.log(e);
  })
---------------------------------------
 上面的等价于
arr.forEach((e)=>{
     console.log(e);
  })
</script>

8.2String

图示

实例

<script>
 var str=new String("Hello String");        //第一种创建字符串对象
 var str="Hello String";//第二种创建字符串对象
console.log(str);

console.log(str.length);

console.log(str.charAt(4));

console.log(str.indexOf("lo"));

console.log(str.trim(" 2131. "))
 
//console.log(str.substring(start,end)) ---开始索引，结束索引（截取字符串）

console.log(str.substring(0,5))    //输出hello
</script>

属性	方法
length 字符串的长度	charAt() 返回在指定位置的字符
	indexOf() 检索字符串
	trim() 去除字符串两边空格
	substring() 提取字符串中两个指定的索引号之间的字符

8.3自定义对象

自定义图示

实例

<script>
   var user={
       name:"Tom",
       age:10,
       gender:"male",
       eat:function (){
           alert("用膳~");
      }
  }
   alert(user.age);
   user.eat();
</script>

8.4JSON（JavaScript Object Notation）

JSON是通过javaScript对象标记法书写的文本
由于其语法简单，层次结构鲜明，现多用于作为数据载体，在网络中进行数据传输

定义图示

基础语法

图示

实例

<script>
  //定义json
  var jsonstr='{"name":"Tom","age"=18,"addr":["北京","上海","西安"]}';
  alert(jsonstr.name);

  //json字符串-->js对象
  var obj=JSON.parse(jsonstr);
  alert(obj.name);

  //js对象-->字符串     js对象在转回字符串
  alert(JSON.stringify(obj));

</script>

8.5BOM（Browser object model）

概念：BOM浏览器对象模型，允许javascript与浏览器对话，javascript将浏览器的各个组成部分封装成对象。
组成：
- window：浏览器窗口对象
  - 获取 window.alert("Hello Window");
  - 属性
    - history：对history对象的只读引用
    - location：用于窗口或框架的location对象
    - navigator：对navigator对象的只读引用
  - 方法
    - alert()：显示带有一段消息和一个确认按钮的警告框
    - Confirm()：显示带有一段消息以及确认按钮和取消按钮的对话框
    - setInterval()：按照指定的周期（以毫秒计）来调用函数或计算表达式
    - setTimeout()：在指定的毫秒数后调用函数或计算表达式
      - 实例
      - <script> // window window.alert("hello world"); alert("hello world hi"); //confirm方法 --对话框 --返回值boolean var flag=confirm("显示内容"); alert(flag); //setInterval方法 --周期性的执行某一个函数 setInterval(function (){ console.log("定时器执行"+2000) },2000) //2000毫秒也就是2S执行一下 //setTimeout -- 延迟指定时间执行一次 setTimeout(function (){ console.log("我要执行一次了") },2000) //2s后执行一次 </script>
- navigator：浏览器对象
- screen：屏幕对象
- history：历史记录对象
- location：地址栏对象
  - 获取：使用window.location获取，其中window.可以省略
  - 属性：
    - href：设置或返回完整的URL
  - 实例
  - ```
  <script>
      location.href="www.baidu.com"     //点击确定后，跳到百度
  </script>
```

8.6DOM（Document Object Model）

概念：文档对象模型
将标记语言各个部分封装成对应的对象
- Document：整个文档对象
- Element：元素对象
- Attribute：属性对象
- Text：文本对象
- Comment：注释对象
javaScript通过DOM，就能够对HTML进行操作
- 改变Html元素的内容
- 改变Html元素的样式（CSS）
- 对Html DOM 事件作出反应
- 添加和删除HTML元素

DOM定义了访问HTML和XML文档的标准，分为3个不同的部分：

图示
- 打个比方：简单说<img >这个就是一个被封装的一个DOM对象

调用方式：

图示

代码：

<html>
<body>
<img id="h1" src="img/off.gif">  <br><br>
<div class="cls">白马</div><br>
<div class="cls">黑马</div><br>

<input type="checkbox" name="hobby">电影
<input type="checkbox" name="hobby">游戏
<input type="checkbox" name="hobby">旅游
</body>
<script>
    //1.获取Element对象
    //1.1获取元素-根据ID获取
    var h1=document.getElementById("h1");
    //1.2获取元素-根据标签获取
    var divs=document.getElementsByTagName("div");
    //1.3获取元素-根据name属性获取
    var hobbys=document.getElementsByName("hobby");
    //1.4获取元素-根据class属性获取
    var classes=document.getElementsByClassName("cls");
</script>
</html>

9.JS事件监听

9.1事件绑定

方式一：通过HTML标签中的事件属性进行绑定

<html>
<body>
<input type="button" οnclick="on()" value="按钮">
<script>
    function on(){
        alert("我被电击了")
    }
</script>
</body>
</html>

方式二：通过DOM元素属性绑定

<html>
<body>
<input type="button" id="btn" value="按钮">
<script>
    var btn=document.getElementById("btn");
    btn.οnclick=function (){
        alert("我被电击了")
    }
</script>
</body>
</html>

9.2常见事件

事件名	说明
onclick	鼠标单击事件
onblur	元素失去焦点
onfocus	元素或得焦点
onload	某个页面或图像被完成加载
onsubmit	当表单提交时触发该事件
onkeydown	某个键盘的键被按下
onmouseover	鼠标被移动到某元素之上
onmouseout	鼠标从某元素移开