前端筆記7

hellow world

代碼:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HelloWorld</title>
<!--JS代碼需要編寫到script標簽中-->
<script type="text/javascript">
    /*
    控制瀏覽器彈出一個警告框
    alert("寧姐,你真漂亮>ジ铡丽猬!");
    */
    /*
    讓計算機在頁面中輸出一個內(nèi)容
    document.write()可以向body中輸出一個內(nèi)容
    document.write("看我出不出來~~~");
    */
    
    /*
    向控制臺輸出一個內(nèi)容
    console.log()的作用是向控制臺輸出一個內(nèi)容
    console.log("你猜我在哪出來呢逮走?");
    */
    alert("寧姐舟奠,你真漂亮!铝量!");
    document.write("看我出不出來~~~");
    console.log("你猜我在哪出來呢属百?");
</script>
</head>
<body>

</body>
</html>

效果:


image.png

image.png

js編寫位置

代碼:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>js編寫位置</title>
<!-- 
可以將js代碼編寫到外部js文件中,然后通過script標簽引入
寫到外部文件中可以在不同的頁面中同時引用候址,也可以利用到瀏覽器的緩存機制
這是推薦使用的方式
script標簽一旦用于引入外部文件了吕粹,就不能再編寫代碼了,即使編寫了瀏覽器也會忽略
如果需要則可以再創(chuàng)建一個新的script標簽用于編寫內(nèi)部代碼
 -->
<script type="text/javascript" src="js/script.js"></script>
<script type="text/javascript">
    alert("我是內(nèi)部的JS代碼");
</script>

<!-- 
可以將js代碼編寫到script標簽中
<script type="text/javascript">
    alert("我是script標簽中的代碼8诼亍匹耕!");
</script>
 -->
</head>
<body>
<!-- 
可以將js代碼編寫到標簽的onclick屬性中
當我們點擊按鈕時,js代碼才會執(zhí)行
雖然可以寫在標簽的屬性中荠雕,但是他們屬于結(jié)構(gòu)與行為耦合稳其,不方便維護,不推薦使用
 -->
<button onclick="alert('討厭舞虱,你點我干嘛~~');">點我一下</button>

<!-- 
可以將js代碼寫在超鏈接的href屬性中欢际,這樣當點擊超鏈接時,會執(zhí)行js代碼
 -->
<a href="javascript:alert('讓你點你就點7怠损趋!');">你也點我一下</a>
<a href="javascript:;">你也點我一下</a>
</body>
</html>

效果:


image.png

基本語法

代碼:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>js基本語法</title>
<script type="text/javascript">
    /*
    JS注釋
    多行注釋
        注釋中的內(nèi)容不會被執(zhí)行,但是可以在源代碼中查看
        要養(yǎng)成良好的編寫注釋的習慣,也可以通過注釋來對代碼進行一些簡單的調(diào)試
    */
    //單行注釋
    // alert("hello");
    // document.write("hello");
    console.log("hello");//該語句用來在控制臺輸出一個日志
    /*
    1.JS中嚴格區(qū)分大小寫
    2.JS中每一條語句以分號(;)結(jié)尾
        - 如果不寫分號浑槽,瀏覽器會自動添加蒋失,但是會消耗一些系統(tǒng)資源,
        - 而且有些時候桐玻,瀏覽器會加錯分號篙挽,所以在開發(fā)中分號必須寫
    3.JS中會忽略多個空格和換行,所以我們可以利用空格和換行對代碼進行格式化
    */
    alert("hello");
</script>
</head>
<body>

</body>
</html>

效果:


image.png

字面量和變量

代碼:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>字面量和變量</title>
<script type="text/javascript">
    /*
    字面量镊靴,都是一些不可改變的值
        比如 :1 2 3 4 5 "hello"
        字面量都是可以直接使用铣卡,但是我們一般都不會直接使用字面量
    變量    變量可以用來保存字面量,而且變量的值是可以任意改變的
        變量更加方便我們使用偏竟,所以在開發(fā)中都是通過變量去保存一個字面量煮落,而很少直接使用字面量
        可以通過變量對字面量進行描述
    x = 123456789123456789
    */
    //聲明變量
    //在js中使用var關鍵字來聲明一個變量
    var a;
    //為變量賦值
    a = 123;
    a = 456;
    a = 123456789123456789;
    //聲明和賦值同時進行
    var b = 789;
    var c = 0;
    var age = 80;
    console.log(age);
</script>
</head>
<body>

</body>
</html>

效果:


image.png

標識符

代碼:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>標識符</title>
<script type="text/javascript">
    /*
    標識符
        - 在JS中所有的可以由我們自主命名的都可以稱為是標識符
        - 例如:變量名、函數(shù)名踊谋、屬性名都屬于標識符
        - 命名一個標識符時需要遵守如下的規(guī)則:
            1.標識符中可以含有字母蝉仇、數(shù)字、_殖蚕、$
            2.標識符不能以數(shù)字開頭
            3.標識符不能是ES中的關鍵字或保留字
            4.標識符一般都采用駝峰命名法
                - 首字母小寫轿衔,每個單詞的開頭字母大寫,其余字母小寫
                helloWorld xxxYyyZzz
        - JS底層保存標識符時實際上是采用的Unicode編碼睦疫,所以理論上講害驹,所有的utf-8中含有的內(nèi)容都可以作為標識符
    */
    // var if = 123;
    // console.log(if);
    //千萬不要這么用
    var 鋤禾日當午 = 789;
    console.log(鋤禾日當午);
