JavaScript on html
<p>我咋没发啊，丢草稿箱里给忘了，发一下</p><p>好像早就写了</p>
<p>首先你要会一点 html</p>
<p>一点都不会建议学了再来</p>
<p>Vscode 自带 html+JS 自动补全，比较好用</p>
<p>不会运行 JS 建议多动脑子</p>
<h2 id="调用">调用</h2>
<p>可以用 <code><script></code> 调用</p>
<p>也可以以字符串形式写在超链接的地方</p>
<p>弱类型语言，变量用 var 定义 (=new() 格式下可以不使用 var)</p>
<p>JS 是个灵活性挺高的语言，而且和 C 比较像，分支结构啥的你直接按印象来一般不会错，这里就不提了</p>
<p>UPD: 灵活性真的高，既忘记 var 又忘记分号也能跑起来</p>
<h3 id="1">1</h3>
<pre><code class="language-html"><script>
var a=1;
alert(a);//输出函数
</script>
</code></pre>
<p>这个输出函数会直接以弹窗形式输出</p>
<h3 id="2">2</h3>
<pre><code class="language-html"><a href="javascript:var a=1;alert(a);">Clicks</a>
</code></pre>
<p>这是一个直接以超链接形式执行的例子</p>
<p>也是网页中常见的调用方式</p>
<p>这里需要注意的是，并不是所有套在字符串里的脚本都需要加 <code>javascript:</code> 前缀，只有 <code>href</code> 里需要，这是一个特例</p>
<p>通常的调用方式大概形如这样</p>
<pre><code class="language-html"><input onblur="alert('loss focus')">
</code></pre>
<h2 id="基本数据类型">基本数据类型</h2>
<p>Boolean（布尔）、Number（数字）、String（字符串）、Undefined（未定义）、Null（空对象）、Object（对象类型，相当于 class）</p>
<p>声明特定类型的参数可以采用形如 var = new type 一类的声明</p>
<pre><code class="language-html"><script>
a=new Boolean();
alert(typeof(a)); //Object，因为未赋值
</script>
</code></pre>
<p>Undefined 变量只有一个值，为 undefined</p>
<p>同理，Null 变量也只有一个值，为 null</p>
<p>以下情况会导致出现 Undefined</p>
<ul>
<li>用 <code>var</code> 声明变量时未赋值</li>
<li>将无返回值函数赋值给变量</li>
</ul>
<p>数据类型转换直接调用对应的类型名函数就行了</p>
<p>额外的，eval 可以将字符串转成 JS 代码执行</p>
<pre><code class="language-html"><script>
var a="var a=1,b;if(a){alert('a可用');}if(b){alert('b可用');}";
eval(a);
</script>
</code></pre>
<h2 id="函数">函数</h2>
<p>直接用 function 定义</p>
<pre><code class="language-html"><script>
function fibbonacci(x){
if(x==1){
return 1;
}
else if(x==2){
return 1;
}
else{
return fibbonacci(x-1)+fibbonacci(x-2);
}
}
alert(fibbonacci(7));
</script>
</code></pre>
<h2 id="运算符">运算符</h2>
<h3 id="判等">判等</h3>
<p>首先是判等的问题</p>
<p>因为 JS 灵活性太高了，所以很多类型可以直接强转比较</p>
<p>因此出现了相等与全相等，前者只要求强转后值相等，后者要求类型也一样</p>
<pre><code class="language-html"><script>
var a=1,b='1'
alert(a==b);//true
alert(a===b); //false
</script>
</code></pre>
<h3 id="逻辑">逻辑</h3>
<p>JS 里 <code>&&</code> 和 <code>||</code> 全都是短路运算符</p>
<p>如果不想短路可以用位与，位或</p>
<h3 id="变量可用性">变量可用性</h3>
<p>如果一个变量不是 未定义，null,undefined 中的一种，则其可用</p>
<p>JS 提供了一种判断变量是否可用的办法，就是直接套在 if 里</p>
<pre><code class="language-html"><script>
var a=1,b
if(a){alert('a可用');}
if(b){alert('b可用');}
</script>
</code></pre>
<p>JS 中任何地方声明的变量在全局均可用</p>
<h2 id="方法">方法</h2>
<p>函数中提供了一个 arguments 数组，是一个打包好的传入参数的集合</p>
<p>可以解决不定参的问题</p>
<pre><code class="language-html"><script>
function sum(){
var ans=0;
for(var i=0;i<arguments.length;++i){
ans+=arguments;
}
return ans;
}
alert(sum(1,2,3,4,5));
</script>
</code></pre>
<p>咋这么像 C 语言（再次感叹）</p>
<p>JS 的函数是面向对象形式的，这意味着可以将函数赋值给变量</p>
<p>但不支持直接传入函数内</p>
<p>匿名函数是支持的</p>
<p>将函数用小括号套住，后面可以直接传参运行</p>
<pre><code class="language-html"><script>
t=function(a){return a+1;};
alert(t(1));
alert((function(a){return a+1;})(1));
</script>
</code></pre>
<p>JS 的函数不传址，以下函数无法实现修改原变量功能</p>
<pre><code class="language-html"><script>
t=function(a){a+=1;};
var a=1;
t(a);
alert(a);
</script>
</code></pre>
<h2 id="闭包">闭包</h2>
<p>JS 中可以使用闭包来模拟面向对象</p>
<p>闭包的实质是一种作用域链，在一个函数内部又定义了一个函数，内部函数函数能访问外部函数作用域范围内的变量，这时这个内部函数就叫做闭包。无论这个内部函数在哪里被调用都能访问的到外部函数作用域中的那些变量</p>
<p>其实这就比较像一个 class 了，考虑将外部函数看成 class，内部函数看成 class 内的方法，class 内的方法能调用到 class 内的变量，这就和面向对象基本一致了</p>
<pre><code class="language-html"><script>
function Class(){
return function print(x){
alert(x);
}
}
var x=Class();
x('CTH');
</script>
</code></pre>
<p>这是模拟了面向对象中的直接为变量赋值函数的方法</p>
<p>模拟 class 可以在 function 中直接创建方法</p>
<pre><code class="language-html"><script>
function Class(){
var name='none'
this.nameis=function(x){
name=x;
}
this.printname=function(){
alert(name);
}
}
var a=new Class();
a.nameis('CTH');
a.printname();
</script>
</code></pre>
<p>JS 的 Object 也可以实现类似 class 的效果</p>
<p>缺啥加啥就行了</p>
<pre><code class="language-html"><script>
var a=new Object();
a.name='CTHoi'
a.print=function(){alert(a.name);}
a.print();
</script>
</code></pre>
<p>Object 还提供了一种访问对象的方式，就是用中括号+String</p>
<pre><code class="language-html"><script>
var a=new Object();
a.name='CTHoi'
a.print=function(){alert(a.name);}
alert(a['name']);
</script>
</code></pre><br><br>
来源：https://www.cnblogs.com/HaneDaCafe/p/18534393
頁:
[1]