Asp.net core 少走弯路系列教程（四）JavaScript 学习
<h1 id="前言">前言</h1><p>新人学习成本很高，网络上太多的名词和框架，全部学习会浪费大量的时间和精力。</p>
<p>新手缺乏学习内容的辨别能力，本系列文章为新手过滤掉不适合的学习内容（比如多线程等等），让新手少走弯路直通罗马。</p>
<p>作者认为新人应该先打好基础，不要直接学习框架，例如先掌握 SQL 再使用 EFCore 框架。</p>
<p>作者只传授数年内不会变化的知识，让新手学习快速进入跑道受益终身。</p>
<p>分享使我快乐，请务必转发给同学，朋友，让大家都少走一些弯路！！</p>
<hr>
<p>W3C 是一群大佬制定的 WEB 标准规范，包括 HTML/CSS/JavaScript、HTTP协议等等。所有厂商遵循行业标准，比如前端的浏览器（Chrome/IE/Firefox），后端的WEB服务器（Nginx/Apache/IIS）。（思考：如果 IE浏览器 只能访问 IIS 服务器？）</p>
<p>我们基于 WEB 之上的码农，只需要学习好这些标准知识，就可以在任何编程语言下通用，这些知识未来几十年都不过时。</p>
<p>W3C 虽然标准，但也不是每项技术都值得新人学习（例如 XHTML/XSL），对于新手而言，<strong>只推荐学习 HTML/CSS/JavaScript、HTTP协议</strong>。</p>
<hr>
<h1 id="什么是-javascript">什么是 JavaScript</h1>
<p>JavaScript 是互联网上最流行的脚本语言，这门语言可用于 HTML 和 web，更可广泛用于服务器、PC、笔记本电脑、平板电脑和智能手机等设备。</p>
<p>HTML 中的 Javascript 脚本代码必须位于 <script> 与 </script> 标签之间。</p>
<pre><code class="language-html"><script>
alert("我的第一个 JavaScript");
</script>
</code></pre>
<p>Chrome 浏览器中可以通过按下 F12 按钮打开开发者工具。我们可以在 Console 窗口调试 JavaScript代码，如下图：</p>
<p><img src="https://img2022.cnblogs.com/blog/1694977/202209/1694977-20220929162348901-1475599037.png" alt="" loading="lazy"></p>
<hr>
<h1 id="javascript-显示数据">JavaScript 显示数据</h1>
<ul>
<li>使用 alert() 弹出警告框。</li>
<li>使用 innerHTML 写入到 HTML 元素。</li>
<li>使用 console.log() 写入到浏览器的控制台。</li>
</ul>
<pre><code class="language-html"><script>
alert(5 + 6);
</script>
</code></pre>
<pre><code class="language-html"><p id="demo">我的第一个段落</p>
<script>
document.getElementById("demo").innerHTML = "段落已修改。";
</script>
</code></pre>
<pre><code class="language-html"><script>
a = 5;
b = 6;
c = a + b;
console.log(c);
</script>
</code></pre>
<hr>
<h1 id="javascript-语法">JavaScript 语法</h1>
<ul>
<li>值类型：
<ul>
<li>数字：3.14、1001</li>
<li>字符串：'string1'、"string2"</li>
<li>布尔：true, false</li>
<li>空：null</li>
<li>未定义：undefined</li>
</ul>
</li>
<li>引用类型：
<ul>
<li>数组：</li>
<li>对象：</li>
<li>函数：function myFunction(a, b)</li>
<li>日期：Date</li>
<li>正则：RegExp</li>
</ul>
</li>
<li>变量：var x = 5</li>
<li>算术运算符：= + - * / % ++ --</li>
<li>赋值运算符：= += -= *= /= %=</li>
<li>比较运算符：== != < > <= >=</li>
<li>逻辑运算符：&& || !</li>
<li>三元表达式：true ? 1 : 0</li>
</ul>
<p>javascript 语句用分号分隔，对大小写是敏感，浏览器按照编写顺序依次执行每条语句。</p>
<pre><code class="language-js">var x = 5 + 6;
var y = x * 10;
// 这里是注释
</code></pre>
<p>JavaScript 可以分批地组合起来。代码块以左花括号开始，以右花括号结束。</p>
<p>JavaScript 拥有动态类型。这意味着相同的变量可用作不同的类型：</p>
<pre><code class="language-js">var x; // x 为 undefined
var x = 5; // 现在 x 为数字
var x = "John"; // 现在 x 为字符串
</code></pre>
<p>变量的数据类型可以使用 typeof 操作符来查看：</p>
<pre><code class="language-js">typeof "John" // 返回 string
typeof 3.14 // 返回 number
typeof false // 返回 boolean
typeof // 返回 object
typeof {name:'John', age:34} // 返回 object
</code></pre>
<p>JavaScript 对象由花括号分隔。在括号内部，对象的属性以名称和值对的形式 (name : value) 来定义：</p>
<pre><code class="language-js">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(); //访问对象的方法
</code></pre>
<hr>
<p>JavaScript 条件语句：</p>
<pre><code class="language-js">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);
</code></pre>
<p>JavaScript 循环语句：</p>
<pre><code class="language-js">var cars= ['小车1', '小车2', '小车3'];
for (var i=0;i<cars.length;i++)
{
console.log(cars);
}
//小车1
//小车2
//小车3
var objs = {id: 100, name: 'name1', lastname: 'name2'};
foreach (var key in objs)
{
console.log(key + '=' + objs);
}
//id=100
//name=name1
//lastname=name2
var a = 0;
while (a < cars.length)
{
console.log(cars);
a++;
}
//小车1
//小车2
//小车3
</code></pre>
<hr>
<p>JavaScript 函数是包裹在花括号中的代码块，前面使用了关键词 function：</p>
<pre><code class="language-js">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 不是一个引用
})();
</code></pre>
<p>JavaScript HTML 事件：</p>
<pre><code class="language-html"><input type="button" onclick="alert(111)">
</code></pre>
<table>
<thead>
<tr>
<th>事件</th>
<th>说明</th>
</tr>
</thead>
<tbody>
<tr>
<td>onchange</td>
<td>HTML 元素改变</td>
</tr>
<tr>
<td>onclick</td>
<td>用户点击 HTML 元素</td>
</tr>
<tr>
<td>onmouseover</td>
<td>鼠标指针移动到指定的元素上时发生</td>
</tr>
<tr>
<td>onmouseout</td>
<td>用户从一个 HTML 元素上移开鼠标时发生</td>
</tr>
<tr>
<td>onkeydown</td>
<td>用户按下键盘按键</td>
</tr>
</tbody>
</table>
<hr>
<p>JavaScript 字符串方法：</p>
<pre><code class="language-js">var txt = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
console.log(txt.length);
console.log(txt.substr(0, 10));
</code></pre>
<table>
<thead>
<tr>
<th>属性或方法</th>
<th>说明</th>
</tr>
</thead>
<tbody>
<tr>
<td>length</td>
<td>返回字符串的长度</td>
</tr>
<tr>
<td>charAt()</td>
<td>返回指定索引位置的字符</td>
</tr>
<tr>
<td>charCodeAt()</td>
<td>返回指定索引位置字符的 Unicode 值</td>
</tr>
<tr>
<td>concat()</td>
<td>连接两个或多个字符串，返回连接后的字符串</td>
</tr>
<tr>
<td>fromCharCode()</td>
<td>将 Unicode 转换为字符串</td>
</tr>
<tr>
<td>indexOf()</td>
<td>返回字符串中检索指定字符第一次出现的位置</td>
</tr>
<tr>
<td>lastIndexOf()</td>
<td>返回字符串中检索指定字符最后一次出现的位置</td>
</tr>
<tr>
<td>localeCompare()</td>
<td>用本地特定的顺序来比较两个字符串</td>
</tr>
<tr>
<td>match()</td>
<td>找到一个或多个正则表达式的匹配</td>
</tr>
<tr>
<td>replace()</td>
<td>替换与正则表达式匹配的子串</td>
</tr>
<tr>
<td>search()</td>
<td>检索与正则表达式相匹配的值</td>
</tr>
<tr>
<td>slice()</td>
<td>提取字符串的片断，并在新的字符串中返回被提取的部分</td>
</tr>
<tr>
<td>split()</td>
<td>把字符串分割为子字符串数组</td>
</tr>
<tr>
<td>substr()</td>
<td>从起始索引号提取字符串中指定数目的字符</td>
</tr>
<tr>
<td>substring()</td>
<td>提取字符串中两个指定的索引号之间的字符</td>
</tr>
<tr>
<td>toLocaleLowerCase()</td>
<td>根据主机的语言环境把字符串转换为小写，只有几种语言（如土耳其语）具有地方特有的大小写映射</td>
</tr>
<tr>
<td>toLocaleUpperCase()</td>
<td>根据主机的语言环境把字符串转换为大写，只有几种语言（如土耳其语）具有地方特有的大小写映射</td>
</tr>
<tr>
<td>toLowerCase()</td>
<td>把字符串转换为小写</td>
</tr>
<tr>
<td>toString()</td>
<td>返回字符串对象值</td>
</tr>
<tr>
<td>toUpperCase()</td>
<td>把字符串转换为大写</td>
</tr>
<tr>
<td>trim()</td>
<td>移除字符串首尾空白</td>
</tr>
<tr>
<td>valueOf()</td>
<td>返回某个字符串对象的原始值</td>
</tr>
</tbody>
</table>
<p>转换为字符串类型：String(123)</p>
<p>转换为数字类型：Number('123') 或者 parseFloat('123') 或者 parseInt('123') 或者 +'123'</p>
<hr>
<h1 id="javascript-表单验证">JavaScript 表单验证</h1>
<pre><code class="language-html"><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>
</code></pre>
<p>JavaScript 对象可以随意设置属性，或者方法，包括 HTML dom 对象：</p>
<pre><code class="language-js">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;
}
};
</code></pre>
<hr>
<h1 id="javascript-json">JavaScript JSON</h1>
<p>JSON 是用于存储和传输数据的格式，通常用于服务端向网页传递数据。</p>
<pre><code class="language-js">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.name); //Google
</code></pre>
<table>
<thead>
<tr>
<th>方法</th>
<th>说明</th>
</tr>
</thead>
<tbody>
<tr>
<td>JSON.parse(string)</td>
<td>用于将一个 JSON 字符串转换为 JavaScript 对象。</td>
</tr>
<tr>
<td>JSON.stringify(object)</td>
<td>用于将 JavaScript 对象转换为 JSON 字符串。</td>
</tr>
</tbody>
</table>
<hr>
<h1 id="jquery">JQuery</h1>
<pre><code class="language-html"><head>
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js">
</head>
</code></pre>
<p>用户点击按钮后，所有 <p> 元素都隐藏：</p>
<pre><code class="language-html"><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>
</code></pre>
<p>$('#button1') 根据 id 属性选择，对应 document.getElementById('button1')</p>
<p>$('.button_class1') 根据 class 属性选择</p>
<hr>
<p>AJAX</p>
<pre><code class="language-js">$.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);
});
});
</code></pre>
<hr>
<h1 id="javascript-调试">JavaScript 调试</h1>
<p>浏览器启用调试工具一般是按下 F12 键，并在调试菜单中选择 "Console" 。</p>
<p>如果浏览器支持调试，你可以使用 console.log() 方法在调试窗口上打印 JavaScript 值：</p>
<pre><code class="language-js">a = 5;
b = 6;
c = a + b;
console.log(c);
</code></pre>
<p>debugger 关键字用于停止执行 JavaScript，并调用调试：</p>
<pre><code class="language-html"><div id="demo"></div>
<script>
var x = 15 * 5;
debugger;
document.getElementbyId("demo").innerHTML = x;
</script>
</code></pre>
<pre><code>参考：https://www.runoob.com
</code></pre>
<p>HTML 内容体系还有很多，但是对新手而已学到这里算入门了，千万不要指望一下能吃下所有内容（贪吃蛇的后果），只有反复的实战才能彻底领会贯通。</p>
<p>到这里，你已经对 JavaScript 有了初步的认识，为我们以后深入打下了基础，下一篇我们学习 HTTP 协议知识！</p>
<hr>
<h2 id="系列文章导航">系列文章导航</h2>
<ul>
<li>（一）了解 W3C</li>
<li>（二）HTML 学习</li>
<li>（三）CSS 学习</li>
<li>（四）JavaScript 学习</li>
<li>（五）了解 HTTP 协议</li>
<li>（六）C# 语法学习</li>
<li>（七）WebApi 学习</li>
<li>（八）数据库 CRUD 增删改查学习</li>
<li>（九）待续。。</li>
</ul>
<p>原创保护，转载请注明出处：https://www.cnblogs.com/FreeSql/p/16782488.html</p><br><br>
来源：https://www.cnblogs.com/FreeSql/p/16742353.html
頁:
[1]