前端day2—JS

在HTML中可以将JavaScript / JS的代码写在head中,被script标签所包裹,当浏览器解释HTML时,遇到style标签时,按照CSS规则解释,遇到Script标签时,按照JavaScript的语法规则解释
JavaScript语言只能通过浏览器解析,所以要在检查—console中运行查看
前端加密:一般有两个方法,1.
去空格,所以函数里每句话后面要加分号以区分(不加也不会报错)2.
函数名替换为看不懂的

两种引用方式:
第一种:
< script
src = "s3.js"
type = "text/javascript" > < / script >
第二种:
< script >
// 只要被script包裹的都是js
< / script >

head中引入JS与body中引入JS区别
html代码从上而下解析,如果在head中引入JS,影响页面打开的速度,存在风险,所以通常放在htmlbody的最下方,这样页面内容先展示,最后在加载JS。注:写在最下面要有底线,写在body内部的最底下。

JS变量

name = 'dsx'; // 默认全局变量
function
func()
{
var
name = 'niulaoshi'; // 局部变量
}

不带var的都是全局变量

字符串

// 定义字符串
var
str = '你开心就好!';
var
name = '大师兄';
// 字符串的拼接
var
name_str = name + str;
// 字符串操作
str = '大师兄'
str.charAt(0)
根据角标获取字符串中的某一个字符
char字符
str.substring(1, 3)
根据角标获取
字符串子序列
大于等于x
小于y(1, 3)
出来的是1, 2
str.length
获取字符串长度
str.concat('牛教授')
拼接字符串
你开心就好!牛教授
str.indexOf('大师')
获取子序列的位置 ,根据字符串返回角标
str.slice(0, 1)
切片
start
end
同substring(1, 3)
出来的是1, 2
str.toLowerCase()
变更为小写
str.toUpperCase()
变更大写
str.split('师', 1)
切片
返回数组
参数2
为取分割后数组的前x个元素,默认不填都返回,填写1,返回list中的前1个字符串

--------------------------------------------------------------------------------

数字类型(JavaScript
只有一种数字类型。数字可以带小数点,也可以不带)

var
age = 18;
var
score = 89.22;
number = '18';
// 字符串转
var
n = parseInt(number);
// 转换成小数
f = parseFloat(number)
布尔类型(true

false)
var
t = true;
var
f = false; (python中True首字母大写)
--------------------------------------------------------------------------------

数组类型(就是Python的列表)

// 第一种创建方式
var
list = new
Array();
list[0] = '大师兄';
list[1] = '牛教授';

// 第二种创建方式
var
list2 = new
Array('大师兄', '牛教授');

// 第三种创建方式
var
list3 = ['大师兄', '牛教授'];

数组操作
var
list3 = ['大师兄', '牛教授'];

list3.length
数组的长度

list3.push('dsx')
尾部追加参数

list3.shift()
头部获取一个元素
并删除该元素

list3.pop()
尾部获取一个元素
并删除该元素

list3.unshift('dsx')
头部插入一个数据

list3.splice(start, deleteCount, value)
插入、删除或替换数组的元素

list3.splice(n, 0, val)
指定位置插入元素

list3.splice(n, 1, val)
指定位置替换元素

list3.splice(n, 1)
指定位置删除元素 ,如果从0开始删两个(0, 2)
list3.slice(1, 2)
切片;
也是顾头不顾尾

list3.reverse()
反转

list3.join('-')
将数组根据分割符拼接成字符串

list3.concat(['abc'])
数组与数组拼接

list3.sort()
排序
按asc码表排

--------------------------------------------------------------------------------

对象类型(等同于Python的字典)


var
dict = {name: 'dsx', age: 18, sex: '男'};
js中
key可以不加引号
var
age = dict.age;
var
name = dict['name'];
delete
dict['name']
删除
delete
dict.age
删除

--------------------------------------------------------------------------------

JS条件判断语句

if (条件) {
执行代码块
} else if (条件) {
执行代码块
} else {
执行代码块
};

if (1 == 1) {
console.log() # 相当于print
} else if (1 != 1) {
console.log()
} else if (1 == = 1) {
console.log()
} else if (1 != = 1) {
console.log()
} else if (1 == 1 & & 2 == 2) {// and
console.log()
} else if (1 == 1 | | 2 == 2) {// or
console.log()
}

switch(a)
{
case
1: \
console.log(111);
break;
case
2:
console.log(222);
break;
default:
console.log(333)
}
--------------------------------------------------------------------------------

JS循环语句

