IT数码 购物 网址 头条 软件 日历 阅读 图书馆
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
图片批量下载器
↓批量下载图片,美女图库↓
图片自动播放器
↓图片自动播放器↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁
 
   -> JavaScript知识库 -> 2021-07-25 Javascrip基本使用 -> 正文阅读

[JavaScript知识库]2021-07-25 Javascrip基本使用

1.JavaScript初体验

1.js代码要写在中间?

<script>
	alert("没有文化的人不伤心")
</script>        

在浏览器中会弹出警告窗口,内容为"没有文化的人不伤心"

2.js代码写在<head><body>

  • 写在<head>

    <!DOCTYPE html>
    <html>
        <head>
            <script>
                alert('<head>中的JavaScript');
            </script>
        </head>
        <body>
        </body>
    </html>
    

    js代码可以写在<head>中,可以保证js代码在被调用前就被浏览器加载.

  • 写在<body>

    <!DOCTYPE html>
    <html>
        <head>
          	<title>head中的JavaScript</title>
      	</head>
        <body> 
            <script>
                   alert('body中的JavaScript');
            </script>
        </body>
    </html>
    

    js代码也可以写在<body>标签中,通常用来生成页面中的内容.

  • <head><body>中可以同时都写js代码

    <!DOCTYPE html>
    <html>
        <head>
          	<title>body中的JavaScript</title>
          	<script>
                   alert('body中的JavaScript');
            </script>
      	</head>
        <body> 
            <script>
                   alert('body中的JavaScript');
            </script>
        </body>
    </html>
    

    此时的加载顺序为,先加载<head>中的js代码,再加载<body>中的js代码,浏览器会自上而下解析代码.

  • js代码放在哪里更好

    • 浏览器对HTML文件是顺序加载的,也就是会先加载<head>中的代码,再加载<body>中的代码,当浏览器解析到<head>中的代码是时,<body>中的代码并没有被解析,所以浏览器会先解析<head>中的代码,再解析<body>中的代码.
    • 如果把js代码放到<head>中,则会被先解析,如果js代码需要调用<body>中的参数进行操作,则会报错undefined,因为<body>中的数据没有被加载到.
    • 从下载新能方面考虑,将js代码放在<head>中,会阻塞其他资源的下载(图片,视频等)和页面的渲染(css),直到js文件加载完成后才会开始渲染,所以推荐将js代码放在<body>的底部,减小对页面加载的影响.
    • 3.引入外部的js文件
  • 外部js文件,后缀名一定要是.js

  • 外部js文件无法独立运行,需要在html中引入外部js文件

  • 引入外部js文件,需要使用<script></script>标签来引入,定义属性"src"

 <script scr="路径"></script>

引入外部js文件的<script scr=""></script>标签内不能再写js代码,浏览器只会加载外部引入的js代码

  • 引入外部js代码的优势

    • 使html代码和js代码分离
    • 方便阅读,维护
    • 已经缓存的js代码会加速页面的加载
  • 外部引入了js代码,html中也添加了js代码,加载顺序以书写顺序为准,写在上面的先加载,写在后面的后加载.

4.延迟执行-defer

  • defer延迟属性只能在外部引入的js代码生效,写在html中的<script></script>标签添加defer属性没有效果.

  • 在引入外部js文件后,在<script>标签中加入defer属性,那么这个js文件会被延迟执行,也就是告诉浏览器这个js文件立即下载,但是在整个页面都加载完成后,再执行.

    <script src="js/10_a.js" defer></script>	
    
  • 如果多个js文件都添加了defer属性,则根据js文件的顺序来执行延迟执行

5.异步加载-async

  • 同步加载:即文件,代码,按照顺序加载,执行,先执行第一条,再执行第二条,第一条没有加载完成,那么第二条需要等待第一条加载完成后才可以加载,简称你干完了,我再干.

  • 异步加载:设置了async属性的文件,会立即加载该文件,与其他文件或代码的加载顺序互不相关,但是需要注意,设置了async的文件,下载完后立即执行,不能确保下载完成的顺序.所以不可与其他文件产生依赖关系.(慎用 )

  • async延迟属性只能在外部引入的js代码生效,写在html中的<script>标签添加async属性没有效果.
    在这里插入图片描述

    <script src="js/11_js的异步加载.js" async></script>
    
  1. js性能优化策略
    • <script>设置defer属性,无阻塞下载脚本,让js文件和文档同时加载,同时使js文件在文档加载完成后执行
    • <script>设置async属性.使文档渲染和脚本加载同时进行,脚本加载完成后会暂停文档加载,立即执行脚本,再加载文档

2.javascript有四种输出方式:

  • alert
  • document.write
  • innerHtml
  • conlose.log
  1. alert

    会在浏览器弹出警告窗,显示内容

    <script>	
    	alert("你站在这繁华的街上");
    </script>
    
  2. document.write

    会在浏览器中直接显示内容,相当于是把内容直接写在<body>

    <script>
    	document.write("我是永远向着远方,无情的浪子")
    </script>
    

    但是在html文档加载完后,再使用document.write()来解析文档,则会覆盖之前的html文档

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title></title>
    	</head>
    	<body>
    		<button οnclick="document.write('我是谁')">点我?</button>
    	</body>
    </html>
    
    
  3. innerHTML

    给标签赋值,给标签是设置数据,应用场景-购物车数量加减,同时价格随着加减

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title></title>
    	</head>
    	<body>
    		<div id="box"></div>
    		<script>
    			var box = document.getElementById("box");
    			box.innerHTML = "我要从南走到北"
    		</script>
    	</body>
    </html>
    
    

    获取标签的内容

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title></title>
    	</head>
    	<body>
    		<div id="box">你要我留在这地方</div>
    		<script>
    			var box = document.getElementById("box");
    			alert(box.innerHTML);
    		</script>
    	</body>
    </html>
    
  4. conlose.log();

    会在浏览器调试控制台显示内容

    <script>
    	console.log("老子今天不上课")
    </script>
    

