JavaScript小白入门笔记(一)

一、JavaScript简介

1. 什么是JavaScript

​ JavaScript简称为JS,由网景公司开发的客户端脚本语言,不需要编译,可以直接运行

​ Web前端三层:

  • 结构层 HTML 定义页面的结构
  • 样式层 CSS 定义页面的样式
  • 行为层 JavaScript 用来实现交互,提升用户体验

2. JavaScript的作用

  • 在客户端动态的操作页面
  • 在客户端做数据的校验
  • 在客户端发送异步请求

二、引用方式

1. 内联方式

​ 在页面中使用script标签,在script标签的标签体中编写js代码

​ script标签可以放在页面的任意位置,一般放在head中

<script type="text/javascript">
    js代码
script>

2. 行内方式

​ 在普通标签中编写js代码,一般需要结合事件属性,如onclick、onmouseover等

<input type="button" value="点我" onclick="alert('Hello')"/>

<a href="javascript:alert('World')">我是超链接a>

3. 外部方式

​ 使用单独的 .js 文件定义,然后在页面中使用script标签引入外部脚本文件

<script type="text/javascript" src="js文件的路径">script>

​ 注:如果某个script标签用于引入外部js文件,则该script标签的标签体中不能再写js代码

.js文件:

alert("哈哈");

.html文件:


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JS的引用方式title>
    <style>
        div{
            width: 100px;
            height: 100px;
            background: #ccc;
        }
    style>
    
    <script>
        alert("Hello JavaScript");  //弹出一个窗口
    script>
    
    <script src="js/hello.js">script>
head>
<body>
    第一个JavaScript程序 <br>
    
    <input type="button" value="点我" onclick="alert('我被点了,晕了!')">
    <div onmouseover="alert('走开!')">把鼠标移上来!div>
    <a href="javascript:alert('超链接被触发')">我是超链接a>

body>
html>

三、基本用法

1. 变量

​ js是一门弱类型的语言,声明变量时使用var关键字,不需要指定变量的类型

​ 语法: var 变量名=变量值;

​ 在ECMAScript 6规范中新增let关键字,也用于声明变量

​ 使用let声明的变量支持块级作用域,而使用var声明的变量不支持块级作用域

​ 注:在IDEA中配置ES版本 Settings——>Languages & FrameWorks——>JavaScript——>JavaScript Language version


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <script>
        //变量
        var age;
        age = 18;
        var name = "tom";
        sex = "male";  //强烈不建议
        var a = 5, b = 2, c = 3;
        var 姓名 = "张三"; //不建议

        alert(age);

        //使用var声明的变量不支持块级作用域,在代码块中的变量外部也可以使用,如果需要支持块级作用域,使用let声明变量
        {
            var x = 6;
            let y = 7;
        }
        alert(x);
        //使用let声明的变量不能在代码块外使用
        //alert(y);

    script>
head>
<body>

body>
html>

2. 输入和输出

​ 输出:

  • alert() 弹出警告框
  • console.log() 输出到浏览器的控制台
  • document.write() 输出到页面

​ 输入:

  • prompt() 弹出输入框,获取用户输入的数据
  • 使用typeof 变量判断变量的类型
  • 使用Number(变量)将字符串转换为数值

3. 转义符

​ 常用转义符:

  • \n 换行
  • \t 缩进
  • \" 双引号
  • \' 单引号

4. 注释

​ 单行注释: //

​ 多行注释: /* */

5. 编码规范

​ 代码区分大小写

​ 每条语句以分号

​ 结尾代码缩进


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <script>
        //输出信息
        alert('嘿嘿');
        console.log('哈哈');
        document.write('嘻嘻');
        //输入
        var age = prompt('请输入您年龄:');
        console.log(typeof age);
        console.log(age+2);
        age = Number(age);
        console.log(age+2);
        //转义符
        console.log('Hello\nWorld');
        console.log('Hello\tWorld');
        console.log("Hello\'World");
        console.log('Hello\"World');
    script>
head>
<body>

body>
html>

四、核心语法

1. 数据类型

​ 基础数据类型:

  • string 字符串
  • number 数值(NaN表示非数字Not a Number,其自身是number类型,表示数值的不正常状态)
  • boolean 布尔
  • null 空类型 (使用typeof查看类型,如果数据是null、Date、Array等,会返回object)
  • undefinded 未定义类型

​ 数据类型转换:

  • 转换为number
    使用Number()、parseInt()、parseFloat()

  • 转换为string
    拼接空字符串

  • 转换为boolean

    使用Boolean()
    注:0、空字符串、null、undefinded、NaN会被转换成false,其他值都会被转换为true

2. 运算符

​ 算术运算符:+、-、*、/、%、**(a**b表示a的b次方)、++、­- -

​ 比较运算符:<、>、>=、<=、== 、===、!=(==是等于,只判断内容是否相等;===是全等于,既要判断内容,也要判断数据类型)