第一种循环
循环的是角标
tmp = ['宝马', '奔驰', '尼桑'];
tmp = '宝马奔驰尼桑';
tmp = {'宝马': 'BMW', '奔驰': 'BC'};
for (var
i in tmp) {
console.log(tmp[i])
}
第二种循环
不支持字典的循环
for (var i = 0; i < 10; i++) {
console.log(tmp[i])
}
第三种循环
while (1 == 1) {
console.log(111)
}

--------------------------------------------------------------------------------

登录练习:
< input
id = "username"
type = "text"
placeholder = "请输入用户名" >
< input
id = "password"
type = "text"
placeholder = "请输入密码" >
< input
id = "button"
type = "button"
value = "登录"
onclick = "show()" >
// onclick = "show() 为点击button后,调用show函数
< script >
function
show()
{
var
name = 'dsx';
var
passwd = '123123';
var
username = document.getElementById('username').value;
var
password = document.getElementById('password').value;
// console.log('这是用户名' + username);
// console.log('这是密码' + password);
if (username == name & & password == passwd)
{
console.log('登录成功:' + username)
}else if (username == 'qwe'){
// 浏览器的弹框
alert('qwe')
}
else {
console.log('用户名错误')
}
js中如果2个等号判断 只要值相同则为true
如果3个等号判断,必须类型和值都相同则为true
// 如果写1 == "1" 则弹“111”
if (1 == ="1"){
alert('111')
}else{
alert('222')
}

// switch循环,传递一个形参a,如果设a= '2312312',则与两个case都不符,走default,如果a=‘dsx’,则走第一个,弹dsx。相当于:
if (a == 1){
}else if (a == 2){
}

var a = '2312312';
switch (a) {
case 'dsx':
alert(a);
break;
case
'nn':
alert(a + '2');
break;
default:
alert('default');
}




第一种循环方式:循环的是角标
var
list = ['牛牛', '大师兄', 'cc'];
for (var
i in list) {
console.log(list[i])
}
// 如果写console.log(i),则打印角标

var
dict = {'宝马': 'BMW', '奔驰': 'BC'};
for (var
key in dict){
console.log(key + dict[key]) // js不支持py里的
for k, v in dict.items():
print(k)
print(v)

}
// 如果写console.log(key),则打印‘宝马’ ‘奔驰’


第二种循环:不支持字典的循环
var
list = ['牛牛', '大师兄', 'cc'];
for (var
i = 0;
i < list.length;
i + +){
console.log(list[i])
}
第三种循环: while循环
while (1 == 1){
console.log(111);
break // 遇到break跳出循环,遇到continue跳出本次循环
}

}


以上
function
show()
为普通函数

- -------------------------------------------------------------------------------

// 匿名函数

隐式绑定
var
button = document.getElementById('button');
button.onclick = function()
{
console.log('111111')
}
js的作用域和python的一样
name = 'nn';
function
demo()
{
function
demo1()
{
console.log(name)
}
demo1()
}
demo()
// 打印nn

py中的匿名函数:
asdfasd = lambda x: x + 1
print(asdfasd(1)) # 打印2,即当传入参数x=1时,打印x+1=2
# 函数即变量,当函数没有加括号时,它就是一个函数体,设成一个变量,可以赋值。将 lambda x:x+1赋值给asdfasd

翻译成普通参数就是:
def l(x):
return x + 1


l(1)

函数调用:
def b(x):
return x + 1


def demo(a):
return a(1)


print
demo(b)
# 打印2,先调用demo函数,demo函数的形参等于a,将b赋值给a,return b(1),然后调用函数b,return x+1,即返回值为1+1=2

--------------------------------------------------------------------------------

序列化:
JSON.stringify(obj)
序列化
字典转json
JSON.parse(str)
反序列化
json转字典

--------------------------------------------------------------------------------

转义
转义中文或特殊字符
1、在标准的url的规范中是不允许出现中文字符或某些特殊字符的,所以要进行转义
2、 & 代表参数的链接,如果就是想传 & 给后端那么必须转义

decodeURIComponent(url)
URI组件中的未转义字符
encodeURIComponent(url)
转义URI组件中的字符
// 比如:var
url = 'http://www.imdsx.cn/index.php/2017/07/27/html4/'
encodeURIComponent(url)
打印出:http % 3
A % 2
F % 2
Fwww.imdsx.cn % 2
Findex.php % 2
F2017 % 2
F07 % 2
F27 % 2
Fhtml4 % 2
F"
decode的就是反过来

字符串转义
var
name = '大师兄'
escape(name)
对字符串转义
unescape(name)
转义字符串解码
posted @ 2018-10-27 22:33  apollecn  阅读(108)  评论(0编辑  收藏  举报