首页 › JavaScript论坛 › javaScript

惠青 發表於 2021-11-8 09:53:00

javaScript

<h3>JavaScript</h3>
<ul>
<li>JavaScript是一门跨平台，面向对象的脚本语言，来控制网页行为的，它能够使网页可交互。</li>
<li>基础语法与java类似</li>
</ul>
<ul data-mark="-">
<li>
<p>JavaScript（简称：JS） 在 1995 年由 Brendan Eich 发明，并于 1997 年成为一部 ECMA 标准。</p>
</li>
<li>
<p>ECMAScript 6 (ES6) 是最新的 JavaScript 版本（发布于 2015 年)。</p>
</li>
</ul>
<h3>JavaScript引入方式</h3>
<h4>内部方式</h4>
<ul>
<li>在html文件中，使用&lt;script&gt;标签来编写js代码。</li>
<li>建议编
<div class="cnblogs_code">
<pre>&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
&lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;title&gt;Title&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;

&lt;/body&gt;
&lt;/html&gt;
&lt;!-- 内部引入--&gt;
&lt;script&gt;<span>
    alert("京阿"<span>);
&lt;/script&gt;</span></span></pre>
</div>
<p>&nbsp;</p>
写在&lt;body&gt;元素底部，可以提高显示速度，将javaScript写在body中的最后，先加载html界面。</li>
</ul>
<h4 class="md-end-block md-heading md-focus"><span class="md-expand">外部方式</span></h4>
<ul>
<li>将js代码编写为一个后缀名为js的文件中。</li>
<li>在html文件中通过&lt;script scr="js路径"&gt;&lt;/script&gt;引入文件</li>
</ul>
<div class="cnblogs_code">
<pre>&lt;script src="../js/alert.js"&gt;&lt;/script&gt;</pre>
</div>
<div class="cnblogs_code">
<pre>alert("真菜");</pre>
</div>
<h4 class="md-end-block md-heading md-focus"><span class="md-expand">书写语法</span></h4>
<ul class="ul-list" data-mark="-">
<li class="md-list-item">
<p><span class="md-line md-end-block"><span>区分大小写：与 Java 一样，变量名、函数名以及其他一切东西都是区分大小写的</span></span></p>
</li>
<li class="md-list-item">
<p><span class="md-line md-end-block"><span>每行结尾的分号可有可无、建议写上</span></span></p>
</li>
<li class="md-list-item">
<p><span class="md-line md-end-block"><span>注释</span></span></p>
<ul class="ul-list" data-mark="-">
<li class="md-list-item">
<p><span class="md-line md-end-block"><span>单行注释：// 注释的内容</span></span></p>
</li>
<li class="md-list-item">
<p><span class="md-line md-end-block"><span>多行注释：/* 注释的内容 */</span></span></p>
</li>
</ul>
</li>
<li class="md-list-item">
<p><span class="md-line md-end-block"><span>一对大括号标识代码块</span></span></p>
</li>
</ul>
<h3>&nbsp;输出语句</h3>
<ul>
<li>windows.alert(): 写入警告框</li>
<li>document.write():写入到html页面</li>
<li>console.log();在控制台输出</li>
</ul>
<div class="cnblogs_code">
<pre>&lt;script&gt;<span style="color: rgba(0, 0, 0, 1)">
    window.alert(</span>"hello js~");<span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">弹出警告框</span>
    document.write("&lt;h4&gt;四级标题&lt;/h4&gt;");    <span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">写出html文档</span>
    console.log("js log...");   <span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">写出日志到控制台</span>
&lt;/script&gt;</pre>
</div>
<h3>变量介绍</h3>
<ul>
<li>JavaScript 中用var关键字(variable的缩写)类声明变量</li>
<li>Java是一门弱类型语言，变量可以存放不同类型的值</li>
</ul>
<p>JavaScript</p>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 0, 255, 1)">var</span> age=10<span style="color: rgba(0, 0, 0, 1)">；
   age</span>="王王"</pre>
