Asp.net core 少走弯路系列教程（四）JavaScript 学习

前言

新人学习成本很高，网络上太多的名词和框架，全部学习会浪费大量的时间和精力。

新手缺乏学习内容的辨别能力，本系列文章为新手过滤掉不适合的学习内容（比如多线程等等），让新手少走弯路直通罗马。

作者认为新人应该先打好基础，不要直接学习框架，例如先掌握 SQL 再使用 EFCore 框架。

作者只传授数年内不会变化的知识，让新手学习快速进入跑道受益终身。

分享使我快乐，请务必转发给同学，朋友，让大家都少走一些弯路！！

---

W3C 是一群大佬制定的 WEB 标准规范，包括 HTML/CSS/JavaScript、HTTP协议等等。所有厂商遵循行业标准，比如前端的浏览器（Chrome/IE/Firefox），后端的WEB服务器（Nginx/Apache/IIS）。（思考：如果 IE浏览器 只能访问 IIS 服务器？）

我们基于 WEB 之上的码农，只需要学习好这些标准知识，就可以在任何编程语言下通用，这些知识未来几十年都不过时。

W3C 虽然标准，但也不是每项技术都值得新人学习（例如 XHTML/XSL），对于新手而言，只推荐学习 HTML/CSS/JavaScript、HTTP协议。

---

什么是 JavaScript

JavaScript 是互联网上最流行的脚本语言，这门语言可用于 HTML 和 web，更可广泛用于服务器、PC、笔记本电脑、平板电脑和智能手机等设备。

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

<script>
alert("我的第一个 JavaScript");
</script>

Chrome 浏览器中可以通过按下 F12 按钮打开开发者工具。我们可以在 Console 窗口调试 JavaScript代码，如下图：

---

JavaScript 显示数据

• 使用 alert() 弹出警告框。
• 使用 innerHTML 写入到 HTML 元素。
• 使用 console.log() 写入到浏览器的控制台。

<script>
alert(5 + 6);
</script>

<p id="demo">我的第一个段落</p>

<script>
document.getElementById("demo").innerHTML = "段落已修改。";
</script>

<script>
a = 5;
b = 6;
c = a + b;
console.log(c);
</script>

---

JavaScript 语法

• 值类型：
  • 数字：3.14、1001
  • 字符串：'string1'、"string2"
  • 布尔：true, false
  • 空：null
  • 未定义：undefined
• 引用类型：
  • 数组：[40, 100, 1]
  • 对象：
  • 函数：function myFunction(a, b)
  • 日期：Date
  • 正则：RegExp
• 变量：var x = 5
• 算术运算符：= + - * / % ++ --
• 赋值运算符：= += -= *= /= %=
• 比较运算符：== != < > <= >=
• 逻辑运算符：&& || !
• 三元表达式：true ? 1 : 0

javascript 语句用分号分隔，对大小写是敏感，浏览器按照编写顺序依次执行每条语句。

var x = 5 + 6;
var y = x * 10;
// 这里是注释

JavaScript 可以分批地组合起来。代码块以左花括号开始，以右花括号结束。

JavaScript 拥有动态类型。这意味着相同的变量可用作不同的类型：

var x;               // x 为 undefined
var x = 5;           // 现在 x 为数字
var x = "John";      // 现在 x 为字符串

变量的数据类型可以使用 typeof 操作符来查看：

typeof "John"                // 返回 string
typeof 3.14                  // 返回 number
typeof false                 // 返回 boolean
typeof [1,2,3,4]             // 返回 object
typeof {name:'John', age:34} // 返回 object

JavaScript 对象由花括号分隔。在括号内部，对象的属性以名称和值对的形式 (name : value) 来定义：

var person = {firstname:"John", lastname:"Doe", id:5566, method1: function() { return "..."; }};
var name1 = person.firstname; //访问方式1
var name2 = person["lastname"]; //访问方式2
var callMethod1 = person.method1(); //访问对象的方法

---

JavaScript 条件语句：

if (time < 20)
{
    当条件为 true 时执行的代码
}

if (time < 20)
{
    当条件为 true 时执行的代码
}
else
{
    当条件不为 true 时执行的代码
}

if (time < 20)
{
    当条件 1 为 true 时执行的代码
}
else if (time < 50)
{
    当条件 2 为 true 时执行的代码
}
else
{
  当条件 1 和 条件 2 都不为 true 时执行的代码
}

var x = "";
var d = new Date().getDay();
switch (d)
{
  case 0:x="今天是星期日"; break;
  case 1:x="今天是星期一"; break;
  case 2:x="今天是星期二"; break;
  case 3:x="今天是星期三"; break;
  case 4:x="今天是星期四"; break;
  case 5:x="今天是星期五"; break;
  case 6:x="今天是星期六"; break;
  default: x="未知"; break;
}
alert(x);

JavaScript 循环语句：

var cars= ['小车1', '小车2', '小车3'];
for (var i=0;i<cars.length;i++)
{
    console.log(cars[i]);
}
//小车1
//小车2
//小车3

var objs = {id: 100, name: 'name1', lastname: 'name2'};
foreach (var key in objs)
{
    console.log(key + '=' + objs[key]);
}
//id=100
//name=name1
//lastname=name2

var a = 0;
while (a < cars.length)
{
    console.log(cars[i]);
    a++;
}
//小车1
//小车2
//小车3

---

JavaScript 函数是包裹在花括号中的代码块，前面使用了关键词 function：

function myFunction(arg1, arg2)
{
    return arg1 + arg2;
}
alert(myFunction(1, 2));

var func = myFunction;
alert(func(1, 2));