3.javascript语法

  1. javascript语句构成:

    注释,值,运算符,表达式,关键字

    //注释,单行注释或多行注释
    var a = 1 + 2;
    
  2. 分号:

    每一行js代码最后都要加上分号

    var a;
    a = 1;
    console.log(a);
    
  3. 空格:

    js会忽略多个空格,一般只写一个空格

    a = 1;
    a + b = 2;
    
  4. 折行:

    单行控制在80个字符

    编写代码时折行\

    <script>
    	document.write("这是一个恋爱的季节 \
    					空气里飘满情侣的味道")
    </script>
    

    解析时折行

    <script>
    	document.write("搂搂抱抱 \n 这样就好");
    </script>
    
  5. 代码块:

    左右大括号,括起来的内容是代码块,会按照顺序执行

    function myFirst() {
        alert('听妈妈的话别让她受伤');
        alert('想快快长大才能保护她');
    }
    
  6. 注释:

    单行注释,//开头,只对一行生效

      <script>
      	//出自周杰伦--嘻哈空姐
      	document.write("她问我coffee,tea or me");
      </script>
    

    多行注释,/* */

    <script>
    	/* 出自周杰伦---雨下一整晚
    		也可能记错了
    	*/
    	document.write("这城市的小巷,雨下一整晚");
    </script>
    

    行末注释,在一行的结束,//开头

    <script>
    	document.write("赤道的边境万里无云天很轻");//出自周杰伦---爱的飞行日记
    </script>
    

4.JavaScript变量

	console.log('今天天气很好,天晴了');
	console.log('今天天气很好,天晴了');
	console.log('今天天气很好,天晴了');
	console.log('今天天气很好,天晴了');

书写困难,修改麻烦,如果把值都用一个变量代表,那么直接引用变量,只修改值即可

  1. 变量的定义:

    值可以被修改的量叫做变量

    格式:

    var a = 1; a是变量名,1是变量值,也叫字面量

  2. 变量声明:

    变量声明用var,可以声明一个或多个变量,声明多个变量时,变量用逗号隔开,没有赋值的变量会返回undefined

    <script>
    	var a = 1;//声明一个变量并赋值
    	var = a;//声明一个变量
    	var= a,b;//声明多个变量
    	var = a;
    	console.log(a);//返回1
    	/* 没有赋值的变量,返回undefined */   
    	 </script>  
    

    可以重复声明一个变量,也可以反复初始化变量的值

     <script>
    	var a = 1;
    	var a = 2;
    	var a = 3;
    	console.log(a);    
    	</script>  
    
  3. 变量的命名规范

    • 变量名称组成:字母,数字,下划线,美元符号,不能有空格

    • 名称的开头要以字母开头,一般很少用下划线和美元符号开头,不可以用数字开头

    • 大小写不通用

    • 保留字不能作为变量名称

    • 起名要做到顾名思义,看到名字就知道变量代表的是什么

    • 驼峰命名法

      1. 小驼峰命名法:第一个单词都是小写字母,第二个单词的首字母大写。

        例如:listLeft

      2. 大驼峰命名法:每一个单词的首字母都大写

        例如:ListLeft

  4. 变量赋值

    用 = 来为变量赋值,等号左边的是变量名,等号右边的是被赋的值

<script>
	a = 1;
	var = a;
	console.log(a);
</script>
	变量的提升
 <script>
 	console.log(b);
     b = 1;
     console.log(b);
     var b;
 </script>

此时控制台输出的结果是1.浏览器在解析代码时,第一行代码前没有为b赋值,所以输出的结果为undefined,第三行代码是在赋值后被读取的,所以输出的结果为1。javascript引擎解析代码会获取所有被声明的变量,再一行一行的运行代码,这样所有被声明的代码都会被提升到头部,这就是变量提升。

5.javascript的数据类型

  • 基本数据类型:
    1. 字符串-string
    2. 数字-number
    3. 布尔-boolean
    4. 未定义-undefined
    5. 空-null
    6. 独一无二的值-Symbol
  • 引用数据类型:
    1. 对象-object
    2. 数组-array
    3. 函数-function
  1. 字符串:可以是引号中的任意文本,可以使用单引号或者双引号,但是不可以单引号套单引号,双引号套双引号,浏览器会就近分配
  2. 数字:可以整数,也可以是小数
  3. Boolean:只有两个值-true-false(对和错)
  4. undefined:未赋值时
  5. null-表示一个空内容
  JavaScript知识库 最新文章
ES6的相关知识点
react 函数式组件 & react其他一些总结
Vue基础超详细
前端JS也可以连点成线(Vue中运用 AntVG6)
Vue事件处理的基本使用
Vue后台项目的记录 (一)
前后端分离vue跨域,devServer配置proxy代理
TypeScript
初识vuex
vue项目安装包指令收集
上一篇文章      下一篇文章      查看所有文章
加:2021-07-26 11:59:24  更:2021-07-26 11:59:41 
 
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁

360图书馆 购物 三丰科技 阅读网 日历 万年历 2024年3日历 -2024/3/28 18:00:23-

图片自动播放器
↓图片自动播放器↓
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
图片批量下载器
↓批量下载图片,美女图库↓
  网站联系: qq:121756557 email:121756557@qq.com  IT数码