</script>
</head>
<body>

</body>
</html>

效果:


image.png

數(shù)據(jù)類型

代碼:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>數(shù)據(jù)類型</title>
<script type="text/javascript">
    /*
    數(shù)據(jù)類型指的就是字面量的類型
        在JS中一共有六種數(shù)據(jù)類型
            String 字符串
            Number 數(shù)值
            Boolean 布爾值
            Null 空值
            Undefined 未定義
            Object 對象
        
        其中String Number Boolean Null Undefined屬于基本數(shù)據(jù)類型
        而Object屬于引用數(shù)據(jù)類型
    */
    /*
    String字符串
        - 在JS中字符串需要使用引號引起來
        - 使用雙引號或單引號都可以,但是不要混著用
        - 引號不能嵌套笼痛,雙引號不能放雙引號裙秋,單引號不能放單引號
    */
    var str = 'hello';
    /*
    在字符串中我們可以使用\作為轉(zhuǎn)義字符,當表示一些特殊符號時可以使用\進行轉(zhuǎn)義
        \" 表示 "
        \' 表示 '
        \n 表示換行
        \t 制表符
        \\ 表示\
    */
    str = "我說:\"今天\t天氣真不錯缨伊!\"";
    str = "\\\\\\";
    // console.log(str);
    //輸出字面量 字符串str
    // alert("str");
    //輸出變量str
    // alert(str);
    var str2 = "hello";
        
    str2 = "你好";
    
    str2 = 3;
</script>
</head>
<body>

</body>
</html>

效果:


image.png
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市进宝,隨后出現(xiàn)的幾起案子刻坊,更是在濱河造成了極大的恐慌,老刑警劉巖党晋,帶你破解...
    沈念sama閱讀 217,907評論 6 506
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件谭胚,死亡現(xiàn)場離奇詭異,居然都是意外死亡未玻,警方通過查閱死者的電腦和手機灾而,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,987評論 3 395
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來扳剿,“玉大人旁趟,你說我怎么就攤上這事”诱溃” “怎么了锡搜?”我有些...
    開封第一講書人閱讀 164,298評論 0 354
  • 文/不壞的土叔 我叫張陵橙困,是天一觀的道長。 經(jīng)常有香客問我耕餐,道長凡傅,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 58,586評論 1 293
  • 正文 為了忘掉前任肠缔,我火速辦了婚禮夏跷,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘明未。我一直安慰自己槽华,他們只是感情好,可當我...
    茶點故事閱讀 67,633評論 6 392
  • 文/花漫 我一把揭開白布亚隅。 她就那樣靜靜地躺著硼莽,像睡著了一般。 火紅的嫁衣襯著肌膚如雪煮纵。 梳的紋絲不亂的頭發(fā)上懂鸵,一...
    開封第一講書人閱讀 51,488評論 1 302
  • 那天,我揣著相機與錄音行疏,去河邊找鬼匆光。 笑死,一個胖子當著我的面吹牛酿联,可吹牛的內(nèi)容都是我干的终息。 我是一名探鬼主播,決...
    沈念sama閱讀 40,275評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼贞让,長吁一口氣:“原來是場噩夢啊……” “哼周崭!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起喳张,我...
    開封第一講書人閱讀 39,176評論 0 276
  • 序言:老撾萬榮一對情侶失蹤续镇,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后销部,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體摸航,經(jīng)...
    沈念sama閱讀 45,619評論 1 314
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 37,819評論 3 336
  • 正文 我和宋清朗相戀三年舅桩,在試婚紗的時候發(fā)現(xiàn)自己被綠了酱虎。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 39,932評論 1 348
  • 序言:一個原本活蹦亂跳的男人離奇死亡擂涛,死狀恐怖读串,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情,我是刑警寧澤爹土,帶...
    沈念sama閱讀 35,655評論 5 346
  • 正文 年R本政府宣布甥雕,位于F島的核電站,受9級特大地震影響胀茵,放射性物質(zhì)發(fā)生泄漏社露。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 41,265評論 3 329
  • 文/蒙蒙 一琼娘、第九天 我趴在偏房一處隱蔽的房頂上張望峭弟。 院中可真熱鬧,春花似錦脱拼、人聲如沸瞒瘸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,871評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽情臭。三九已至,卻和暖如春赌蔑,著一層夾襖步出監(jiān)牢的瞬間俯在,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 32,994評論 1 269
  • 我被黑心中介騙來泰國打工娃惯, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留跷乐,地道東北人。 一個月前我還...
    沈念sama閱讀 48,095評論 3 370
  • 正文 我出身青樓趾浅,卻偏偏與公主長得像愕提,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子皿哨,可洞房花燭夜當晚...
    茶點故事閱讀 44,884評論 2 354

推薦閱讀更多精彩內(nèi)容