Web前端开发（JS的快速入门）_js快速开发分享-CSDN博客

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JS引入方式</title>
    <!-- 内部脚本 -->
    <!-- <script>
        alert('hello js');
    </script> -->
    <!-- 外部脚本 -->
     
     <script src="js/dome.js"></script>
     
</head>
<body>

</body>
</html>

JS基础语法

书写语法

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

每行结尾分号可有可无

注释

单行注释：//注释内容

多行注释：/*注释内容*/

大括号表示代码块

输出语句

使用window.alert()写入警告框 //浏览器弹出警告框

使用 document.write()写入HTML输出 //写入HTML，在浏览器展示

使用 console.log()写入浏览器控制台 //写入浏览器控制台

变量

JavaScript中用var关键字来声明变量。

JavaScript是一门弱类型语言，变量可以存放不同类型的值。

变量名需要遵循如下规则：

组成字符可以是任何字母、数字、下划线(-)或美元符号（$）

数字不能开头

建议使用驼峰命名

var定义的变量的特点：
1.作用域比较大，全局变量

2.可重复定义

（ECMAScript 6新增了let关键字来定义变量。它的用法类似于var，但是所声明的变量，只在let关键字所在的代码内有效。且不允许重复声明。

const关键字，用来声明一个只读的常量。一旦声明，常量的值就不能改变。)

数据类型、运算符、流程控制语句

JavaScript中分为：原始类型和引用类型。

原始类型：

number：数字（整数、小数、NaN（Not a Number））

string :字符串，单双引皆可

boolean：布尔。true，false

null：对象为空

undefine：当声明的变量未初始化时，该变量默认值是undefine

运算符：

==会进行类型转换，===不会进行类型转换

（即==先转换为相同类型再进行转换，===发现类型不同直接返回false）

parseInt转化：

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

其他类型转为boolean:

Number:0和NaN为false，其他均为true。

String：空字符串为false，其他均转为true。（空格也为true）

Null和undefined：均转为false。

使用typeof运算符可以获取数据类型

流程控制语句：

if...else if ... else...

switch

for

while

do...while

JS函数

介绍：函数（方法）是被设计为执行特点任务的代码块。

定义：

方式一：

JavaScript函数通过function关键字进行定义，语法为：

function functionName（参数1，参数2）{

//要执行的代码

}

方式二：

var functionName=function（参数1，参数2）{

//需执行代码

}

注意：

形式参数不需要类型。因为JavaScript是弱类型语言

返回值也不需要定义类型，可以在函数内部直接使用return返回即可

JS中函数调用可以传递任意个数的参数。

调用：函数名称（实际参数列表）

JS对象

基础对象：Array、String、JSON

浏览器对象模型：BOM

文档对象模型：DOM

Array:

JavaScript中Array对象用于定义数组。

定义

var 变量名=new Array（元素列表）//方式一

var 变量名=[元素列表] //方式二

<script>
        // alert('hello js');
        // window.alert("hello js");

        // document.write("hello js");

        // console.log("hello js");

        var arr1=new Array(1,2,3,4);
        var arr2=[1,2,3,4];

        console.log(arr1[0]);
        console.log(arr2[2]);
    </script>

//特点：长度可变，类型可变。

访问

arr[索引]=值

   var arr2=[1,2,3,4];
        arr2[10]=10;
        for(let i=0;i<arr2.length;i++){
            console.log(arr2[i]);
        }
        console.log("======================");
        // console.log(arr1[0]);


       arr2.forEach(function(e){
        console.log(e);
       })

    //    ES6 箭头函数：（...）=>{...}
    
       arr2.forEach((e)=>{
        console.log(e);
       })

String：

String字符串对象的创建

Var 变量名=new String("...");//方式一

Var 变量名="...";//方式二

（substring截取含头不含尾）

JSON：

JavaScript自定义对象：

定义格式：

var 对象名 ={

属性名1：属性值1，

属性名2，属性值2，

属性名3，属性值3，

函数名称：function（形参列表）{}

}；

自定义中的方法冒号和function可省略

 var user={
        name:"Tom",
        age:10,
        gender:"male",

        eat(){
            alert("哈哈哈");
        }
    }

调用格式：

对象名.属性名；

对象名.函数名();

JSON-介绍

JSON-基础语法

定义：var 变量名 = ‘{"key1":value1,"key2":value}';

value 的数据类型为：

数字（整数或浮点数）

字符串（在双引号中）

逻辑值（true或false）

数组（在方括号中）

对象（在花括号中）

null

JSON字符转化为JS对象

var jsObject=JSON.parse(userStr)；

JSON对象转化为JSON字符串

var jsonStr=JSON.stringify(jsObject)；

  var jsontr='{"name":"Tom","age":18,"addr":["北京","shanghai"]}';
    alert(jsontr.name);

    var obj = JSON.parse(jsontr);

BOM：

概念：浏览器对象模型，允许JavaScript与浏览器对话，JavaScript将浏览器的各个组成部分封装为对象

Window:浏览器窗口对象

Navigator:浏览器对象

Screen：屏幕对象

History：历史记录对象

Location：地址栏对象

window：

介绍：浏览器窗口对象。

获取：直接使用window，其中window.可省略。window.alert("Hello Window");

属性：

history:对History对象的只读引用

location:用于窗口或框架的Location对象。

navigator：对Navigator对象的只读引用。

方法：

alert()：显示带有一段消息和一个确认按钮的警告框。

confirm():显示带有一段消息以及确认和取消按钮的对话框

setlnterval()：按照指定的周期来调用函数或计算表达式

   var i=0;
    setInterval(function(){
        i++;
        console.log("执行了"+i+"次");
    },2000);

setTimeout()：在指定的毫秒数后调用函数或计算表达式。

Location:

介绍：地址栏对象。

获取：使用window.location获取，其中window.可省略。

window.location.属性; \ loction.属性；

属性：

href：设置或返回完整的URL。

DOM：

概念：文档对象模型。

将标记语言的各个组成部分封装为对应的对象:

Document:整个文档对象

Element:元素对象

Attribute:属性对象

Text：文本对象

Comment：注释对象

JavaScript通过DOM，就能够对HTML进行操作：

改变HTML元素的内容

改变HTML元素的样式（css）

对HTML DOM事件作出反应

添加和删除HTML元素

一、

HTML中的Element对象可以通过Document对象获取，而Document对象是通过window对象获取的。

Doucument对象提供了以下获取Element元素对象的函数：

1.根据id属性值获取，返回单个Element对象

var h1=document.getElementById('h1');

2.根据标签名称获取，返回Element对象数组

var divs=document.getElementsByTagName('div');

3.根据name属性值获取，返回Element对象数组

var hobbys=document.getElementsByName('hobby');

4.根据class属性值获取，返回Element对象数组

var clss=document.getElementsByClassName('cls');

二、

查询参考手册，属性、方法

JS事件监听

事件监听：

事件：HTML事件是发生在HTML元素上的“事情”。比如：
按钮被点击

鼠标移动到元素上

按下键盘按键

事件监听：JavaScript可以在事件被侦测到时执行代码。

事件绑定：

常见事件：