javascript入门(持续更新) | 青训营笔记

JavaScript 是 一种轻量级Web 的编程语言，是一种脚本语言，这门语言可用于 HTML 和 web，JavaScript 插入 HTML 页面后，可由所有的现代浏览器执行，可广泛用于服务器、PC、笔记本电脑、平板电脑和智能手机等设备

0. HTML插入js脚本

   HTML 中的 Javascript 脚本代码必须位于 与 标签之间。

   通常的做法是把函数放入 部分中，或者放在页面底部。这样就可以把它们安置到同一处位置，不会干扰页面的内容。

   <script>
       document.write("<p>sentence</p>");
   </script>
   

   也可以将脚本保存到外部文件后缀.js，在<script>标签的src属性中设置为调用文件

   <script src="Script.js"></script>
   <!--效果与标签中的脚本一致-->
   

1. JavaScript输出

   直接写入HTML输出document.write()

   <script>
       document.write("<h1>title</h1>");
       document.write("<p>sentence</p>");
   </script>
   

   window.alert()

   <script>
   	window.alert(5 + 6);
   </script>
   
   <!--点击按钮弹窗-->
   <button type="button" onclick="alert('welcome!')">click!</button>
   

   innerHTML写入

   <p id="test">
   this is a test
   </p>
   
   <script>
   function myFunction(){
   	x=document.getElementById("test");  // 找到id="test"的元素
   	x.innerHTML="thanks";    // 修改内容
       x.style.color="#ff0000";	//	修改颜色
   }
   </script>
   

   console.log()写到控制台

   <script>
   	console.log(19);
   </script>
   

2. 基本语法

   Number字面量: 可以是整数或者是小数，或者是科学计数(e)

   String字面量: 可以使用单引号或双引号

   Array字面量：[40, 100, 1, 5, 25, 10]

   Object字面量: {firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"}

   Function字面量: function myFunction(a, b) { return a * b;}

   变量用var指明

   保留关键字 | | | | | | -------- | ---------- | ---------- | ------------ | | abstract | else | instanceof | super | | boolean | enum | int | switch | | break | export | interface | synchronized | | byte | extends | let | this | | case | false | long | throw | | catch | final | native | throws | | char | finally | new | transient | | class | float | null | true | | const | for | package | try | | continue | function | private | typeof | | debugger | goto | protected | var | | default | if | public | void | | delete | implements | return | volatile | | do | import | short | while | | double | in | static | with |

3. 对用户的输入进行判定

   <input id="test" type="text">
   <script>
   function FunctionJudge(){
   	var x=document.getElementById("test").value;	//	获取id=“test”标签的值
   	if(x==""||isNaN(x))alert("not a number");	//	不是数字弹窗
   }
   </script>
   <button type="button" onclick="FunctionJudge()">enter</button>	<!--点击按调用函数-->