JavaScript学习笔记003-函数0属性0模板字符串
JavaScript学习笔记003-函数0属性0模板字符串
Mr. 柳上原
发布于 2018-09-05 15:18:13
发布于 2018-09-05 15:18:13
Author：Mr.柳上原
- 付出不亚于任何的努力
- 愿我们所有的努力，都不会被生活辜负
- 不忘初心，方得始终
函数函数函数函数函数函数函数函数函数函数函数函数
for
if
for
if
for
悟性很重要
<!DOCTYPE html> <!-- 文档类型：标准html文档 -->
<html lang='en'> <!-- html根标签 翻译文字：英文 -->
<head> <!-- 网页头部 -->
<meat charset='UTF-8'/> <!-- 网页字符编码 -->
<meat name='Keywords' content='关键词1,关键词2'/>
<meat name='Description' content='网站说明'/>
<meat name='Author' content='作者'/>
<title>前端59期学员作业</title> <!-- 网页标题 -->
<link rel='stylesheet' type='text/css' href='css/css1.css'/> <!-- 外链样式表 -->
<style type='text/css'> /*内部样式表*/
</style>
</head>
<body> <!-- 网页主干：可视化区域 -->
<div id='box' dd='abc'></div>
<script>
// 字符串拼接
// 第一种方法:es5
let color = 'red';
srt.innerHTML += "<li style='color:" + color + ";'>" + ttd + "</li>";
// 第二种方法：es5
srt.innerHTML += "<li>" +
"<p>" +
"<h1></h1>" +
"</p>" +
"</li>";
// 第三种方法：es6(模板字符串)
// 模板字符串内的变量会被执行：${变量}
srt.innerHTML += `<li style="color:${color};">${ttd}</li>`;
// 函数 function
// 事件函数
document.onclick = function () {
console.log('这是事件函数');
} // .onclick 点击事件
// 匿名函数：没有命名，不能独立存在，必须赋予名字
function () {
console.log('fn');
}
// 具名函数
function fn () {
console.log('fn');
} // 直接声明的具名函数（函数声明）
let fn2 = function () {
console.log('fn2');
} // 给匿名函数一个变量名的具名函数（函数表达式）
// 函数声明时不能自执行，必须通过函数名加()，函数表达式可以自执行
let fn2 = function () {
console.log('fn2');
} ();
// 函数一旦加（），就是调用（执行函数）
// 函数名加（），就会自执行
// 函数调用
function fn () {
console.log('函数名调用');
}
document.onclick = fn; // 函数名调用
let arr = [function fn () {
console.log('数组调用');
}]
arr[0] (); // 数组调用
let obj = {
a:function () {
console.log('对象调用')
}
}
obj.a (); // 对象调用
// 函数变量调用
fn (2,3);
fn (5,7);
fn (8,9); // 实参
function (a,b) { // 形参
console.log('计算开始');
console.log(a+b);
console.log('计算结束');
}
// 形参可以设置默认值(a,b=1)，当b没有参数时，默认值生效
// 当形参没有设置默认值(a,b)，而b没有参数时，b默认为undefined
// 属性：基础类型不能设置属性，复杂类型可以设置属性
// 元素中系统自带的属性：合法的对象属性
// 元素中自定义的属性：自定义属性
let arr = []
arr.arrr = 123; // 自定义属性
console.log(arr.rrrr);
let ojb = {}
ojb.ojbk = 123; // 自定义属性
console.log(ojb.ojbk);
function fn () {}
fn.fnnn = 123; // 自定义属性
console.log(fn.fnnn);
// 函数返回值
function fn (a,b) {
let str = a+b;
return str; // 返回值
// 函数执行完，默认返回undefined
// 函数里只能有一个return，遇到return就停止运行，并把return后面的值返回
}
let num = fn (1,2);
console.log(num);
// 获取标签权限的闭包模版
function getbq (bq) {
return document.getElementById(bq);
}
let div01 = getbq('box');
div01.innerHTML = '获取标签权限的闭包方式（id）'
// 获取自定义标签属性
let div01 =document.getElementById('box');
console.log(div01.getAttribute('dd')); // 获取div的自定义标签属性
div01.setAttribute('dd','def'); // 重新设置div的自定义标签属性
div01.removeAttribute('dd'); // 删除div的自定义标签属性
// 系统提供的方法（API）
// . 与 []：数字与小数点结合会默认为小数
let ojb = {
a:1,
b:2,
}
let a = '123';
console.log(obj.a); // 取对象里的值a
console.log(obj[a]); // 取变量a的值123
console.log(obj['a']); // 取对象里的值a
</script>
</body>
</html>本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2018.06.21 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读