</div>
<h3>变量</h3>
<p>弱类型语言，变量可<span style="color: rgba(255, 0, 0, 1)">以存放不同<span style="color: rgba(51, 102, 255, 1)">类型</span></span>的值，其他与Java一样</p>
<p>var</p>
<ul>
<li>作用域：全局变量</li>
</ul>
<p>let</p>
<ul>
<li>作用域 let的关键字存在的代码快内</li>
<li>不允许重复声明</li>
</ul>
<p>const</p>
<ul>
<li>定义一个只读的常量</li>
</ul>
<h3>数据类型</h3>
<p>number :数字（整数，小数，NAN）</p>
<p>string：字符，字符串，单双引皆可</p>
<p>boolean: 布尔。</p>
<p>null: 对象为空&nbsp; &nbsp;对于null会返回object，null被认为是对象占位符</p>
<p>undefined:未定义</p>
<p>typeof: 获取数据类型</p>
<h3>运算符</h3>
<p>类似于Java</p>
<p>==</p>
<ul>
<li>1判断类型是否一样，不一样进行类型转换</li>
<li>再去比值</li>
</ul>
<p>===全等于</p>
<ul>
<li>不会进行类型转换</li>
</ul>
<h3>类型转换</h3>
<p>&nbsp; &nbsp;其他类型转化为bumber</p>
<p>&nbsp; &nbsp; &nbsp; 1 string:按照字符转的子面值，转为数字，如果字面值不是数字，转化为NAN</p>
<p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var str=+"adc";+号代表正数 parseInt()</p>
<p>&nbsp; &nbsp; &nbsp; 2 boolean true 转换为1 false 转换为0</p>
<p>&nbsp; 其他类型转换为boolean（用于简化健壮性判断）</p>
<p>&nbsp; &nbsp; &nbsp; &nbsp;1 number 0和NAN转换为0，其他数字为true</p>
<p>&nbsp; &nbsp; &nbsp; &nbsp;2 string 空字符串为false&nbsp;</p>
<p>&nbsp; &nbsp; &nbsp; &nbsp;3 null 为false</p>
<p>&nbsp; &nbsp; &nbsp; &nbsp;4 undefined为false0</p>
<p>&nbsp;</p>
<h3>流程控制语句</h3>
<p>和Java一样</p>
<h3>函数</h3>
<p>通过function关键词进行定义，两种语法为</p>
<ul>
<li>function functionName（参数1，参数 2...）{</li>
</ul>
<p>要执行的代码</p>
<p>//不需要写返回值，形参不需要类型</p>
<p>//有返回值直接return</p>
<p>}</p>
<ul>
<li>var functionName=function（参数1，参数2）</li>
</ul>
<p>&nbsp; &nbsp; &nbsp;{</p>
<p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;要执行代码</p>
<p>&nbsp; &nbsp; &nbsp; }</p>
<ul>
<li>&nbsp; &nbsp; 传递参数的时候传几个都能运行，但是没太意义</li>
</ul>
<p>&nbsp;</p>
<h3>JavaScript对象</h3>
<h4>Array</h4>
<ul class="ul-list" data-mark="-">
<li class="md-list-item md-focus-container">
<p><span class="md-line md-end-block md-focus"><span class="md-expand">格式一</span></span></p>
</li>
</ul>
<pre class="md-fences md-end-block"><span><span class="cm-keyword">var <span class="cm-def">变量名 <span class="cm-operator">= <span class="cm-keyword">new <span class="cm-variable">Array(<span class="cm-variable">元素列表); </span></span></span></span></span></span></span></pre>
<ul class="ul-list" data-mark="-">
<li class="md-list-item">
<p><span class="md-line md-end-block"><span>格式二</span></span></p>
</li>
</ul>
<pre class="md-fences md-end-block"><span><span class="cm-keyword">var <span class="cm-def">变量名 <span class="cm-operator">= [<span class="cm-variable">元素列表]; <br>方法 put（E...e） splice 参考手册w3c</span></span></span></span></span></pre>
<h4>String</h4>
<ul class="ul-list" data-mark="-">
<li class="md-list-item md-focus-container">
<p><span class="md-line md-end-block md-focus"><span class="md-expand">格式一</span></span></p>
</li>
</ul>
<pre class="md-fences md-end-block"><span><span class="cm-keyword">var <span class="cm-def">变量名 <span class="cm-operator">= <span class="cm-keyword">new <span class="cm-variable">String(<span class="cm-variable">s); </span></span></span></span></span></span></span></pre>
<ul class="ul-list" data-mark="-">
<li class="md-list-item">
<p><span class="md-line md-end-block"><span>格式二</span></span></p>
</li>
</ul>
<pre class="md-fences md-end-block"><span><span class="cm-keyword">var <span class="cm-def">变量名 <span class="cm-operator">= <span class="cm-variable">s; &nbsp; <span class="cm-comment">// 单引、双引都可以</span></span></span></span></span></span></pre>
<p class="md-end-block md-heading"><span>trim() 去除空格</span></p>
<h3>自定义对象</h3>
<p>var 对象名称 = { <br>        属性名称1:属性值1,<br>        属性名称2:属性值2,<br>        ...<br>        函数名称:function (形参列表){}<br>        ...<br>        };</p>
<div class="cnblogs_code">
<pre>&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
&lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;title&gt;自定义对象&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;

&lt;/body&gt;
&lt;/html&gt;