​ 赋值运算符:=、+=、­=、*=、/=、%=

​ 逻辑运算符:&&、||、!

​ 条件运算符:条件?表达式1:表达式2

3. 选择结构

​ if…else、switch

4. 循环结构

​ while、do…while、for、for…in

​ break、continue

var str='welcome'; // 可以将字符串看作是由多个字符组成的集合
for(var index in str){	//index表示集合中每个元素的索引,并不是元素本身
	// console.log(index); 
	console.log(str[index]);
}

5. 数组

5.1 定义方式

​ 语法:

var arr = new Array();
var arr = new Array(1,2...); 
var arr = [1,2...];

​ 注意:

  • 数组长度会自动扩展
  • 数组中元素的默认值为undefined
  • 使用length属性来获取数组的长度

5.2 常用方法

方法 描述
sort() 排序,默认按字符编码的顺序排列,非string类型会自动转换为string,可自定义比较规则
reverse() 反转,将数组元素倒序排列
join(separator) 将数组中元素使用指定的分隔符连接成字符串,默认通过逗号进行连接
indexOf() 返回指定元素在数组中首次出现的位置
slice(begin,end) 截取数组中索引从begin到end的元素,左闭右开,如果省略第二个参数,则表示截取到末尾
toString() 将数组转换为字符串

5.3 二维数组

​ 二维数组可以认为是特殊的一维数组,即一维数组中的每个元素又是一个一维数组

​ 语法:


var arr = new Array(); 
arr[0] = new Array(); 
arr[1] = new Array(); 
arr[][] = 值;

var arr=[
[1,2...],
[1,2...],
[1,2...]
];

6. 函数

6.1 自定义函数

​ 语法:

function 函数名(参数1,参数2...){
	// 函数体
}

​ 注意:

  • 定义函数时不需要指定参数的类型
  • 实参个数和形参个数可以不同,未指定参数时其默认值为undefined
  • 不需要指定返回值的类型,如果有返回值,直接使用return返回即可
  • 如果函数中没有使用return返回值,则默认返回undefined

​ 变量的作用域:

  • 局部作用域
    在函数中声明的变量,只能在该函数内访问,函数运行结束后变量自动销毁
  • 全局作用域
    在函数外声明的变量,在任何位置都可以访问
  • 块级作用域
    使用let关键字声明的变量,只能在声明它的代码块内访问

6.2 回调函数

​ 不立即执行的函数调用,满足一定条件时才会执行或者由别的代码调用执行,称为回调函数callback 调用时只写函数名,没有小括号()和参数

​ 应用:

  • 作为事件绑定的函数
  • 作为另一个函数的参数
    <script>
        function f1() {
            console.log(111);
        }
        //将一个函数作为另一个函数的参数来回调
        function f2(x,y){
            y();
        }
        //点击页面时执行函数f1
        window.onclick = f1;  //回调函数,不能加小括号
        f2(5,f1);
        /*
         *示例:利用回调函数自定义sort()的比较规则
         */
        var arr = [12,4,23,6,2,86];
        /*定义一个比较器
         *升序:如果第一个参数比第二个参数大,则返回正数
         *     如果第一个参数比第二个参数小,则返回负数
         *     如果两个参数相等,则返回0
         */
        function compareFn(a,b) {
            return a-b;
        }
        arr.sort(compareFn); //将自定义的比较规则函数作为参数传入
        console.log(arr);
    script>

6.3 匿名函数

​ 没有名字的函数,称为匿名函数,一般用于回调

​ 应用场景:

  • 用于函数的回调
window.onclick=function(){ // 匿名函数,用于回调
	console.log("点击了页面!");
};
  • 用于一次性执行的函数,会自动执行,称为自执行函数
(function(){
	console.log("此函数只执行一次!");
})();

6.4 箭头函数

​ ES6中允许使用“箭头” => 定义函数,称为箭头函数,也叫lambda表达式,是一种特殊的匿名函数

 <script>
        /*
         *箭头函数,语法:参数 => 返回值
         */
        //示例1
        // var a = function (x) {
        //     return x*2;
        // }
        var a = x => x*2;

        //示例2:如果箭头函数没有参数或有2个以上参数,则必须使用小括号表示参数部分
        // var a = function () {
        //     return 5;
        // }
        var a = () => 5;
        // var a = function (x,y) {
        //     return 5;
        // }
        var a = (x,y) => 5;

        //示例3:如果箭头函数的函数体多于一条语句,则必须使用大括号将它们括起来
        // var a = function (x,y) {
        //     var sum = x + y;
        //     return sum;
        // }
        var a = (x,y) => {
            var sum = x + y;
            return sum;
        };
    script>

注:因为内容过多,所以我分成了三篇博客,分别为JavaScript小白入门笔记(一)、JavaScript小白入门笔记(二)、JavaScript小白入门笔记(三),没有看过其他两篇的朋友可以关注我的博客阅读

你可能感兴趣的:(JavaScript小白入门笔记(一))