JavaScript - 润新知

JavaScript
现在基本上所有浏览器都支持JavaScript

它是一种轻量级的编程语言，可以给网页添加各种动态效果，使网页更加美观

可放在<head></head>和body></body>，一般放在<head></head>中

放在<head></head>中浏览器解析head时就会执行

放在<body></body>中页面读取到该语句时就会执行

javascript是一种区分大小写的编程语言

javascript的注释有
[javascript] view plain copy
1. //单选注释
2. /*多选注释*/
使用javascript我们可以使用<script></script>在Html页面中插入javascript代码
[html] view plain copy
1. <script type="text/javascript">这里是javascript内容</script>
type="text/javascript"是告诉浏览器，<script>中的文本内容(text)是javascript语言
也可以使用外部文件来引用，当用外部文件写js时，js文件不需要添加script标签
[html] view plain copy
1. <script src="myjs.js"></script>
javascript中每个语句用";"分隔开，";"可以不写，建议写上

变量：

声明变量用关键字：var

如：
[javascript] view plain copy
1. var myVar;
2. var myVar="javascript";
3. var myNum=6;
4. var myChar="name", age="20";
5. var arr=[1, 2, 3, 4];
6. var arr=["wu", "xiao", "cheng"];
7. var arr=new Array("wu", "xiao", "cheng");
9. var arr=new Array();
10. arr[0]=20;
11. arr[1]="Hello World"'
当声明一个变量，但没有赋值时，其值为“undefined”

如：
[javascript] view plain copy
1. var str;
当然，变量可以不声明，直接使用，但这样做并不规范，建议声明后再使用

变量名的命名：

必须以字母、下划线(_)或美元符($)开始，可以使用多个字母、数字、下划线(_)或美元符($)

但不能使用javascript关键词和javascript保留字

当声明多个变量时，用","隔开

局部变量和成员变量
[html] view plain copy
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <meta charset="utf-8" />
5. <title></title>
6. </head>
7. <body>
8. <script>
9. var n=1; //全局变量，任何地方都可用
10. m=2; //全局变量，任何地方都可用
11. function fun(){
12. var x = 1; //局部变量，当前函数可用
13. y = 2; //全局变量，任何地方都可用，但要调用本函数才会成为全局变量
14. }
15. fun();
16. alert(x)
17. </script>
18. </body>
19. </html>
函数：

javascript中定义函数的方法：
[javascript] view plain copy
1. function 函数名(){
2. 函数代码;
3. }
function是定义函数的关键字

函数名为给该函数起的名字

()括号里可以传递参数，也可以不传递参数，参数可以传递任意多个，当有多个参数时，用","分隔开

函数代码是要完成特定功能的代码

函数的调用：

函数定义好后要调用才会执行

调用方法：<script>标签内调用，Html文件内调用

在<script>中调用
[javascript] view plain copy
1. <script>
2. function demo(){
3. 代码内容;
4. }
5. demo(); //调用函数
6. </script>
在html中调用
[html] view plain copy
1. <script>
2. function demo(){
3. 代码内容;
4. }
5. </script>
6. //这里使用按钮来调用函数
7. <input type="button" onclick="demo()" value="按钮">
输出：

可以使用document.write()向Html直接输出内容，输出多项内容用"+"连接

如：
[html] view plain copy
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <meta charset="utf-8" />
5. <title></title>
6. <script type="text/javascript">
7. var mystr="world"
8. document.write("Hello"+"<br/>"+mystr);
9. </script>
10. </head>
11. <body>
12. </body>
13. </html>
确定：
[javascript] view plain copy
1. function con(){
2. var showMessage=confirm("点击确定还是取消？");
3. if(showMessage==true){
4. document.write("你点击了确定");
5. }else{
6. document.write("你点击了取消");
7. }
8. }
[html] view plain copy
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <meta charset="utf-8" />
5. <title></title>
6. <script type="text/javascript">
7. function con(){
8. var showMessage=confirm("点击确定还是取消？");
9. if(showMessage==true){
10. document.write("你点击了确定");
11. }else{
12. document.write("你点击了取消");
13. }
14. }
15. </script>
16. </head>
17. <body>
18. <input type="button" onClick="con()" value="按钮" />
19. </body>
20. </html>
点击按钮后会在页面打印出相应的内容