&lt;script&gt;
    <span style="color: rgba(0, 0, 255, 1)">var</span> person =<span style="color: rgba(0, 0, 0, 1)"> {
      name : </span>"百丽"<span style="color: rgba(0, 0, 0, 1)">,
      age : 26</span><span style="color: rgba(0, 0, 0, 1)">,
      eat:</span><span style="color: rgba(0, 0, 255, 1)">function</span><span style="color: rgba(0, 0, 0, 1)"> () {
            alert(</span>"上班干活..."<span style="color: rgba(0, 0, 0, 1)">);
      }
    };

    alert(person.name);
    alert(person.age);
    person.age </span>= 38<span style="color: rgba(0, 0, 0, 1)">;
    alert(person.age);
    person.eat();
</span>&lt;/script&gt;</pre>
</div>
<h3>Window对象</h3>
<h4 class="md-end-block md-heading md-focus"><span class="md-expand">1.BOM介绍</span></h4>
<ul class="ul-list" data-mark="-">
<li class="md-list-item">
<p><span class="md-line md-end-block"><span>Browser Object Model 浏览器对象模型</span></span></p>
</li>
<li class="md-list-item">
<p><span class="md-line md-end-block"><span>JavaScript 将浏览器的各个组成部分封装为对象</span></span></p>
<ul class="ul-list" data-mark="-">
<li class="md-list-item">
<p><span class="md-line md-end-block"><span>Window：浏览器窗口对象</span></span></p>
</li>
<li class="md-list-item">
<p><span class="md-line md-end-block"><span>Navigator：浏览器对象 (了解)</span></span></p>
</li>
<li class="md-list-item">
<p><span class="md-line md-end-block"><span>Screen：屏幕对象 (了解)</span></span></p>
</li>
<li class="md-list-item">
<p><span class="md-line md-end-block"><span>History：历史记录对象</span></span></p>
</li>
<li class="md-list-item">
<p><span class="md-line md-end-block"><span>Location：地址栏对象</span></span></p>
</li>
</ul>
</li>
</ul>
<h4 class="md-end-block md-heading"><span>2.Window窗口对象</span></h4>
<ul class="ul-list" data-mark="-">
<li class="md-list-item md-focus-container">
<p><span class="md-line md-end-block md-focus"><span class="md-expand">获取：直接使用 window，其中window. 可以省略</span></span></p>
</li>
<li class="md-list-item">
<p><span class="md-line md-end-block"><span>属性：获取其他 BOM对象</span></span></p>
</li>
</ul>
<p><img src="https://img2020.cnblogs.com/blog/1279412/202111/1279412-20211108113150193-1768087241.jpg" alt="" loading="lazy"></p>
<ul>
<li id="1636342311208">&nbsp;方法</li>
</ul>
<p><img src="https://img2020.cnblogs.com/blog/1279412/202111/1279412-20211108113224357-549646746.jpg" alt="" loading="lazy"></p>
<p>&nbsp;</p>
<h3 class="md-end-block md-heading md-focus"><span class="md-expand">1.DOM介绍</span></h3>
<ul class="ul-list" data-mark="-">
<li class="md-list-item">
<p><span class="md-line md-end-block"><span>Document Object Model 文档对象模型</span></span></p>
</li>
<li class="md-list-item">
<p><span class="md-line md-end-block"><span>将标记语言的各个组成部分封装为对象</span></span></p>
<ul class="ul-list" data-mark="-">
<li class="md-list-item">
<p><span class="md-line md-end-block"><span>Document：整个文档对象</span></span></p>
</li>
<li class="md-list-item">
<p><span class="md-line md-end-block"><span>Element：元素对象</span></span></p>
</li>
<li class="md-list-item">
<p><span class="md-line md-end-block"><span>Attribute：属性对象</span></span></p>
</li>
<li class="md-list-item">
<p><span class="md-line md-end-block"><span>Text：文本对象</span></span></p>
</li>
<li class="md-list-item">
<p><span class="md-line md-end-block"><span>Comment：注释对象</span></span></p>
</li>
</ul>
</li>
<li class="md-list-item">
<p><span class="md-line md-end-block"><span>JavaScript 通过 DOM， 就能够对 HTML进行操作了</span></span></p>
<ul class="ul-list" data-mark="-">
<li class="md-list-item">
<p><span class="md-line md-end-block"><span>改变 HTML 元素的内容</span></span></p>
</li>
<li class="md-list-item">
<p><span class="md-line md-end-block"><span>改变 HTML 元素的样式（CSS）</span></span></p>
</li>
<li class="md-list-item">
<p><span class="md-line md-end-block"><span>对 HTML DOM 事件作出反应</span></span></p>
</li>
<li class="md-list-item">
<p><span class="md-line md-end-block"><span>添加和删除 HTML 元素</span></span></p>
</li>
</ul>
</li>
</ul>
<p>&nbsp;<img src="https://img2020.cnblogs.com/blog/1279412/202111/1279412-20211108145317353-944479942.jpg" alt="" width="395" height="605" loading="lazy"></p>
<h4 class="md-end-block md-heading md-focus"><span class="md-expand">1.document对象常用方法</span></h4>
<ul class="ul-list" data-mark="-">
<li class="md-list-item">
<p><span class="md-line md-end-block"><span>getElementById(id值)：根据id属性值获取，返回一个Element对象</span></span></p>
</li>
<li class="md-list-item">
<p><span class="md-line md-end-block"><span>getElementsByTagName(标签名)：根据标签名称获取，返回Element对象数组</span></span></p>
</li>
<li class="md-list-item">
<p><span class="md-line md-end-block"><span>getElementsByName(name值)：根据name属性值获取，返回Element对象数组</span></span></p>
</li>
<li class="md-list-item">
<p><span class="md-line md-end-block"><span>getElementsByClassName(class值)：根据class属性值获取，返回Element对象数组</span></span></p>
</li>
</ul>
<h3>&nbsp;事件监听</h3>
<ul class="ul-list" data-mark="-">
<li class="md-list-item md-focus-container">
<p><span class="md-line md-end-block md-focus"><span class="md-expand">事件：HTML 事件是发生在 HTML 元素上的“事情”。例如：(按钮被点击、鼠标移动移出、键盘按键按下等)。</span></span></p>
</li>
<li class="md-list-item">
<p><span class="md-line md-end-block"><span>事件监听：JavaScript 可以在事件被侦测到时执行对应的代码。</span></span></p>
</li>
</ul>
<h5>&nbsp;事件绑定</h5>
<p>方式一：通过 HTML标签中的事件属性进行绑定</p>
<div class="cnblogs_code">
<pre>&lt;input type="button" onclick='<span style="color: rgba(0, 0, 0, 1)">on()’&gt;

