Javascript 基础 01

JavaScript介绍

JavaScript是什么

是一种运行在客户端（浏览器）的编程语言，实现人机交互效果

作用

网页特效（监听用户的一些行为让网页做出对应的反馈）
表单验证（针对表单数据的合法性进行判断）
数据交互（获取后台的数据，渲染到前端）
服务端编程（node.js）

JavaScript的组成

ECMAScript：
1. 规定了js基础语法核心知识
  1. 比如：变量分支语句循环语句对象等
web APIS：
1. DOM ：操作文档，比如页面元素进行移动大小添加删除等操作
2. BOM ：操作浏览器，比如页面弹窗，检测窗口宽度储存数据到浏览器等
3. DOM属于BOM
4. 权威网站： MDN

总结

什么是js ： JAVASCRIPT 是一种运行在客户端（浏览器）的编程语言
js的组成： ECMAscript（基础语言） web APIS （BOM DOM）

javascript 书写位置

内部

直接写在html文件里，用script标签包住

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
    <script>
        // 可以在里面书写js内容 script
        alert('走过路过不要错过')//引号
    </script>
</body>
</html>

将
1. 如果先加载的 JavaScript 期望修改其下方的 HTML，那么它可能由于 HTML 尚未被加载而失效。
  
  因此，将 JavaScript 代码放在 HTML页面的底部附近通常是最好的策略。
2. 因为浏览器执行的顺序是从上往下执行

外部

代码写在 .js结尾的文件里

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 通过src 引入外部js的文件 -->
    <script src="./02-外部js.js"></script>
</body>
</html>

script 标签中间无需写代码，否则会被忽略

内联

代码写在标签内部

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 不常用 了解即可 -->
    <button onclick="alert('想太多')">你点你点就月薪百万</button>
</body>
</html>

了解即可，不推荐使用，但是后面vue中会看到这个使用模式

javascript 注释

单行注释
1. 符号：//
2. 作用：//右边一行的代码会被注释
3. 快捷键：ctrl + /
多行注释
1. 符号：/**/
2. 作用：在/* 和 */之间所有的都会注释
3. 快捷键： alt+shift +a

结束符

代表语句结束
英文的分号；
可写可不写
为了风格统一，要写结束符就每句都写，要么每句都不写

输入输出语法

语法是什么
1. 人和计算机打交道的规则约定
2. 要按照这个规定去写
  
  程序员需要操作计算机，需要计算机能看到

输出

doument.write('要输出的内容')

内容在body标签里面显示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>

         document.write('你好')

      
    </script>
</body>
</html>

alert（"要输入的内容"）

页面弹出警告输入对话框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
    <script>

        alert('走过路过不要错过')
    </script>
</body>
</html>

console.log（'控制台打印'）

在控制台显示程序员测试使用简写log

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
    
        console.log('你猜我好不好');

    </script>
</body>
</html>

输入

prompt（"请输入姓名"）

作用：
1. 显示一个对话框，对话框中包含一条文字信息，用来提示用户文字
2. 可以自定义名称的一个变量（不要加引号）=用户输入的内容
3. neme就是一个盒子里面装着用户输入的姓名

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        neme = prompt('把你名字交出来');
    </script>
</body>
</html>

获取多个输入

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body></body>
  <script>
    name = prompt("你叫什么名字");
    nihao = prompt("你多大");
    heihei = prompt("男的女的");
    cssc = prompt("你喜欢谁");
    ni = prompt("你你在干嘛");
    lae = prompt("你猜我是谁");
    console.log(name + nihao + heihei + cssc + ni +lae);
  </script>
</html>

javascript 01分享

Javascript 基础 01

JavaScript介绍

JavaScript是什么

作用

JavaScript的组成

总结

javascript 书写位置

内部

外部

内联

javascript 注释

结束符

输入输出语法

思维导图