提问：

带文本输入框的消息对话框

prompt(str1,str2);

str1为提示的内容，不可修改

str2为输入框中提示的内容，可修改
[javascript] view plain copy
1. function pro(){
2. var showMessage=prompt("显示内容","输入内容");
3. if(showMessage>100){
4. document.write("你输入的内容大于100");
5. }else{
6. document.write("你输入的内容小于100");
7. }
8. }
[html] view plain copy
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <meta charset="utf-8" />
5. <title></title>
6. <script type="text/javascript">
7. function pro(){
8. var showMessage=prompt("显示内容","输入内容");
9. if(showMessage>100){
10. document.write("你输入的内容大于100");
11. }else{
12. document.write("你输入的内容小于100");
13. }
14. }
15. </script>
16. </head>
17. <body>
18. <input type="button" onClick="pro()" value="按钮" />
19. </body>
20. </html>
警告：
alert(字符串或变量);

如
[html] view plain copy
1. alert("Hello World");
异常处理：

如下，
[javascript] view plain copy
1. <script>
2. function demo(){
3. alert(message)
4. }
5. demo();
6. </script>
message是没有声明的，所以运行该函数时会有错误，但没胡任何提示，这时可以用try catch来捕获异常
[javascript] view plain copy
1. function demo(){
2. try{
3. //执行的语句
4. alert(message);
5. }catch(err){
6. //对错误的处理，弹出提示
7. alert(err)
8. }
9. }
10. demo();
也可以用throw来捕获异常，它可以用来自定义一个错误，可以与try，catch一起使用

throw的使用
[javascript] view plain copy
1. throw "输出的内容";
Javascript-DOM

DOM是文档对象模型(Document Object Model)

当页面加载时，用来访问和处理Html文档的标准方法，DOM以树结构呈现html文档中的元素属性等

通过可编程的对象模型，JavaScript 获得了足够的能力来创建动态的 Html

JavaScript 能够改变页面中的所有 HTML 元素

JavaScript 能够改变页面中的所有 HTML 属性

JavaScript 能够改变页面中的所有 CSS 样式

JavaScript 能够对页面中的所有事件做出反应

DOM操作Html
[javascript] view plain copy
1. document.write();
要注意的是不要在加载完文档后用例document.write();，这样会覆盖掉该文档

寻找元素：
通过ID找到Html元素
[html] view plain copy
1. <p id="pid">原来内容</p>
2. <script>
3. function demo(){
4. var n=document.getElementById("pid").innerHTML="新内容";
5. }
6. </script>
7. <button onclick="demo()">按钮</button>
通过标签名找到Html元素，当有多个同样的标签名时，只会执行第一个
[html] view plain copy
1. <script>
2. function demo(){
3. document.getElementsByTagName("button");
4. alert("通过标签名找到")
5. }
6. </script>
7. <button onclick="demo()">按钮</button>
attribute，用来获得标签的属性值
[html] view plain copy
1. <a id="aid" href="http://www.google.com">谷歌</a>
2. <button onclick="demo()">下次点击"谷歌时将跳转到www.wuxiaocheng.cn"</button>
3. <script>
4. function demo(){
5. document.getElementById("aid").href="http://www.wuxiaocheng.cn";
6. }
7. </script>
DOM操作CSS：
[html] view plain copy
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <meta charset="utf-8" />
5. <title></title>
6. <style >
7. .c{
8. background: red;
9. }
10. </style>
11. </head>
12. <body>
13. <div id="divid" class="c">Html</div>
14. <button onclick="demo()">按钮</button>
15. <script>
16. function demo(){
17. /* 通过ID用javascript修改CSS样式*/
18. document.getElementById("divid").style.background="blue";
19. }
20. </script>
21. </body>
22. </html>
相关阅读:
计算机学习的网站、常用软件
 c语言标识符
 Git报错
 福尔摩斯的约会
 怎样判断一个单链表是否有环？
中成药的合理使用--风寒感冒
 使用vscode打造python开发环境
 AIDA64 Extreme 6.10.5200 序列号
 VMware Workstation Pro 15密钥及下载地址
 centos 一键安装 Aria2 &管理脚本
原文地址：https://www.cnblogs.com/lidong94/p/5789642.html