JavaScript笔记1

blank_06

已于 2023-04-13 15:12:42 修改

阅读量96

点赞数

文章标签： javascript 笔记前端

于 2023-04-13 13:34:15 首次发布

本文链接：https://blog.csdn.net/kd_want/article/details/130128154

版权

前端三大语言

html：超文本标记语言-->专门编写网页内容的语言
css：层叠样式表-->专门美化（修饰）网页内容的语言
javascript：专门设计网页交互效果的语言

交互：用户输入数据-->程序接收数据并处理数据-->返回处理结果

JavaScript是专门设计网页交互的语言，是一种解释性的语言，由浏览器进行解析执行，属于弱语言。

HTML中的注释： <!-- 注释 -->
css中的注释：多行注释： /*注释*/
js中的注释：单行注释 //  多行注释  /*注释*/

如何书写js

不需要html文件，直接在浏览器中的控制台中进行书写

about：blank    //打开一个空白页

按住电脑上的键盘 f12 打开程序员控制台，调到 console 控制台操作页，书写代码即可

快捷键：换行【shift+enter】输出【enter】

console.log("Hello World!");

主要用途：测试一小段代码

css的书写方式： 1）行内样式（内联样式）2）内部 3）外部

在script标签内部进行书写js代码即可

<!doctype html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style></style>
        <script>                    //js代码书写位置1 
        </script>                   
	</head>
	<body>
	<script>                        //js代码书写位置2
	    var a=5;                    //var 表示声明一个变量a保存了一个数据5
	    var b=8;
		console.log(a+b);           //控制台输出指令 
	</script>
	</body>
</html>
<script>                           //js代码书写位置3
</script>

快捷键 ctrl+b 打开浏览器执行代码

外部js文件中编写

1）创建一个xxx.js文件

2）在html文件中的 script 标签中通过 src 属性引入

<script src="test.js">          //一般通过相对路径
</script>

同一文件夹下的test.js文件

var str="hello";            //声明一个变量str 保存一个字符串数据
alert(str);                 //弹出一个警告框：alert（警告框输出内容）
<button onclick="alert('x')"></button>;

js如何运行

浏览器的引擎包括2种

内容排版引擎：解析 html 和 css
脚本解释引擎:解释并执行 js 脚本语言【不需要预编译，直接解释执行】

解释执行：默认情况自上而下逐行运行

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>代码的运行顺序</title>
    <script>
        // 页面加载完成后执行的操作
		window.onload=function(){ 
		    // 需求：页面加载完毕后，修改id为box的div元素中的内容为"hello"
		    // 1. 先通过div的id属性值box定位到需要修改的div元素
		    var div=document.getElementById("box");  
            // 通过dom操作找到id为box的div元素对象保存在一个div变量中
		    console.log(div);
		    // 2. 将div元素对象中的文本内容属性（innerText）设置为"hello"
		    div.innerText="hello"; 
		}
    </script>
</head>
<body>
	<div id="box">wait</div>
	<div>你好</div>
</body>
</html>