s14 javascript笔记
JavaScript
____oldboy python s14
参考博客：
https://www.cnblogs.com/wupeiqi/articles/5602773.html
1. JavaScript基本
- 独立的语言，浏览器具有js解释器
- JavaScript代码存在形式：
- Head中
<script>
alert(123);
</script>
<script type="text/javascript">
alert(123);
</script>
- 文件引入
<script src='js文件路径'> </script>
PS: JS代码需要放置在 <body>标签内部的最下方
- 注释
当行注释 //
多行注释 /* */
- 变量：
name = 'alex' # 全局变量
var name = 'eric' # 局部变量
- 写Js代码：
- html文件中编写
- 临时：浏览器的终端 console(shift + enter 换行)
- JavaScript必须加分号（便于压缩）
- 定时器：
- setInterval('执行的代码',间隔时间);
- 跑马灯示例：
PS：console 中隐藏彩蛋
<script>
f1();
function f1(){
var joke = 'this is a test'
console.log(joke);
}
</script>
2. 基本数据类型
数字
a = 18;
age = '18'
i = parseInt(age) #字符串转数字
字符串
a = "alex"
a.chartAt(索引位置)
a.substring(起始位置，结束位置)
a.lenght #获取当前字符串长度
...
列表(js数组)
a = [11,22,33]
字典(对象类型)
a = {'k1':'v1','k2':'v2'}
布尔类型
true,false 小写
3. 循环
a. 循环时，循环的元素是索引
a = [11,22,33,44]
for(var item in a){
console.log(item);
} #a[item]
a = {'k1':'v1','k2':'v2'}
for(var item in a){
console.log(item);
}
b.
for(var i=0;i<10;i=i+1){
}
a = [11,22,33,44]
for(var i=0;i<a.length;i=i+1){
}
# 不支持字典的循环
# break;
# continue:
c. while循环
while(){
}
4. 条件语句
if(条件){
}else if(条件){
}else if(条件){
}else{
}
== 值相等
!= 值不相等
=== 值和类型都相等
&& and
|| or
switch(name){
case '1':
age= 123;
break;
case '2':
age= 456;
break;
default:
age= 777;
}
5. 函数：
function 函数名(arg){
return arg+1;
}
var result = func(1);
console.log(result);
普通函数：
function func(){
}
匿名函数：
setInterval (function(){
console.log(123);
}，5000)；
自执行函数：
创建函数并且自动执行。
function func(arg){
console.log(arg);
}
// func(1);
(function(arg){
console.log(arg);
})(1)
6. 其他一些
- 序列化：
JSON.srtingify() # 将对象转换为字符串
JSON.parse() # 将字符串转换为对象类型
- 转义：
将数据经过转义后保存。
decodeURL() # URL中未转义的字符 **转义下载文件汉子代码
decodeURLComponent() # URL组件中的未转义字符
encodeURL() # URL中的转义字符
encodeURLCommponent() # 转义URL组件中的字符
escape() # 对字符串转义
unescape() # 给转义字符串解码
URLError # 由URL的编码和解码方法抛出
- 自动登录抽屉并点赞
# 略
- eval：
python：
val= eval(表达式)
exec(执行代码) # 无返回值
JavaScript：
eval 兼具python上述
- 时间：
date类
var d = new Date()
d.getMinutes() # 获取
d.setMinutes(n) # 设置
7. 作用域
a. JavaScript 以函数作为作用域
其他语言：其他语言：以代码块作为作用域
public void Func(){
if(1==1){
srting name = 'alex';
}
console.writeline(name);
}
Func()
//报错
python：以函数作为作用域
情况一：
def func():
if 1==1:
name = 'alex'
print(name)
func()
//正常运行
情况二：
def func():
if 1==1:
name = 'alex'
print(name)
func()
print(name)
//报错
JavaScript：默认函数作用域（主流版本，let外）
function func(){
if(1==1){
var name = 'alex':
}
console.log(name)
}
func()
b. 函数作用域在函数未被调用之前已创建
function func(){
if(1==1){
var name = 'alex':
}
console.log(name)
}
c. 函数的作用域存在作用域链，也在被调用前创建
情况一：
xo = 'alex';
function func(){
var xo ='eric';
function inner(){
var xo = 'tony'；
console.log(xo);
}
inner()
}
func()
//输出tony
情况二：
xo = 'alex';
function func(){
var xo ='eric';
function inner(){
console.log(xo);
}
return inner;
}
var ret = func()
ret()
//输出eric
情况三：
xo = 'alex';
function func(){
var xo ='eric';
function inner(){
console.log(xo);
}
var xo = 'tony';
return inner;
}
var ret = func()
ret()
//输出tony
d. 函数内局部变量声明提前
情况一：
function func(){
console.log(xxoo);
}
func();
//报错
情况二：
function func(){
console.log(xxoo);
var xxoo= 'alex';
}
解释过程中： var xxoo; 第一行未赋值，所以undefined
func();
//输出undefined
8. 面向对象
function Foo(n){
this.name = n;
this.sayName =function(){
console.log(this.name)
}
}
var obj1= new Foo('we');
obj1.name
obj1.sayName()
var obj2= new Foo('wee');
obj2.name
obj2.sayName()
# this 代指对象（相当于python：self）
# 创建对象时，new 函数()
# 原型：
function Foo(){
this.name=n;
}
# Foo的原型
Foo:prototype ={
'sayName':function(){
console.log(this.name)
}
}
var obj1= new Foo('we');
obj1.sayName()
var obj2= new Foo('wee');
9.JavaScript词法分析解析
<body>
<script>
function t1(age){
console.log(age); //function age(){}
var age = 27;
console.log(age); //27
function age(){}
console.log(age); //27
}
t1(3);
//active object ===>AO
//1.形式参数
//AO.age = undefined
//AO.age = 3
//2.局部变量
//AO.age = undefined
//3.函数声明表达式
//AO.age = function()
</script>
</body>
- 跑马灯示例：
<body>
<div id="i1"> Welcome to China </div>
<script>
function f1(){
var tag = document.getElementById('i1');
content = tag.innerText;
var f = content.charAt(0);
var l = content.substring(1,content.length);
var new_content = l + f;
tag.innerText = new_content
}
setInterval('f1();',500);
</script>
</body>
PS：console 中隐藏彩蛋
<script>
f1();
function f1(){
var joke = 'this is a test'
console.log(joke);
}
</script>
- 面试题58.COM：写一个行为、样式、相分离的页面
#行为：js 样式：css 机构：html
# 推荐工具Sublime Text 3 emmet组件
<body>
<table border="1" width="300px">
<tr><td>1</td><td>1</td><td>1</td></tr>
<tr><td>1</td><td>1</td><td>1</td></tr>
<tr><td>1</td><td>1</td><td>1</td></tr>
</table>
<script>
var myTrs = document.getElementsByTagName('tr');
for (var i=0;i<myTrs.length;i++){
myTrs[i].onmouseover = function(){
this.style.backgroundColor = 'red';
//此处this是关键
}
myTrs[i].onmouseout = function() {
this.style.backgroundColor = '';
}
}
</script>
</body>