function on(){   
    alert("我被点了");
}</span></pre>
</div>
<p>方式二：通过 DOM 元素属性绑定</p>
<div class="cnblogs_code">
<pre>&lt;input type="button" id="btn"&gt;<span style="color: rgba(0, 0, 0, 1)">

document.getElementById(</span>"btn").onclick = <span style="color: rgba(0, 0, 255, 1)">function</span><span style="color: rgba(0, 0, 0, 1)"> (){
    alert(</span>"我被点了"<span style="color: rgba(0, 0, 0, 1)">);
}</span></pre>
</div>
<h4>常见事件</h4>
<p>&nbsp;<img src="https://img2020.cnblogs.com/blog/1279412/202111/1279412-20211108161315587-929074951.jpg" alt="" loading="lazy"></p>
<h3>&nbsp;正则表达式</h3>
<p>定义了字符串组成规则</p>
<ul class="ul-list" data-mark="-">
<li class="md-list-item md-focus-container">
<p><span class="md-line md-end-block md-focus"><span class="md-expand">定义方式</span></span></p>
<ul class="ul-list" data-mark="-">
<li class="md-list-item">
<p><span class="md-line md-end-block"><span>直接赋值</span></span></p>
</li>
</ul>
<pre class="md-fences md-end-block"><span><span class="cm-keyword">var <span class="cm-def">reg <span class="cm-operator">= <span class="cm-string-2">/^\w{6,12}$/;</span></span></span></span></span></pre>
<ul class="ul-list" data-mark="-">
<li class="md-list-item">
<p><span class="md-line md-end-block"><span>创建对象</span></span></p>
</li>
</ul>
<pre class="md-fences md-end-block"><span><span class="cm-keyword">var <span class="cm-def">reg <span class="cm-operator">= <span class="cm-keyword">new <span class="cm-variable">RegExp(<span class="cm-string">"^\\w{6,12}$");</span></span></span></span></span></span></span></pre>
</li>
<li class="md-list-item">
<p><span class="md-line md-end-block"><span>成员方法</span></span></p>
</li>
</ul>
<p><span class="md-line md-end-block"><span>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;test(str)：用于判断是否满足指定的规则。满足为true、不满足为false。</span></span></p>
<p><img src="https://img2020.cnblogs.com/blog/1279412/202111/1279412-20211108171228453-373820337.jpg" alt="" loading="lazy"></p>
<p id="1636362749226">&nbsp;</p>
<p>&nbsp;</p><br><br>
来源：https://www.cnblogs.com/yang-qiu/p/15522856.html

查看完整版本: javaScript