//闭包
var a = 0; //全局变量
(function() {
    var a = 0; //局部变量，和上面的 a 不是一个引用
})();

JavaScript HTML 事件：

<input type="button" onclick="alert(111)">

事件	说明
onchange	HTML 元素改变
onclick	用户点击 HTML 元素
onmouseover	鼠标指针移动到指定的元素上时发生
onmouseout	用户从一个 HTML 元素上移开鼠标时发生
onkeydown	用户按下键盘按键

---

JavaScript 字符串方法：

var txt = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
console.log(txt.length);
console.log(txt.substr(0, 10));

属性或方法	说明
length	返回字符串的长度
charAt()	返回指定索引位置的字符
charCodeAt()	返回指定索引位置字符的 Unicode 值
concat()	连接两个或多个字符串，返回连接后的字符串
fromCharCode()	将 Unicode 转换为字符串
indexOf()	返回字符串中检索指定字符第一次出现的位置
lastIndexOf()	返回字符串中检索指定字符最后一次出现的位置
localeCompare()	用本地特定的顺序来比较两个字符串
match()	找到一个或多个正则表达式的匹配
replace()	替换与正则表达式匹配的子串
search()	检索与正则表达式相匹配的值
slice()	提取字符串的片断，并在新的字符串中返回被提取的部分
split()	把字符串分割为子字符串数组
substr()	从起始索引号提取字符串中指定数目的字符
substring()	提取字符串中两个指定的索引号之间的字符
toLocaleLowerCase()	根据主机的语言环境把字符串转换为小写，只有几种语言（如土耳其语）具有地方特有的大小写映射
toLocaleUpperCase()	根据主机的语言环境把字符串转换为大写，只有几种语言（如土耳其语）具有地方特有的大小写映射
toLowerCase()	把字符串转换为小写
toString()	返回字符串对象值
toUpperCase()	把字符串转换为大写
trim()	移除字符串首尾空白
valueOf()	返回某个字符串对象的原始值

转换为字符串类型：String(123)

转换为数字类型：Number('123') 或者 parseFloat('123') 或者 parseInt('123') 或者 +'123'

---

JavaScript 表单验证

<script>
function validateForm() {
    var x = document.forms["myForm"].fname.value;
    if (x == null || x == "") {
        alert("需要输入名字。");
        return false;
    }
}
</script>

<form name="myForm" action="demo_form.php" onsubmit="return validateForm()" method="post">
名字: <input type="text" name="fname">
<input type="submit" value="提交">
</form>

JavaScript 对象可以随意设置属性，或者方法，包括 HTML dom 对象：

var form = document.forms['myForm'];
form.a1 = 0;
form.a2 = function() {
    alert(form.a1++);
};
form.a2(); // 或者 form['a2']();

form.onsubmit = function() {
    var x = form.fname;
    if (x == null || x == "") {
        alert("需要输入名字。");
        return false;
    }
};

---

JavaScript JSON

JSON 是用于存储和传输数据的格式，通常用于服务端向网页传递数据。

var json = {
  "sites":[
    {"name":"Runoob", "url":"www.runoob.com"},
    {"name":"Google", "url":"www.google.com"},
    {"name":"Taobao", "url":"www.taobao.com"}
  ]
};

console.log(json.sites[1].name); //Google

方法	说明
JSON.parse(string)	用于将一个 JSON 字符串转换为 JavaScript 对象。
JSON.stringify(object)	用于将 JavaScript 对象转换为 JSON 字符串。

---

JQuery

<head>
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js">
</head>

用户点击按钮后，所有 <p> 元素都隐藏：

<h2>这是一个标题</h2>
<p>这是一个段落。</p>
<p>这是另一个段落。</p>
<input type="inputName" value="name01'>
<button id="button1" class="button_class1">点我</button>

<script>
$("button").click(function(){
    $("p").hide();
});
</script>

$('#button1') 根据 id 属性选择，对应 document.getElementById('button1')

$('.button_class1') 根据 class 属性选择

---

AJAX

$.get('/WeatherForecast/Select_table02', function (data, status) {
    alert("数据: " + data + "\n状态: " + status);
});

$("button1").click(function(){
    $.post("/WeatherForecast/Insert_table02",
    {
        name:$('#inputName').val()
    },
    function(data, status){
        alert("数据: " + data + "\n状态: " + status);
    });
});

---

JavaScript 调试

浏览器启用调试工具一般是按下 F12 键，并在调试菜单中选择 "Console" 。

如果浏览器支持调试，你可以使用 console.log() 方法在调试窗口上打印 JavaScript 值：

a = 5;
b = 6;
c = a + b;
console.log(c);

debugger 关键字用于停止执行 JavaScript，并调用调试：

<div id="demo"></div>

<script>
var x = 15 * 5;
debugger;
document.getElementbyId("demo").innerHTML = x;
</script>

参考：https://www.runoob.com

HTML 内容体系还有很多，但是对新手而已学到这里算入门了，千万不要指望一下能吃下所有内容（贪吃蛇的后果），只有反复的实战才能彻底领会贯通。

到这里，你已经对 JavaScript 有了初步的认识，为我们以后深入打下了基础，下一篇我们学习 HTTP 协议知识！

---

系列文章导航

• （一）了解 W3C
• （二）HTML 学习
• （三）CSS 学习
• （四）JavaScript 学习
• （五）了解 HTTP 协议
• （六）C# 语法学习
• （七）WebApi 学习
• （八）数据库 CRUD 增删改查学习
• （九）待续。。

原创保护，转载请注明出处：https://www.cnblogs.com/FreeSql/p/16782488.html