小白学JavaScript的第一天_无畏是青春的态度,热ai是时代的脉搏。各位新同学正以无畏的姿态奔赴通用人工智能-CSDN博客

本文链接：https://blog.csdn.net/m0_57271751/article/details/142344247

谢谢大家浏览，希望大家能给我多提提意见，有不对的地方大家畅所欲言，一定及时改正

一、初识JavaScript

1-什么是Javascript

JavaScript 是世界上最流行的语言之一，是一种运行在客户端的脚本语言（Script 是脚本的意思），不需要配置环境，可以直接通过浏览器浏览（js引擎）

JavaScript和Java的关系----没有关系
JavaScript的编年史
- Brendan Eich（布兰登·艾奇）在1995年用时十天开发了Javascript，Javascript最开始的名字叫做liveScript，
- 同年网景公司与Sun公司（以Java出名）合作更名为Javascript（为了营销更名）
- 1997 年，ECMA 以 JavaScript 为基础制定了 ECMAScript （自此JavaScript也叫做ECMAScript）

2-html5/css3/JavaScript的关系

名称	作用	意义
html5	结构	用语义的角度来描述页面
css3	样式	用审美的角度来美化页面
Javascript	交互（行为）	从交互的角度提升用户体验

3-js的引入方法

3.1行内式

行内式是将JavaScript代码作为HTML标签的属性值使用。

<button οnclick="alert('hello world')">单击</button>

（1）行内式可读性较差，尤其是在HTML文件中编写大量JavaScript代码时，不方便阅读。

（2）行内式在遇到多层引号嵌套的情况时，引号非常容易混淆，导致代码出错。

3.2内嵌式

嵌入式(或称内嵌式)使用标签包裹JavaScript代码，直接编写到HTML文件中，通常将其放到标签或标签中。

<script>
    JavaScript代码
</script>

3.3外链式

外链式(或称外部式)是将JavaScript 代码写在一个单独的文件中，一般使用“js”作为文件的扩展名，在HTML页面中使用

<script src="test.js"></script>

4.注释

//行注释
/*  块注释 */

5.输出语句

alert()弹出一个警告框
```
alert("hello world");
```
字符串 " " ' ' 都可以原样输出

字符串嵌套输出 " '' " ' " " '

\转义符号，用于有些特殊情况输出不了，添加\转义
console.log()
```
console.log("hello world");
```
控制台的日志

换行\n 不可以直接使用回车进行换行

\转义符号，用于有些特殊情况输出不了，添加\转义
document.write()
```
document.write("hello world")
```
换行

输入语句输出的值是字符串类型在控制台输出时，注意遇到字符串之后一律是拼接
列子：
```
console.log(8+'5'+2+3);//输出结果为8523
console.log(8+5+'2'+3);//输出结果为1323
```

6.输入语句

var A = prompt("提示性的文字"，[默认值])

空值显示为null

7.语法规范

严格区分大小写
对于符号来说一定为英文半角
一条语句结束时加 ; 作为结束符
对空格、缩进、换行不敏感（不易报错）

作业

作业-1

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        console.log("无畏是青春的态度，热AI是时代的脉搏。\n各位新同学正以无畏的姿态奔赴通用人工智能的星辰大海！\n作为引领AI时代浪潮的主力军，广阔舞台，待你大展身手。\n乘风破浪，勇往直前，未来百度将与你一起，创造无限可能！");
        console.log('\x1b[31m%s\x1b[0m',"百度2025校园招聘简历投递：https://talent.baidu.com");
    </script>
</head>
<body>

</body>
</html>

注意点：在输出结果的换行 \n

"百度2025校园招聘简历投递：" 的颜色变化

作业-2

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        console.log("            _____                    _____                    _____                    _____          \n           /\\    \\                  /\\    \\                  /\\    \\                  /\\    \\         \n          /::\\____\\                /::\\    \\                /::\\    \\                /::\\    \\        \n         /:::/    /                \\:::\\    \\              /::::\\    \\              /::::\\    \\       \n        /:::/    /                  \\:::\\    \\            /::::::\\    \\            /::::::\\    \\      \n       /:::/    /                    \\:::\\    \\          /:::/\\:::\\    \\          /:::/\\:::\\    \\     \n      /:::/____/                      \\:::\\    \\        /:::/__\\:::\\    \\        /:::/__\\:::\\    \\    \n     /::::\\    \\                      /::::\\    \\      /::::\\   \\:::\\    \\      /::::\\   \\:::\\    \\   \n    /::::::\\    \\   _____    ____    /::::::\\    \\    /::::::\\   \\:::\\    \\    /::::::\\   \\:::\\    \\  \n   /:::/\\:::\\    \\ /\\    \\  /\\   \\  /:::/\\:::\\    \\  /:::/\\:::\\   \\:::\\____\\  /:::/\\:::\\   \\:::\\    \\ \n  /:::/  \\:::\\    /::\\____\\/::\\   \\/:::/  \\:::\\____\\/:::/  \\:::\\   \\:::|    |/:::/__\\:::\\   \\:::\\____\\ \n  \\::/    \\:::\\  /:::/    /\\:::\\  /:::/    \\::/    /\\::/   |::::\\  /:::|____|\\:::\\   \\:::\\   \\::/    / \n   \\/____/ \\:::\\/:::/    /  \\:::\\/:::/    / \\/____/  \\/____|:::::\\/:::/    /  \\:::\\   \\:::\\   \\/____/ \n            \\::::::/    /    \\::::::/    /                 |:::::::::/    /    \\:::\\   \\:::\\    \\     \n             \\::::/    /      \\::::/____/                  |::|\\::::/    /      \\:::\\   \\:::\\____\\    \n             /:::/    /        \\:::\\    \\                  |::| \\::/____/        \\:::\\   \\::/    /    \n            /:::/    /          \\:::\\    \\                 |::|   |               \\:::\\   \\/____/     \n           /:::/    /            \\:::\\    \\                |::|   |                \\:::\\    \\         \n          /:::/    /              \\:::\\____\\               \\::|   |                 \\:::\\____\\        \n          \\::/    /                \\::/    /                \\:|   |                  \\::/    /        \n           \\/____/                  \\/____/                  \\|___|                   \\/____/");
    </script>
</head>
<body>
    
</body>
</html>